《CSS权威指南4》- 前言

前言

如果你是一个网页设计师或文档创作人员，且对丰富的页面样式感兴趣，想改善网站的可访问性，同时又想节约时间和精力，那么这本书正适合你。在阅读本书之前，你需要知道的东西很少，仅仅是对 HTML4.0 有适当了解，你了解的越多，也就准备的越充分，但是，这不是必须的。
本书第四本版于 2017 年年中完成，并尽量反映出当时 CSS 的最新状态。我们假设的是，本书中任何详细介绍的内容，要么在写的时候已经得到大多数浏览器的支持，要么在本书出版不久后得到支持。一些还在开发中，或者已经知道不久后会抛弃的 CSS 特性，不在本书的讨论范围内。

本书中使用的约定

本书使用了以下的排版约定（但要务必阅读属性的值的语法约定，注意其中的一些修改部分）

斜体 (Italic)

指示 新术语、URL、电子邮件地址、文件名、文件扩展名

等宽字体 （Constant width）

用于 程序清单，已经在段落中涉及到的程序元素，例如变量、函数名、数据库、数据类型、环境变量、语句和关键字

等宽粗体 (Constant width bold)

显示 用户要输入的命令、或其他文本内容

等宽斜体 (COnstant width italic)

显示 要被 用户输入的值或由上下文推断的值 来替代的文本。例如 在路径中 /code/username,要把 username，替换成自己的名字

属性的值的语法约定

在书中，有些方框是用来分解、描述给定 CSS 属性的细节，包括那些可被允许的值，它们是从 CSS 规范逐字逐句照搬过来的，不过另外也有些语法上的解释。
自始至终，每个属性的可取值都被如下的语法列出：

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

任何在< 和 > (尖括号) 之间的斜体字给出了某种值的类型，或者是对另一个属性的引用。例如，属性font可以接受原本属于属性font-family 的值，由文本<font-family>标示。相似的，如果允许使用诸如颜色之类的值的类型，它将用<color> 表示。
任何用等宽字体显示的词都是关键词，必须原样的显示，不需要加引号。斜线(/)和逗号(.)也必须原样显示。

一个值的定义 可有多种方式去组合：

• 2 个或多个关键字串在一起，且只有空格来分割它们，这意味着所有这些关键词必须按给定的顺序出现。例如，help me 表示这个属性必须以此顺序使用这些关键字。（即先 help 后 me）
• 如果候选项由 1 个竖线分割(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

每一个组合，或加了中空号的分组后可以跟（也可不跟）以下修饰符之一：

• 星号(*),表示它前面的值或分组重复 0 次或多次。因此，bucket*表示单词bucket可以使用任意次数，包括 0 次，且使用次数没有上限
• 加号(+),表示它前面的值或分组重复 1 次或多次。因此，mop+ 表示 单词mop必须使用至少一次，有可能多次。
• 井号(#)，表示它前面的值或分组重复一次或多次，且使用逗号(,)分割。因此,floor# 可表示floor,floor,floor,floor。它通常与分组后值类型一起使用。
• 问号(?)表示它前面的值或分组是可选的。比如 [pine tree]? 表示 pine tree 不一定使用，如果使用他们，就必须以指定的顺序出现。
• 感叹号(!)表示它前面的值或分组是必须的，因此必须产生至少一个值，即使语法上似乎表明不是这样。例如[what? is? happening?]!,必须 出现三个 标记为可选词中的至少一个
• 大空号中的一对数字{M,N}表示它前面的值或分组重复至少 M 次，最多 N 次。例如，ha{1,3}表示可以是 1 个，2 个，3 个 单词ha。

以下是些例子：

• give || me || liberty
  至少使用这三个词中的一个，而且可以以任何顺序使用。例如，give liberty, give me, liberty me give, give me liberty都是合法的。

• [I | am]? the || warlrus
  单词 I,am 二选一，但不能二者都使用，而且是否使用其中之一是可选的。另外，其后必须跟the或walrus, 或者二者都可，且可以以任何顺序。因此，你可以构造出I the walrus, am walrus the, am the, I walrus, walrus the等等。

• Koo+ ka-choo
koo 可以有一个或多个，其后必须跟ka-choo.因此，koo koo ka-choo, koo koo koo ka-choo, koo ka-choo是合法的。koo 的数量可以是无限的，不过这要受到实现的特定限制所限。

• I really{1,4}? [love | hate] [Microsoft | Netscape | Opera | Safari | Chrome
  这是 web 设计人员通用的表示选择的表达式。这个示例可以理解为I love Netscape, I really love Microsoft等类似的表达。really 可以使用 0~4 次，且不需要被逗号分隔。你也可以在love和hate中选择一个，这看起来像是某种隐喻。

• It's a [mad]# world
  这给了我们一个机会，去尽可能多的输出使用逗号分隔的mad，而且至少有一个mad。如果只有一个mad,则不需要加逗号。因此,It's a mad, mad, mad,mad,mad world和It's mad world都是合法的解释。

• [[Alpha || Baker || Cray],]{2,3} and Delphi
  2 个或 3 个Alpha,Baker,Cray后面必须跟着and Delphi.一种可能的结果:Cray,Alpha, and Delphi.在这个例子，逗号的位置取决于它在嵌套分组中的位置。（一些较老版本的 CSS 以这种方式来强制使用逗号分隔，而不是使用#修饰符）

代码示例的使用

每当你看到一个代码示例图标，这意味着就有一个相关的代码示例。真实示例可以在 https://meyerweb.github.io/csstdg4figs获得到。如果你正在使用一个联网的设备上阅读此书，那么你可以点击示例图标，跳转到所参考的代码示例的实际展示。

补充的资料，以 HTML，Css，和图片 文件的形式，用于生产本书中几乎所有的图表，它可以在(https://github.com/meyerweb/csstdg4figs)[https://github.com/meyerweb/csstdg4figs]下载。请务必阅读该项目的`README.md`文件，它包含了关于该项目的任何说明。

这本书就是帮助你完成工作的。总之，如果是本书提供的示例代码，你可以在你的程序和文档中使用。你不需要联系我们获得许可，除非你复制使用了大部分代码。例如，你编写的程序，仅使用了本书中的几个代码段，是不需要获得许可的。不过，销售或发行 O’Reilly 图书的示例光盘则需要得到许可。如果引用本书，或引用本书中示例代码回答一个问题是不需要获得许可的。如果在你产品文档中大量使用书中的示例代码是需要获得许可的。
我们希望大家在使用本书中的代码时能注明出处，但不强求。相关信息通常包括书名、作者、出版社、ISBN。例如，"CSS:The Definitive Guide by Eric A.Meyer and Estelle Weyl (O'Reilly). Copyright 2018 Eric Meyer, Estelle Weyl, 978-1-449-39319-9"

如果你感觉你对代码示例的使用超出了合理的使用范围或上述的许可范围，请随时通过permissions@oreilly.com.联系我们

O’Reilly Safari

Safari(以前的 Safari 在线图书)是一个面向企业、政府、教育工作者和个人的会员制的培训和参考平台。
会员可以访问超过 250 家出版商（包括 O’Reilly
Media, Harvard Business Review, Prentice Hall Professional, Addison-Wesley Professional,
Microsoft Press, Sams, Que, Peachpit Press, Adobe, Focal Press, Cisco Press,
John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe
Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, and
Course Technology）的数以千计的图书，培训视频，学习路径、互动教程和精选的播放列表。

联系我们

请通过以下地址，向出版商提出关于本书的建议和问题：

O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)

我们为此书提供了 web 页面，其中列出了错误、示例和一些附件信息。你可访问该页面在http://bit.ly/css-the-definitive-guide-4e

给这本书提建议或问技术方面的问题，可以发邮件到bookquestions@oreilly.com

有关我们书籍、课程、会议和新闻的更多信息，访问我们的网站https://www.oreilly.com/

致谢

Eric Meyer

出于技术和个人原因，这个版本是我参加过最具挑战的项目之一，一路上，我得到了无数人的帮助。我会尽力记住每一个人，但是如果我把你遗漏了，我很抱歉。
对于 CSS 的创建者，Håkon Wium Lie 和 Bert Bos，感谢你们的远见，如果没有你们的努力，网络将是一个更加贫瘠之地。
感谢不同浏览器厂商的实践者，你们付出了那么多，一路走来感谢你们让那么多事变为可能。
对于版本控制软件 git,我非常感谢它在最后关头救了我。当发现有一整章的内容丢失后，但是却很容易从过去的提交中恢复。
特别感谢 Simon St.Laurent,因为他相信我每次出版新章节的想法，当我不得不离开该项目很长一段时间，他一直守着的项目并等到我归来。他不知疲倦的和我一起工作，按着我提议的方式去推动事物向前进展。
感谢我的合作者，Estelle，感谢你在我需要帮助时挺身而出，感谢你敏锐的如审稿人般的眼睛，感谢你对本版本做出的巨大贡献。
当我没能理解 CSS 时，有很多人帮助我理解它，而且通常要经过好几轮的解释。其中一些返回了上几个版本，但大部分 帮助我适应了这个版本的 CSS 新模式。按着姓氏字母顺序排序：Rachel Andrew, Rossen Atanossov, Tab Atkins, Amelia
Bellamy-Royds, Dave Cramer, Elika Etemad, Jen Simmons, Sara Soueidan, Mel
Sumner, and Greg Whitworth。我为我疏忽而错过的任何人道歉。
感谢整个社区里的 web 开发人员和设计人员，他们与我一起度过了我所经历过的最艰难时刻，无论是朋友、同事还是陌生人，我对你们的感谢之情无以言表。在某些方面，我欠你们我的生命，感谢你能听我所诉。
对于我的家庭，我的妻子 kat, 我的孩子 Carolyn,Rebecca,Joshua.你们是庇护我的家园，是我天空中的太阳，是指引我方向的星星。没有你们我不可能走到这一步，谢谢你们所做的一切。

Estelle Weyl

我想感谢每一个努力 使 CSS 成为今天这样子的人，以及所有助于提高技术多样性和包容性的人。
我想感谢那些不知疲倦的浏览器开发者和编写 CSS 规范的开发人员。
没有这些 CSS 工作组的成员，过去、现在以及将来，我们没有规则、没有标准、没有跨浏览器兼容。我对每一个 CSS 属性，从规范中加入、或删除的值，为此而思考的过程感到敬畏。
像 Tab Atkins, Elika Emitad, Dave Baron, Léonie Watson, Greg Whitworth 这样的人，不仅要编写规范，还要花时间去回答问题，并向更广大的 CSS 公众解释细微差别，尤其是我。
我还要感谢所有深入研究 CSS 特性的人，不论他们是否在 CSS 工作组中，还有那些对我们翻译规范有帮助的人，包括 Sarah Drasner, Val Head, Sara Souidan, Chris Coyier, Jen Simmons,
和 Rachel Andrew.另外，我想感谢那些开发了使所有 CSS 开发者生活变容易的工具的人。尤其是开发并维护https://caniuse.com/.的 Alexis Deveria。
我还要感谢为提高 CSS 多样性和包容性而付出时间和努力的开发社区里所有部门人员。是的，CSS 因此而了不起。在一个伟大的社区和伟大的人在一起工作对我来说是很重要的。
当我在 2007 第一次参加技术大会时，与会者 93%是男性，而且 100%是白人。观众的性别多样性略低，仅种族多样性略高些。实际上，我选择参加这个会议，是因为该会的阵容比巨大大多数会议更具多样性，实际上，仅有一个女性。环顾房间，我知道事情需要改变，而我也意识到我需要做些事。当时我没有意识到，在未来的 10 年，我将遇到多少默默无闻的英雄，他们为了科技和生活中的各个领域的多样性与包容性而努力。
有太多默默无闻，不知疲倦工作的人，但我想要强调其中的一些人，我无法去表达 这些人所做的积极影响，像 Erica Stanley 的《Women Who Code
Atlanta》，CarinaZona 的 《Callback Women》等等，所以这激发我去创建了一个清单http://www.standardista.com/feeding-the-diversity-pipeline/,来帮助并确保通往 web 开发职业的道路并非属于那些拥有特权的人。

谢谢大家，谢谢所有的人，谢谢你们的努力，你们所做的工作，比我 10 年前坐在那次会议上所想象的还要多。