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

Web的衰落

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

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

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

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

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

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

一片混亂

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

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

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

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

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

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

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

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

CSS作救星

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

豐富的樣式

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

<h1>Leaping Above The Water</h1>

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

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

如此而已?？梢钥吹剑肏TML能夠做到的，用CSS也能做到。不過(guò)，還不僅限于此：

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的背景上有一個(gè)只能水平重復(fù)的圖像，而且它有一個(gè)邊框，與文本之間至少間隔5個(gè)像素。還去除了元素底端的外邊距（空白）。這些工作是HTML做不到的，甚至連類(lèi)似的事情都辦不到，而這還只是CSS的冰山一角。

易于使用

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

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

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

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

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

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

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

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

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

h2 {color: purple;}

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

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

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

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

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

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

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

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

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

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

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

在多個(gè)頁(yè)面上使用樣式

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

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

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

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

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

層疊

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

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

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

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

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

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

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

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

縮減文件大小

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

為將來(lái)做準(zhǔn)備

前面提到過(guò)，HTML是一種結(jié)構(gòu)化語(yǔ)言，而CSS是它的補(bǔ)充：這是一種樣式語(yǔ)言。認(rèn)識(shí)到這一點(diǎn)，W3C（也就是討論并批準(zhǔn)Web標(biāo)準(zhǔn)的組織）開(kāi)始從HTML去除樣式元素。之所以這么做，是因?yàn)榭梢杂脴邮奖硖峁┠承〩TML元素目前提供的效果，既然如此，還有誰(shuí)需要使用這些HTML元素呢？

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

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

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

元素

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

替換和非替換元素

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

替換元素

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

<img src="howdy.gif"/>

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

非替換元素

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

元素顯示角色

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