CSS内容生成(重要内容:css计数器)

CSS content 属性

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。

注意:

仅在CSS可用的现代浏览器下起作用。

不可通过DOM使用,它只是纯粹的表象。

content属性的值:

1.文本值,如:content:”这是添加的文字”

2.属性值,如:content:”attr(id)”//这句话将会获取元素的id属性的值,并作为内容添加

应用1:计数器

(counter-reset和counter-increment)

counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。

利用这个属性,计数器可以设置或重置为任何值,可以是正值或负值。如果没有提供 number,则默认为 0。

counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

利用这个属性,计数器可以递增(或递减)某个值,这可以是正值或负值。如果没有提供 number 值,则默认为 1。

应用2:为多语言内容插入正确的引号

使用<q>标签,默认外层为 “ ,内层为 ’

quotes 属性设置嵌套引用(embedded quotation)的引号类型。

应用3:图片替换文字

缺点:不能对图片进行重复或平铺,或是使用image sprite

应用4:显示相对应的链接图标

指的是针对不同的链接类型,在链接的后面显示对应链接类型的图标。

例如,链接的对象是一个图片,则显示图片的小图标,如果链接对象是视频,则显示视频小图标,如果链接就是个URL网页链接,则显示链接的小图标

重点:

CSS计数器

1.counter-reset:重置计数器。

counter-reset 可以同时重置多个计数器。Counter-reset:ctr 1 subctr 2; //这里同时重置了ctr和subctr两个计数器

2.counter-increment

3.counter():是一个函数,其主要配合content一起使用。使用counter()来调用定义好的计数器标识符。

counter(name, style)

第二个参数style:可以不设置。

取值和list-style-type一样

counters(name, string, style)

第二个参数string:可以设置,连接序号的字符

实例地址:http://benlai.sinaapp.com/code/css_content.html

参考文章:http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/

http://www.w3cplus.com/css3/css-counters.html

时间: 2024-09-29 05:01:16

CSS内容生成(重要内容:css计数器)的相关文章

Css3之高级-2 Css内容生成(内容生成、计数器)

一.内容生成 内容生成示例 伪元素 :before 和 :after - 使用伪元素 :before 和 :after可以将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后 - 实现为文档添加内容的效果 内容content - content 属性与:before及:after 伪元素配合使用,来插入生成内容 - 常用的取值 - url : 图像 - 字符串 : 纯文本 - 计数器 二.计数器 计数器示例 content-reset 属性 - counter-reset 属性用

:after伪类+content内容生成经典应用举例——张鑫旭

一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持: (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+).另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素. 例如下

:after伪类+content内容生成经典应用举例

一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以 及:after伪元素生成内容.此特性目前已被大部分的浏览器支持: (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+).另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素. 例如

CSS content内容生成技术以及应用

一.简介 content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+).另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素. 在CSS 3 Generated Content工作草案中,content属性添加了更多的

css3复杂选择器+内容生成+Css Hack

1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过位置关系来匹配元素(平级) 2.只能向后找,不能向前找 2.兄弟选择器-相邻兄弟选择器 1.什么是相邻兄弟 紧紧挨在一起的元素,称之为相邻兄弟 <div id="d1"></div> <p id="p1"></p> <

CSS 内容生成

原文地址:http://www.zhangxinxu.com/wordpress/?p=739 一.哗啦哗啦的简介 zxx://这里"哗啦哗啦"的作用是为了渲染一种氛围.content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+).另外,目前Opera 9.5+ 和 Safari 4已经支持

[ css 伪对象添加 content ] css中content内容生成技术以及应用问题讲解及实例演示

小小的提醒 在进入正题之前,我要做一回啰嗦的老女人,讲点可有可无无伤大雅的提醒: 仅在CSS可用的现代浏览器下起作用 不可通过DOM使用,它只是纯粹的表象 最基本的 – 生成内容 content使用如下: h2:before { content: "我是额外文字!"; } 此段样式的作用是在每个h2标签的前面添加文字“我是额外文字”.您可以狠狠地点击这里:content最基本使用Demo content属性的值除了使用文本值外,还可以使用标签的一些属性值,方法是attr(),参见如下代

巧用css内容生成

1.      .box:before{content:"生成内容";}在.box内部的内容之前加上生成内容 2.       .box:after{content:"生成内容"; color:red; font-weight:bold;}----只对生成的内容进行操作 3,  css设计陷阱:子元素的margin越界问题 以前的解决方法: 1   用父元素的padding代替子元素的margin2  给父元素设置边框3  在父元素中设置  overflow:hid

内容生成+计数器+多列

一.伪类内容生成 1. 通过 css 向已有的元素上增加新的文本(图片)内容 选择器:    1.:before     向匹配元素之前增加生成的内容     定位到匹配元素开始的位置    2.:after     向匹配元素之后增加生成的内容 eg: div:before{}     p:after{}    属性: 1.content    作用:配合 :before , :after伪元素插入生成的内容div:before{    content:"生成的内容:";     }

css中a标签内容超出最大字数隐藏处理

问题:a标签内容超出最大字数显示问题 1.超出是最后显示为“...” 2.鼠标放在上面显示完整内容 3.点击新窗口打开链接内容 解决方法: css部分: .list{font:Georgia, "Times New Roman", Times, serif;font-size:14px;width:200px;display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellips