DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS3.0實例教程:content屬性使用實例介紹
CSS3.0實例教程:content屬性使用實例介紹
編輯:CSS進階教程     

在過去我們可以通過後端服務器程序截取或JS截取文字後加入省略號即可。現在,我們的CSS3.0可以使用實現了!


content屬性:
  如果我們想往段落p標簽內部追加省略號只需要如下方式定義樣式即可:
  p:after{content:"...";}

  當然我們也可以追加任何文字:
  p:after{content:"前端開發網";}

  既然CSS3可以追加內容after,那麼CSS3也為我們提供了前置內容的方法before:
  p:before{content:"...";}

  如果我們使用標簽選擇器定義了所有的p,但是又有需求要求某一個p且ID為box的元素不准自動追加或前置內容,那麼我們就可以對content屬性制定none值(none值只能用於before和after這兩種選擇器)或normal(任何選擇器都沒問題)值即可:
  #box:before{content:none;}


總結:content屬性主要通過偽類選擇器:before和:after來指定位置;
content屬性的值可以為任何內容;
當content屬性的值為none,則表示不插入任何內容;


現在我們來看一下content屬性的綜合用法:

<!DOCTYPE HTML>
 
<html>
 
    <head>
 
        <meta charset="gb2312">
 
        <title>CSS3每日一練之內容處理-插入文字!</title>
 
        <style type="text/css">
 
        *{margin:0; padding:0;}
 
        body{margin-bottom:20px; font-size:14px; font-family:"Microsoft Yahei";}
 
            p{height:30px; line-height:30px;}
 
            p:before{content:"網頁教學網(W3Cfuns.com)!";}
 
            div:after{content:"poluoluoCOM,網頁教學網開發起飛區,Web前端開發高手聚集地,教程、資源完全免費!";}
 
            #box1:after{content:"..."}
 
            #box2:after{content:none;}
 
        </style>
 
    </head>
 
   
    <body>
 
        <p>【原有的文字】</p>
 
        <div>【原有的文字】</div>
 
        <div id="box1">【原有的文字,這個將演示省略號】</div>
 
        <div id="box2">【原有的文字】</div>
 
    </body>
 
</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved