阿里巴巴中文站的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色

优先原则一：文本从上到下，后出现的样式优先于前面出现的同一样式

例：

.def1{background:black;}

.def2{background:yellow; }

</style>

结果：所有浏览器均yellow色，注意：与class=”” 引号内的顺序无关，只看.def1和.def2在声明时的顺序，.def2后声明的所以权重高。

优先原则二：id声明（即 # 开头的样式）> class声明（即 . 开头的样式）> 标签声明即类似 div 开头)

以上三种声明处于不同的量级，份量上，div 开头相当于 1克重，. 开头相当于 1公斤重，# 开头相当于 1吨重。

例：

#bb{background:pink}

.def{background:black;}

div{background:yellow; }

</style>

结果：所有浏览器均pink色，注意：虽然按优先原则一，后出现的权重高，但那只是在同样重量级下的比较，优先原则二各重量级别就不同了。

优先原则三：数量取胜。如果同一个样式声明即一个大括号{}由多个 # . 或 div 组成，则权重按出现符号的量级增加

比如：#bb #tt #dd {background:red} 则重量等于3吨

#bb .tt ul.dd li {background:red} 则重量等于1吨2公斤2克，这么精确的重量，就不需要举例了吧。

再次说明：优先原则一只适用两个样式声明同样重的情况

优先原则四：‘!important’。相当于无限重量，在之前已经有说明，需要注意：ie下，在同一条样式声明即一个大括号中出现的!important 会被随后出现的同名样式冲洗掉。

.def1{background:yellow !important;background:red;}

.def2{background:green;}

</style>

结果：ie下，green色，background:yellow !important被后面的background:red冲洗了，而background:red与background:green的较量中，前者败在优先原则一之下。

优先原则五：近水楼台。<div style=”background:black”></div>直接写在元素体内的style优先级别最高！（仅次于!important）用重量来形容，可以定为百万吨量级。

.def1{ background:red;}

</style>

结果：black色。

.def1{ background:red !important;}

</style>

结果：red色。

.def1{ background:red !important;}

</style>

结果：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{100%} 该属性的作用不言而喻，设置本层的宽度为上层的宽度。需要强调：本属性与 padding、border、margin-left、margin-right一起使用要特别小心，这些属性会给额外增加元素的实际宽度，在ie下多余的宽度会撑大上层元素，而ff和opera下则不会有撑大现象。

.z{zoom:1} 非常重要的一个样式，用来解决ie6 下的块级元素layout上呈现的多种bug。

.h{50%;+49.99%} 跟上面的属于同类，设置本层宽度为上层宽度的一半，至于为什么49.99% 我也不想的，ie6不让50%通过嘛。下面是测试代码（需要有global.css样式文件引用）

</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;16px;height:10px;overflow:hidden;

background:urlhttp://img.china.alibaba.com/images/cn/home/070214/new_l.gif) no-repeat}

“新”图标

.ih{float:left;display:inline;margin-left:4px;margin-top:4px;16px;height:10px;overflow:hidden;

background:urlhttp://img.china.alibaba.com/images/cn/home/070214/hot_l.gif) no-repeat}

“热”图标

好用！不过要求前面元素float，记得配合margin属性调整位置。示例：

<div class=”l”>ddddddddddddddddddd</div><div class=”ml7 mt5 in”></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:alphaopacity=70)}

.o_2{opacity:.9;filter:alphaopacity=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{778px;margin-left:auto;margin-right:auto}

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

padding-left:15px}

ul.li23 li{background:urlhttp://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:

#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- 0px){ .pl{margin-bottom:0px !important;} }

没什么好说的，试验下代码即可，实用的东西一般很简单。这里最后两行值得注意，倒数第二行firefox和opera可识别；最后一行只有opera能识别。

/* SHadow 块级元素阴影效果

ex:

#content#

</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;2px;height:2px;overflow:hidden;background:#fff;}

.sh .shc{position:absolute;bottom:0px;left:0px;2px;height:2px;overflow:hidden;background:#fff}

这个例子要说几句，没有阴影效果的一层，代码如下，可能有float属性，见class 里的 “r”

#content#

</div>

现在要给它加上阴影，我们需要在它外面再套一层，并且增加两个同级层。

#content#

</div>

</div>

同时，原来层的float属性要转移到新套的外层上。

/* TiTle 标题栏样式

ex:

<div class=”ttc”>title words</div>

</div>

.tt{position:relative;height:37px;line-height:37px;background:urlhttp://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;2px;height:100%;background:urlhttp://img.china.alibaba.com/images/cn/blog/home/070807/ttsty_lt_01.gif) no-repeat}

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

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

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

.ttl{; background:;}

.ttr{; background:;}

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

没有目标的人都只在帮有目标的人完成目标

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

Published by

风君子

发表回复取消回复

Published by

风君子

发表回复 取消回复

发表回复取消回复