CSS 書寫規范（2006/7/14 初稿）

1. 書寫規范
A. 大小寫。為了閱讀方便，我們在書寫樣式表規則的時候采用小寫字母，顏色部分若采用#RRGGBB 格
式，則此部分用大寫字母。
B. 符號的使用。設置背景引用圖片時，要用“雙引號”；import 一個樣式表，也需加上“雙引號”。每
條樣式規則的結束加上“；(分號)”。
C. 組織 css 文件。恰當地組織好 CSS，將相似的選擇符編為一組，安排適當的次序，使用一致的命名習
慣和空白格式，建議采用空白字符而不是 tab。
D. 進行注解。樣式表裡面的注解使用與 C 語言一樣的約定方法。例：/* css */
2. 注意事項
A. 注意不同瀏覽器對樣式支持的差異，好好利用蘇沈小雨的 CSS2.0 中文樣式表手冊以及 TopStyle 軟
體，部分區別參見 http://www.dithered.com/css_filters/css_only/index.php。
B. 若希望頁面的背景顏色為白色，那麼設置 body 的背景顏色。因為通常瀏覽器的背景顏色是白色，但
是可以由用戶自定背景顏色，在用戶設置了背景顏色的時候，頁面有可能會變得慘不忍睹。
C. 鏈接樣式的規則。“LoVe/HAte”規則。要以下面順序添加超鏈接偽類規則：
link，visited，hover，active。
D. 塊元素邊框的設定。“TRouBLed”規則。邊框(border)，邊距(margin)，補白(padding)簡寫時次序
皆為：上(top)、右(right)、下(bottom)、左(left)。例如 border-width:0 1px 2px 3px 表示上邊框寬
度為 0，右邊框寬度為 1，依此類推。
E. 單位的使用。非零值要指明單位，零值不用指明。具體單位的使用見附錄 A1。
F. 如果使用了錨點，在應用超鏈接樣式時須注意。如果在代碼中使用了傳統錨點(<a
name=”test”>)，此時:link，:active 規則也會作用於它。可使用 id，或者:
link:hover，:link:active。
G. 樣式優先級。HTML 標記名標簽樣式的有效性最低，其次是“.stylename”型的類選擇符，再次是
“td.stylename”型的類選擇符，最高級別的是“#stylename”型的 ID 選擇符。當使用了多個樣式
表，有多個相同的選擇符，那麼，還可以參考以下的內容：
i. !important 規則，這種特指為重要的樣式會凌駕於與之對立的其它相同權重的樣式，而且此規
則會超越瀏覽者自定義的規則。
ii. 特性計算。我們對選擇符進行統計，選擇符中 ID 屬性個數為 x，Class 屬性個數為 y，HTML 標
記名為 z(包含數，而非單純的個數，因為要排除選擇符分組的情況)。按 xyz 的順序寫出三個數
字，得到一個三位數。最終的結果可以讓你容易地確定，較高數字的特性將凌駕於較低數字的特
定。請看例子。
#stylename1 {***} /* x=1 y=0 z=0 –> 100 */
ul li.red {***} /* x=0 y=1 z=2 –> 012 */
li.red {***} /* x=0 y=1 z=1 –> 011 */
.red {***} /* x=0 y=1 z=0 –> 010 */
li {***} /* x=0 y=0 z=1 –> 001 */

iii. 在等級完全相同的情況下，將由選擇符的出場順序來決定。
3. 小技巧
A. 加上邊框有利於布局的調試。加入 table,div{border:1px #F30 solid;}之類的全局規則或者在特定
位置設定邊框有利於找出布局存在的問題，可以找到難以發覺的問題。
B. 將樣式嵌入在 HTML 源碼中，測試時有利於消除由緩存引起的錯誤。但在發布前要記住將樣式提取至
樣式表中。
C. 組合 class 選擇符，簡寫樣式規則。CSS 越精簡，不僅方便閱讀，而且下載的時間更短，因此盡量為
 選擇符分組，利用繼承性(inheritance)，以及使用簡寫(shorthand)，以減少冗余。常見的簡寫見附
錄 A4。
D. 采用 CSS Hack，在非用不可的情況下采用。常見的見附錄 B。
附錄 A
1. 單位介紹
A. 長度單位。長度單位有兩種，一種是絕對長度單位(pt、pc、in、cm、mm)，一種是相對長度單位
(em、ex、px)。
i. px，相對長度單位，像素(Pixel)。像素是相對於顯示器的分辨率而言的。一般 windows 用戶使用
的分辨率為 96 像素/英寸，而一般 mac 的用戶使用的分辨率為 72 像素/英寸。
ii. em，相對長度單位，相對於當前對象內文本的字體尺寸。如當前行內文本的字體尺寸未被設定，
則相對於瀏覽器的默認字體尺寸。
iii. ex，相對長度單位，相對於字符“x”的高度，此高度通常為字體尺寸的一半。
iv. pt，絕對長度單位，點(Point)。1in=2.54cm=25.4mm=72pt=6pc。
v. pc，絕對長度單位，派卡(Pica)。相當於我國新四號鉛字的尺寸。
vi. in，絕對長度單位，英寸(Inch)。
vii. mm，絕對長度單位，毫米(Millimeter)。
viii. cm，絕對長度單位，厘米(centimeter)。
B. 字體尺寸選擇
i. 為了保證不同瀏覽器上字號一致，可以采用 pt 或 px 來定義字體尺寸，一般使用 9pt 與
10.5pt，px 一般采用 12px 和 14.7(14)px。
ii. 關於用 em 定義字體尺寸的思考。從 pt 與 px 轉向 em，即從固定的、基於像素的設計方法轉向彈
性的、相對的設計方法，這並不容易，但是如果恰當利用，便可以增強親和力和易用性，同時無
需作出設計上的犧牲。pt 與 px 都是屏幕上不可縮放的點，而一個 em 是一個字大小的方塊，由
於字體大小的改變，em 代表著用戶喜歡的文字大小的相對單位。親和力指的並不只是關於盲人
和屏幕閱讀器，許多人雖然不是盲人，但是視力有障礙——我們變老時也會如此。允許用戶改變
文字大小可以便網站的親和力增加。如果設計得使用像素為單位指定文字大小，大多數用戶將無
法縮放文字，因為 IE 改變文字大小的方式與其他瀏覽器不同，Mozilla 與 Opera 可以縮放已經
設定像素的文字，而 IE 卻不能。
iii. 嘗試使用 em 來定義文字尺寸。
C. 顏色單位
i. rgb(RBG)。R，G，B 都可以采用正整數(0~255)，或者百分數來表示(0~100%)。
ii. #RRGGBB。RR，GG，BB 為 16 進制正整數。如果每個參數各自兩位數字都相同，可以簡寫為
#RGB 的格式。如#FF3300 可寫成#F30。
iii. #AARRGGBB。采用 IE 專有的 filter 濾鏡樣式時，有的情況下會用到 AARRGGBB 格式的顏色
單位，其中 AA 表示透明度，取值范圍為 00~FF，00 為完全透明，FF 為完全不透明。
iv. Color Name。采用顏色名稱命名。
2. 常用樣式簡寫
A. p, div {font:italic small-caps 600 12pt/1.5 Courier;}
B. p, div {background:url(“images/bg.gif”) no-repeat scroll 5% 60%;}
C. div {padding:2px 4px 2px 4px;}(等同於 padding:2px 4px;)
D. div {border:#F30 solid; border-width:2px 4px 2px 4px;}
3. 選擇符
A. 類型選擇符(Type Selectors)，以對象類型作為選擇符。td {font-size:11px; width:120px;}(所有 td 對象寬度為
120px，裡面文字尺寸為 11px。)
 B. 包含選擇符(Descendant Selectors)。table td {font-size:11px;}(所有 table 中 td 對象裡的文字尺寸為 11px。)
div.sub a {font-size:10px;}(所有樣式為 sub 的 div 對象，裡面的 a(超鏈接)文字尺寸為 10px。)

C. ID 選擇符(ID Selectors)，以作為對象的唯一標識的 ID 作為選擇符。#note {font-size:11px;

width:120px;}(html 中若有 id=note，便會應用此樣式。)

D. 類選擇符(Class Selectors)。td.note {font-size:11px;}(所有 class=”note”的 td 對象內文字尺寸為 11px) .sub {font-

size:10px;} (所有 class=”sub”的對象內文字尺寸為 10px)

E. 選擇符分組(Grouping)，將同樣的定義應用於多個選擇符，可以將選擇符以逗號隔開的方式分組。.
td1,div a,body { font-size:14px;}

F. 偽類及偽對象選擇符(Pseudo Selectors)。a.fly :hover { font-size:14px; color:red; }

附錄 B (CSS hack)

IE 6 and below
Use * html {} to select the html element.

IE 7 and below
Use *+html, * html {} to select the html element.

IE 7 only
Use *+html {} to select the html element.

IE 7 and modern browsers only

Use html>body {} to select the body element.

Modern browsers only (not IE 7)

Use html>/**/body {} to select the body element
CSS Hack 表（更新至 IE7b1）