This box will be fixed on your screen using Firefox, Opera9 or IE7.

CSS2中计数器的应用

好久没写什么了,昨天想了一点东西准备写出来,可我写了一半,发现不对劲儿了,写出来怎么排版?当中有三个段落,段落中有序列,要求编号不能中断(格式见下),因为我自己blog使用的文档声明是xhtml 1.0 Strict,而在xhtml 1.0 Strict中的<ol>不再支持start属性了。

示例文字:
首先
1.文字
2.文字
然后
3.文字
4.文字
最后
5.文字
6.文字

问题的实质也就是说如何能让多个并无关系的<ol>中的<li>不中断编号,这个难题看来有些棘手——如果我们要用符合xhtml 1.0 strict标准的方法的话。因为不能再用<ol start="3">了。

看来这只能从CSS入手,于是我就想到了CSS2中的content属性和counter、counters(计数器)功能,查阅了部分资料后了解到,content能够接受广泛的值,范围从简单的字符串到自动计数器。我们知道,在HTML和XHTML中,使用<ol>元素可以创建简单的编号列表,但是更为复杂的编号列表,尤其是嵌套的编号列表,则不可能使用标记语言。所以CSS2提出了计数器(counter)的概念(注1),它的值可以在浏览器显示文档时加以设定和改变,使用当前属性能够识别的特殊函数插入计数器的值,并用其他的CSS2属性改变计数器的外观和格式。

所以我上面的问题很简单就可以实现,马上写出这么几条CSS:

li.inc {/*定义一个class,避免与正常列表搞混*/
list-style-type: none;}/*用计数器就不能再要默认的列表样式*/

li.inc:before {
counter-increment: item;/*需要为不中断的计数器定义一个名称*/
content: counter(item) "." "\A0 \A0" ;}
/*如何显示计数器,有counter()和counters()两种值供使用,counter()要求
括号内是计数器的名称,并带有可选格式声明。counters()使用更为复杂和强大,
特别在多层嵌套中使用。\A0为转义字符(注2)代表为一个空格,根据CSS2
标准,浏览器将样式生成的内容放在受影响的(x)html元素内容前或后,因此,
它变成了文本流的一部分。这对编号来说,编号与编号内容紧挨是不可接受的,
在CSS2中有dispaly:marker来解决这种问题,但目前还没有一种浏览器支持*/

我把注释写在上面了,实际上只有3句,非常简单。那么我马上用Firefox打开,发现并无效果,查找资料(注3),Firefox并未支持CSS2中的counter-incrementcounter-reset两个属性,只有Opera 8支持,简单对比了一下,Opera对标准CSS部分应该是所有浏览器中最好的。好在我常用的Firefox明确表示在代号为Deer Park的1.5版本中将部署CSS2计数器(注4)

由此可见,CSS2中的content和计数器是非常智能和方便的,熟练掌握就能灵活运用。比如下面我们现炒现卖来实现像Office中那样的多级列表:


ol.inn {/*还是要定义一个class以免与其它的搞混*/
list-style-type: none;
counter-reset: section;}/*这次ol要中断了,取个名称叫section*/

ol.inn li:before {
counter-increment: section;/*li编号不中断*/
content: counters(section, ".") "\A0 \A0 \A0 \A0";}
/*用counters()了,计数器后加点并在文字前加4个空格显示*/

(x)html中如果有<ol>多级嵌套的话,上面的CSS定义就会让页面出现“1.1,1.1.1”这样的编号。

我写了一个演示文档来列举上面的这两个例子,你可以查看源码来显示css使用。特别提醒的是,你必须用Opera 8以上才能看到正确的内容。Firefox目前还不行,IE?想都不要想。

3 Comments

  1. zx.asd Comments @ 02:23:09 on 2005-08-15

    本次都用xhtml 1.0 Strict写日志不觉得累么?

  2. Dark Comments @ 17:34:40 on 2005-08-15

    呵呵,xhtml 1.0 strict其实是个幌子,深入学习CSS才是真,这不就是W3C的“阴谋”么。就好比唐僧的紧箍咒,逼你上西天。所以说,没有Strict,我也憋不出这篇文章来。呵呵。

  3. easygod Comments @ 14:10:51 on 2005-08-16

    很多时候因为不了解才感觉到累,真正深入后才会发现乐趣。。css的强悍是要用到才会体会到。