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

Web的衰落

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

接下來Mosaic出現(xiàn)了。

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

網(wǎng)站開始到處涌現(xiàn)。期刊網(wǎng)站、大學(xué)網(wǎng)站、公司網(wǎng)站等等應(yīng)運(yùn)而生。隨著網(wǎng)站數(shù)目的增加，人們越來越需要新的HTML元素，希望這些元素各自完成一個特定的功能。創(chuàng)作人員開始要求能夠?qū)⑽谋咀優(yōu)榇煮w或斜體。

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

迫于這些壓力，開始出現(xiàn)諸如<FONT>和<BIG>之類的標(biāo)記元素。突然之間，原來描述結(jié)構(gòu)的語言開始描述外在表現(xiàn)了。

一片混亂

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

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

例如，來看頁面標(biāo)題，如果創(chuàng)作人員使用了font元素而不是h1之類的標(biāo)題元素：

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

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

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

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

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

CSS作救星

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

豐富的樣式

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

<h1>Leaping Above The Water</h1>

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

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

如此而已?？梢钥吹剑肏TML能夠做到的，用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;}

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

易于使用

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

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

高級頁面表現(xiàn)只能應(yīng)用于某種文檔結(jié)構(gòu)。假設(shè)有這樣一個頁面，其中只顯示了小節(jié)標(biāo)題，各標(biāo)題旁分別有一個箭頭。用戶可以決定哪些小節(jié)標(biāo)題對他來說需要深入了解，點擊相應(yīng)的箭頭就能顯示出這一節(jié)的文本。

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

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

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

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

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

更好的辦法是使用一條規(guī)則：

h2 {color: purple;}

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

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

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

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

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

現(xiàn)在這些樣式會同時應(yīng)用到h1和h2元素，這里只多敲了3次鍵而已。

如果你想改變h1和h2元素的外觀，CSS的優(yōu)勢則更為突出。考慮一下，與對前面的樣式作如下修改相比，需要花多少時間才能修改h1和12個h2元素的HTML標(biāo)記：

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

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

如果用秒表來記錄上述兩種方法所花的時間，我打賭使用CSS的網(wǎng)頁設(shè)計師肯定會讓使用HTML的人輸?shù)脝】跓o言。

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

在多個頁面上使用樣式

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

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

現(xiàn)在假設(shè)這個網(wǎng)站有700個頁面，每個頁面都使用了這個要求標(biāo)題為灰色的樣式表。在某個時刻，網(wǎng)站管理員決定標(biāo)題應(yīng)當(dāng)是白色，而背景才是灰色。所以將樣式表編輯如下：

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

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

層疊

還有呢！CSS還規(guī)定了沖突規(guī)則，這些規(guī)則統(tǒng)稱為層疊（cascade）。例如，還是考慮前面的情況，將一個樣式表導(dǎo)入到多個Web頁面?，F(xiàn)在增加一組頁面，其中有些樣式是相同的，不過還包含一些專用于這些頁面的特定規(guī)則。可以另外創(chuàng)建一個樣式表，將這個樣式表與先前的樣式表一起導(dǎo)入到這些頁面中，或者可以在需要特殊樣式的頁面中直接放入那些樣式。

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

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

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

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

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

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

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

縮減文件大小

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

為將來做準(zhǔn)備

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

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

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

所以，重要的是首先要理解CSS和文檔結(jié)構(gòu)之間有何關(guān)聯(lián)。使用CSS可能對文檔表現(xiàn)有深遠(yuǎn)的影響，但是到底能做些什么，對此還是有一些限制。先來學(xué)習(xí)一些基本術(shù)語。

元素

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

替換和非替換元素

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

替換元素

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

<img src="howdy.gif"/>

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

非替換元素

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

元素顯示角色

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