最好看的小说排行,我欲封天txt下载,盗墓笔记小说全集

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

深入剖析CSS偽元素用法

本文向大家簡(jiǎn)單介紹一下CSS偽元素的用法，CSS偽元素用于將特殊的效果添加到某些選擇器，這里和大家分享一下first-line偽元素和first-letter偽元素的用法，以及CSS偽元素和CSS偽類(lèi)的聯(lián)系。

CSS偽元素

CSS偽元素用于將特殊的效果添加到某些選擇器。

CSS偽元素語(yǔ)法：

 
 
 
 
  
  
  
  選擇器:偽元素{屬性:值}

CSS類(lèi)也可以與偽元素配合使用：

 
 
 
 
  
  
  
  選擇器.類(lèi):偽元素{屬性:值}

:first-line偽元素

"first-line"偽元素用于向某個(gè)選擇器中的文字的首行添加特殊樣式：

 
 
 
 
  
  
  
  p{font-size:12pt}  
  
  
  
  p:first-line{color:#0000FF;font-variant:small-caps}  
  
  
  
   
  
  
  
  Sometextthatendsupontwoormorelines

在上面的例子中，瀏覽器顯示根據(jù)first-line偽元素格式化的第一行。瀏覽器是依靠瀏覽器窗口的尺寸來(lái)進(jìn)行分行的。

提示：CSS偽元素中first-line偽元素僅能被用于塊級(jí)元素。

提示：下面的屬性可以被應(yīng)用到first-line偽元素。

 
 
 
 
  
  
  
  font屬性  
  
  
  
   
  
  
  
  color屬性  
  
  
  
  background屬性  
  
  
  
  word-spacing  
  
  
  
  letter-spacing  
  
  
  
  text-decoration  
  
  
  
  vertical-align  
  
  
  
  text-transform  
  
  
  
  line-height  
  
  
  
  clear

:first-letter偽元素

CSS偽元素中first-letter偽元素用于向某個(gè)選擇器中的文本的首字母添加特殊的樣式：

 
 
 
 
  
  
  
  p{font-size:12pt}  
  
  
  
  p:first-letter{font-size:200%;float:left}  
  
  
  
   
  
  
  
  Thefirstwordsofanarticle.

輸出的效果類(lèi)似于：

 
 
 
 
  
  
  
  ___  
  
  
  
  |hefirst  
  
  
  
  |wordsofan

article.font屬性
color屬性
background屬性
margin屬性
padding屬性
border屬性
text-decoration
vertical-align(僅當(dāng)float為none時(shí))
text-transform
line-height
float
clear #p#

CSS偽元素和CSS類(lèi)

CSS偽元素可以與CSS類(lèi)配合使用：

 
 
 
 
  
  
  
  p.article:first-letter{color:#FF0000}  
  
  
  
  文章中的一個(gè)段落。

上面的例子會(huì)使所有class為article的段落的首字母變?yōu)榧t色。

多重CSS偽元素

多個(gè)偽元素可以配合在一起使用：

 
 
 
 
  
  
  
  p{font-size:12pt;}  
  
  
  
  p:first-letter{color:#FF0000;font-size:24pt;}  
  
  
  
  p:first-line{color:#0000FF;}  
  
  
  
  Thefirstwordsofanarticle

輸出的效果類(lèi)似于：

 
 
 
 
  
  
  
  __  
  
  
  
  |hefirst  
  
  
  
  |wordsofan

article.在上面的例子中，段落的首字母將是字號(hào)為24pt的紅色。首行的其余部分將會(huì)是藍(lán)色，而段落的其余部分會(huì)是默認(rèn)的顏色。

CSS2-:before偽元素

CSS偽元素中before偽元素可用于在某個(gè)元素之前插入某些內(nèi)容。

下面的樣式會(huì)在標(biāo)題之前播放音頻：

 
 
 
 
  
  
  
  h1:before  
  
  
  
  {  
  
  
  
  content:url(beep.wav)  
  
  
  
  }

CSS2-:after偽元素

CSS偽元素中after偽類(lèi)可用于在某個(gè)元素之后插入某些內(nèi)容。

下面的樣式會(huì)在標(biāo)題之后播放音頻：

 
 
 
 
  
  
  
  h1:after  
  
  
  
  {  
  
  
  
  content:url(beep.wav)  
  
  
  
  }

CSS偽元素

瀏覽器支持：IE:InternetExplorer,F:Firefox,N:Netscape。

W3C：“W3C”列的數(shù)字顯示出屬性背景由哪個(gè)CSS標(biāo)準(zhǔn)定義（CSS1還是CSS2）。

分享標(biāo)題：深入剖析CSS偽元素用法
網(wǎng)頁(yè)網(wǎng)址：http://fisionsoft.com.cn/article/dhppsds.html

新聞中心

其他資訊