图解CSS:奇妙的CSS计数器世界(Part1)

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

这是有关于列表造型设计相关的话题,简单地说,就是CSS给列表项设计样式造型。可能你会觉得这样的话题有什么好聊的,不就是用list-style 相关的属性给 li 列表项或者displaylist-item的元素设置样式吗?说实话,一直以来我就是这么认为的,但自从看到 @counter-style 给列表项自定义表情符的标记时,让我感到好奇。随着继续往下探究,发现这里面有很多很有意思的东西,所以我觉得在 图解CSS系列 中单独用一篇文章和大家来聊 CSS计数器的奇妙世界。感兴趣的同学请继续往下阅读。

先从列表说起

在 HTML 中有两个列表元素,分别是 无序列表的 <ul>有序列列表的 <ol>,它们都有 子元素 <li>,它被称为列表项。无序列表<ul>和有序列表<ol>最大的区别是:

  • 无序列表<ul> :代表一个项目的列表,其中列表项目的顺序并不重要,即,改变列表项目顺序不具有实质性的意义,也不会改变文档的语义
  • 有序列表<ol> :代表一个项目的列表,其中列表项目被有意地排序,这样一来,改变顺序会改变文档的语义

比如:

<div class="wrapper">
    <p>I have lived in the following countries:</p>
    <ul>
        <li>Switzerland</li>
        <li>Norway</li>
        <li>United Kingdom</li>
        <li>United States</li>
    </ul>
</div>
<div class="wrapper">
    <p>I have lived in the following countries (given in the order of when I first lived there):</p>
    <ol>
        <li>Switzerland</li>
        <li>United Kingdom</li>
        <li>United States</li>
        <li>Norway</li>
    </ol>
</div>

在 HTML 中除了语义化之外,<ol><ul> 相比,在<ol> 上有两 <ul> 没有的属性,即reversedstart,可以用来<ol>倒排和设置起始序列号:

<ol>
    <li>Switzerland</li>
    <li>United Kingdom</li>
    <li>United States</li>
    <li>Norway</li>
</ol>

<ol reversed>
    <li>Switzerland</li>
    <li>United Kingdom</li>
    <li>United States</li>
    <li>Norway</li>
</ol>

<ol start="5">
    <li>Switzerland</li>
    <li>United Kingdom</li>
    <li>United States</li>
    <li>Norway</li>
</ol>

<ol start="5" reversed>
    <li>Switzerland</li>
    <li>United Kingdom</li>
    <li>United States</li>
    <li>Norway</li>
</ol>

尽管我们在 HTML 中经常使用列表(<ul><ol>),但有很多 Web 开发者不会太多关注它们。其实,在 Web 中有很多东西可以很有逻辑地被标记为一个列表。比如我们在构建分步器或时间轴或排序元素可以自然地使用 <ol> 标记,但设计中的许多东西可以用无序列表<ul>来描述,比如导航菜单。

正如前面示所示,如果我们不用 CSS 对其做任何处理的话,一般情况下,客户端对列表会有一些初始样式的设置。比如,olul都有一个list-style-type的属性:

  • ullist-style-type 的值是 disc
  • ollist-style-type 的值是 decimal

他们的子元素 lidisplay 为会list-item。这就创建了一个块级的盒子,并有一个额外的标记框(Marker Box),标记框是用来放置标记符号(ul)或 数字(ol)的地方:

也就是说:

一个具有 display: list-item 的元素为该元素的内容生成一个块盒(Block Box),并且根据 list-style-typelist-style-image 的值,还可能生成一个标记框(Marker Box),作为该元素是一个列表项的视觉指示。

我们使用 CSS 可以在这两个框中设置相应的CSS,也可以做很有意思的东西,从而设计各种样式网格的列表项。但这些都是后话,也是我们后面要和大家一起探讨的主要内容。

CSS 计数器的历史

在 CSS1 中就引入了列表项,并且该规范定义了十进制(deci)、小罗马(lower-roman)、大罗马(upper-roman)、小阿尔法(upper-alpha) 和 大阿尔法(upper-alpha)等计数器列表样式类型(list-style-type)。

大约在 1998 年 3 月,也就是在 CSS2 中,基本列表部分已经被移到了12生成内容、自动编号和列表(12 Generated content, automatic numbering, and lists)中。该文档定义了用户代理在渲染非来自文档的内容时的行为。

根据 CSS2.1,内容可以由 content::before::after 伪元素一起使用时生成,或者display属性值为list-item的元素生成。

大多数情况下,我们content属性的值是字符串,但你也可以使用一个 <counter> 值,它可以由 counter()counters() 函数指定。其他潜在的值包括引号和属性。

自动编号由 counter-incrementcounter-reset 两个属性控制。由这两个属性定义的计数器将与上述content属性的counter()counters()函数一起使用。

在 2003 年 5 月份,关于生成内容的整个部分被分割出来,独立放在 CSS生成内容模块(CSS Generated Content Module Level 3),但在这之前,CSS 列表已经有了自己的工作草案。

其实在这之前,大约是 2002 年 2 月份,W3C CSS工作小组发表过第一个有关于 CSS3 列表方面的模块,不过现在被称为 CSS 列表和计数器模块(CSS Lists and Counters Module Level 3)

另外一个相关的规范是 CSS 计数器样式模块(CSS Counter Styles Level 3),在这个模块中引入了@counter-style 规则,允许我们定义自己自定义计数器样式,用于列表项标记框(list-marker)和生成内容的计算器中。它还包括了一个预定义计数器样式的列表。比如cjk-heavenly-stemcjk-earthly-branch

综合所述,这些都是用于定义列表项样式造型相关的规范文档。也就是说,到目前为止,用于列表样式设置的规范分布在:

不同模块包含的相关属性如下图所示:

可以点击这里查看全图

列表标记样式

HTML 中的列表项(li),不管是有序列表还是无序列表的列表项,都有默认的标记符号,无序列表一般是实心黑圆点,有序列表一般是小写的阿拉伯数字:

但很多时候默认的标记符号无法满足我们设计的需求。在 CSS 中我们可以使用 list-style 给列表项调转标记符号样式。该属性有三个子属性:

list-style: <'list-style-position'> || <'list-style-image'> || <'list-style-type'>
  • list-style-position :设置标记符号位置,有点类似于 background-position,不过其只有outsideinside 两个值,其中 outside 是其默认值
  • list-style-image :设置标记符为图像,有点类似于 background-image,其默认值为none
  • list-style-type :设置标记符类型,其中有序列列表标记符号类型是 decimal,无序列表标记符号类型是 disc

先来看 list-style-type

list-style-type

list-style-type 是用来指定列表标记类型,而且是字符串list-style-type生效有两个条件:

  • 列表项或display: list-item的元素的::markercontent 值为 normal
  • 列表项或display: list-item的元素没有标记图像,即 list-style-imagenone

满足这两个条件时,用于list-style-type的字符串会用来填充列表项的标记,相当于是 ::markercontent 的值。

list-style-type可以接受 <counter-style><string>none 值。我们平时看到的列表项标记符就是 <counter-style> 指定的列表项计数器的值。预置的 <counter-style> 其实有很多个,主要分为四大类型:

  • 数字(Numeric)类型:默认用于有序列表标记符
  • 字母(Alphabetic)类型:默认也用于有序列表标记符
  • 符号(Symbolic)类型:默认用于无序列表标记符
  • 固定(Fixed)类型:这个和中国历史有很深的联系,在中文里分为“天干地支”,其中天干是序数,和中国风水及占星术联系紧密;地支是排序,和中国十二生肖联系紧密

每一种类型都有不同的值。

类型 示例
decimal 1, 2, 3, ..., 98, 99, 100
decimal-leading-zero 01, 02, 03, ..., 98, 99, 100
arabic-indic ١‎, ٢‎, ٣‎, ٤‎, ..., ٩٨‎, ٩٩‎, ١٠٠‎
armenian, upper-armenian Ա, Բ, Գ, ..., ՂԸ, ՂԹ, Ճ
lower-armenian ա, բ, գ, ..., ղը, ղթ, ճ
bengali ১, ২, ৩, ..., ৯৮, ৯৯, ১০০
cambodiankhmer ១, ២, ៣, ..., ៩៨, ៩៩, ១០០
cjk-decimal 一, 二, 三, ..., 九八, 九九, 一〇〇
devanagari १, २, ३, ..., ९८, ९९, १००
georgian ა, ბ, გ, ..., ჟჱ, ჟთ, რ
gujarati ૧, ૨, ૩, ..., ૯૮, ૯૯, ૧૦૦
gurmukhi ੧, ੨, ੩, ..., ੯੮, ੯੯, ੧੦੦
hebrew א‎, ב‎, ג‎, ..., צח‎, צט‎, ק‎
kannada ೧, ೨, ೩, ..., ೯೮, ೯೯, ೧೦೦
lao ໑, ໒, ໓, ..., ໙໘, ໙໙, ໑໐໐
malayalam ൧, ൨, ൩, ..., ൯൮, ൯൯, ൧൦൦
mongolian ᠑, ᠒, ᠓, ..., ᠙᠘, ᠙᠙, ᠑᠐᠐
myanmar ၁, ၂, ၃, ..., ၉၈, ၉၉, ၁၀၀
oriya ୧, ୨, ୩, ..., ୯୮, ୯୯, ୧୦୦
persian ۱, ۲, ۳, ۴, ..., ۹۸, ۹۹, ۱۰۰
lower-roman i, ii, iii, ..., xcviii, xcix, c
upper-roman I, II, III, ..., XCVIII, XCIX, C
tamil ௧, ௨, ௩, ..., ௯௮, ௯௯, ௧௦௦
telugu ౧, ౨, ౩, ..., ౯౮, ౯౯, ౧౦౦
thai ๑, ๒, ๓, ..., ๙๘, ๙๙, ๑๐๐
tibetan ༡, ༢, ༣, ..., ༩༨, ༩༩, ༡༠༠
lower-alphalower-latin a, b, c, ..., z, aa, ab
upper-alphaupper-latin A, B, C, ..., Z, AA, AB
lower-greek α, β, γ, ..., ω, αα, αβ
hiragana あ, い, う, ..., ん, ああ, あい
hiragana-iroha い, ろ, は, ..., す, いい, いろ
katakana ア, イ, ウ, ..., ン, アア, アイ
katakana-iroha イ, ロ, ハ, ..., ス, イイ, イロ
disc • (U+2022)
circle ◦ (U+25E6)
square ▪ (U+25AA)
disclosure-open , disclosure-closed 适合表示组件的一些标状态标识符,打开(▾)或关闭(▸),比如 <details>
cjk-earthly-branch 子, 丑, 寅, ..., 亥
cjk-heavenly-stem 甲, 乙, 丙, ..., 癸

表格中列出的是 <counter-style> 中预定义的字符串标记符,详细的可以在 CSS Counter Styles Level 3 规范中查阅,后面在介绍 @counter-style 时还会提到这部分内容!

具体来说,标记字符串是使用指定的 <counter-style> 生成列表项计数器值的结果,前面是 <counter-style> 的前缀(prefix),后面是 <counter-style> 的后缀(suffix)。如果指定的 <counter-style> 不存在,则假定为十进制,即 decimal:

不知道你是不是和我相似,原以为列表项标记符就只有那么十来种。

list-style-type 除了可以使用 <counter-style> 指定的字符串之外,还可以是其他的任意字符串,比如表情符号,文本字符,

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-counter-style-part1.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部