CSS3.0实例教程:content属性使用实例介绍

2012-06-27 00:52:39  来源:网页教学网 

网页制作Webjx文章简介:在过去我们可以通过后端服务器程序截取或JS截取文字后加入省略号即可。

在过去我们可以通过后端服务器程序截取或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:"WEBJXCOM,网页教学网开发起飞区,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>

更多