• 使用選擇器來插入文字

css2中，使用before選擇器在元素前面插入內(nèi)容，使用after選擇器在元素后面插入內(nèi)容，在選擇器的content屬性中定義要插入的內(nèi)容。將content屬性值設(shè)定為none，然后在不需要插入內(nèi)容的元素中將class屬性值設(shè)定為這個給定的類名就可以了。另外，在CSS2.1中，除了none屬性值外，還未content屬性添加了一個normal屬性值，其作用與使用方法none屬性值的作用相同，并且使用方法也相同。從css2.1開始，值右當(dāng)使用before選擇與after選擇器的時候，normal屬性值的作用才與none屬性值的作用相同，都是不讓選擇器在個別元素的前面或后面插入內(nèi)容，但是none屬性值只能應(yīng)用在這兩個選擇器中，而normal屬性值還可以應(yīng)用在其他用來插入內(nèi)容的選擇器中，而在css2中，只有before選擇器與after選擇器能夠用來在元素的前面或后面插入內(nèi)容，所以在兩者的作用完全相同，在css3中，已經(jīng)追加了其他一些可以插入內(nèi)容的選擇的提案，針對這一類選擇器，就只能用normal屬性值了，而且normal屬性值的作用也會根據(jù)選擇器的不同而發(fā)生變化。

  •  插入圖像文件

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

h2:before{

   content:url(mark.png)

}<h2>你好</h2>

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

目前firefox、safari、opera瀏覽器都支持這種插入圖像文件的功能，在ie8中只支持插入文字的功能，不支持插入圖像文件的功能。

另外在css3的定義中還可以通過url屬性來插入音頻文件、視頻文件等其他格式的文件，但目前還沒有得到任何瀏覽器的支持。

  • 將alt屬性的值作為圖像的標(biāo)題來顯示

如果在content屬性中通過”attr(屬性名)”這種形式來指定attr屬性值，可以將某個屬性的屬性值顯示出來，例子：

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>attr屬性的使用示例</title>
    <style>
        img:after{
            content:attr(alt);
            display: block;
            text-align: center;
            margin-top: 5px;
        }
    </style></head><body><div>
  <p><img src="sky.jpg" alt="藍(lán)天白云"/></p></div></body></html>

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

  •  在多個標(biāo)題前加上連續(xù)編號

在content屬性中使用counter屬性值來針對多個項目追加連續(xù)編號，使用方法如下所示：

<元素>:before{

  content:counter(計數(shù)器名);

}

使用計數(shù)器來計算編號，計數(shù)器可以任意命名。

另外，還需要在元素的樣式中追加對元素的counter-increment屬性的指定，為了使用連續(xù)編號，需要將counter-increment屬性的屬性值設(shè)定為before選擇器或after選擇的counter屬性值中所指定的計數(shù)器名。代碼如下：

<元素>{

    Counter-increment:before選擇器或after選擇器中指定的計數(shù)器名}

 

例子：

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>對多個項目追加連續(xù)編號的示例</title>
    <style>
        h1:before {
            content:counter(mycounter);
        }
        h1{
            counter-increment: mycounter;
        }
    </style></head><body><div>
    <h1>大標(biāo)題</h1>
    <p>示例文字</p>
    <h1>大標(biāo)題</h1>
    <p>示例文字</p>
    <h1>大標(biāo)題</h1>
    <p>示例文字</p></div></body></html>

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

  • 在項目編號中追加文字

可以在插入的項目編號中加入文字，使項目編號變成類似”第1章”之類的帶文字的編號。例如：

h1:before{content:’第’counter(mycounter)’章’}

  •  指定編號的種類

用before選擇器或after選擇器的content屬性，不僅可以追加數(shù)字編號，還可以追加字母編號或羅馬數(shù)字編號。使用如下所示的方法指定編號種類。

content:counter(計數(shù)器名,編號種類)

可以使用list-style-type屬性的值來指定編號的種類，list-style-type為指定列表編號時所用的屬性。

  • 編號嵌套

使用嵌套編號如下：

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

h1{

  counter-increment:mycounter

  counter-reset:subcounter}

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

 

例如：

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>編號嵌套示例</title>
    <style>
        h1:before {
            content:counter(mycounter)'.';
        }
        h1{
            counter-increment: mycounter;
            counter-reset: subcounter;
        }
        h2:before{
            content: counter(subcounter)'.';
        }
        h2{
            counter-increment: subcounter;
            margin-left: 40px;
        }
    </style></head><body><h1>大標(biāo)題</h1><h2>中標(biāo)題</h2><h2>中標(biāo)題</h2><h2>中標(biāo)題</h2><h1>大標(biāo)題</h1><h2>中標(biāo)題</h2><h2>中標(biāo)題</h2><h2>中標(biāo)題</h2></body></html>

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

  • 中編號中嵌入大編號

可以將大編號嵌入在中編號中。例如：

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>編號多層嵌入的示例</title>
    <style>
        h1:before {
            content:counter(mycounter)'.';
        }
        h1{
            counter-increment: mycounter;
            counter-reset: subcounter;
        }
        h2:before{
            content: counter(mycounter)'-'counter(subcounter)'.';
        }
        h2{
            counter-increment: subcounter;
            counter-reset: subsubcounter;
            margin-left: 40px;
        }
        h3:before{
            content: counter(mycounter)'-'counter(subconter)'-'counter(subsubcounter)'.';
        }
        h3{
            counter-increment: subsubcounter;
            margin-left: 40px;
        }
    </style></head><body><h1>大標(biāo)題</h1><h2>中標(biāo)題</h2><h3>小標(biāo)題</h3><h3>小標(biāo)題</h3><h2>中標(biāo)題</h2><h3>小標(biāo)題</h3><h3>小標(biāo)題</h3><h1>大標(biāo)題</h1><h2>中標(biāo)題</h2><h3>小標(biāo)題</h3><h3>小標(biāo)題</h3><h2>中標(biāo)題</h2><h3>小標(biāo)題</h3><h3>小標(biāo)題</h3></body></html>

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

  • 在字符串兩邊添加嵌套文字符號

可以使用conten屬性的open-quote屬性值與close-quote屬性值在字符串兩邊添加諸如括號，單引號，雙引號之類的嵌套文字符號，open-quote屬性值用于添加開始的嵌套文字符號，close-quote屬性值用于添加結(jié)尾的嵌套文字符號。

例如：

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>添加嵌套文字符號的示例</title>
    <style>
        h1:before {
           content: open-quote;
        }
        h1:after{
            content: close-quote;
        }
      h1{
          quotes:"("")";
      }
    </style></head><body><h1>標(biāo)題</h1></body></html>


http://www.cnblogs.com/hetaojs/p/7048389.html