详解CSS3中新增的内容属性：content

1. 用法：

content属性用于插入生成的内容，常和:before选择器和:after选择器配合使用，将生成的内容放在一个元素内容的前面或后面。

2. 基本语法：

content: normal | string | attr() | uri() | counter()

说明：

normal ： 默认值。string ： 查入文本的内容，一般是一个字符串。attr() ： 插入元素的属性值，语法：attr(attribute)。uri() ： 插入一个外部资源文件，可以是图像，音频，视频文件或浏览器所支持的其他任何资源。counter() ： 计数器，用于插入排序标识,counter()不仅可以追加数字编号，还可以追加字母编号或罗马数字编号，语法：content:couter(计数器名，编号种类)

其他属性值：

none    设置Content，如果指定成Nothing。 open-quote  设置Content是开口引号close-quote 设置Content是闭合引号no-open-quote   如果指定，移除内容的开始引号no-close-quote  如果指定，移除内容的闭合引号inherit 指定的content属性的值，应该从父元素继承

3. 浏览器支持：

所有浏览器都支持 content 属性。

但是： IE8只有指定!DOCTYPE才支持Content属性。

示例：

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>content</title><style>div.content1:before{  /*添加内容*/content: "有个人";font-weight: blod;font-size: 35px;padding: 10%;color: firebrick;text-shadow: 5px -5px 3px #00f;}div.content1:after{content: url(./1.jpg);}div.content2 h3:before{  /*插入项目编码*/content: "第"counter(number)"点、";}div.content2 h3{counter-increment: number;}div.content3 h3:before{  /*插入小写罗马的项目编码*/content:counter(number2,lower-roman);}div.content3 h3{counter-increment: number2;}div.content3 h2:before{ /*插入嵌套符号*/content: open-quote;}div.content3 h2:after{content: close-quote;}div.content3 h2{quotes: "<<"">>"}</style></head><body><div class="content1"><div class="list"><p class="text">高跟鞋绷着脚尖  带着假面穿过城市   孤独也很光鲜 <br>只怕还有眼泪被人发觉会狼狈 优雅的说再见  就像蝴蝶 孤单盘旋<br>不是我笨 只是过程   会一直等 等不到的人 只是 想要有个人陪<br>想要有个人分享天黑 醒来后才发觉 已是空荡荡的房间<br>只是 想要有个人陪  无所谓哪怕只一瞬间 假装都无所谓<br></p> </div></div><div class="content2"><h3>反派</h3><p>为何在烈阳下会感到严寒空气中的氧份也缺一点钙用心栽的花瓣 却枯萎得太快铺设浪漫却演化成伤害</p><h3>作曲：幂雅/徐贤力</h3><h3>演唱：幂雅/李子陶</h3></div><div class="content3"><h3>反派2</h3><p>我的时间为何总是慢一拍我们专属桥段颜色是灰暗每当视线睁开你的世界有他牵绊</p><h3>作曲：幂雅</h3><h3>演唱：幂雅</h3></div><div class="content3"><h2>歌曲</h2></div></body></html>

效果：

详解CSS3中新增的内容属性：content相关推荐

详解 CSS3中最好用的布局方式——flex弹性布局（看完就会）
文章包含个人理解,错误请指出. 往期css3文章 CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之移动旋转缩放(详细讲解看完就会 ...
fillcolor是什么意思_详解css3中 text-fill-color属性
text-fill-color是什么意思呢?单单从字面上来看就是"文本填充颜色",不过它实际也是设置对象中文字的填充颜色,和color的效果很相似.如果同时设置text-fill- ...
css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性发布时间:2020-09-23 14:26:58 来源:亿速云阅读:83 作者:小新这篇文章主要介绍css中如何使用counter-reset属性, ...
详解css3中display和visibility的区别
在css3中,display和visibility都具备对元素进行隐藏和显示的功能. display语法 display:none | block /*none表示隐藏 block表示显示*/ vis ...
media在HTML中作用,详解CSS3中@media的实际使用
语法: CSS Code复制内容到剪贴板 @media : { sRules } 取值: : 指定设备名称. {sRules}: 样式表定义. 说明: 判断媒介(对象)类型来实现不同的展现.此特性让C ...
linux中rev命令详解,详解Linux中输出文件内容的rev与tac命令使用
rev rev 显示最后一个字符显示到第一个字符. 例: 代码如下: [root@localhost www]# cat test 1234 abcd [root@localhost www]# re ...
前端中全部盒子靠左对齐_图文详解ul中li内容垂直居中和水平居中的方法
在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中.感兴趣的朋友继续往下看吧. ...
详解 javascript中offsetleft属性的用法（转）
详解 javascript中offsetleft属性的用法转载 2015-11-11 投稿:mrr 我要评论本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
传智播客html css3笔记,传智播客详解Css3九大常用属性
在Css3的学习和实际操作中,我们经常会接触到一些常用属性,比如字体.文本.列表和背景等.下面,传智播客将对常用的Css3九大属性进行详解. 1.传智播客详解Css3九大常用属性-字体 l Font- ...

详解CSS3中新增的内容属性：content

详解CSS3中新增的内容属性：content

1. 用法：

2. 基本语法：

3. 浏览器支持：

详解CSS3中新增的内容属性：content相关推荐

最新文章

热门文章