发表于： 2017-02-26 17:27:25
1 1338
【武汉-第三十三期】知道css里有个centent属性吗？怎么用的？
大家好，我是IT修真院成都分院第二期的学员冯馨雨，一枚正直纯洁善良的前端程序员。今天给大家带来的是css中centent属性的几种用法。
一.背景介绍
学习前端知识我们常常提到盒模型，盒模型的几个要素，margin、border、padding、content这四个属性，前三个经常用到讲到，但第四个content属性怎么用？今天我们就来讲讲这个。
content的意思顾名思义，是“内容”，它的作用就是在css中直接生成网页显示的内容
二.知识剖析
content需要配合 :before 和 :after这俩个 伪元素使用，来插入生成内容。
CSS content 属性可以包括以下值：
content:none | normal |
这些值的解释如下：
content: none;
none:该伪元素将不会被生成。
content: normal;
normal: 将:before和:after伪元素计算成‘none’
content: "Estelle: ";content: " 00a3"; /* includes "£" */
string: 在元素的前面或后面添加一个字符串(看你使用的是哪个伪元素)。字符串可以使用单引号或双引号。如果你的字符串包括一个引号，请确保你避免使用斜杠(“”)或斜杠的ISO值。如果你要包括任何非ASCII字符集或实体，在CSS和XHTML中声明该字符，并/或为该字符使用ISO编码(如：”\00a3″)。
content: url(myBullet.gif);
url: 这个值是一个标明一个外部资源的URI(比如一个图片)。如果浏览器不能显示这个资源，FF 和IE8 会忽略它， 就像它没有被指定，但是Safari 会指出该资源不能被显示，并显示一个”图片丢失”的图标。
content: open-quote;
open-quote 和*close-quote: *这两个值被来自于”quotes”属性的相应的字符替代。Opera 可以处理这写值，但是不能正确的嵌套，Safari 完全无视这个属性，IE8 和Firefox 可以正确处理它。
content: no-open-quote;
no-open-quote 和no-close-quote: 不引入内容，但是增加(减少) 引用的嵌套级别。Safari 完全无视这些值，Opera, IE8 和Firefox 可正确处理。
content: attr(title);
*attr(x): *这个函数为选择器的对象返回属性X的值，并将其作为一个字符串。该字符串不会被CSS处理器解析。如果该选择器的对象不包含一个属性X，将返回一个空字符串。属性名称的大小写敏感型依赖于文档的语言。
所以，你不使用Javascript也能可以动态添加文本:
a.tooltip { position: relative; } a.tooltip:hover:after { content: attr(title); position:absolute; display:block; padding: 5px; border: 1px solid #f00; background-color: #dedede; }
content: counter(subtitles, decimal);content: counter(headers) "." counter(subtitles) ": ";
counter(name) 或counter(name, style): counter 有两个参数：name，你可以提到increment或 reset；style，如果没有被声明，默认为”decimal”(十进制数字)。 尽管你可以为counter 命名除了‘none’, ‘inherit’ or ‘initial’之外的所有值，但是请避免关键术语。
三.常见问题
content各属性值的具体使用方法
四.解决方案
具体用法参见在线演示：https://segmentfault.com/a/1190000002750033
五.编码实战
请参见上述演示
六.扩展思考
为什么content属性很少用到？
个人认为，我们前端书写代码时提倡内容样式的分离，而content在css中插入内容正好又混淆了这一原则；并且该属性兼容性也不太好
七.参考文献
https://segmentfault.com/a/1190000002750033
返回列表
评论