網頁設計中的生成內容

  • 2019-05-28 13:42:21
  • 閱讀次數:
  • 作者:盈嵐科技小編
  • 來源:http://www.thewannabehomesteader.net

CSS2和CSS2.1包含一個稱為生成內容(generated content)的新特性。這是指由瀏覽器創建的內容,而不是由標志或內容來表示。

網頁設計中,列表標志就是生成內容。在列表項的標記中,沒有任何部分直接表示這些標志,而且作為創作人員,你不必在文檔內容中寫上標志。瀏覽器會自動生成合適的標志。對于無序列表,標志是某種圓點,如空心圓、實心圓或方塊。對于有序列表,標志則是一個計數器,對每個后續列表項不斷增1。

要理解如何影響列表標志,以及如何定制有序列表(或任何元素?。┑挠嫈?,必須先了解更基本的生成內容。

插入生成內容

網頁設計時為了向文檔中插入生成內容,可以使用:before和:after偽元素。這些偽元素會根據content屬性把生成內容放在一個元素內容的前面或后面(content屬性見下一節的介紹)。

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

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

注意,生成內容和元素內容之間沒有空格。這是因為前例中content的值未包含空格??梢詫⑦@個聲明修改如下,確保生成內容和實陳內容之間有一個空格:

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

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

采用類似方式,還可以在指向PDF文檔的鏈接最后插入一個小圖標。為此,規則可能如下:

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

假設希望進一步設置這些鏈接的樣式,再增加一個邊框??梢岳靡韵碌诙€規則完成:

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

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

假設希望進一步設置這些鏈接的樣式,再增加一個邊框??梢岳靡韵碌诙€規則完成:

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

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

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

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

例如,考慮以下規則:

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

由于em是一個行內元素,生成內容不能是塊級內容。因此,值block重置為inline。不過,在下一個例子中,生成內容被置為塊級內容,因為目標元素就是塊級元素:

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

生成內容是網頁建設中有一個很有意思的方面,它由與之關聯的元素繼承值。因此,給定以下規則,生成文本將是綠色,與段落內容的顏色相同:

p {Color: green;}

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

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

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

當然,這種值繼承只適用于可繼承的屬性。特別指出這一點是因為這會影響達到某些效果的方式。請考慮以下規則:

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;}

生成內容(作為塊級內容)的下外邊距將元素的實際內容向下推了O.5em。不論怎樣講,此例中生成內容的效果就是把hi元素分成了兩部分:生成內容框和實際內容框。這是因為生成內容聲明為display: block。

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

當前文章標題:網頁設計中的生成內容

當前URL:http://www.thewannabehomesteader.net/news/wzzz/3032.html

上一篇:網頁設計中的列表設計

下一篇:網頁設計中的指定內容

網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
亚洲娇小与黑人巨大交_国产黑色丝袜视频在线观_国产精品1024在线观看_2019最新国产不卡a国内