CSS生成内容
2016-10-25 09:52
127 查看
在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”、“::after”来实现,其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。
content配合CSS的伪类或者伪元素,一般可以做以下四件事情:
实例展示:
在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”,只不过只是在这里插入了一个空格。如下所示:
上面这个示例是最常见的,也是最简单的,我们再来看一个插入元素属性值的方法。
假设我们有一个元素:
<a href="##" title="我是一个title属性值,我插在你的后面">我是元素</a>
可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后:
效果如下:
在CSS编辑器的第1行输入正确代码,在元素文本内容之前插入文本“我是被插进来的”。
content配合CSS的伪类或者伪元素,一般可以做以下四件事情:
功能 | 功能说明 |
none | 不生成任何内容 |
attr | 插入标签属性值 |
url | 使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源) |
string | 插入字符串 |
在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”,只不过只是在这里插入了一个空格。如下所示:
.clearfix:before, .clearfix:after { content:””; display:table; } .clearfix:after { clear:both; overflow:hidden; }
上面这个示例是最常见的,也是最简单的,我们再来看一个插入元素属性值的方法。
假设我们有一个元素:
<a href="##" title="我是一个title属性值,我插在你的后面">我是元素</a>
可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后:
a:after { content:attr(title); color:#f00; }
效果如下:
任务
在CSS编辑器的第1行输入正确代码,在元素文本内容之前插入文本“我是被插进来的”。温馨提示:案例的效果如上图所示才算顺利通关,否则请再学习一遍本节的知识点!
<!doctype www.dztcsd.com/html> <html> <head> <meta charset="utf-8"> <title>CSS生成内容</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <h1>我是标题,在我前面插入内容吧</h1> </body> </html>
相关文章推荐
- CSS 内容生成
- CSS content内容生成技术以及应用
- 静态页面生成技术中,把css,js,以及内容中的img标签放在同一个目录下
- 由CSS列表引发对CSS生成内容的思考
- 巧用css内容生成
- 如何从css生成内容和计数组件中得到益处
- CSS content内容生成技术以及应用
- CSS content内容生成技术以及应用
- Css3之高级-2 Css内容生成(内容生成、计数器)
- CSS content内容生成技术以及应用
- CSS content内容生成技术以及应用(转)
- CSS 内容生成
- CSS学习笔记:生成内容
- (14)CSS内容生成技术
- 【CSS3】CSS生成内容:content
- CSS content内容生成技术以及应用
- CSS content内容生成技术
- CSS巧用content内容生成
- 伪类“:before”,“:after”和伪元素“::before”、“::after”-CSS生成内容
- 世界上首例完全用CSS生成的字体