如何从css生成内容和计数组件中得到益处
用css生成内容是在css2规范中首次提出的。几年来,这个特性只有少数的web开发者使用,原因就是浏览器对于他们的兼容性不好。随着2009年IE8的发布,生成内容被再次提出,而且很多有趣的实现也首次采用生成内容的方式。在这篇文章里面,我们将讨论如何使用生成内容。
生成内容是什么?
在技术角度来说,生成内容是简单的通过css在dom树上创建一个抽象的结构。因此,在实践中,生成内容只存在于网络文档布局中。
利用js访问生成的内容,可以通过获取content属性的文本值。
查看在线案例
插入生成内容
在实际元素内容前后插入内容,使用:before 和:after伪元素。为了区别伪元素,我们可以使用下面的伪标签。
我们的样式可能这样:
查看在线案例
记住,如果你用css3的规范验证css文件,那么:before 和 :after伪元素应该写成::before 和 ::after。否则,css验证器会报错。
正如你所见,插入的这两个字符串都是content的属性。这个属性接受如下值:
- none, normal:伪内容不生成;
- :表示一个包含在引号中的文本字符串;
- url():这个方法可以让我们插入一个外部资源(通常是一个图片),也可以使用background-image;
- counter():counters()这些方法插入计数器(详见下文);
- attr(attribute):这个方法让我们可以插入给定元素的属性值;
- open-quote, close-quote, no-open-quote, no-close-quote:这些值可以自动产生引号标记
记住,产生元素会占据页面的一定空间,而且他们的存在会影响浏览器对父元素的尺寸计算值。
插入字符串
在前面的例子中,我们在现有元素的内容前后插入两个简单的字符串。生成内容也可以让我们通过转义符号插入更复杂的内容:
查看在线案例
在双引号之间的转义符号是16进制的unicode值。我们也可以把简单的字符串跟unicode符号结合:
查看在线案例
请注意,所有的文本内容都需要用content的属性插入,空格和tabs也可以通过键盘插入到页面中。
使用web字体插入icon
Web字体可以通过生成内容来插入图标。依赖于web字体库,你可以插入简单的字符或是unicode序列:
查看在线案例
在这里例子中,我们插入了twitter的icon。我们的代码可能如下这样写:
插入图片
我们可以通过url()方法插入图片:
查看在线案例
正如你所见,这个方法跟background-image属性有相同的效果。
插入属性值
通过attr()方法可以插入元素的属性值:
查看在线案例
我们只是插入了一个href属性值,是一个简单的字符串。
插入计数器
自动增长的数值是由css的两个属性控制的,他们是counter-reset 和counter-increment。计数器由这些属性定义,然后用counter() 和 counters()方法获取内容属性。
counter-reset计数器重置属性可以包含一个或多个计数器的名字(例如“标识符”),后面可以跟一个可选的整数参数。通过counter-increment属性设置增长的整数值,可以作用在任何元素。他的默认值是0.负值是容许的。
counter-increment计数器增量属性是类似的,他们基本的不同是这个增加一个计数器,其默认增量是1.负值是容许的。
现在我看一个例子,他的结构如下:
我们想给列表中的每一个dt添加一个正数编号,css中这样写:
查看在线案例
第一个规则设置定义列表的计数器。这个叫‘范围’。计数器的名字(或标识符)是term。不管为我们的计数器选择的名字是什么,必须与计数器增量属性值一致(当然,这个名字应该是有意义的)。
第二个规则,我们用伪元素:before给dt元素添加,因为我们想要在现有元素内容前正好插入计数器。让我们再仔细看看第二条规则中的第二个声明。counter()方法接受我们的标识符(term)作为他的参数,content属性产生计数器。
数值和元素内容之间没有空间。如果我们想要添加空间的,即在数字后面留一个空间,我们可以用content属性插入如下字符串:
查看在线案例
注意,引号之间的字符串。这个空间插入就像我们在键盘上键入他们一样。事实上,content属性可以看做是javascript中的document.write()方法,除了他不能添加真实的文档内容。简单的说,content属性仅仅是创建一个抽象的dom树,而不能修改他。
【如何从css生成内容和计数组件中得到益处】相关文章
3. Bootstrap3,JQuery倒计时插件和Animate.css生成的倒计时效果
4. CSS生日快乐:CSS之父Håkon Wium Lie访谈录
5. HTML5 中的新数组
6. iOS及Android 4.1版Chrome发布 HTML5得到进一步发展
7. 6款基于Node.JS的开源内容管理和静态网站生成系统
8. 2015前端框架何去何从
本文来源:https://www.51html5.com/a938.html
﹝如何从css生成内容和计数组件中得到益处﹞相关内容
- 一款先进的 CSS3 代码生成工具EnjoyCSS
- EnjoyCSS – 先进的在线CSS3代码生成器
- jQuery和css3响应式带滚动条的内容手风琴插件
- 超实用!可视化CSS3动画生成神器Stylie
- CSS动画集合 可直接生成动画代码 – AniCollection
- 实用的 CSS3 参考手册和代码生成工具
- cssFx是自动根据浏览器生成prefix的js
- 使用CSS3的step()生成的动画效果
- jQuery漂亮的渐变选择器生成CSS
- 绘制SVG内容到Canvas的HTML5应用