前言#

如果你是一名网页设计师或文档作者，想要实现更精致的页面样式、提升可访问性，并节省时间和精力，那么这本书非常适合你。在开始阅读本书之前，你只需要了解 HTML 4.0。你对 HTML 越熟悉，准备就会越充分，但这并不是硬性要求。除此之外，你几乎不需要其他知识就能顺利阅读本书。

本书第五版于2022年底完成，力求反映当时CSS的发展现状。书中详细介绍的内容，要么在写作时已被主流浏览器广泛支持，要么已知会在出版后不久得到支持。对于仍在开发中的CSS特性，或已知即将被淘汰的内容，则未在本书中涉及。

本书使用的约定#

本书采用了以下排版约定（但请务必阅读第 xx 页的“值语法约定”，了解其中部分约定的特殊用法）：

• 斜体：用于表示新术语、网址、电子邮件地址、文件名和文件扩展名。
• 等宽字体：用于程序代码示例，以及在正文中引用程序元素，如变量名、函数名、数据库、数据类型、环境变量、语句和关键字。
• 等宽斜体：表示需要由用户自行替换的内容，或根据上下文确定的值。

值语法规范#

在本书中，我们通过专栏详细解释了每个 CSS 属性的相关内容，包括允许使用的取值。这些内容几乎是直接引用自 CSS 规范，但有必要对语法做一些说明。

每个属性允许的取值会以如下语法列出：

Value: <family-name>#
Value: <url> ‖ <color>
Value: <url>? <color> [ / <color> ]?
Value: [ <length> | thick | thin ]{1,4}
Value: [ <background>, ]* <background-color>

尖括号 < > 内用斜体标注的词，表示一种取值类型，或者引用了其他属性的取值。例如，font 属性可以接受原本属于 font-family 属性的取值，这会用 <font-family> 表示。类似地，如果允许使用颜色类型的值，则会用 <color> 表示。

任何以等宽字体显示的单词都是关键字，必须原样出现，不加引号。斜杠（/）和逗号（,）也必须按字面意思使用。

值定义的各个组成部分可以通过多种方式进行组合：

• 两个或多个关键词仅用空格分隔时，表示这些关键词必须按给定顺序依次出现。例如，help me 表示属性中必须以该顺序出现这两个关键词。
• 如果用竖线分隔备选项（X | Y），表示必须出现其中任意一个，但只能出现一个。比如 [ X | Y | Z ]，则 X、Y 或 Z 中任意一个都可以出现。
• 双竖线（X ‖ Y）表示 X、Y 或两者都必须出现，但顺序不限。因此：X、Y、X Y 和 Y X 都是有效的组合。
• 双与号（X && Y）表示 X 和 Y 都必须出现，顺序不限。因此：X Y 或 Y X 都是有效的组合。
• 方括号（[…]）用于将内容分组。例如 [please ‖ help ‖ me] do this 表示 please、help 和 me 这三个词可以以任意顺序出现，但每个词只出现一次。而 do this 必须始终按顺序出现。举例如下：please help me do this、help me please do this、me please help do this。

每个组件或括号内的分组后面都可以（也可以不）跟上以下这些修饰符之一：

• 星号（*）表示前面的值或方括号内的内容可以重复零次或多次。因此，bucket* 意味着单词 bucket 可以出现任意次数，包括零次，没有上限。 • 加号（+）表示前面的值或方括号内的内容必须重复一次或多次。因此，mop+ 意味着单词 mop 至少要出现一次，也可以出现多次。 • 井号（#），正式名称为 octothorpe，表示前面的值或方括号内的内容必须重复一次或多次，并用逗号分隔。因此，floor# 可以是 floor，也可以是 floor, floor, floor，依此类推。这个符号通常与方括号分组或特定值类型一起使用。 • 问号（?）表示前面的值或方括号内的内容是可选的。例如，[pine tree]? 意味着 pine tree 这两个词可以不用出现（但如果出现，顺序必须一致）。 • 感叹号（!）表示前面的值或方括号内的内容是必需的，因此至少要有一个值，即使语法上看起来可以省略。例如，[ what? is? happening? ]! 至少要出现这三个可选项中的一个。 • 一对大括号中的数字（{M,N}）表示前面的值或方括号内的内容至少重复 M 次，最多重复 N 次。例如，ha{1,3} 意味着单词 ha 可以出现一次、两次或三次。

评论