码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-03-23 20:28:38      阅读:348      评论:0      收藏:0      [点我收藏+]

标签:content   计数器   counter   字符串   before   

一、内容生成


内容生成示例

技术分享


伪元素 :before 和 :after

  - 使用伪元素 :before 和 :after可以将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后

      - 实现为文档添加内容的效果

技术分享


内容content

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

  - 常用的取值

      - url : 图像

      - 字符串 : 纯文本

      - 计数器

技术分享


二、计数器


计数器示例

技术分享


content-reset 属性

  - counter-reset 属性用于定义计数器,并设置其初始值

      - 默认为 0

      - 可以设置或重置为正值或负值

  - 如果希望所定义的计数器在整个页面都能使用,则可以为<body> 元素声明计数器

      - 多个计数器名称之间使用空格隔开

  - 必须结合counter() 函数和 counter-increment 属性使用

技术分享


counter() 函数

  - counter() 函数用于指定计数器创建计数字符串

  - 语法为 : counter(name)

      - name 为计数器的名称

技术分享


counter-increment 属性

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

      - 计数器可以递增,默认增量是1

      - 可以是正值或负值

技术分享



总结:本章内容主要介绍了 Css内容生成(内容生成、计数器)


本文出自 “技术交流” 博客,谢绝转载!

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

标签:content   计数器   counter   字符串   before   

原文地址:http://jasonteach.blog.51cto.com/5192112/1754240

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!