阿里巴巴中文站的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:;}

  所以說這個樣式不通用，實際使用中幾乎要把所有的樣式重新寫一遍。這裡只是希望提供一個模型，也有便利之處吧。