css使用要点
写本书的出发点是：希望给大家一套比较容易接受的、好用的、能处理页面大部分内容的CSS全局样式，当然使用这套CSS是在本人提出的一套 HTML架构之下的。说架构其实有点故弄玄虚，只是想和大家分享前端HTML编码的一点点思路，和一个个在此思路之下解决问题的方法。所有遇到的问题全部来源于日常工作，所有代码无拷贝他人，均属原创，仅供业内人事探讨，不提供教学。
思路要点之一：绝不考虑使用table，横向布局用带有float的div或li取代td。慎用ul li，当有重复单元时可使用ul li，没有重复的单元就别用ul，那样代码看上去很不整齐。
思路要点之二：最大限度利用ul li的优点。用ul li可以减少class=””的声明数量，当你把一套重复单元放进li之后，在ul里定义一个class=””就足够了。当然会付出代价，ul的兼容问题比div成倍的多。
思路要点之三：所有的空白使用margin填充，尽量不使用padding。要问原因，我只能这样说，padding能用 margin替代，反之不行，只使用margin，当处理兼容问题时，你可以把焦点仅放在margin上而不用考虑padding。
思路要点之四：不给任何非图片背景类的容器定义height具体值，让容器自适应内容高度，好处一大筐，坏处一大箩，说说坏处吧，在调两个容器同高对齐时，要反复截图量高，而且要在不同浏览器下截图，量完高，还要计算出合适的margin-top来填充。
思路要点之五：能用一层解决的决不用两层，尽量减少嵌套，严厉禁止ul li 下再套 ul li，后果自负，目前为止我还没尝试过ul li嵌套ul li，对此法的实践属空白，理论上来说，此法会带来很多bug。
思路要点之六：css样式分类很细，需要使用多重class声明。例如：class=”left bd orange”，排名不分先后。
思路要点之七：熟悉各浏览器对样式解释的不同点，认真做好工作笔记，准备好4大浏览器，调试兼容，再开一个photoshop，随时截图做测量。制定完美的目标，那就是：精确到1px的兼容。
样式的优先级
在这之前先讲解特殊符号的含义――‘+’ ’_’ ’ !important’，这类特殊符号是针对不同浏览器识别的。打个比方，就象家长去幼儿园认领孩子，看到头上贴着’+’这个符号的，哦，这是ie家的孩子，firefox和opear家长是不认得的，当然符号不止3个，但有这3个就能满足大部分的需要了。
‘+’ 加上该符号的样式只有ie才会认领
‘_’ 加上该符号的样式只有ie6才会认领，ie7不会认领
‘!important’ 在同一条样式定义中即大括号{}中，firefox、opera优先认领，ie不认得即忽略’!important’字符串。在非同一条样式中即不同的大括号中{}标有‘!important’的样式对所有浏览器均属优先认领。网上有说ie不认‘!important’的，大错特错了。
例：
<style type="text/css">
.def{background:yellow;+background:blue;_background:red;}
</style>
<div class="def">dd</div>
结果：ie6下是red色，ie7下是blue色，firefox和opera下是yellow色
例：
<style type="text/css">
.def2{background:black !important;}
.def1{background:yellow;+background:blue;_background:red;}
</style>
<div class="def1 def2">dd</div>
结果：所有浏览器均black色
优先原则一：文本从上到下，后出现的样式优先于前面出现的同一样式
例：
<style type="text/css">
.def1{background:black;}
.def2{background:yellow; }
</style>
<div class=" def2 def1">dd</div>
结果：所有浏览器均yellow色，注意：与class=”” 引号内的顺序无关，只看.def1和.def2在声明时的顺序，.def2后声明的所以权重高。
优先原则二：id声明（即 # 开头的样式）> class声明（即 . 开头的样式）> 标签声明(即 类似 div 开头)
以上三种声明处于不同的量级，份量上，div 开头相当于 1克 重，. 开头相当于 1公斤 重，# 开头相当于 1吨 重。
例：
<style type="text/css">
#bb{background:pink}
.def{background:black;}
div{background:yellow; }
</style>
<div id=”bb” class="def">dd</div>
结果：所有浏览器均pink色，注意：虽然按优先原则一，后出现的权重高，但那只是在同样重量级下的比较，优先原则二各重量级别就不同了。
优先原则三：数量取胜。如果同一个样式声明即一个大括号{}由多个 # . 或 div 组成，则权重按出现符号的量级增加
比如：
#bb #tt #dd {background:red} 则重量等于3吨
#bb .tt ul.dd li {background:red} 则重量等于1吨2公斤2克，这么精确的重量，就不需要举例了吧。
再次说明：优先原则一只适用两个样式声明同样重的情况
优先原则四：‘!important’。相当于无限重量，在之前已经有说明，需要注意：ie下，在同一条样式声明即一个大括号中出现的!important 会被随后出现的同名样式冲洗掉。
<style type="text/css">
.def1{background:yellow !important;background:red;}
.def2{background:green;}
</style>
<div class="def1 def2 ">dd</div>
结果：ie下，green色，background:yellow !important被后面的background:red冲洗了，而background:red与background:green的较量中，前者败在优先原则一之下。
优先原则五：近水楼台。<div style=”background:black”></div>直接写在元素体内的style优先级别最高！（仅次于!important）用重量来形容，可以定为百万吨量级。
<style type="text/css">
.def1{ background:red;}
</style>
<div class="def1 " style="background:black">dd</div>
结果：black色。
<style type="text/css">
.def1{ background:red !important;}
</style>
<div class="def1 " style="background:black">dd</div>
结果：red色。
<style type="text/css">
.def1{ background:red !important;}
</style>
<div class="def1 " style="background:black !important">dd</div>
结果：black色。
注释：!important 的无限重量说不太通，大家知道，两个无限的数是没法比较大小的，如果两个样式定义都加了!important，是否就无法比较呢？
不是的，所以，请将!important的无限重量级理解成千万吨级别吧。
所提供样式可以分为以下几类：
a>即标记优化。
tag optimization
包括对 body,td,select,input,form,ul,li,img,h3,p的优化，有待扩充。主要优化 margin,padding,font-size
强调几个比较重要的，也是较常出现引发问题的。
Form{margin:0px;}有时页面上莫名出现了空白，很多时候是因为忽略了 form的margin
Img{border:0px}如果没有border:0px; 当给<img />套上<a/>时，图片会出现丑陋的边框色
Input{font-size:12px;}这可是很重要的哦，没有font- size限制的密码框会呈现超大的圆点并且撑大input框
Body{"">宋体} 也许大家不会留意到，如果不加这个属性，在font-size:12px下，ie里文字的实际占高14px，而ff里实际占高是15px，当然即使加了，在 opera下文字占高还是不一样的，这就需要在任何文字情况下不要忘了line-height或height。
h1{font-size:14px;margin:7px 0px;}
h2{font-size:14px;margin:7px 0px;text-align:left}
h3{font-size:14px;margin:7px 0px;text-align:center}
h1-h3 建议所有页面加粗的内容用h1-h3取代自定义的font-weight，SEO教导我们使用 h 可以提高搜索效率。
b>部分。可以修改或增加你喜欢的链接样式。
link
注意.lk_l a{text-decoration:underline !important} 和 .lk_n a{text-decoration:none !important}的使用
c>故名思意。当你需要做测试时，可以用到的，例如，你想看到一个div的边框只需要往class里敲入两个字母 ‘bd’
for testing
.lb 使用范例：<ul class=”lb”><li></li></ul>这样就能看到ul下所有li的边框了。
d>部分。重头戏来了，有必要一个个详细说明了。
common
.clr{clear:both}为了保留之前的习惯，做的一次向下兼容。需要说明，clear层样式在
.c{clear:both;overflow:hidden;+overflow:visible}里已经重新定义，请尽量使用新样式，并牢记新样式只能在单独的clear层使用赌东道赌东道赌东道的 的的赌东道赌东道赌东道的 的的
――什么是单独的clear层？<div class=”c”></div>就是，除了.c样式没其它className，并且<div/>内为空。
为什么要重新定义？完全出于兼容opera考虑，最近才做opera下的兼容，还是源于同事对opera的推荐。（如嫌麻烦，不必深究，用就行了）
.l{float:left;display:inline} 最常用的属性了。但注意，新的定义里多了display:inline，由于在当前构架下，多使用margin布局，而float元素在ie6下有著名的double margin bug，解决方案即给float元素加display:inline，当然，所有的float元素都加上这条属性不是完全没问题，ul就会稍微有点问题，在后面会有针对这类问题的样式解决，比起给全局的float元素解决double margin问题要省事的多。
.f{width:100%} 该属性的作用不言而喻，设置本层的宽度为上层的宽度。需要强调：本属性与padding、border、margin-left、margin-right一起使用要特别小心，这些属性会给额外增加元素的实际宽度，在ie下多余的宽度会撑大上层元素，而ff和opera下则不会有撑大现象。
.z{zoom:1} 非常重要的一个样式，用来解决ie6 下的块级元素layout上呈现的多种bug。
.h{width:50%;+width:49.99%} 跟上面的属于同类，设置本层宽度为上层宽度的一半，至于为什么49.99% 我也不想的，ie6不让50%通过嘛。下面是测试代码（需要有 global.css样式文件引用）
<div class="bd">
<div class="l h bg h17"></div>
<div class="r h bg h17"></div>
</div>
.b .s .m .g 不说了，控制文字大小和加粗的。
.pa{position:absolute } 定义层为绝对位置，float元素定义 .pa 后float属性失效。既然是绝对层left、top属性是必不可少了不然失去了绝对层的意义，所以不要忘记设置left，top。绝对层上层一定记得要套相对层position:relative，不然，绝对层left、top属性参考的对象会是最外层的window，在body之外了，谁也不希望定义的元素跑到body外面去吧。在相对层内的绝对层可以随意定位，配合z-index属性几乎可以用html代码模拟photoshop画图了，^_^纯属玩笑。
.pr{position:relative}给left、top定值是相对于本来应该在的位置。一般与 .pa 配合使用。
.dl{display:inline}
.db{display:block}
.dn{display:none !important}
以上3个不想多说，重要，非常重要，实用，非常实用。<div class=”bd dn”></div>你只用敲两个字母，这一层就没了。
.in{float:left;display:inline;margin-left:4px;margin-top:4px;width:16px;height:10px;overflow:hidden;
background:url(http://i01.c.aliimg.com/images/cn/home/070214/new_l.gif) no-repeat}
“新”图标
.ih{float:left;display:inline;margin-left:4px;margin-top:4px;width:16px;height:10px;overflow:hidden;
background:url(http://i04.c.aliimg.com/images/cn/home/070214/hot_l.gif) no-repeat}
“热”图标
好用！不过要求前面元素float，记得配合margin属性调整位置。示例：
<div class="bd l23">
<div class="l">ddddddddddddddddddd</div><div class="ml7 mt5 in"></div>
<div class="c"></div>
</div>
.oh{overflow:hidden} 隐藏超出的内容
.tc{text-align:center} 文字居中
.bn{border:none !important} 消除border，有!important加权。
.b_1{border:1px solid #B8B8B8}
.bt_1{border-top:1px solid #ff7300}
.bt_2{border-top:1px dashed #CCC}
.bt_3{border-top:1px dashed #FFB980}
.bl_1{border-left:1px dashed #CCC}
.bg_1{background-color:#FFF1E6}
.bg_2{background-color:#F0F0F0}
.bg_3{background-color:#9ACD68}
Border和background系列就不说了
.o_1{opacity:.7;filter:alpha(opacity=70)}
.o_2{opacity:.9;filter:alpha(opacity=90)}
两个透明属性，给喜欢透明层的用。
.l17{line-height:17px;}
.l20{line-height:20px}
.l23{line-height:23px}
.l15p{line-height:150%}
这里需要强调，line-height是最常用的属性之一，出于兼容的考虑页面所有文字都应该具有line-height属性（这一属性可被子元素继承，所以不用担心浪费笔墨）。至于用px 还是用 % 建议用px，不同浏览器显示文字的高度是不一样的，用%只会放大这种差异，用px 才能消除差异。% 到底用不用的上呢？当然有用，不考虑高度差异的，象文章内容推荐用 % 当选用不同字号增大的比例是相同的。
这样，
common
部分就结束了。
e>布局部分
layout
.ma{margin-left:auto;margin-right:auto}
Div居中样式，这个属性可以让block块级元素自身居中，而不是里面的内容居中
.w778{width:778px;margin-left:auto;margin-right:auto}
.w952{width:952px;margin-left:auto;margin-right:auto}
2个布局用的样式，窄布局下用 .w778 宽布局下用 .w952 自定义布局用。
f>
列表ul li
专用样式
可以说这是重中之重了，主页级别的页面大部分的内容都是做在无序列表里面的，其庞大的使用规模，需要有完备的样式支持。
ul.lzb, ul.lzl {zoom:1} 这两个样式包括下面两个是zoom在ul里的应用
ul.lzb li{zoom:1;+margin-bottom:-4px} 针对ie下ul li 元素的margin-bottom:4px 的bug（bug出现条件：li 里有float 元素）使用了该样式的li其内可有浮左、浮右div，并且li内可兼容多行结构，这是样式ul.ll20 li无法实现的。（具体案例见xls 文档）
ul.lzl li{zoom:1;+margin-left:-16px} 这个样式的出现有些不得已，记得前面说过，为了避免ie6下的double margin bug，我们给所有的float元素额外加上了display;inline，这导致float属性的ul 在ie下出现意料之外的缩进问题，只能再增加这个样式来解决这一问题。
ul.ll20 li{line-height:20px;height:20px;+margin-bottom:-4px}
ul.ll23 li{line-height:23px;height:23px;+margin-bottom:-4px}
以上两个样式适用于固定高度的单行li，什么是单行li？指的是li中的文字无换行。
和height等值的line-height让 li中文字垂直居中。使用了这个样式的li其内可以有浮左、浮右div，是解决单行li兼容的比较好的方式。
ul.li20 li{background:url(http://i03.c.aliimg.com/images/cn/home/070215/d_ico.gif) 5px 7px no-repeat;
padding-left:15px}
ul.li23 li{background:url(http://i03.c.aliimg.com/images/cn/home/070215/d_ico.gif) 5px 10px no-repeat;
padding-left:15px}
这两个样式没什么好说的，分别针对li高度20px和23px的li背景样式，背景其实就是一个no repeat的方点。
ul.ll li{float:left;display:inline}
ul.lr li{float:right;display:inline}
想让一个个li象火车一样首位相接吗？用上面两个样式吧，让所有的li 浮起来。
ul.ldl li{display:inline} 这个样式我不太喜欢，同样可以让li象火车一样首位相接，但是代价太大，所有的li都变成inline了，很多css样式对inline的元素无效，包括最基本的width、height、margin-top
ul.lbt li{border-top:1px dashed #CCC}
ul.lbl_1 li{border-left:1px solid #000}
两个给li加边框的样式，给了li 更好的分隔效果。
这样，ul li 专用样式部分就结束了。
g>样式
margin control
.h1p{height:1%}
.h1{height:1px;overflow:hidden}
.h16{height:16px}
.h17{height:17px}
.m1{margin:1px}
.m7{margin:7px}
.m14{margin:14px}
.ml3{margin-left:3px}
.ml5{margin-left:5px}
.ml7{margin-left:7px}
.ml9{margin-left:9px}
.ml14{margin-left:14px}
.ml18{margin-left:18px}
.ml21{margin-left:21px}
.mr3{margin-left:3px}
.mr5{margin-left:5px}
.mr7{margin-right:7px}
.mr9{margin-right:9px}
.mr14{margin-right:14px}
.mr18{margin-right:18px}
.mr21{margin-right:21px}
.mt1{margin-top:1px}
.mt3{margin-top:3px}
.mt5{margin-top:5px}
.mt7{margin-top:7px}
.mt9{margin-top:9px}
.mt11{margin-top:11px}
.mt14{margin-top:14px}
.mt21{margin-top:21px}
.mt28{margin-top:27px}
.p7{padding:7px}
.p14{padding:14px}
.pt7{padding-top:7px}
.pt14{padding-top:14px}
以上所有样式都是用来留白的，height和margin的组合可以实现1px-31px 的垂直方向留白连续值(除了13这个不吉利数字)，更多的情况我们会单独使用margin，注意margin能够使用的值。
最后的几个padding样式需要说明，记得我在前面说过用 margin取代padding，这里不得不食言了，对于有3个border的碗状容器，即border-top;none的容器，对碗内的第一个子层使用margin-top似乎无法达到你的期望效果，那就对碗使用padding-top吧，本层的padding相当于子层的margin。
h>
组合样式
/* Vertical align Middle
垂直居中样式
ex:
<div class="vm"><div class="vma"><div class="vmb">
#content#
</div></div></div>
--please set the height attribute in addition before using it. height:100px for example. 使用前请重新设置.vm, .vmb{height:100px}里的height值。
*/
.vm, .vmb{height:100px}
.vm{position:relative}
.vma{position:absolute;border:none!important;top:0px;+top:50%;display:table}
.vmb{+position:relative;+top:-50%;display:table-cell;vertical-align:middle;+height:auto !important}
没什么要说的，要看效果请打开border
/* Picture Link
图片文字链组合
ex:
<a class="pl" href="#" ><img src="" /><div>#picture notation#</div></a><a class="pl" href="#" ><img src="" /><div>#picture notation#</div></a><div class="c"></div>
--don't forget <div class="c"></div> at the end for .pl has float attribute 不要忘了在最后加清除浮动层，因为 .pl 层有浮动属性。
*/
.pl{float:left;text-align:center;padding-bottom:4px;background:#fff;border:1px solid #ccc}
.pl img {display:block;margin:7px;border:1px solid #ccc}
html>/**/body .pl {margin-bottom:-1px}
@media all and (min-width: 0px){ .pl{margin-bottom:0px !important;} }
没什么好说的，试验下代码即可，实用的东西一般很简单。这里最后两行值得注意，倒数第二行firefox和opera可识别；最后一行只有opera能识别。
/* SHadow
块级元素阴影效果
ex:
<div class="sh r">
<div class="sha" style="width:400px;height:600px;border:1px solid green">
#content#
</div>
<div class="shb"></div>
<div class="shc"></div>
</div>
--you should move the float attribute from .sha to .sh 类.sha上的float属性需要转移到类.sh上去
*/
.sh{position:relative;background:#ACACAC;}
.sh .sha{margin:0px 2px 2px 0px;background:#fff;}
.sh .shb{position:absolute;top:0px;right:0px;width:2px;height:2px;overflow:hidden;background:#fff;}
.sh .shc{position:absolute;bottom:0px;left:0px;width:2px;height:2px;overflow:hidden;background:#fff}
这个例子要说几句，没有阴影效果的一层，代码如下，可能有float属性，见class 里的 “r”
<div class="sha r" style="width:400px;height:600px;border:1px solid green">
#content#
</div>
现在要给它加上阴影，我们需要在它外面再套一层，并且增加两个同级层。
<div class="sh r">
<div class="sha" style="width:400px;height:600px;border:1px solid green">
#content#
</div>
<div class="shb"></div>
<div class="shc"></div>
</div>
同时，原来层的float属性要转移到新套的外层上。
/* TiTle
标题栏样式
ex:
<div class="tt">
<div class="ttl"></div>
<div class="ttc">title words</div>
<div class="ttr"></div>
</div>
*/
.tt{position:relative;height:37px;line-height:37px;background:url(http://i02.c.aliimg.com/images/cn/blog/home/070807/ttsty_tt_01.gif) repeat-x}
.ttc{float:left;display:inline;font-size:14px;font-weight:bold;}
.ttl{float:left;width:2px;height:100%;background:url(http://i02.c.aliimg.com/images/cn/blog/home/070807/ttsty_lt_01.gif) no-repeat}
.ttr{float:right;width:2px;height:100%;background:url(http://i02.c.aliimg.com/images/cn/blog/home/070807/ttsty_rt_01.gif) no-repeat}
需要说的是，这个样式不通用，因为不是所有的标题都是一个样子，这个标题样式是针对左中右结构的标题，可自适应宽度，如要更换背底需要重新设置以下样式
.tt{height:; line-height:; background:;}
.ttl{width:; background:;}
.ttr{width:; background:;}
所以说这个样式不通用，实际使用中几乎要把所有的样式重新写一遍。这里只是希望提供一个模型，也有便利之处吧
原文出自:http://blog.china.alibaba.com/blog/balibell/article/b0-i2779951.html