1.背景介绍
学习前端知识我们常常提到盒模型,盒模型的几个要素,margin、border、padding 、content这四个属性,前三个经常用到讲到,但第四个content属性怎么用?今天我们就来讲讲这个 。
content的意思顾名思义,是“内容”,它的作用就是在css中直接生成网页显示的 内容, 这个属性要结合:before和:after这俩个伪类属性来使用。下面详细介绍它的用法 。
2.知识剖析
before和after是什么呢?
:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素.需要注意的是如果没有content属性,伪类元素将没有任何作用。但是可以指定content为空,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到,这就是为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作。伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性,比如字体等。
三.常见问题
content各属性值的具体使用方法
四.解决方案
插入内容可以直接在content后面加入。
<h1>我是大标题   </h1>
h1::after{ content:"我是插入内容" }效果如下。
插入图片
<h3>我是要插入图片的h3</h3>
h3::after{ content:url(../jsimages/task2-fanpai.png) }
效果如下
插入编号
<h5>我是给要编号的h5</h5> <h5>我是给要编号的h5</h5> <h5>我是给要编号的h5</h5>
h5{ counter-increment:my; } p::after{ content: "neifjdlsfldskfkjldsfk.dsjfjsklfjkl"; }
效果如下:
更多用法 点击打开链接
五.编码实战
请看上面
六.拓展思考
为什么content属性很少用到
个人认为,我们前端书写代码时提倡内容样式的分离,而content的伪类写法正好又混淆了这一原则。
七.参考文献
CSS3的content属性详解
菜鸟教程对content的解释
八.更多讨论
1,元素能直接使用 content?
可以在元素后面结合after,before使用。
2,Content的使用必须要结合伪类吗?
是的,只能结合伪类使用。如果你要加上内容的话。
3,还有什么别的内容可以加。
可以加上,属性值,文字符号,指定编号种类等。
技能树.IT修真院
“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。
这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。
快来与我一起学习吧~邀请链接 http://www.jnshu/login/1/14303208
文章转自https://blog.csdn/qq_41865159/article/details/80145054
更多推荐
知道css有个content属性吗?有什么作用?有什么应用?
发布评论