CSS Counter Style试玩儿

2015年2月3日，CSS Counter Style level3成为了W3C的候选标准，是时候来一探究竟，看看强大魔力的@counter-style如何自定义list-style和counter。进来一坐，且听庆哥分解。

强大魔力

使用CSS Counter Style可以做什么，来看看庆哥做的简单案例。当然，如果要发挥最大魔力，需要您的美好创意，这不是哥的特长，就不献丑了，欢迎各位通过留言提交您的创意。

需要注意的是，目前仅有firefox浏览较好的支持@counter-style。我依然把代码放到了codepen，请大家自由选择-在线研究-or-下载收藏-。

使用@counter-style命令，我们可以自定义列表样式，可以用在list-style、counter、counters等上。

结构解析

定义一个counter-style的典型格式如下：

@counter-style counter名字{
     system  : 算法;
     range   : 使用范围;
     symbols : 符号; or additive-symbols: 符号
     prefix  : 前缀;
     suffix  : 后缀;
     pad     : 补零(eg. 01,02,03);
     negative: 负数策略;
     fallback: 出错后的默认值;
     speakas : 语音策略;
}

上面详细列出了@counter-style的所有命令，大部分情况下，我们只需要使用其中几个命令即可，例如实现“天干编号”的命令如下。

@counter-style cjk-heavenly-stem {
  system: alphabetic;
  symbols: "\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";
  /* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */
  suffix: "、";
}

接下来我们来简要看看各个命令的用法。

算法-system

命令 意义 可接受值 默认值
system 符号生成算法 cyclic 、 numeric 、 alphabetic 、 symbolic 、 additive 、 [fixed ?] 、 [ extends ] symbolic

算法详细解释如下表所说。

参数 意义 示例代码 表现方式
cyclic 循环使用符号 system: cyclic; symbols:’a’ ‘b’ ‘c’; a,b,c,a,b,c,a
fixed 只用一遍符号，数字表示开始使用的位置 system: fixed 3; symbols:’a’ ‘b’ ‘c’ ‘d’; 1,2,a,b,c,d,7
symbolic 循环使用符号，第二遍双倍重复 system:symbolic; symbols:’a’ ‘b’ ‘c’; a,b,c,aa,bb,cc,aaa
alphabetic 类似于小写字母循环 system:alphabetic; symbols:’a’ ‘b’ ‘c’; a,b,c,aa,ab,ac,ba
numeric 类似于数字进制 system:alphabetic; symbols:’a’ ‘b’ ‘c’; b,c,c,ba,bb,bc,ca,cb
additive 类似于罗马数字的编号系统 system:additive; additive-symbols: c 3, b 2, a 1; a,b,c,ca,cb,cc,cca
extends 继承其他编号系统 system: extends decimal; suffix: ‘) ‘; 1),2),3),4),5),6),7)

使用范围-range

指定自定义符号系统的使用范围，超出范围外的将采用fallback指定的默认编号。

可以使用[ [ | infinite ]{2} ]或 auto两种形式指定range范围，auto为默认值。

auto在不同system下的含义如下列表所示：

  • 在cyclic、numeric、fixed算法下，auto表示从负无穷到正无穷
  • 在alphabetic、symbolic算法下，auto表示从1到正无穷
  • additive算法下，auto表示从0到正无穷
  • extend算法下，auto取继承的父系统的取值范围，如果为预定义的复杂系统，取预定义的取值

    下面的示例都是正确的范围指定。

/*指定范围为auto，默认值*/
range: auto;

/*指定范围为两个数字：前面表示下限，后面表示上限，两个数字都包含在内,列表之间用逗号隔开*/
range: 1 6;
range: 1 2,4 6;

/*指定范围为关键字*/
range: infinite;   /*从负无穷到正无穷*/
range: infinite 4; /*从负无穷到4*/
range: -6 infinite;/*从-6到正无穷*/

使用符号-symbols和additive-symbols

这是自定义counter-style中非常重要的属性，在 cyclic、numeric、alphabetic、symbolic、fixed等算法中必须指定symbols属性，在additive算法中必须指定additive-symbols。

使用前后缀-prefix和suffix

prefix的默认自为“ ”，suffix的默认值为”\2E\20”，一个点加一个空格。

###使用补零策略-pad

pad可以让开发者指定固定宽度的符号系统，例如三位的数字系统，001, 002，……，100, 101等。

pad指定的格式为 pad && ，例如 pad 3 “0”等。

匿名counter-style-symbols()函数

symblos函数将创建一个没有名字，prefix为”“，suffix为” “，range为auto，fallback为decimal，negative为”\2d”（-）， pad为0 “”，speak-as为auto的匿名style。也即我们只需要在匿名counter-style中指定system和symbols即可。

ol { list-style: symbols(cyclic "a" "b" "c" "d"); }

预定义style

CSS Counter Styles Level 3预定了很多不错的符号系统，例如针对中国用户的天干、地支、中文数字、中文大写等符号系统。这些预定义的系统，使我们学习counter-style的不错资源，下面我们就来看几个。

/*两位数字编号-01,02,03……10,11*/
@counter-style decimal-leading-zero {
  system: extends decimal;
  pad: 2 ‘0‘;
}
/*中文数字编号*/
@counter-style cjk-decimal {
  system: numeric;
  range: 0 infinite;
  symbols: \3007  \4E00  \4E8C  \4E09  \56DB  \4E94  \516D  \4E03  \516B  \4E5D;
  /* 〇 一 二 三 四 五 六 七 八 九 */
  suffix: "\3001";
  /* "、" */
}
/*天干编号*/
@counter-style cjk-heavenly-stem {
  system: alphabetic;
  symbols: "\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";
  /* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */
  suffix: "、";
}
/*地支编号*/
@counter-style cjk-earthly-branch {
  system: alphabetic;
  symbols: "\5B50" "\4E11" "\5BC5" "\536F" "\8FB0" "\5DF3" "\5348" "\672A" "\7533" "\9149" "\620C" "\4EA5";
  /* 子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥 */
  suffix: "、";
}
/*中文大写编号-壹仟壹佰壹拾壹*/
@counter-style simp-chinese-formal {
/* this is a predefined complex style in the CSS3 Counter Styles specification */
system: additive;
range: -9999 9999;
additive-symbols: 9000 \7396\4EDF, 8000 \634c\4EDF, 7000 \67d2\4EDF, 6000 \9646\4EDF, 5000 \4f0d\4EDF, 4000 \8086\4EDF, 3000 \53C1\4EDF, 2000 \8CB3\4EDF, 1000 \58F9\4EDF, 900 \7396\4F70, 800 \634C\4F70, 700 \67D2\4F70, 600 \9646\4F70, 500 \4f0d\4F70, 400 \56DB\4F70, 300 \53C1\4F70, 200 \8CB3\4F70, 100 \58F9\4F70, 90 \7396\62FE, 80 \634C\62FE, 70 \67D2\62FE, 60 \9646\62FE, 50 \4f0d\62FE, 40 \8086\62FE, 30 \53C1\62FE, 20 \8CB3\62FE, 10 \58F9\62FE, 9 \7396, 8 \634C, 7 \67D2, 6 \9646, 5 \4f0d, 4 \8086, 3 \53C1, 2 \8CB3, 1 \58F9, 0 \96F6;
suffix:‘、 ‘;
negative: "\8D1F";
}

相关阅读

w3c 候选标准

Predefined Counter Styles

致谢

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助。

本文原文链接，http://blog.csdn.net/whqet/article/details/43605725

欢迎大家访问独立博客http://whqet.github.io

时间： 2025-01-15 07:45:27

CSS Counter Style试玩儿的相关文章

CSS变量试玩儿

CSS很美妙,能够为您的页面床上衣裳,各种各样五彩斑斓的衣裳,但是对于开发者来说,他又不够灵动,于是乎有了各种各样的预处理器Sass.LESS.Stylus(笔者建议Sass的SCSS语法),这些预处理器可以很大程度的提高CSS的灵活性,增强CSS的代码组织与维护.但是毕竟不是亲生的,然后负责CSS开发的那些大牛们坐不住了,开始给CSS赋予一些新的特性,本文就来探讨下CSS变量的进展与应用. W3C的关于CSS变量的最新探索体现在CSS Custom Properties for Cascadi

CSS Counter计数器的详解

div>h2{ counter-increment:one;       /*将计数器命名为one*/ counter-reset:two;              /*将two计数器重置归零*/ } div>div{ counter-increment:two; } div>h2:before{ content:counter(one,georgian) '.';  /*这里调用计数器one, 显示样式是georgian*/ font-size:20pt; font-weight:b

css counter计数器与content总结

content属性早在css2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.content属性现在已经得到大部分浏览器的支持,关于content属性的支持情况可以在caniuse.com网站上进行查找,一下为目前它的支持情况: content属性最常见的是配合:before或:after来生成内容,默认声称的元素为行内元素: div.test:before{ content: "我在div之前": } div.test:after{ content:&qu

CSS(Cascading Style Shee)

1.CSS是Cascading Style Sheet这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思 CSS能让网页制作者有效的定制.改善网页的效果. CSS是对HTML的补充,网页设计师曾经为无法很好的控制网页的显示效果而倍感苦恼,CSS的出现解决了这个问题. Css实现了网页内容和页面效果的彻底分离. 参考资料: 完整版W3CSchool线下教程  链接: http://pan.baidu.com/s/1jGSIqxg  密码: iuch TakeColor 8.0 CN Gree

PHP全栈开发（八）：CSS Ⅵ 列表 style

列表分为有序列表和无序列表 我们知道有序列表的标签是<ol>意思是order list 无序列表的标签是<ul> 列表里面每项的标签用<li>来进行包裹. 使用CSS中的列表样式不仅可以变换列表的列表项标记,还可以使用图片来作为列表项标记. 可以用 list-style-image: url('sqpurple.gif'); 来设置列表的列表项标记为图片 也可以用 list-style-type: none; 来设置列表项的标志类型,关于列表项标志的更多不同符号,可以去

css reset style

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, im

js和css中style的区别

盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor border-left borderLeft bor

8 1 css 2 元素就是标签 2 内联样式 3 css选择器 style ,head ,内部样式表 4 外部样式表 css文件， link标签 ,href,

1 2 3 4 原文地址:https://www.cnblogs.com/anvivi/p/9694814.html

JS动态引入js,CSS——动态创建script/link/style标签

一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setA