You are on page 1of 4

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)