CSS样式表的样式主要可以分为大小，背景，字体，对齐方式，边界边框，列表方块，格式布局等。
元素的大小：
#div1{ width:300px; height:1000px; }
宽度，单位可以使用百分比或者像素
height：高度，单位可以使用百分比或者像素
如果没有内容且不设置高度和宽度在页面是看不到。
背景：
#div1{ width:300px; height:1000px; background-color:#0C0; background-image:url(preview.jpg); background-repeat:no-repeat; background-position:center; background-attachment:scroll; background-size:200px 250px; }
background-color：背景颜色
background-image：背景图片，在页面中背景图在背景颜色上边
background-repeat：背景图片的平铺方式
常用的有：
background-repeat:repeat;平铺，默认选项
:no-repeat;不平铺
:repeat-x;横向平铺
:repeat-y;纵向平铺
background-position：背景图的位置，图片默认出现在左上角
常用的有：
background-position:top;上
:bottom;下
:left;左
:right;右
:center;居中
background-position还可以使用空格和像素来达到靠右下角并且留有一定距离的效果
#div1{ background-position:bottom 20px right 20px; }
background-attachment:背景图是否随着滚动条滚动
主要有：
background-attachment:fixed;不滚动
:scroll;滚动
background-size:背景图的大小，可以自己设置像素大小，也可以根据提示这只自动等
文字：
#div1{ font-family:微软雅黑; font-size:.5em; font-style:italic; font-weight:bold; text-decoration:line-through; color:#666; text-indent:-5em; }
font-size:字体大小，可以用像素表示，普通正文一般用14px，页脚一般用12px，也可以用百分比或者em表示，200%是默认字体的两倍，.5是默认字体的0.5倍
font-family:字体样式，原则上不能使用太过花哨特殊的字体，因为用户电脑上可能没有，特殊情况可以使用图片代替
color:文字颜色
font-weight:bold;加粗
font-style:italic;倾斜
text-decoration:underline;下划线
none;去掉下划线
line-through;删除线
text-indent：首行缩进，特殊情况可以使用负号
文字对齐方式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1{ height:50px; background-color:#9CC; text-align:center;} #div2{ height:50px; background-color:#666; text-align:right; vertical-align:center; line-height:50px; } </style> </head> <body> <div id="div1">这是第一个div中的文字</div> <div id="div2">这是第二个div中的文字</div> </body> </html>
text-align：水平对齐方式
center;居中
left;左
right;右
vertical-align：垂直对齐方式,单独设置没有效果，需要和行高配合使用
middle;居中
top;上
bottom;下
line-height:行高
边界与边框：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1{ height:100px; width:100px; border:1px #000033 solid; margin:10px 20px 30px 40px; padding:10px 20px 30px 40px;} #div2{ height:30px; width:20px; border:1px #00FF00 solid;} </style> </head> <body> <div id="div1"> <div id="div2"> </div> </div> </body> </html>
margin：外边距，用像素表示，顺序依次为上右下左，顺时针方向，也可以分别用margin-top/right/bottom/left来设置，如果只写一个表示四个方向的距离均为此值。
padding：内边距，和margin相同，都是用像素，上右下左，也可以分别设置，如果使用了padding，该元素会相应变大
border：边框，可以同时设置宽度，颜色，边框线，用空格隔开，也可以单独设置，border也可以单独设置上/下/左/右边框，边框的大小也是包含元素里面的
关于border，还有很多用法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1{ width:0px; height:0px; border-top:100px solid #000; border-right:100px solid #FFF; border-bottom:100px solid #FFF; border-left:100px solid #FFF;} </style> </head> <body> <div id="div1"> </div> </body> </html>
可以利用border的特性制作一些不规则的形状。
列表与方块：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #ol1{ list-style:none;} #ol2{ list-style-image:url(%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA7.gif)} </style> </head> <body> <ol id="ol1"> <li>第一项</li> <li>第二袭</li> <li>第三幕</li> <li>第四部</li> </ol> <ol id="ol2"> <li>第一项</li> <li>第二袭</li> <li>第三幕</li> <li>第四部</li> </ol> </body> </html>
list-style:列表符号的样式
inside 符号在元素里面
outside 符号在元素外部
none 没有符号
list-style-image：列表前面加图片作为排序符号
格式与布局：
格式与布局比较复杂难以理解
position:
下面举例来说明：
absolute; 绝对定位（相对于浏览器边界）
选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。简单来说，如果div中没有设置定位，他里面再套一个div设置绝对定位，里面的div不会出现在外面div里面。如果两个div都设置absolute，里面的div就是相对外div来进行定位的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1{ height:200px; width:200px; background-color:#006; position:absolute; top:20px; right:30px; } .d1{ width:100px; height:500px;} </style> </head> <body> <div id="div1"> </div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> </body> </html>
拉动滚动条，位置随之改变。
fixed 固定位置：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1{ height:200px; width:200px; background-color:#006; position:fixed; top:20px; right:30px; } .d1{ width:100px; height:500px;} </style> </head> <body> <div id="div1"> </div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> </body> </html>
拉动滚动条，位置不变。
relative 相对定位，相对于该元素本该出现的位置：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1{ background-color:#0F0; position:relative; top:20px; left:30px; } </style> </head> <body> 这是一段文字 <div>这是div中的文字</div> <div id="div1"> 这是相对定位div中的文字 </div> </body> </html>
在原本应该出现的位置偏移。
需注意的是，只要加了position，该元素就和其他元素不在同一层了，原本被挤下去下面的元素就会浮上来。
设置居中：margin：0px auto;
流式布局：
做网页布局。可以让元素流动。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .div1{ margin:10px; width:100px; float:right; background-color:#999;} #nr{ height:300px; width:100%; background-color:#063;} </style> </head> <body> <div class="div1">首页</div> <div class="div1">产品介绍</div> <div class="div1">发展历史</div> <div class="div1">个人中心</div> <div class="div1">相关内容</div> <div class="div1">联系我们</div> <div style="clear:both"></div> <ul style="list-style:none;"> <li class="div1">首页</li> <li class="div1">首页</li> <li class="div1">首页</li> <li class="div1">首页</li> <li class="div1">首页</li> <li class="div1">首页</li> </ul> <div style="clear:both"></div> <div id="nr"></div> </body> </html>
float:left/ight; 向左/右流，会随着浏览器大小适应
截断流：<div style="clear:both"></div>
z-index:给元素设置一个层级，数字越大越靠上
其他：
HTML和css使用的注释不同，在HTML代码中使用<!-- -->，但是在css中该注释无效，应使用/* */。
：hover鼠标移上的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1{ margin: 10px; height:200px; width:200px; background-color:#333; border-radius:15px;} #div1:hover{ background-color:#030; cursor:pointer; box-shadow: 10px 10px 10px blue; border-radius:15px;} </style> </head> <body> <div id="div1"></div> <div id="div1"></div> </body> </html>
如图，两个方块应用的是同样的样式，下面方块是鼠标移上去的效果。应用方法是在选择器：hover，然后正常应用各种样式就好。
cursor:pointer; 鼠标的光标变成手
border-radius:5px;圆角，像素的多少代表圆角的弧度
box-shadow:0 0 5px white; 阴影效果，每个方向阴影的大小以及颜色
display:none隐藏 block显示 隐藏不占位置
visibility:hidden 隐藏 visible 显示 隐藏占位置
overflow:hidden; 超出部分隐藏
需要注意的是，<sapn>标签的大小是由内容决定的，单独设置标签的大小没有意义，但是，如果给它display:block使它块状显示，就可以，会达到和<div>相似的效果。
透明效果：
opacity:0.2;
-moz-opacity:0.2;
filter:alpha(opacity=20);
这三种方式均可达到透明效果，是不同CSS标准的写法，由于有些不同浏览器支持不同的标准，所以最好全部写上。