css（Cascading Style Sheets),层叠样式表，用于对页面的美化。
css存在方式3种，元素内联、页面嵌入和外部引入。
1、内联样式 内联样式是使用style属性添加到元素的样式。 <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
2、嵌入样式
当单个文档需要特殊的样式时，就应该使用嵌入样式表。你可以使用 <style> 标签在文档头部定义嵌入样式表
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
3、外部样式
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css"href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
具体事例
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv=“content-type” content=“text/html;charset=utf-8”> 6 <title>css</title> 7 <style> 8 .logo{ 9 background-color:red 10 } 11 .logo a{ 12 background-color:red 13 } 14 #logo{ 15 background-color:red 16 } 17 a,div{ 18 background-color:red 19 } 20 a div{ 21 background-color:red 22 } 23 input[type='text']{ 24 25 也可以指定标签下的属性 26 } 27 28 </style> 29 30 <link rel='stylesheet' href='外部样式路径'/> 31 32 </head> 33 34 <body> 35 <div style='background-color:red;'>内联样式</div> 36 37 <div class='logo'>嵌入方式调用方式一（.）</div> 38 39 <div id='logo'>嵌入方式调用方式二（#），这个一般用的不多，因为id的需求是唯一的，如果项目够大，并不是很方便</div> 40 41 <div class='logo'>嵌入方式调用方式山三，作用范围所有的div标签，如果不只一个可以用逗号隔开：a,div</div> 42 43 <a> 44 <div>嵌入方式调用方式四，表示a标签下的div标签</div> 45 46 </a> 47 48 <div class='logo'>外部样式也是这么调用的</div> 49 50 51 </body> 52 </html>
关于颜色可以查看颜色表http://www.114la.com/other/rgb.htm
1、background-color 背景色
背景色有三种设置方式： background-color:red; background-color:#ff0000; background-color:rgb(43 23 0); 2、background-image 背景图像 background-repeat(no-repeat/repeat-x/repeat-y) background-image:url(http://www.text.org/picture/picture.jpg) backgrpund-repeat:no-repeat no-repeat：不重复 repeat-x：只在x轴上重复 repeat-y：只在y轴上重复 background-position：背景图像移动位置 多个属性可以同时设置： <div>style="background: #f8f8f8 url(image/5.png) -105px -212px no-repeat; height: 80px;"</div>
width：宽度，可用像素设定固定宽度，也可以用百分比；
width：200px
width：100%
height：高度，一般使用像设置，或者不设，让其根据内容的多少自适应；
浏览器有宽度，但是高度理论上可以无限，因此width可以使用百分比，而高度不可以
font字体
size:设置大小，以px为单位；
weight：粗细，100-800不等，可以自行测试；
family：设置字体
font-size:14px;
font-weight:400;
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","5b8b4f53",sans-serif;
border ：框体 border:1px solid red;如果框体里面没有值，默认就变成了一条直线 像素、实线 红色 的边框； 框体除了solid实线，还有dashed 、double 等，可以自己尝试 input标签是自带1px的边框，也可以通过设置0px来让input的默认边框消失； 大家可以试试以下这个代码，可以用border做出箭头的效果： <div style=" 0;border-bottom: 15px solid red;border-left:15px solid deeppink;border-right:15px solid yellow; border-top:15px solid transparent"></div>
margin ：外边距
margin：2px 20px 30px 0；
padding：内边距
padding：0 8px 0 px；
css的边距设置顺序是顺时针走的，也就是：top 、right、bottom、left，主要用在内部嵌套的时候。
display 展示效果：
block（块级） ：可以试html的内联标签加上块级属性；
inline（内联） ：可以试html的块级标签加上内联的属性；
inline-block（既具有内联又有块级属性的效果） ：是一个html标签兼具两种属性；
none（失效）--可以用在隐藏某一层图层的效果；
original（默认）
<span style='background-color:red;'>content</span> 内联标签
<span style='display:block;background-color:red;'>content</span> 内联标签变为块级标签
<div style='background-color:red'>content</div> 块级标签
<div style='display:inline;background-color:red'>content</div> 块级标签变位内联标签
cursor：当鼠标移到样式装饰的标签时鼠标的形状会发生不同改变 pointer help wait move crosshair 以下为伪造超链接的例子,其他的样式大家可以自己测试 <span style="cursor:pointer;">伪超链接</span>
float：浮动
可以理解为 使当前图层上浮于外部标签的图层，效果会是当前图层遮盖住底层图层；
float：left；
float：right；
为了将浮动的图层跟底层图层合在一起需要在外层标签的样式中标注：
clear：both；
可以理解为清除浮动，或者图层合并；
<div style='background-color:red;float:left;'></div>
<div style='background-color:#999;float:left;'></div>
以堆叠的方式从左向右排列，通过span也可以实现
<div style='background-color:red;'> 此时的背景色就失效了，因为里面有礼float
<div style='float:left；'></div>
<div style='float:left；’></div>
<div style='clear:both;'></div>此时加上他就又可以显示出来了---方法一
</div>
第二种方法，固定格式
.clear:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
position：相对位移(position不可以与float混用要不然float不起作用)
有三种形式:
fixed：固定在屏幕某个位置，并且不随滚动条移动而移动；
absolute：固定在屏幕某个位置，但是随滚动条移动；
relative：本身木太大用处，一般跟absolute配合；
relative-absolute：relative在某个标签中定位，然后设置absolute的标签就可以相对于relative的标签来进行设置位移；
<div style='position:fixed;height:45px;background-color:#333;100%'></div> 当使用position时宽度需要设置，如果不设置就显示不出来效果
举例fixed：
1 <div style='position:fixed;height:45px;background-color:#333;100%;left:0px;top:0px;'></div> 2 <div style='margin-top:52px'> 3 <div style='200px;background-color:#666;position:fixed;top:60px;bottom:0px;'>left</div> 4 <div style='margin-left:220px;'>right 5 <p>你啊妈妈妈妈妈妈</p> 6 <p>你啊妈妈妈妈妈妈</p> 7 <p>你啊妈妈妈妈妈妈</p> 8 <p>你啊妈妈妈妈妈妈</p> 9 <p>你啊妈妈妈妈妈妈</p> 10 <p>你啊妈妈妈妈妈妈</p> 11 <p>你啊妈妈妈妈妈妈</p> 12 <p>你啊妈妈妈妈妈妈</p> 13 <p>你啊妈妈妈妈妈妈</p> 14 <p>你啊妈妈妈妈妈妈</p> 15 <p>你啊妈妈妈妈妈妈</p> 16 <p>你啊妈妈妈妈妈妈</p> 17 <p>你啊妈妈妈妈妈妈</p> 18 <p>你啊妈妈妈妈妈妈</p> 19 <p>你啊妈妈妈妈妈妈</p> 20 <p>你啊妈妈妈妈妈妈</p> 21 <p>你啊妈妈妈妈妈妈</p> 22 <p>你啊妈妈妈妈妈妈</p> 23 </div> 24 </div>
1 <div style='position:relative;500px;height:200px;background-color:#ddd;'> 2 <div style='200px;position:absolute;top:0px;left:0;bottom:0;background-color:red;'></div> 3 </div>