CSS2和CSS2.1包含一個稱為生成內(nèi)容（generated content）的新特性。這是指由瀏覽器創(chuàng)建的內(nèi)容，而不是由標(biāo)志或內(nèi)容來表示。

在網(wǎng)頁設(shè)計中，列表標(biāo)志就是生成內(nèi)容。在列表項(xiàng)的標(biāo)記中，沒有任何部分直接表示這些標(biāo)志，而且作為創(chuàng)作人員，你不必在文檔內(nèi)容中寫上標(biāo)志。瀏覽器會自動生成合適的標(biāo)志。對于無序列表，標(biāo)志是某種圓點(diǎn)，如空心圓、實(shí)心圓或方塊。對于有序列表，標(biāo)志則是一個計數(shù)器，對每個后續(xù)列表項(xiàng)不斷增1。

要理解如何影響列表標(biāo)志，以及如何定制有序列表（或任何元素?。┑挠嫈?shù)，必須先了解更基本的生成內(nèi)容。

插入生成內(nèi)容

在網(wǎng)頁設(shè)計時為了向文檔中插入生成內(nèi)容，可以使用：before和：after偽元素。這些偽元素會根據(jù)content屬性把生成內(nèi)容放在一個元素內(nèi)容的前面或后面（content屬性見下一節(jié)的介紹）。

例如，你可能希望所有超鏈接前面增加前綴文本“(link)”加以標(biāo)志，從而在打印時更明顯。

a[href]:before (content:"(link)";}

注意，生成內(nèi)容和元素內(nèi)容之間沒有空格。這是因?yàn)榍袄衏ontent的值未包含空格。可以將這個聲明修改如下，確保生成內(nèi)容和實(shí)陳內(nèi)容之間有一個空格：

a[href]:before {content:"(link)";}

這個差別很小，但很重要。

采用類似方式，還可以在指向PDF文檔的鏈接最后插入一個小圖標(biāo)。為此，規(guī)則可能如下：

a.pdf-doc: after {content: url (pdf-doc-icon.gif)}

假設(shè)希望進(jìn)一步設(shè)置這些鏈接的樣式，再增加一個邊框。可以利用以下第二個規(guī)則完成：

a.pdf-doc {border: 1px solid gray;}

a.pdf-doc: after {content: url (pdf-doc-icon.gif)}

假設(shè)希望進(jìn)一步設(shè)置這些鏈接的樣式，再增加一個邊框。可以利用以下第二個規(guī)則完成：

a.pdf-doc {border: 1px solid gray;}

你可能認(rèn)為定位能解決問題，不過CSS2和CSS2.1明確地禁止浮動或定位:before和:after內(nèi)容，還禁止使用列表樣式屬性以及表屬性。另外還有以下限制：

如果：before或：after選擇器的主體是塊級元素，則display屬性只接受值none、inline、block和marker。其他值都處理為block。

如果:before或:after選擇器的主體是一個行內(nèi)元素，屬性display只能接受值none和inline。所有其他值都處理為inline.

例如，考慮以下規(guī)則：

em:after {content:"(!)"; display: block;}

由于em是一個行內(nèi)元素，生成內(nèi)容不能是塊級內(nèi)容。因此，值block重置為inline。不過，在下一個例子中，生成內(nèi)容被置為塊級內(nèi)容，因?yàn)槟繕?biāo)元素就是塊級元素：

h1:before (content:"New Section"; display: block; color: gray;}

生成內(nèi)容是網(wǎng)頁建設(shè)中有一個很有意思的方面，它由與之關(guān)聯(lián)的元素繼承值。因此，給定以下規(guī)則，生成文本將是綠色，與段落內(nèi)容的顏色相同：

p {Color: green;}

p:before {content:":::";}

如果希望生成文本是紫色，只需一個簡單的聲明：

p:before (content:":::"; color: purple;}

當(dāng)然，這種值繼承只適用于可繼承的屬性。特別指出這一點(diǎn)是因?yàn)檫@會影響達(dá)到某些效果的方式。請考慮以下規(guī)則：

h1 {border-top: 3px solid black; padding-top: 0.25em;}

h1:before (content:"New Section"; display: block; color: gray; border-bottom: 1px dotted black; margin-bottom: 0.5em;}

生成內(nèi)容（作為塊級內(nèi)容）的下外邊距將元素的實(shí)際內(nèi)容向下推了O.5em。不論怎樣講，此例中生成內(nèi)容的效果就是把hi元素分成了兩部分：生成內(nèi)容框和實(shí)際內(nèi)容框。這是因?yàn)樯蓛?nèi)容聲明為display: block。

注意邊框如何放置，還要注意上內(nèi)邊距仍保留。生成內(nèi)容的下外邊距也保留，不過由于生成內(nèi)容現(xiàn)在是行內(nèi)內(nèi)容，而行內(nèi)元素的外邊距不影響行高，所以視覺上外邊距不起作用。

名稱欄目：網(wǎng)頁設(shè)計中的生成內(nèi)容
鏈接分享：http://aaarwkj.com/news/169301.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)頁設(shè)計公司、標(biāo)簽優(yōu)化、微信小程序、營銷型網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)