網(wǎng)頁(yè)設(shè)計(jì)中的生成內(nèi)容

  • 2019-05-28 13:42:21
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://supportcoffeeroasters.com

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

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

要理解如何影響列表標(biāo)志,以及如何定制有序列表(或任何元素!)的計(jì)數(shù),必須先了解更基本的生成內(nèi)容。

插入生成內(nèi)容

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

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

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

注意,生成內(nèi)容和元素內(nèi)容之間沒(méi)有空格。這是因?yàn)榍袄衏ontent的值未包含空格??梢詫⑦@個(gè)聲明修改如下,確保生成內(nèi)容和實(shí)陳內(nèi)容之間有一個(gè)空格:

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

這個(gè)差別很小,但很重要。

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

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

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

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

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

假設(shè)希望進(jìn)一步設(shè)置這些鏈接的樣式,再增加一個(gè)邊框??梢岳靡韵碌诙€(gè)規(guī)則完成:

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

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

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

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

例如,考慮以下規(guī)則:

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

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

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

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

p {Color: green;}

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

如果希望生成文本是紫色,只需一個(gè)簡(jiǎn)單的聲明:

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

當(dāng)然,這種值繼承只適用于可繼承的屬性。特別指出這一點(diǎn)是因?yàn)檫@會(huì)影響達(dá)到某些效果的方式。請(qǐng)考慮以下規(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)容(作為塊級(jí)內(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)容的下外邊距也保留,不過(guò)由于生成內(nèi)容現(xiàn)在是行內(nèi)內(nèi)容,而行內(nèi)元素的外邊距不影響行高,所以視覺(jué)上外邊距不起作用。

當(dāng)前文章標(biāo)題:網(wǎng)頁(yè)設(shè)計(jì)中的生成內(nèi)容

當(dāng)前URL:http://supportcoffeeroasters.com/news/wzzz/3032.html

上一篇:網(wǎng)頁(yè)設(shè)計(jì)中的列表設(shè)計(jì)

下一篇:網(wǎng)頁(yè)設(shè)計(jì)中的指定內(nèi)容

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))