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

问题的实质也就是说如何能让多个并无关系的<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-increment和counter-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？想都不要想。

2005-08-10 by Dark Posted in Web Design·设计 | Trackback