阿里巴巴中文站的CSS设计规则(转)

　　一种思想只有很多人用了才会成为主流，一套方案得到大家的认可才能得以实施，希望中文站前端的朋友能大致阅览下样式内容，并提出宝贵意见。模块化的样式正在逐步添加，诚心接纳更多可模块化的页面样式建议。

• 思路要点之一：绝不考虑使用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-family:宋体这个属性，在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>   for testing 故名思意。当你需要做测试时，可以用到的，例如，你想看到一个div的边框只需要往class里敲入两个字母 ‘bd’

  .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://img.china.alibaba.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://img.china.alibaba.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://img.china.alibaba.com/images/cn/home/070215/d_ico.gif) 5px 7px no-repeat;

  padding-left:15px}

  ul.li23 li{background:url(http://img.china.alibaba.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=”#” mce_href=”#” ><img src=”" mce_src=”" /><div>#picture notation#</div></a><a class=”pl” href=”#” mce_href=”#” ><img src=”" mce_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://img.china.alibaba.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://img.china.alibaba.com/images/cn/blog/home/070807/ttsty_lt_01.gif) no-repeat}

  .ttr{float:right;width:2px;height:100%;background:url(http://img.china.alibaba.com/images/cn/blog/home/070807/ttsty_rt_01.gif) no-repeat}

  需要说的是，这个样式不通用，因为不是所有的标题都是一个样子，这个标题样式是针对左中右结构的标题，可自适应宽度，如要更换背底需要重新设置以下样式

  .tt{height:; line-height:; background:;}

  .ttl{width:; background:;}

  .ttr{width:; background:;}

  所以说这个样式不通用，实际使用中几乎要把所有的样式重新写一遍。这里只是希望提供一个模型，也有便利之处吧。