一、檔案規範

1、檔案均歸檔至約定的目錄中

所有的CSS分為兩大類：通用類和業務類。通用的CSS檔案，放在如下目錄中：

• 基本樣式庫 /css/core
• 通用UI元素樣式庫 /css/lib
• JS元件相關樣式庫 /css/ul

業務類的CSS是指和具體產品相關的檔案，放在如下目錄中：

• 讀書 /css/book/
• 電影 /css/movie/
• 音樂 /css/music/
• 社群 /css/sns/
• 小站 /css/site/
• 同城 /css/location/
• 電臺 /css/radio/

外聯CSS檔案適用於全站級和產品級通用的大檔案。內聯CSS檔案適用於在一個或幾個頁面共用的CSS。另外一對具體的CSS進行文件化的整理。如：

• util-01 reset /css/core/reset.css
• util-02 通用模組容器 /css/core/mod.css
• ui-01. 喜歡按鈕 /css/core/fav_btn.css
• ui-02. 視訊/相簿列表項 /css/core/media_item.css
• ui-03. 評星 /css/core/rating.css
• ui-04. 通用按鈕 /css/core/common_button.css
• ui-05. 分頁 /css/core/pagination.css
• ui-06. 推薦按鈕 /css/core/rec_btn.css
• ui-07. 老版對話方塊 /css/core/old_dialog.css
• ui-08. 老版Tab /css/core/old_tab.css
• ui-09. 老版成員列表 /css/core/old_userlist.css
• ui-10. 老版資訊區 /css/core/notify.css
• ui-11. 社群使用者導航 /css/core/profile_nav.css
• ui-12. 當前大社群導航 /css/core/site_nav.css
• ui-13. 載入中 /css/lib/loading.css

2、檔案引入可通過外聯或內聯方式引入
link和style標籤都應該放入head中，原則上，不允許在html上直接寫樣式。避免在CSS中使用@import，巢狀不要超過一層。

• 外聯方式：<link rel=”stylesheet” href=”…” />（型別宣告type=”text/css”可以省略）
• 內聯方式：<style>…</style> （型別宣告type=”text/css”可以省略）

3、檔名、檔案編碼及檔案大小

• 檔名必須由小寫字母、數字、中劃線組成
• 檔案必須用UTF-8編碼，使用UTF-8（非BOM），在HTML中指定UTF-8編碼，在CSS中則不需要特別指定因為預設就是UTF-8。
• 單個CSS檔案避免過大（建議少於300行）

二、註釋規範
1、檔案頂部註釋（推薦使用）

1. /*
2. *@description:中文說明
3. *@author:name
4. *@update:name(2013-04-1318:32)
5. */

2、模組註釋
模組註釋必須單獨寫在一行

1. /*module:module1by張三*/
2. …
3. /*module:module2by張三*/

3、單行註釋與多行註釋
單行註釋可以寫在單獨一行，也可以寫在行尾，註釋中的每一行長度不超過40個漢字，或者80個英文字元。

1. /*thisisashortcomment*/

多行註釋必須寫在單獨行內

1. /*
2. *thisiscommentline1.
3. *thisiscommentline2.
4. */

4、特殊註釋
用於標註修改、待辦等資訊

1. /*TODO:xxxxbyname2013-04-1318:32*/
2. /*BUGFIX:xxxxbyname2012-04-1318:32*/

5、區塊註釋
對一個程式碼區塊註釋（可選），將樣式語句分割槽塊並在新行中對其註釋。

1. /*Header*/
2. /*Footer*/
3. /*Gallery*/

三、命名規範

使用有意義的或通用的ID和class命名：ID和class的命名應反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名。反映元素的使用目的是首選；使用通用名稱代表該元素不表特定意義，與其同級元素無異，通常是用於輔助命名；使用功能性或通用的名稱可以更適用於文件或模版變化的情況。

• /* 不推薦: 無意義 */ #yee-1901 {}
• /* 不推薦: 與樣式相關 */ .button-green {}.clear {}
• /* 推薦: 特殊性 */ #gallery {}#login {}.video {}
• /* 推薦: 通用性 */ .aux {}.alt {}

常用命名（多記多查英文單詞）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等。

ID和class命名越簡短越好，只要足夠表達涵義。這樣既有助於理解，也能提高程式碼效率。

• /* 不推薦 */ #navigation {}.atr {}
• /* 推薦 */ #nav {}.author {}

型別選擇器避免同時使用標籤、ID和class作為定位一個元素選擇器；從效能上考慮也應儘量減少選擇器的層級。

• /* 不推薦 */ul#example {}div.error {}
• /* 推薦 */#example {}.error {}

使用類選擇器，放棄ID選擇器

ID在一個頁面中的唯一性導致瞭如果以ID為選擇器來寫CSS，就無法重用。

NEC特殊字元："-"連字元

"-"在本規範中並不表示連字元的含義。

她只表示兩種含義：分類字首分隔符、擴充套件分隔符，詳見以下具體規則。

分類的命名方法：使用單個字母+"-"為字首

佈局（grid）（.g-）；模組（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；面板（skin）（.s-）；狀態（.z-）。

對以上的解釋詳情參見：分類方法中的“CSS內部的分類及其順序”。

注：在你樣式中的選擇器總是要以上面前五類開頭，然後在裡面使用後代選擇器。

　　如果這五類不能滿足你的需求，你可以另外定義一個或多個大類，但必須符合單個字母+"-"為字首的命名規則，即 .x- 的格式。

　　特殊：.j-將被專用於JS獲取節點，請勿使用.j-定義樣式。

後代選擇器命名

• 約定不以單個字母+"-"為字首且長度大於等於2的類選擇器為後代選擇器，如：.item為m-list模組裡的每一個項，.text為m-list模組裡的文字部分：.m-list .item{}.m-list .text{}。
• 一個語義化的標籤也可以是後代選擇器，比如：.m-list li{}。
• 不允許單個字母的類選擇器出現，原因詳見下面的“模組和元件的後代選擇器的擴充套件類”。

通過使用後代選擇器的方法，你不需要考慮他的命名是否已被使用，因為他只在當前模組或元件中生效，同樣的樣式名可以在不同的模組或元件中重複使用，互不干擾；在多人協作或者分模組協作的時候效果尤為明顯！

後代選擇器不需要完整表現結構樹層級，儘量能短則短。

注：後代選擇器不要在頁面佈局中使用，因為汙染的可能性較大；

命名應簡約而不失語義

相同語義的不同類命名

方法：直接加數字或字母區分即可（如：.m-list、.m-list2、.m-list3等，都是列表模組，但是是完全不一樣的模組）。

其他舉例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。

模組和元件的擴充套件類的命名方法

當A、B、C、...它們型別相同且外形相似區別不大，那麼就以它們中出現率最高的做成基類，其他做成基類的擴充套件。

方法：+“-”+數字或字母（如：.m-list的擴充套件類為.m-list-1、.m-list-2等）。

補充：基類自身可以獨立使用（如：class="m-list"即可），擴充套件類必須基於基類使用（如：class="m-list m-list-2"）。

如果你的擴充套件類是表示不同狀態，那麼你可以這樣命名：u-btn-dis，u-btn-hov，m-box-sel，m-box-hov等等，然後像這樣使用：class="u-btn u-btn-dis"。

如果你的網站可以不相容IE6等瀏覽器，那麼你標識狀態的方法也可以採取獨立狀態分類（.z-）方法：.u-btn.z-dis，.m-box.z-sel，然後像這樣使用：class="u-btn z-dis"。

模組和元件的後代選擇器的擴充套件類

有時候模組內會有些類似的東西，如果你沒有把它們做成元件和擴充套件，那麼也可以使用後代選擇器和擴充套件。

後代選擇器：.m-login .btn{}。

後代選擇器擴充套件：.m-login .btn-1{}，.m-login .btn-dis{}。

同樣也可以採取獨立狀態分類（.z-）方法：.m-login .btn.z-dis{}，然後像這樣使用：class="btn z-dis"。

注：此方法用於類選擇器，直接使用標籤做為選擇器的則不需要使用此命名方法。

注：為防止後代選擇器的擴充套件類和大類命名規範衝突，後代選擇器不允許使用單個字母。

　　比如：.m-list .a{}是不允許的，因為當這個.a需要擴充套件的時候就會變成.a-bb，這樣就和大類的命名規範衝突。

分組選擇器有時可以代替擴充套件方法

有時候雖然兩個同類型的模組很相似，但是你希望他們之間不要有依賴關係，也就是說你不希望使用擴充套件的方法，那麼你可以通過合併選擇器來設定共性的樣式。

使用本方法的前提是：相同型別、功能和外觀都相似，寫在同一片程式碼區域方便維護。

防止汙染和被汙染

當模組或元件之間互相巢狀，且使用了相同的標籤選擇器或其他後代選擇器，那麼裡面的選擇器就會被外面相同的選擇器所影響。

所以，如果你的模組或元件可能巢狀或被巢狀於其他模組或元件，那麼要慎用標籤選擇器，必要時採用類選擇器，並注意命名方式，可以採用.m-layer .layerxxx、.m-list2 .list2xxx的形式來降低後代選擇器的汙染性。

命名時需要注意的點：

• 規則命名中，一律採用小寫加中劃線的方式，不允許使用大寫字母或 _
• 命名避免使用中文拼音，應該採用更簡明有語義的英文單詞進行組合
• 命名注意縮寫，但是不能盲目縮寫，具體請參見常用的CSS命名規則
• 不允許通過1、2、3等序號進行命名
• 避免class與id重名
• id用於標識模組或頁面的某一個父容器區域，名稱必須唯一，不要隨意新建id
• class用於標識某一個型別的物件，命名必須言簡意賅。
• 儘可能提高程式碼模組的複用，樣式儘量用組合的方式
• 規則名稱中不應該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關的資訊。應該用意義命名，而不是樣式顯示結果命名。
• 屬性的值一定要用雙引號("")括起來，且一定要有值如class="divcss5",id="divcss5"
• 每個標籤都要有開始和結束，且要有正確的層次，排版有規律工整
• 空元素要有結束的tag或於開始的tag後加上"/"
• 表現與結構完全分離，程式碼中不涉及任何的表現元素，如style、font、bgColor、border等
• <h1>到<h5>的定義，應遵循從大到小的原則，體現文件的結構，並有利於搜尋引擎的查詢。
• 給每一個表格和表單加上一個唯一的、結構標記id
• 給圖片加上alt標籤
• 儘量使用英文命名原則
• 儘量不縮寫，除非一看就明白的單詞

1．檔案命名規範

　　全域性樣式：global.css；
　　框架佈局：layout.css；
　　字型樣式：font.css；
　　連結樣式：link.css；
　　列印樣式：print.css；

　　主要的 master.css
　　模組 module.css
　　基本共用 base.css
　　主題 themes.css
　　專欄 columns.css
　　表單 forms.css
　　補丁 mend.css

2．常用類/ID命名規範

(1) 頁面結構

• 容器: container
• 頁頭：header
• 內容：content/container
• 頁面主體：main
• 頁尾：footer
• 導航：nav
• 側欄：sidebar
• 欄目：column
• 頁面外圍控制整體佈局寬度：wrapper
• 左右中：left right center

(2) 導航

• 導航：nav
• 主導航：mainbav
• 子導航：subnav
• 頂導航：topnav
• 邊導航：sidebar
• 左導航：leftsidebar
• 右導航：rightsidebar
• 選單：menu
• 子選單：submenu
• 標題: title
• 摘要: summary

(3) 功能

• 標誌：logo
• 廣告：banner
• 登陸：login
• 登入條：loginbar
• 註冊：regsiter
• 搜尋：search
• 搜尋輸入框：searchInput
• 搜尋輸出和搜尋結果相似:search_output
• 搜尋條:searchBar
• 搜尋結果:search_results
• 功能區：shop
• 標題：title
• 加入：joinus
• 合作伙伴：partner
• 狀態：status
• 按鈕：btn
• 滾動：scroll
• 標籤頁：tab
• 文章列表：list
• 提示資訊：msg
• 當前的: current
• 小技巧：tips
• 圖示: icon
• 箭頭:arr/arrow
• 註釋：note
• 指南：guild
• 服務：service
• 熱點：hot
• 新聞：news
• 商標:branding
• 下載：download
• 投票：vote
• 合作伙伴：partner
• 友情連結：link
• 版權：copyright
• 信譽：siteinfoCredits
• 法律宣告：siteinfoLegal
• 網站資訊：siteinfo
• 首頁:homepage
• 二級頁面子頁面:subpage
• 工具條:#tool, #toolbar
• 下拉:drop
• 下拉選單:dorpmenu
• 產品:products
• 產品價格: products_prices
• 產品描述: products_description
• 產品評論：products_review
• 編輯評論：editor_review
• 最新產品:news_release
• 生產商:publisher
• 縮圖:screenshot
• 常見問題:faqs
• 關鍵詞:keyword
• 部落格:blog
• 論壇:.forum

3、常用class的命名：
(1) 顏色:使用顏色的名稱或者16進位制程式碼，如

• .red { color: red; }
• .f60 { color: #f60; }
• .ff8600 { color: #ff8600; }

(2) 字型大小,直接使用”font+字型大小”作為名稱，如

• .font12px { font-size: 12px; }
• .font9pt {font-size: 9pt; }

(3) 對齊樣式,使用對齊目標的英文名稱，如

• .left { float:left; }
• .bottom { float:bottom; }

(4) 標題欄樣式,使用”類別+功能”的方式命名，如

• .barnews { }
• .barproduct { }

四、書寫規範
1、排版規範
(1) 使用4個空格，而不使用tab或者混用空格+tab作為縮排；
(2) 規則可以寫成單行，或者多行，但是整個檔案內的規則排版必須統一；
單行形式書寫風格的排版約束：

• 如果是在html中寫內聯的css，則必須寫成單行；
• 每一條規則的大括號 { 前後加空格 ；
• 每一條規則結束的大括號 } 前加空格；
• 屬性名冒號之前不加空格，冒號之後加空格；
• 每一個屬性值後必須新增分號; 並且分號後空格；
• 多個selector共用一個樣式集，則多個selector必須寫成多行形式 ；

多行形式書寫風格的排版約束：

• 每一條規則的大括號 { 前新增空格；
• 多個selector共用一個樣式集，則多個selector必須寫成多行形式；
• 每一條規則結束的大括號 } 必須與規則選擇器的第一個字元對齊；
• 屬性名冒號之前不加空格，冒號之後加空格；
• 屬性值之後新增分號；

2、屬性編寫順序

• 顯示屬性：display/list-style/position/float/clear …
• 自身屬性（盒模型）：width/height/margin/padding/border
• 背景：background
• 行高：line-height
• 文字屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
• 其他：cursor/z-index/zoom/overflow
• CSS3屬性：transform/transition/animation/box-shadow/border-radius
• 如果使用CSS3的屬性，如果有必要加入瀏覽器字首，則按照 -webkit- / -moz- / -ms- / -o- / std的順序進行新增，標準屬性寫在最後。
• 連結的樣式請嚴格按照如下順序新增： a:link -> a:visited -> a:hover -> a:active

3、規則書寫規範

• 使用單引號，不允許使用雙引號;
• 每個宣告結束都應該帶一個分號，不管是不是最後一個宣告;
• 除16進位制顏色和字型設定外，CSS檔案中的所有的程式碼都應該小寫;
• 除了重置瀏覽器預設樣式外，禁止直接為html tag新增css樣式設定;
• 每一條規則應該確保選擇器唯一，禁止直接為全域性.nav/.header/.body等類設定屬性;

4、程式碼效能優化

• 合併margin、padding、border的-left/-top/-right/-bottom的設定，儘量使用短名稱。
• 選擇器應該在滿足功能的基礎上儘量簡短，減少選擇器巢狀，查詢消耗。但是一定要避免覆蓋全域性樣式設定。
• 注意選擇器的效能，不要使用低效能的選擇器。
• 禁止在css中使用*選擇符。
• 除非必須，否則，一般有class或id的，不需要再寫上元素對應的tag。
• 0後面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px。
• 如果是16進製表示顏色，則顏色取值應該大寫。
• 如果可以，顏色儘量用三位字元表示，例如#AABBCC寫成#ABC 。
• 如果沒有邊框時，不要寫成border:0，應該寫成border:none 。
• 儘量避免使用AlphaImageLoader 。
• 在保持程式碼解耦的前提下，儘量合併重複的樣式。
• background、font等可以縮寫的屬性，儘量使用縮寫形式 。

5、CSS Hack的使用
請不用動不動就使用瀏覽器檢測和CSS Hacks，先試試別的解決方法吧！考慮到程式碼高效率和易管理，雖然這兩種方法能快速解決瀏覽器解析差異，但應被視為最後的手段。在長期的專案中，允許使用hack只會帶來更多的hack，你越是使用它，你越是會依賴它！
推薦使用下面的：

因為不同瀏覽器對W3C標準的支援不一樣，各個瀏覽器對於頁面的解釋呈視也不盡相同，比如IE在很

多情況下就與FF存在3px的差距，對於這些差異性，就需要利用css 的hack來進行調整，當然在沒有必要的

情況下，最好不要寫hack來進行調整，避免因為hack而導致頁面出現問題。

　　1、 IE6、IE7、Firefox之間的相容寫法：

　　寫法一：

　　IE都能識別*;標準瀏覽器(如FF)不能識別*；
　　IE6能識別*，但不能識別 !important,
　　IE7能識別*，也能識別!important;
　　FF不能識別*，但能識別!important;
　　根據上述表達，同一類/ID下的CSS 　hack可寫為：
　　.searchInput {
　　/*三者皆可*/
　　* /*僅IE7*/
　　*background-color:#999; /*僅IE6及IE6以下*/
　　}
　　一般三者的書寫順序為：FF、IE7、IE6.

　　寫法二：

　　IE6可識別“_”，而IE7及FF皆不能識別，所以當只針對IE6與IE7及FF之間的區別時，可這樣書寫：
　　.searchInput {
　　/*通用*/
　　_background-color:#666;/*僅IE6可識別*/
　　}

　　寫法三：

　　*+html 與 *html 是IE特有的標籤, Firefox 暫不支援。
　　.searchInput {}
　　*html .searchInput {background-color:#666;}/*僅IE6*/
　　*+html .searchInput {background-color:#555;}/*僅IE7*/

　　遮蔽IE瀏覽器：

　　select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器獨有的。

　　*:lang(zh) select {font:12px !important;} /*FF的專用*/
　　select:empty {font:12px !important;} /*safari可見*/

　　IE6可識別：

　　這裡主要是通過CSS註釋分開一個屬性與值，註釋在冒號前。

　　select { display /*IE6不識別*/:none;}

　　IE的if條件hack寫法：

　　所有的IE可識別：

　　<!–[if IE]> Only IE <![end if]–>
　　只有IE5.0可以識別:
　　<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
　　IE5.0包換IE5.5都可以識別:
　　<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
　　僅IE6可識別:
　　<!–[if lt IE 6]> Only IE 6- <![end if]–>
　　IE6以及IE6以下的IE5.x都可識別:
　　<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
　　僅IE7可識別:
　　<!–[if lte IE 7]> Only IE 7/- <![end if]–>

　　2、清除浮動：

　　在Firefox中，當子級都為浮動時，那麼父級的高度就無法完全的包住整個子級，那麼這時用這個清除

浮動的HACK來對父級做一次定義，那麼就可以解決這個問題。

　　select:after {
　　content:”.”;
　　display:block;
　　height:0;
　　clear:both;
　　visibility:hidden;
　　}

6、字型規則

• 為了防止檔案合併及編碼轉換時造成問題，建議將樣式中文字型名字改成對應的英文名字，如：黑體(SimHei) 宋體(SimSun) 微軟雅黑 (Microsoft Yahei，幾個單詞中間有空格組成的必須加引號)
• 字型粗細採用具體數值，粗體bold寫為700，正常normal寫為400
• font-size必須以px或pt為單位，推薦用px（注：pt為列印版字型大小設定），不允許使用xx-small/x-small/small/medium/large/x-large/xx-large等值
• 為了對font-family取值進行統一，更好的支援各個作業系統上各個瀏覽器的相容性，font-family不允許在業務程式碼中隨意設定

• 為保證不同瀏覽器上字號保持一致，字號用點數pt和畫素px來定義。

  （注：中文宋體的9pt和11pt和中文宋體12px和14.7px 這是經過優化的字號建議考慮，另外黑體字或

  者宋體字加粗時，建議選用11pt和14.7px 的字號比較合適。）

• 禁止在頁面中出現 <font size=?> 標記，需要對字型設計時可使用標籤的style屬性或直接在樣式表中實現。

7、選擇DOCTYPE

XHTML 1.0 提供了三種DTD宣告可供選擇：

　　過渡的(Transitional):要求非常寬鬆的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫

法)。完整程式碼如下：

　　<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

　　嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如<br>。完整程式碼如下：

　　<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

　　框架的(Frameset):專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要採用這種

DTD。完整程式碼如下：

　　<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

　　理想情況當然是嚴格的DTD，但對於我們大多數剛接觸web標準的設計師來說，過渡的DTD(XHTML

1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現

層的標識、元素和屬性，也比較容易通過W3C的程式碼校驗。

　　網頁必須呼叫w3c規範

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">

(解釋: DTD是詞彙表, CSS是資料的表現形式)

8、指定語言及字符集

為文件指定語言：

　　<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

　　為了被瀏覽器正確解釋和通過W3C程式碼校驗，所有的XHTML文件都必須宣告它們所使用的編碼語言；

如：
　　常用的語言定義：

　　<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
　　標準的XML文件語言定義：
　　<?xml version=”1.0″ encoding=” utf-8″?>
　　針對老版本的瀏覽器的語言定義：
　　<meta http-equiv=”Content-Language” content=” utf-8″ />
　　為提高字符集，建議採用“utf-8”。

(解釋: 如果網頁格式是utf-8 ,最簡單的方法就是在寫樣式表之前將這個css檔案用記事本開啟,然後另存為utf-8格式。

9、呼叫方法

方法1: <link rel="stylesheet" rev="stylesheet" href="css/52css_page.css" type="text/css" media="all" />

每個頁面呼叫全域性css和這個頁面用單獨用到的css

說明：（1）rel="stylesheet"和 rev="stylesheet" 為設定或獲取物件和連結目的的關係。用來告訴瀏覽器

你link進來的是個樣式表文件，（只寫一個就可以了,由於目前的CSS還不能抓取rel與rev的屬

性值，所以沒有辦法給不同關係的連結提供不同的樣式，所以現在rel與rev只是用來使得網頁的

語義性更為完善。）
（2）media="all" 所有媒體型別的樣式;media="screen"設定顯示器的樣式;media=" print"設定列印的樣式。

方法2: <link rel="stylesheet" rev="stylesheet" href="css/common.css" type="text/css" media="all" />

將整個專案的css 都先用common.css引用,這樣每個頁面只需呼叫common.css即可

(解釋: common.css 寫法 : @import url("style.css"); @import url("header.css");依次排列。

注:@import引用的CSS會等到頁面全部被下載完再被載入,速度相對會較慢。)

10、表格

建議：用百分比控制表格，並利用css的從屬關係控制表格

解釋：這裡定義一個樣式為div ，控制這個區域的表格為

.div table{width:100%; border-collapse:collapse;}

.div td{ height:20px; text-align:center;border:solid #000000 1px;}

11、空格

a) 不要在網頁中連續出現多於一個的也儘量少使用全形空格（英文字符集下，全形空格會變成亂碼）。

b) 轉意符號&nbsp，也要儘量少使用，火狐和IE效果不一樣

（解決：空白應該儘量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。）

12、縮排

排版中遇到需要進行首行縮排的時候，處理做法是在樣式表中定義 p { text-indent: 2em; } 然後給每一段加上 <p> 標記。注意，不要省略 </p> 結束標記 。

13、行距

行距建議用百分比來定義，通常為120%或150%

14、瀏覽器相容

製作的程式碼應對以下瀏覽器相容：

1.IE6

2.IE7

3.firefox2.0

在不同的瀏覽器中介面顯示一致，不能出現錯位及效果不一的結果。

15、目錄命名

在網站根目錄中開設images、common 、temp 三個子目錄，根據需要再開設media 子目錄。

1.images目錄中放不同欄目的頁面都要用到的公共圖片，例如公司的標誌、banner 條、選單、按鈕等等，可以根據需要開設子目錄；

2.common 子目錄中放css、js,、include 等公共檔案；

3.temp 子目錄放演示內容和樣例，比如車型演示圖片等等；(因temp檔案過多，建議以時間為名稱開設目錄，將客戶陸續提供的資料歸類整理。)

4.media 子目錄中放flash, avi, quick time 等多媒體檔案。

建議: “media”子目錄放在“images” 子目錄方便CDN加速。

16、滑鼠手勢

在XHTML標準中，hand只被IE識別，當需要將滑鼠手勢轉換為“手形”時，則將“hand”換為“pointer”，

即“cursor:pointer;”

17、基本全域性樣式

style.css中的內容

*{ margin:0; padding:0;}

body{ font-family:"宋體",arial; font-size:12px; background:#fff; color:#000; }

img,a img{ border:0px;}

a img{ vertical-align:middle;}

div,form,img,ul,li,dl,dt,dd{padding:0px; margin:0px; }

td,p,div,li,select,input,textarea{font-family:"宋體";font-size:12px;}

td,p,div,li,input,textarea {word-break:break-all;}

select,input{vertical-align:middle;}

table,tr,td,th{ font-size:12px;}

ol,li{list-style-type:none;}

ul,li{list-style-type:none;}

h1,h2,h3,h4,h5,h6{ padding:0px; margin:0px;}

.css2007 { color: #333; }

* html .css2007 { color: #00ffff; }

*+html .css2007 { color: #999; }

a:link{ color:#000000; text-decoration: none;}

a:visited{color:#000000; text-decoration: none;}

a:hover{color:#ff0000; text-decoration: underline;}

a:active{ color:#999999; text-decoration: none;}

.clear { clear:both;}

.hidden { display: none;}

.nobreak {white-space:nowrap;}

.alpha {filter:alpha(opacity=30); -moz-opacity:0.3;}

.bgalpha {background:transparent;}

五、測試規範
1、瞭解瀏覽器特效支援
為了頁面效能考慮，如果瀏覽器不支援CSS3相關屬性的，則該瀏覽器的某些特效將不再支援，屬性的支援情況如下表所示（Y為支援，N為不支援）：

2、 設定瀏覽器支援標準

• A級－互動和視覺完全符全設計的要求
• B級－視覺上允許有所差異，但不破壞頁面的整體效果
• C級－可忽略設計上的細節，但不防礙使用