详解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
发布评论