|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
最新版本html5+CSS3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。
破洛洛文章简介:在已往我们能够经由过程后端服务器程序截取或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属性的综适用法:
<!DOCTYPEHTML>
<html>
<head>
<metacharset="gb2312">
<title>CSS3逐日一练以内容处置-拔出笔墨!</title>
<styletype="text/css">
*{margin:0;padding:0;}
body{margin-bottom:20px;font-size:14px;font-family:"MicrosoftYahei";}
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>
<divid="box1">【原本的笔墨,这个将演示省略号】</div>
<divid="box2">【原本的笔墨】</div>
</body>
</html>
</p>
结构清晰,容易被搜索引擎搜索到,天生优化了seo |
|