CSS 進階篇

一。樣式優先級

越具體優先級越高
同優先級後者覆蓋前者
@import 級聯導入時，越早導入的優先級越低（常用於實現用戶自定義樣式，例如 CMS 提供的模版允許用戶自定義一部分樣式，這些樣式需要有最高優先級）
行內樣式 > #（id 選擇器） > ./:（類選擇器/偽類選擇器） > tag/::（標籤選擇器/偽元素選擇器）
有!important 聲明的樣式具有最高優先級（IE7+ 支持）

二。如何支持移動瀏覽器

SSR（小螢幕渲染）：一種瀏覽器特性，此類瀏覽器能夠自動優化頁面展現

缺點：用戶要有特定的瀏覽器（例如 Opera）才能看到效果，而且重渲染會降低訪問速度

優點：頁面設計者完全不用做任何改變

Reformat（編程重格式化）：用服務端技術對頁面做簡化，為移動端用戶生成一個「輕」頁面

缺點：訪問速度會降低，而且服務端並不能完美控制頁面內容

優點：訪問速度高於 SSR，且頁面設計者只需要做少許改變（為重格式化創造一個通用的 Reformat 方法，並應用於所有頁面）

Stylesheets「便攜式」樣式表：利用 media query（媒體查詢）構造響應式佈局

缺點：需要維護多套樣式表，而且不能控制頁面內容

優點：訪問速度快，且工作量不算太大

Mobile Specific Site（創建移動版站點）：為站點創建一個移動端專用的版本

缺點：費時費力，工作量大

優點：訪問速度最快，同時也可以自由控制頁面內容和樣式

三。消除盒子坍塌的方法

聲明固定高度

缺點：不具可擴展性，無法自適應內容

浮動所有元素

缺點：可讀性差，不易於維護

在盒子底部添加空的 block 元素，並對該元素應用 clear: both; 樣式

缺點：引入了冗餘元素

用 after 偽元素清除浮動
overflow: auto; width: 100%;

缺點：不能應用邊框及邊距，否則會出現水平滾動條

四。負邊距（margin: -100px;）的作用

主要用來解決佈局順序與文檔源順序的衝突，例如 HTML 中導航欄位於內容欄之後，而我們希望導航欄顯示在內容欄的左邊而不是右邊時，給導航欄設置負邊距即可。但因為負邊距難以理解，所以在不得不用時也要作以詳細註釋。

五.CSS 實現圖片預加載

用空的 span 標籤的 background-image 屬性攜帶圖片，以避免實時加載的延遲

六。常用的 logo 替換方式

一般 logo 都是圖片，但搜索引擎的爬蟲程序並不能識別 logo 的語義，為了 SEO 我們應該把 logo 和文字描述共同展現出來，例如<h1 style="background-image:url(...)">SiteName</h1>，但此時 logo 上面會顯示文字，解決方法有以下兩種：

對 h1 應用 padding-top: 100px; 樣式，其中 100px 是圖片的高度，這種方式更符合語義化設計
對 h1 應用 text-indent: -9999em; 樣式，這是一種更簡單的方式，但不符合語義化設計

七。用 link 與 style+ @import 導入樣式的區別

前者有更好的兼容性與支持性，例如可以提供 media="screen" 等篩選條件

八。樣式調試步驟

驗證標籤和樣式

是否存在未閉合的標籤，HTML 與 CSS 中的樣式名是否一致

讓樣式失效

是不是繼承來的樣式引發了錯誤，是不是更特殊的規則掩蓋了重要規則，哪些樣式規則沒有作用

讓 hack 失效

hack 有沒有正常工作，或者 hack 代碼中存在問題

剝離最小測試塊（盡量精確定位錯誤）

整個頁面不便於調試，試圖剝離最小測試塊單獨調試

特別注意：排查 CSS 錯誤最好刪改備份樣式文件，而不是註釋現有樣式，因為這樣做更「安全」

九.font（字體）相關

###1.字樣分類（一般 font 族）###

Serif（font-family:serif;）

特點：字體的寬度成比例，而且加修飾。成比例也就是說各個字母寬度不一致，M 最寬，i 最窄。修飾是指在筆畫起止部分有小修飾，提高了易讀性。包括 Time New Roman、Georgia、Garamond 等等

用途：通常用在大篇幅正文中或者很長的段落以及打印字體，不常用於標題和副標題

Sans Serif（font-family:sans-serif）

特點：寬度成比例，但沒有修飾，包括 Helvetica、Verdana、Arial、Univers 等等

用途：多用於標題和副標題

Monospace（font-family:monospace;）

特點：等距字體，可能有修飾。等距字體是說每個字母的寬度都是一樣的，包括 Courier、Monaco 等等

用途：主要用於指示性文本，例如代碼

Cursive（font-family:cursive;）

特點：手寫體（或草體），包括 Comic Sans、Zapf Chancery、Zapfino 等等

用途：可讀性不如第一個和第二個，一般不用來展示正文

Fantasy（font-family:fantasy;）

特點：主要起裝飾作用的字體，包括 Desdemona、Playbill、Herculanum 等等

用途：此類字體很少用於網絡，一般用來設計 logo 圖片

###2.關於 font-family 屬性的值###

若字體名含有空格或者其它有歧義的字符，則需要用引號包裹起來（單引號/雙引號都可以）。也可以有多個備選字體，字體名之間用逗號隔開。

###3.關於 font-weight###

盡量只用 bold 和 normal，而不要使用 100-900 的數值，因為某些字體可能並沒有 9 個級別的 font-weight（你並不能保證用戶看到的頁面一定是你設置的字體，很多瀏覽器支持用戶使用自定義字體）

###4.關於 font-size###

應該盡量使用 em 或者百分數，而且可以用 62.5%hack，即給 body 添加 font-size:62.5%; 樣式，因為大多數瀏覽器默認 1em=16px，62.5% 後 1em=10px 便於計算

不要直接用 px 設置 font-size 是因為 IE6-不允許用戶重新設置用 px 指定了 font-size 的字體

十.CSS 常識

把所有樣式表文件放在同一個文件夾。如 style/css
合併樣式表文件。用 @import 或者直接合併
類和 id 名稱應該堅持使用一種（或服從團隊約定）。例如 class_name、className、class-name 等等
單行格式多多行格式的應用：編輯版本用多行格式便於調試，發布版本用單行壓縮格式便於快速加載
CSS 屬性排序應該有一定的規則。為了避免重複，例如按字典需排列或者按其它規則排列
適當使用 CSS 縮略語，例如 border: 1px solid red; 等等。要把握適當的「度」，以免語法過於複雜，難以理解
用註釋給樣式分組。有一種不錯的格式：/*=group */，查找等號就可以找到所有分類（因為 CSS 規則中不可能出現等號）
添加元數據註釋。便於修改和管理，例如給樣式表文件開頭添加作者、日期等相關描述
可以用註釋在文件首聲明樣式中重複使用的色值、字體等屬性值
樣式表文件中的 CSS 規則應該有特定的順序。例如從一般到特殊、根據元素在頁面中的位置順序或者根據內容分區來排序，但需要注意的是第 2 種方法可能引發問題（規則可能被繼承/覆蓋）
使用 reset.css/initial.css 重置樣式。為了消除瀏覽器默認樣式之間的差異
可以構建樣式庫甚至實現自己的 CSS 框架。為了提高可複用度
自定義列表項符號應該用 li 的 background。而不是用 list-style-image，因為 IE6 中 list-style-image 並不是與 li 內容垂直對齊的，用背景圖片實現，自由度更大而且瀏覽器兼容性也更好
導入打印樣式表的語句應該在 head 內任何樣式導入/聲明部分之後。如果先聲明打印樣式，可能會忽略之後沒有聲明 media 屬性的樣式

參考資料：##

《Pro CSS Techniques》（中文譯名《CSS 實戰精粹》），翻譯不是特別好，但由於是 2008 年左右出版的書，對 IE6-的兼容調試有不錯的指導意義。