網(wǎng)站制作簡(jiǎn)史


層疊樣式表(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)部分文本,但不一定是將其置為斜體,這取決于用戶的瀏覽器和首選項(xiàng),可能只是改為粗體,或者仍然是正常文本,只不過(guò)有不同的顏色而巳。這就無(wú)法保證讀者看到的正是創(chuàng)作人員所創(chuàng)建的文檔。

迫于這些壓力,開(kāi)始出現(xiàn)諸如<FONT>和<BIG>之類的標(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之類的標(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)樗麄兿M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)大的搜索引擎允許用戶只搜索頁(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),稱為CSS。到了1996年,這已經(jīng)成為一個(gè)成熟的推薦草案(Recommendation),其地位與HTML同樣舉足輕重。下面來(lái)說(shuō)明這是為什么。

豐富的樣式

首先,與HTML相比,CSS支持更豐富的文檔外觀,其表現(xiàn)程度也遠(yuǎn)非HTML力所能及。CSS可以為任何元素的文本和背景設(shè)置顏色,允許在任何元素外圍創(chuàng)建邊框,同時(shí)能增大或減少元素外的空間,允許改變文本的大小寫、裝飾方式(如下劃線)、間隔,甚至可以確定是否顯示文本,還允許完成許多其他的效果。以頁(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做不到的,甚至連類似的事情都辦不到,而這還只是CSS的冰山一角。

易于使用

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

缺乏結(jié)構(gòu)性會(huì)降低可訪問(wèn)性。假設(shè)你是一個(gè)盲人,要依賴一個(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è)搜索引擎就是世界上最活躍的盲人用戶,有數(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è)箭頭。用戶可以決定哪些小節(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)編寫嵌套表和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元素。大功告成,你很滿意——不過(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;}

這看上去比寫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;}

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

層疊

還有呢!CSS還規(guī)定了沖突規(guī)則,這些規(guī)則統(tǒng)稱為層疊(cascade)。例如,還是考慮前面的情況,將一個(gè)樣式表導(dǎo)入到多個(gè)Web頁(yè)面。現(xiàn)在增加一組頁(yè)面,其中有些樣式是相同的,不過(guò)還包含一些專用于這些頁(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è)面看上去很專業(yè)。

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

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

讀者樣式表可以包含幾乎所有內(nèi)容:可以是一個(gè)指令,如果用戶視力不好,這個(gè)指令可以讓文字足夠大以便用戶閱讀,也可以是一些規(guī)則,能夠刪除圖像以便更快地閱讀和瀏覽,甚至可以是一些樣式,將用戶最喜歡的圖片放在每個(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í)間,另一方面又能大大提升讀者的滿意度。

為將來(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)確定其外觀。盡管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,也稱為盒),其中包含元素的內(nèi)容。

替換和非替換元素

盡管CSS依賴于元素,但并非所有元素都以同樣的方式創(chuàng)建。例如,圖像和段落就不是同類元素,span和div也不相同,在CSS中,元素通常有兩種形式:替換和非替換。這兩種類型將在第7章詳細(xì)討論,其中將介紹框模型(也稱盒模型)的具體內(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元素與之類似,取決于input元素的類型,要由一個(gè)單選鈕、復(fù)選框或文本輸入框替換。替換元素顯示時(shí)也生成框。

非替換元素

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

元素顯示角色

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