CSS必知必會集錦（二）：CSS工作原理

李鬆峰發表於2012-11-20
CSS

編者注：本集錦摘編自圖靈新書《CSS設計師指南（第3版）》各章的“側邊欄”，是作者從相關主題中提煉出來的短小精悍的提示和法則。其中，既包含業界公認的CSS最佳實踐，又不乏作者獨到的一家之言，還有很多有價值的參考資料。理解這些CSS知識點，對夯實基礎，開闊視野是至關重要的。

這個HTML5模板以及本書所有程式碼示例，都可以到這裡下載：http://www.stylinwithcss.com。

為文件新增樣式的三種方法

有三種方法可以把CSS新增到網頁中，分別是寫在元素標籤裡（也叫行內樣式）、寫在<style>標籤裡（也叫嵌入樣式）和寫在單獨的CSS樣式表中（也叫連結樣式）。

行內樣式

行內樣式是寫在特定HTML標籤的style屬性裡的，比如：

<p>This paragraph simply takes on the browser's default paragraph style.</p>
<p style="font-size: 12px; font-weight:bold; font-style:italic; color:red;">By adding inline CSS styling to this paragraph, you override the default styles.</p>

行內樣式的作用範圍非常有限。行內樣式只能影響它所在的標籤，而且總會覆蓋嵌入樣式和連結樣式。

嵌入樣式

嵌入的CSS樣式是放在HTML文件的head元素中的，比如：

<head>
    <!-- 其他head元素（如meta、title）放在這裡 -->
    <style type="text/css">
        h1 {font-size:16px;}
        p {color:blue;}
    </style>
</head>

嵌入樣式的應用範圍僅限於當前頁面。頁面樣式會覆蓋外部樣式表中的樣式，但會被行內樣式覆蓋。像本書前面例子中那樣使用嵌入方式為某個元件（比如選單）設計樣式是很方便的，因為HTML和CSS同在一頁，可以互相參照。但是，等到CSS樣式設計完畢，元件功能齊備之後，還是應該把相應的樣式轉移到外部樣式表，以便其他頁面也能共用相同的樣式。

連結樣式

在建立包含多個頁面的網站時，需要把樣式集中在一個單獨的檔案裡，這個檔案就叫樣式表。樣式表其實就是一個副檔名為.css的文字檔案。可以在任意多個HTML頁面中連結同一個樣式表檔案，每個頁面中只需加入類似下面的這一行程式碼即可：

<link href="styles.css" rel="stylesheet" type="text/css" />

連結樣式的作用範圍可以是整個網站。只要使用<link>標籤把樣式錶連結到每個頁面，相應的頁面就可以使用其中的樣式。隨後，只要修改了樣式表中的樣式，改動就會在所有被選中的元素上體現出來，無論這個元素在哪個頁面裡。這樣，既可以做到全站頁面外觀統一，又便於整站樣式更新。

除了以上三種為頁面新增樣式的方法，還有一種在樣式表中連結其他樣式表的方法，那就應用@import指令（是一種at規則）：

@import url(css/styles2.css)

要注意的是，@import指令必須出現在樣式表中其他樣式之前，否則@import引用的樣式表不會被載入。

對於寫在樣式表裡的樣式，就不需要<style>標籤了。如果你在樣式表裡加上這個標籤，樣式表中的樣式就不會被瀏覽器載入了。

萬萬牢記，上下文選擇符以空格作為分隔符，而分組選擇符則以逗號作為分隔符，不要弄混。

用Shift+1鍵左側的鍵輸入字元～（波浪號）。

color屬性設定的是前景色。前景色既影響文字也影響邊框，但人們通常只用它設定文字顏色。

可以給id和class屬性設定任何值，但不能以數字或特殊符號開頭。

注意，類選擇符前面是點（.），緊跟著類名，兩者之間沒有空格。

用於頁內導航的ID

ID也可以用在頁內導航連結中。下面就是一個連結，其目標是同一頁的另一個位置。

<a href="#bio">Biography</a>

看到href屬性值開頭的#了嗎？它表示這個連結的目標在當前頁面中，因而不會觸發瀏覽器載入頁面（如果沒有#，瀏覽器就會嘗試載入bio目錄下的預設頁面了）。

與CSS選擇符裡相同 #ID名語法，可以把連結導航到同一頁面中的目標ID。在這個頁面的下方，應該有對應的目標元素。

<h3 id="bio">Biography</h3>
<p>I was born when I was very young…</p>

同樣要注意，作為目標的ID值前面是沒有#的，就是一個普通的ID值。

使用者單擊前面的連結時，頁面會向下滾動到ID值為bio的h3元素的位置。如果連結的href屬性裡只有一個#，那麼點選該連結會返回頁面頂部。

<a href="#">Back to Top</a>

換句話說，要寫一個“返回頂部”連結，根本不需要ID為#的目標元素。

另外，如果你暫時不知道某個href應該放什麼URL，也可以用#作為佔位符，但不能把該屬性留空。因為href屬性值為空的連結的行為跟正常連結不一樣。這樣，團隊中的其他人將來可以用中間層（比如PHP）變數替換#，以便動態接收來自資料庫的URL。

也可以使用ID把JavaScript與某個標籤關聯起來（比如，當使用者滑鼠移動到一個連結上面時，執行啟用動畫的指令碼）。ID值的唯一性對JavaScript尤其重要，否則就會導致JavaScript行為異常。

不要亂用類

要避免Web開發專家Jeffrey Zeldman說的“類氾濫——標記中的麻疹”出現。什麼意思呢？就是說你不要像使用ID一樣，每個類都指定一個不同的類名，然後再為每個類編寫規則。如果你確實有這種隨意使用類的習慣，那說明你可能像大多數對CSS充滿激情的初學者一樣，還不瞭解繼承和上下文選擇符的作用。於是，你可能會給每個標籤都重複寫同樣的樣式（比如為頁面中很多標籤分別指定相同的字型）。實際上，繼承和上下文選擇符能讓不同的標籤共享樣式，從而降低你需要編寫和維護的CSS量。

在HTML5中，屬性值的引號可加可不加，在此為了清楚起見，我們加了。

一個冒號（:）表示偽類，兩個冒號（::）表示CSS3新增的偽元素。儘管瀏覽器目前都支援對CSS 1和CSS 2的偽元素使用一個冒號，但希望你能習慣於用雙冒號代替單冒號，因為這些偽元素最終可能都會被淘汰掉。更多相關資訊，可以參見這裡：http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#pseudo-elements。

搜尋引擎不會取得偽元素的資訊（因為它在標記中並不存在）。因此，不要通過偽元素新增你想讓搜尋引擎索引的重要內容。

要了解有關層疊的更多資訊，請參考這個連結：http://www.w3.org/TR/CSS2/cascade.html。

大多數十六進位制顏色值不仔細分析可不容易猜，比如#7ca9be是深藍綠色，我怎麼知道的？ 首先我們來看每一對rgb值中的第一個值，也就是7、a、b。藍色和綠色值相差無幾，而紅色值也沒有那麼深。有了這些資訊，就可以大致猜出這個顏色了，對，是藍綠色。

關於顏色的一些資料

  • http://colrd.com：Colrd是一個Pinterest風格的站點，其中有很多能啟發人創造力的圖片和照片，以及相應的調色盤。
  • http://kuler.com：Adobe Kuler的官方站點提供了數千種色樣、調色盤建立工具，以及其他人正在選用的時尚顏色。

相關文章