开发学院网页设计 DivCss CSS3网页制作实例:content属性的综合用法阅读

CSS3网页制作实例:content属性的综合用法

　2012-04-22 14:45:14　来源：WEB开发网　　　

核心提示：平时博客等经常会有文章摘要，将文字截断后直接使用省略号表示文章还没有结束，CSS3网页制作实例:content属性的综合用法，如下所示：在人际关系中，良好的第一印象是非常重要的，那么我们就可以对content属性制定none值（none值只能用于before和after这两种选择器）或normal（任何选择器都没问题）

　平时博客等经常会有文章摘要，将文字截断后直接使用省略号表示文章还没有结束，如下所示：

在人际关系中，良好的第一印象是非常重要的，人们愿意在彼此身上寻求信任与诚实，并期望在接下来的经历中重现和增强这些好感。同样的道理也体现在移动应用或互联网产品中。在打造良好的品牌信誉及其与终端用户之间持 ......

在过去我们可以通过后端服务器程序截取或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教程网页内容处理-插入文字 | 网页教学网(Webjx.com)!</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:"网页教学网(Webjx.com)!";}
　　　　　 div:after{content:"网页教学网提供最新的网页制作、网页设计、网页特效，为个人网站提供网页素材模板和网页视频学习！";}
　　　　　 #box1:after{content:"..."}
　　　　　 #box2:after{content:none;}
　　　 </style>
　 </head>
　
　 <body>
　　　 <p>【原有的文字】</p>
　　　 <div>【原有的文字】</div>
　　　 <div id="box1">【原有的文字，这个将演示省略号】</div>
　　　 <div id="box2">【原有的文字】</div>
　 </body>
</html>