【CSS-task15】知道css有个content属性吗？有什么作用？有什么应用？

分享人：江吉仪

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

学习前端知识我们常常提到盒模型，盒模型的几个要素，margin、border、padding 、content这四个属性，前三个经常用到讲到，但第四个content属性怎么用？今天我们就来讲讲这个 。
content的意思顾名思义，是“内容”，它的作用就是在css中直接生成网页显示的 内容， 这个属性要结合：before和：after这俩个伪类属性来使用。下面详细介绍它的用法 。

2.知识剖析

content需要配合 :before 和 :after这俩个 伪元素使用，来插入生成内容。

三.常见问题

content各属性值的具体使用方法

四.解决方案

具体用法

五.编码实战

              

                
这是h1
                
这是h2

                

                h1::after{
                    content:"我是h1后插入内容"
                }
                h2::after{
                    content:none
                }

            

                
                

                h1{
                    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
                }
                h1::before{
                    content:open-quote;
                }
                h1::after{
                    content:close-quote;
                }
                h2{
                    quotes:"\"" "\"";  /*添加双引号要转义*/
                }
                h2::before{
                    content:open-quote;
                }
                h2::after{
                    content:close-quote;
                }

                
            

                    
                    h3::after{
                        content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
                    }
                    
                

六.拓展思考

为什么content属性很少用到

个人认为，我们前端书写代码时提倡内容样式的分离，而content的伪类写法正好又混淆了这一原则

七.更多讨论

八.参考文献

CSS3的content属性详解

菜鸟教程对content的解释

W3C对content的解释

鸣谢

感谢大家观看

BY : 黄志波|罗宇|冯馨雨|江吉仪