層疊樣式表（Cascading Style Sheets，CSS）的功能非常強大，可以影響一個或一組文檔的表現。顯然，如果不存在某種文檔，CSS基本上毫無用處，因為這樣一來它將沒有要表現的內容。當然，“文檔”的定義相當寬泛。例如，Mozilla和相關的瀏覽器就使用CSS來影響瀏覽器Chrome本身的表現。不過，如果沒有Chrome的內容——按鈕、地址欄輸入、對話框、窗口等等——也就沒有使用CSS（或其他任何表現信息）的必要。

Web的衰落

也許你還能大致記得，在網站制作早期（1990-1993）, HTML是一個很有限的語言。它幾乎完全由用于描述段落、超鏈接、列表和標題的結構化元素組成。我們可能認為表、框架或復雜標記等等內容是創建Web頁面必不可少的，可是那時在HTML中連與之稍有些相似的東西都沒有。HTML原本是要作為一種結構化標記語言，用于描述文檔的各個部分，而對于這些部分應當如何顯示則很少談及。這種語言并不關心外觀，它只是一種簡潔的小型標記機制。

接下來Mosaic出現了。

仿佛突然之間，在網上瀏覽時間超過10分鐘的人幾乎都認識到了萬維網的強大。從一個文檔跳到另一個文檔很容易，無非是把光標指向有特殊顏色的部分文本，甚至指向一個圖像，再點擊鼠標。更妙的是，文本和圖像可以同時顯示，只需要一個純文本編輯器就能創建頁面。這是免費而且開放的，確實很酷。

網站開始到處涌現。期刊網站、大學網站、公司網站等等應運而生。隨著網站數目的增加，人們越來越需要新的HTML元素，希望這些元素各自完成一個特定的功能。創作人員開始要求能夠將文本變為粗體或斜體。

而此時HTML卻不足以處理這樣一些需求。利用HTML可以聲明強調部分文本，但不一定是將其置為斜體，這取決于用戶的瀏覽器和首選項，可能只是改為粗體，或者仍然是正常文本，只不過有不同的顏色而巳。這就無法保證讀者看到的正是創作人員所創建的文檔。

迫于這些壓力，開始出現諸如<FONT>和<BIG>之類的標記元素。突然之間，原來描述結構的語言開始描述外在表現了。

一片混亂

幾年之后，這種隨便的做法所存在的問題開始暴露出來。例如，HTML 3.2和HTML 4.0的很大一部分都是關于表現問題。此時能夠通過font元素對文本設置顏色和大小，對文檔和表格應用背景色和圖像，使用table屬性（如cellspacing），并且還能讓文本閃爍，這些都是原先要求“有更多控制”的后果。

下面舉例說明這種混亂的具體情況，簡單地看一下幾乎所有的公司網站制作都用到的標記。這些網站中往往標記相當多，而真正有用的信息并不多，二者的差距大得驚人。更槽糕的是，在大多數網站中，標記幾乎完全由表和font元素組成，它們對于所要表現的內容不能傳達任何實際含義。從結構化的角度看，這些網頁比隨機的字母串強不了多少。

例如，來看頁面標題，如果創作人員使用了font元素而不是h1之類的標題元素：

<font size="+3" face="Helvetica" color="red">Page Title</font>

從結構上來講，font標記沒有任何含義。這會使文檔的可用性降低。例如，對于一個語音合成瀏覽器，font標記有什么意義呢？不過，如果網頁設計師使用標題元素而不是font元素，語音瀏覽器就可以使用某種語音樣式來讀相關文本。倘若使用font標記，這種語音瀏覽器就無法知道這個文本與其他文本有什么區別。

為什么網頁設計師這么不看重結構和含義呢？因為他們希望讀者看到的頁面正如他們設計的那樣。使用結構化HTML標記意味著要放棄對頁面外觀的很多控制，而結構化HTML 標記顯然不支持多年來已經深入人心的那些流行的頁面設計。不過還需要考慮上述方法存在的如下一些問題：

非結構化頁面使得建立內容索引極為困難。真正強大的搜索引擎允許用戶只搜索頁面標題，或者捜索頁面內的小節標題，或者只搜索段落文本，也可能只搜索那些標記為重要的段落。不過，要完成這樣一個任務，頁面內容必須包含在某種結構化標記中，而這正是大多數頁面所缺少的。例如，Google在索引頁面時就會注意標記結構，所以如果你的頁面是一個結構化頁面，被百度等搜索引擎捜中的機會就會增加。

必須承認，完全結構化的文檔有些太古板、太平常了?！耙话渍诎俪蟆?，就因為這么一個原因，盡管有幾百個理由要求使用結構化標記，但仍然不能阻擋HTML的使用，直到20世紀末它還如此流行，甚至到今天它還依然盛行。我們需要一種合適的方法，將結構化標記與豐富多彩的頁面表現結合起來。

CSS作救星

當然，HTML中充斥著的表現標記的問題并沒有被W3C（World Wide Web Consortiam，萬維網聯盟）忽視，他們開始尋找一種速效的解決方法。1995年，W3C開始發布一種正在進行的計劃（work-in-progress），稱為CSS。到了1996年，這已經成為一個成熟的推薦草案（Recommendation），其地位與HTML同樣舉足輕重。下面來說明這是為什么。

豐富的樣式

首先，與HTML相比，CSS支持更豐富的文檔外觀，其表現程度也遠非HTML力所能及。CSS可以為任何元素的文本和背景設置顏色，允許在任何元素外圍創建邊框，同時能增大或減少元素外的空間，允許改變文本的大小寫、裝飾方式（如下劃線）、間隔，甚至可以確定是否顯示文本，還允許完成許多其他的效果。以頁面上的第一個標題（即主標題）為例，這通常就是頁面本身的標題。以下是一個正確的標記：

<h1>Leaping Above The Water</h1>

現在，假設你希望這個標題是暗紅色，使用某種字體，采用斜體，而且有下劃線，還有一個黃色的背景。如果用HTML來達到上述目的，就必須把h1放在表中，而且還要有數十個其他的元素，如font和U。如果使用CSS，所需的則只是簡單的一條規則：

h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow;}

如此而已?？梢钥吹?，用HTML能夠做到的，用CSS也能做到。不過，還不僅限于此：

h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow url(titlebg.png) repeat-x; border: 1px solid red; margin-bottom: 0; padding: 5px;}

現在h1的背景上有一個只能水平重復的圖像，而且它有一個邊框，與文本之間至少間隔5個像素。還去除了元素底端的外邊距（空白）。這些工作是HTML做不到的，甚至連類似的事情都辦不到，而這還只是CSS的冰山一角。

易于使用

如果以上所述還不能說服你，下面的理由可能會讓你改變想法：樣式表能大大減少網站制作人員的工作量。

缺乏結構性會降低可訪問性。假設你是一個盲人，要依賴一個語音合成瀏覽器上網捜索。下面的兩種頁面你會選擇哪一個呢？是一個結構化頁面，使得你的瀏覽器可以只讀出小節標題，讓你選擇想聽哪一小節，還是一個無結構性的頁面，瀏覽器必須讀出所有內容，因為沒有提示來指出哪些是標題、哪些是段落、哪些是重要的內容。再來看百度，實際上這個搜索引擎就是世界上最活躍的盲人用戶，有數百萬的朋友在接受它的建議，了解在哪里網上沖浪和購物。

高級頁面表現只能應用于某種文檔結構。假設有這樣一個頁面，其中只顯示了小節標題，各標題旁分別有一個箭頭。用戶可以決定哪些小節標題對他來說需要深入了解，點擊相應的箭頭就能顯示出這一節的文本。

結構化標記更易于維護。你可能曾經花很長時間在別人（甚至你自己）的HTML中查找一個小錯誤，由于這個錯誤，讓你的頁面在某個瀏覽器中顯示得一片混亂，這種情況是不是屢屢出現？你是不是曾經花很長時間來編寫嵌套表和font元素，而這只是為了得到一個包含白色超鏈接的邊欄？為了正確地分隔一個標題和它后面的文本，你插入過多少換行元素？通過使用結構化標記，就能清理你的代碼，更容易地找到所要尋找的東西。

首先，樣式表將實現某些視覺效果的命令集中在一個方便的位置，而不是在文檔中分散得到處都是。舉例來說，假設你希望一個文檔中的所有h2標題都是紫色。若使用HTML，則要在每個標題中也加一個font標記，如下所示：

<h2><font color="purple">This is purple!</font></h2>

所有二級標題都要增加這個標記。如果文檔中有40個這樣的標題，就必須總共插入40個font元素，每個標題插入一個font！為了達到這樣小的一個效果，就要做這么多的工作。

假設你早有打算，已經插入了所有這些font元素。大功告成，你很滿意——不過，可能接下來你認為這些h2標題實際上應該是暗綠色而不是紫色（或者你的老板決定讓你這么做）。這樣一來，就必須再回過頭來逐個地調整這些font元素。當然，只要你的文檔中只是標題有紫色文本，就可以利用“查找-替換”來完成調整。但是如果文檔中還有其他元素也有紫色font，就不能使用“查找-替換”，因為這將影響那些元素（將把那些元素也改成暗綠色）。

更好的辦法是使用一條規則：

h2 {color: purple;}

這樣做不僅輸入起來更快，修改起來也更容易。如果確實要從紫色改為暗綠色。所要做的只是修改這一條規則。

再來看上一節談到的有豐富樣式的h1元素：

h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow;}

這看上去比寫HTML還要糟糕，不過請考慮這樣的情況：一個頁面上有12個看上去和h1一樣的h2元素。這12個h2元素需要多少標記呢？如果使用HTML，就需要非常多的標記。另一方面，如果用CSS，所要做的只是：

h1, h2 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow;}

現在這些樣式會同時應用到h1和h2元素，這里只多敲了3次鍵而已。

如果你想改變h1和h2元素的外觀，CSS的優勢則更為突出?？紤]一下，與對前面的樣式作如下修改相比，需要花多少時間才能修改h1和12個h2元素的HTML標記：

h1, h2 {color: navy; font: bold 2em Helvetica, sans-serif;

text-decoration: underline overline; background: silver;}

如果用秒表來記錄上述兩種方法所花的時間，我打賭使用CSS的網頁設計師肯定會讓使用HTML的人輸得啞口無言。

此外，大多數CSS規則都集中在文檔中的某一個位置。也可以將其分組為相關的樣式或單個元素分散到文檔中，但是把所有樣式都放在一個樣式表中的做法往往高效得多。這樣，在一個位置上就能創建（或修改）整個網頁文檔的外觀。

在多個頁面上使用樣式

不過請等等，還不只如此！不僅能把一個頁面的所有樣式信息集中到一個位置，還可以創建一個樣式表，然后把這個樣式表應用到多個頁面。這是通過以下過程實現的：將樣式表單獨保存為一個文檔，然后由要使用該文檔的頁面導入。通過使用這個功能，可以很快地為整個網站創建一致的外觀。為此只需將這個樣式表鏈接到網站上的所有文檔。在此之后，如果你想改變網站頁面的外觀，只編輯一個文件就夠了，所做的修改便會自動地傳播到整個服務器！考慮這樣一個網站，它的所有標題都是灰色，背景為白色。這種顏色設置是由一個樣式表得到的，其中指出：

h1, h2, h3, h4, h5, h6 {color: gray; background: white;}

現在假設這個網站有700個頁面，每個頁面都使用了這個要求標題為灰色的樣式表。在某個時刻，網站管理員決定標題應當是白色，而背景才是灰色。所以將樣式表編輯如下：

h1, h2, h3, h4, h5, h6 {color: white; background: gray;}

然后將樣式表保存到磁盤，修改就完成了。如果使用HTML，則要編輯700個頁面，每個標題都要包含在一個表中，還要有一個font標記，這與使用CSS的方法絕對無法相比，不是嗎？

層疊

還有呢！CSS還規定了沖突規則，這些規則統稱為層疊（cascade）。例如，還是考慮前面的情況，將一個樣式表導入到多個Web頁面?，F在增加一組頁面，其中有些樣式是相同的，不過還包含一些專用于這些頁面的特定規則?？梢粤硗鈩摻ㄒ粋€樣式表，將這個樣式表與先前的樣式表一起導入到這些頁面中，或者可以在需要特殊樣式的頁面中直接放入那些樣式。

例如，在700個原有頁面之外的某個頁面上，可能希望標題是黃色，背景是深藍色，而不是灰色背景上的白色標題。在該文檔中，可以插入以下規則：

h1, h2, h3, h4, h5, h6 {color: yellow; background: blue;}

由于層疊，這個規則會覆蓋先前導入的灰底白字標題規則。如果理解了層疊規則，并充分利用了這些規則，就能創建相當復雜的樣式表，這樣不僅很容易地修改，還會使你的頁面看上去很專業。

層疊并不僅限于網頁設計師使用。在網上沖浪的人（或讀者）還可以利用某些瀏覽器創建自己的樣式表（這稱為讀者樣式表，原因顯而易見），這些樣式表可以與創作人員創建的樣式表以及瀏覽器使用的樣式層疊。因此，如果讀者是一個色盲，就可以創建這樣一個樣式，使超鏈接突出顯示：

a:link, a:visited {color: white; background: black;}

讀者樣式表可以包含幾乎所有內容：可以是一個指令，如果用戶視力不好，這個指令可以讓文字足夠大以便用戶閱讀，也可以是一些規則，能夠刪除圖像以便更快地閱讀和瀏覽，甚至可以是一些樣式，將用戶最喜歡的圖片放在每個文檔的背景上（當然，不推薦這種做法，不過這種做法確實是可能的）。這樣就能讓讀者自己定制網上體驗，而且不必去掉網頁設計師的所有樣式。

由于提供了導入、層疊和豐富的效果，CSS對所有創作人員或讀者來說都是一個絕佳的工具。

縮減文件大小

除了視覺上的功能以及對創作人員和讀者都很有用之外，CSS還有一些很讓讀者喜歡的特性。它有助于盡可能地縮減文檔大小，以便加快下載。這是怎么做到的呢？前面已經提到，很多頁面都使用了表和font元素來得到漂亮的視覺效果。遺憾的是，這些方法都會創建額外的HTML標記，以至于增加文件大小。通過將視覺樣式信息分組放到集中的區域中，并使用一種相當簡潔的語法表示這些規則，就可以去除font元素和其他一些常用的標記。因此，CSS一方面可以大大減少下載時間，另一方面又能大大提升讀者的滿意度。

為將來做準備

前面提到過，HTML是一種結構化語言，而CSS是它的補充：這是一種樣式語言。認識到這一點，W3C（也就是討論并批準Web標準的組織）開始從HTML去除樣式元素。之所以這么做，是因為可以用樣式表提供某些HTML元素目前提供的效果，既然如此，還有誰需要使用這些HTML元素呢？

因此，XHTML規范中有很多已經不鼓勵使用的元素，也就是說，這些元素正逐步從語言中消失。最終，這些元素會被標志為廢棄，這說明不要求也不鼓勵瀏覽器支持這些元素。不鼓勵使用的元素包括<font>、<basefont>、<u>、<strike>、<s>和<center>。樣式表的出現使得已經不再需要這些元素。隨著時間的推移，還會有更多元素步入這個不鼓勵使用的行列。

不僅如此，HTML還有可能逐步被可擴展標記語言（Extensible Markup Language, XML）所取代。XML是一種比HTML更復雜的語言，不過它也更強大、更靈活。盡管如此，XML沒有任何提供聲明樣式元素（如<i>或<center>）的方法。相反，XML 文檔很可能要依賴于樣式表來確定其外觀。盡管XML使用的樣式表可以不是CSS，不過它很可能遵循CSS而且與之非常相似。因此，現在學習CSS對創作人員是很有好處的，等到HTML被XML取代時這種好處就會更顯著。

所以，重要的是首先要理解CSS和文檔結構之間有何關聯。使用CSS可能對文檔表現有深遠的影響，但是到底能做些什么，對此還是有一些限制。先來學習一些基本術語。

元素

元素（element）是文檔結構的基礎。在HTML中，最常用的元素很容易識別，如p、table、span、a和div。文檔中的每個元素都對文檔的表現起一定作用。在CSS中，至少在CSS2.1 中，這意味著每個元素生成一個框（box，也稱為盒），其中包含元素的內容。

替換和非替換元素

盡管CSS依賴于元素，但并非所有元素都以同樣的方式創建。例如，圖像和段落就不是同類元素，span和div也不相同，在CSS中，元素通常有兩種形式：替換和非替換。這兩種類型將在第7章詳細討論，其中將介紹框模型（也稱盒模型）的具體內容，但是這里還是先做一個簡要介紹。

替換元素

替換元素（replaced element）是指用來替換元素內容的部分并非由文檔內容直接表示。在XHTML中，我們最熟悉的替換元素例子就是img元素，它由文檔本身之外的一個圖像文件來替換。實際上，img沒有具體的內容，通過以下的簡單例子可以了解這一點：

<img src="howdy.gif"/>

這個標記片段不包含任何具體內容，只有一個元素名和一個屬性。除非將其指向一個外部內容（在這里，就是由src屬性指定的一個圖像），否則這個元素沒有任何意義。input元素與之類似，取決于input元素的類型，要由一個單選鈕、復選框或文本輸入框替換。替換元素顯示時也生成框。

非替換元素

大多數HTML和XHTML元素都是非替換元素（nonreplaced element）。這意味著，其內容由用戶代理（通常是一個瀏覽器）在元素本身生成的框中顯示。例如，<span>hi there</span>就是一個非替換元素，文本“hi there”將由用戶代理顯示，段落、標題、表單元格、列表和XHTML中的幾乎所有元素都是非替換元素。

元素顯示角色

除了替換和非替換元素，CSS2.1還使用另外兩種基本元素類型：塊級（block-level）元素和行內（inline-level）元素。如果創作人員以前用過HTML或XHTML標記，并了解它們在網頁瀏覽器中的顯示。