設置網(wǎng)頁(yè)設計中的首字母和第一行樣式

  • 2018-08-13 07:19:08
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

設置首字母樣式

第一個(gè)偽元素用于設置一個(gè)塊級元素首字母的樣式,而且僅對該首字母設置樣式:

p:first-letter {color: red;}

這個(gè)規則會(huì )把毎一段的第一個(gè)字母變成紅色?;蛘?,如果讓每個(gè)h2中第一個(gè)字母的大小是標題中其余字母大小的兩倍:

h2:first-letter {font-size: 200%;}

前面提到過(guò),這個(gè)規則會(huì )導致用戶(hù)代理對一個(gè)假想的元素作出響應,這個(gè)假想元素包含每個(gè)h2中的第一個(gè)字母??赡苋缦滤荆?/p>

<h2><h2:first-letter>T</h2:first-letter>his is an h2 element</h2>

:first-letter樣式只應用到上例所示假想元素的內容。這個(gè)<h2:first:-letter>元素并不出現在設計網(wǎng)頁(yè)的文檔源代碼中。相反,它是由用戶(hù)代理動(dòng)態(tài)構造的,用于向相應文本塊應用:first-letter樣式。換句話(huà)說(shuō),<h2:first-letter>是一個(gè)偽元素。要記住,不必增加任何新標記。這會(huì )由網(wǎng)頁(yè)瀏覽器完成。

設置第一行的樣式

類(lèi)似地,:first-line可以用來(lái)影響元素中第一個(gè)文本行。例如,可以讓一個(gè)文檔中第一段的第一行變成紫色:

p:first-line {color: purple;}

這個(gè)樣式應用于每一段所顯示的第一行文本。不論顯示區域多大或多小,都是如此。如果第一行只包含該段的5個(gè)詞,那么只有這5個(gè)詞會(huì )變成紫色。如果第一行包含了元素的前30個(gè)詞,那么所有這30個(gè)詞都會(huì )是紫色。

由于從“This”到“only”的文本都應當是紫色,所以網(wǎng)頁(yè)瀏覽器使用了一個(gè)假想標記,如下所示:

<p><p:first-line>This is a paragraph of text that has only</p: first-line>

one stylesheet applied to it. That style

causes the first line to be purple. No other…

如果第一行文本編輯為只包含這一段的前7個(gè)詞,那么假想的</p:first-line>會(huì )前移,出現在“that”后面。

:first-letter 和:first-line 的限制

在CSS2中,:firsti-letter和:first-line偽元素只能應用于標記或段落之類(lèi)的塊級元素,而不能應用于超鏈接等的行內元素。在CSS2.1中,:first-letter能應用到所有元素。不過(guò)能應用:first-line和:first-letter的CSS屬性還是有一些限制。表2-4顯示了這些限制。

設置之前和之后元素的樣式

假設想設置一種排版效果,在每個(gè)h2元素前加一對銀色中括號:

h2:before {content:color: silver;}

CSS2.1允許插入生成的內容,然后使用偽元素:before和:after直接設置樣式。圖 2-27給出了一個(gè)例子。

偽元素用于插入生成的內容,并設置其樣式。要在一個(gè)元素后面插入內容,可以使用偽元素:after??梢栽谖臋n的最后用一個(gè)適當的結束語(yǔ)結束:

body:after {content:" The End.";}

所生成的內容是一個(gè)單獨的主體,有關(guān)內容(包括:before和:after的更多信息)將在以后更全面地介紹。

小結

通過(guò)根據設計網(wǎng)頁(yè)中文檔的語(yǔ)言來(lái)使用選擇器,網(wǎng)頁(yè)設計師可以創(chuàng )建豐富的CSS規則。我們可以構建只應用于少數元素的簡(jiǎn)單規則,對大量類(lèi)似元素應用樣式也同樣簡(jiǎn)單。由于可以對選擇器和規則分組,這使得樣式表相當簡(jiǎn)潔,而且非常靈活,相應地可以縮小文件的大小,縮短下載時(shí)間。

網(wǎng)頁(yè)瀏覽器通常必須慎用選擇器,因為如果不能正確地解釋選擇器,會(huì )導致用戶(hù)代理根本無(wú)法使用CSS。另一方面,網(wǎng)頁(yè)設計師要正確地編寫(xiě)選擇器,這很關(guān)鍵,因為一旦有錯誤,用戶(hù)代理將不能按預想的那樣應用樣式。要想正確地理解選擇器以及如何組合選擇器,需要深入地掌握選擇器與文檔結構的關(guān)系,并了解繼承和層疊等機制在確定如何為元素設置樣式時(shí)有怎樣的作用。這正是以后要討論的內容。


當前文章標題:設置網(wǎng)頁(yè)設計中的首字母和第一行樣式

當前URL:http://amzcoolest.com/news/wzzz/first-letter-first-line-css.html

上一篇:做網(wǎng)頁(yè)設計中如何選擇第一個(gè)元素

下一篇:網(wǎng)頁(yè)的結構和重疊

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看