第 16 章 列表和生成内容 列表和生成内容
本作品已使用人工智能进行翻译。欢迎您提供反馈和意见:translation-feedback@oreilly.com
在 CSS 布局领域,列表是一个有趣的案例。列表中的项目都是简单的方框,只是在一侧多了一个不参与文档布局的部分。在有序列表中,额外的部分包含一系列递增的数字(或字母),这些数字(或字母)由用户代理(而非作者)进行计算和格式化。根据文档结构的提示,用户代理生成数字及其基本表现形式。
利用 CSS,您可以定义自己的计数模式和格式,并将这些计数器与任何元素关联起来,而不仅仅是有序列表项。此外,这种基本机制还可以在文档中插入其他类型的内容,包括文本字符串、属性值甚至外部资源。因此,使用 CSS 可以在设计中插入链接图标、编辑符号等,而无需创建额外的标记。
为了了解所有这些列表选项是如何组合在一起的,我们将先探讨基本的列表样式,然后再研究内容和计数器的生成。
使用列表
从某种意义上说,几乎任何不是叙述性文字的东西都可以被视为列表。美国人口普查、太阳系、我的家谱、餐厅菜单,甚至是你曾经有过的所有朋友,都可以用列表来表示,或者说是列表的列表。如此多的变化使得列表变得相当重要,这也是为什么 CSS 中的列表样式没有更加复杂的原因。
影响列表样式的最简单(也是支持最好的)方法是更改其标记类型。例如,在无序列表中,列表项的标记是出现在每个项旁边的圆点。在有序列表中,标记可以是字母、数字或其他计数系统的符号。你甚至可以用图像来代替标记。所有这些都可以通过使用不同的列表样式属性来实现。
列表类型
要在上更改用于列表项的标记类型,请使用list-style-type 属性。
可以使用文本字符串作为标记,如list-style-type: "▷" 。此外,<counter-style> 代表一长串可能的关键字或使用@counter-style 定义的自定义计数器样式(请参阅"定义计数模式")。这些列表样式类型的几个示例如图 16-1 所示。
图 16-1. 列表样式类型示例
这里列出了这些关键字(以及一些特定于浏览器的附加功能):
|
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access