十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章将为大家详细讲解有关怎么用css3新增属性content,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
在溪湖等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站制作、成都做网站 网站设计制作定制网站制作,公司网站建设,企业网站建设,成都品牌网站建设,成都全网营销推广,外贸网站建设,溪湖网站建设费用合理。
一、详解content属性
1、content属性的作用:
content属性用于插入生成的内容,常和:before选择器和:after选择器配合使用,清除浮动或将生成的内容放在一个元素内容的前面或后面。
2、基本语法:
content:normal|string|attr()|uri()|counter();
normal:默认值。
string:查入文本的内容,一般是一个字符串。
attr():插入元素的属性值,语法:attr(attribute)。
uri():插入一个外部资源文件,可以是图像,音频,视频文件或浏览器所支持的其他任何资源。
counter():计数器,用于插入排序标识,counter()不仅可以追加数字编号,还可以追加字母编号或罗马数字编号,语法:content:couter(计数器名,编号种类)
3、浏览器支持:
1.jpg
所有浏览器都支持content属性。
注:IE8只有指定!DOCTYPE才支持Content属性。
二、csscontent属性的应用
1、csscontent属性利用伪类after清除浮动
css的content属性专门应用在before/after伪元素上,最常见的应用是利用伪类清除浮动。
//一种常见利用伪类清除浮动的代码
.clearfix:after{
content:".";//这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{
*zoom:1;
}
原理:
after伪元素通过content在元素的后面生成了内容为一个点的块级素,再利用clear:both清除浮动。
2、csscontent属性利用伪元素实现页面中的内容插入
1)插入纯文字
用法:content:"插入的文章",或者content:none不插入内容
例:
h2::after{
content:",在h2后插入内容"
}
h3::after{
content:none
}
关于“怎么用css3新增属性content”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。