这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【知道css有个content属性吗?有什么作用?有什么应用? 】
【CSS-task15】 知道css有个content属性吗?有什么作用?有什么应用?小课堂【北京】
分享人:李仁
1.背景介绍
css有一个属性叫做content。content只能使用在:after和:before之中。它用于在元素之前或者元素之后加上一些内容content属性早在CSS2.1的时候就被
引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持段落注释。但是目在CSS 3 Generated Content工作草案中,
content属性添加了更多的特征,例如:插入以及移除文档内容的能力,以创建脚注,结语,及前还没有浏览器支持content的扩展功能。
2.知识剖析:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素需要注意的是如
果没有content属性,伪类元素将没有任何作用。但是可以指定content为空,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到,这就是
为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作。伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性,比如字体等。
3.常见问题如何使用:after和:before中的content属性呢?
4.解决方案https://segmentfault.com/a/11...
5.编码实战
6.更多讨论
强大的CSS3 attr()方法。CSS3 Values and Units草案扩展了attr()表达式的范围,除了返回字符串,还可以返回诸如CSS colors, CSS integer, length,
angle, time, frequency以及其他一些单元。通过使用自定义的data属性,可以实现一些非常强大的效果,诸如简单图表图形的渲染,动画效果的实现。例
如我们可以设置根据元素的attribute值设定background-color的颜色值,这在显示在线调色板上会大放异彩;我们还可以根据attribute值指定元素的大
小,就像定义图表每个条形的长度一样。总之,attr()的潜力惊人。
7.参考文献https://segmentfault.com/a/11...鸣谢感谢大家观看
BY : 黄志波|罗宇|冯馨雨|李仁