特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
这是有关于列表造型设计相关的话题,简单地说,就是CSS给列表项设计样式造型。可能你会觉得这样的话题有什么好聊的,不就是用list-style
相关的属性给 li
列表项或者display
为list-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>
没有的属性,即reversed
和start
,可以用来<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 对其做任何处理的话,一般情况下,客户端对列表会有一些初始样式的设置。比如,ol
和ul
都有一个list-style-type
的属性:
ul
的list-style-type
的值是disc
ol
的list-style-type
的值是decimal
他们的子元素 li
的 display
为会list-item
。这就创建了一个块级的盒子,并有一个额外的标记框(Marker Box),标记框是用来放置标记符号(ul
)或 数字(ol
)的地方:
也就是说:
一个具有
display: list-item
的元素为该元素的内容生成一个块盒(Block Box),并且根据list-style-type
和list-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-increment
和 counter-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-stem
和cjk-earthly-branch
。
综合所述,这些都是用于定义列表项样式造型相关的规范文档。也就是说,到目前为止,用于列表样式设置的规范分布在:
- CSS Lists and Counters Module Level 3
- CSS Generated Content Module Level 3
- CSS Counter Styles Level 3
- Ready-made Counter Styles
不同模块包含的相关属性如下图所示:
列表标记样式
HTML 中的列表项(li
),不管是有序列表还是无序列表的列表项,都有默认的标记符号,无序列表一般是实心黑圆点,有序列表一般是小写的阿拉伯数字:
但很多时候默认的标记符号无法满足我们设计的需求。在 CSS 中我们可以使用 list-style
给列表项调转标记符号样式。该属性有三个子属性:
list-style: <'list-style-position'> || <'list-style-image'> || <'list-style-type'>
list-style-position
:设置标记符号位置,有点类似于background-position
,不过其只有outside
和inside
两个值,其中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
的元素的::marker
的content
值为normal
- 列表项或
display: list-item
的元素没有标记图像,即list-style-image
为none
满足这两个条件时,用于list-style-type
的字符串会用来填充列表项的标记,相当于是 ::marker
的 content
的值。
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 |
১, ২, ৩, ..., ৯৮, ৯৯, ১০০ |
cambodian , khmer |
១, ២, ៣, ..., ៩៨, ៩៩, ១០០ |
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-alpha , lower-latin |
a, b, c, ..., z, aa, ab |
upper-alpha , upper-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>
指定的字符串之外,还可以是其他的任意字符串,比如表情符号,文本字符,
如需转载,烦请注明出处:https://www.w3cplus.com/css/css-counter-style-part1.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!