原文：CSS3 Quick Syntax Reference
协议：CC BY-NC-SA 4.0
一、使用 CSS
将 CSS 插入 HTML 文档有三种方法:使用内部样式表、内联样式或外部样式表。内部样式表应用于单个页面，内联样式应用于单个元素，而外部样式表可能应用于整个网站。
内部样式表
当单个文档需要有自己独特的样式时，内部样式表很有用。然后使用<style>元素将样式表嵌入 web 文档的<head>部分。该元素是样式表规则的容器，应该将其type属性设置为"text/css"。
<style type="text/css">
p { color: red; }
</style>
内嵌样式
通过使用style属性设置内联样式，可以将样式分配给单个元素。它是一个通用属性，可以包含在任何 HTML 开始标记中，其值是将应用于元素的 CSS 声明，用分号分隔。不需要指定选择器，因为声明隐式地属于当前元素。
<p style="color: green">Green text</p>
这种方法应该谨慎使用，因为它将样式和内容混合在一起，因此会使将来的更改更加麻烦。在将样式移至外部样式表之前，这是一种快速测试样式的有效方法。
外部样式表
包含 CSS 最常见的方式是通过外部样式表。样式表规则放在一个单独的文本文件中，文件扩展名为.css。然后使用 web 页面标题中的<link>元素引用这个样式表。必须将rel(关系)属性设置为"stylesheet"，并且可以选择将元type属性设置为"text/css"。样式表的位置由href属性指定。
<link rel="stylesheet" type="text/css" href="MyStyle.css">
包含外部样式表的另一种不太常见的方法是在<style>元素内部使用 CSS @import函数。要使这一功能发挥作用，它必须放在任何其他规则之前。
<style type="text/css">
@import url(MyStyle.css);
</style>
使用外部样式表通常是首选，因为它完全将 CSS 从 HTML 文档中分离出来。这样就可以快速地为整个网站创建一致的外观，并且只需编辑一个 CSS 文档就可以改变它的外观。它还具有性能优势，因为外部样式表被缓存，因此只需下载一次，即访问者在您的站点上查看的第一页。
测试环境
要尝试 CSS，您可以使用简单的文本编辑器，如 Windows 中的记事本或 Mac 上的文本编辑器。在编辑器的新文档中键入以下单一样式规则。该规则将 web 文档的背景颜色设置为红色。
body { background: red; }
将文件另存为“MyStyle.css ”,然后打开另一个空文档。这个新文档将成为使用您刚刚创建的外部样式表的 HTML 文件。将以下 HTML 标记写入文档，其中包括对样式表的引用以及 HTML 5 web 文档的最小标记:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="MyStyle.css">
</head>
<body>
<p>This page is red</p>
</body>
</html>
继续将这个文本文件作为“MyPage.html”保存在 CSS 文件所在的文件夹中。现在，您已经创建了一个可以测试 CSS 的简单环境。要查看该页面，请用 web 浏览器打开 MyPage.html。您将看到，由于样式表中的规则，背景确实是红色的。
查看源代码
当您打开浏览器时，您可以通过在 PC 上按 Ctrl+U 或在 Mac 上按 Cmd+U 来查看组成页面的 HTML 标记。这种快捷方式适用于所有主流浏览器，包括 Chrome、Firefox、Safari、Opera、Edge 和 Internet Explorer (IE)。您也可以通过右键单击页面并选择“查看源代码”来找到“查看源代码”窗口在 Firefox 和 Chrome 中，样式表是可点击的，允许你查看应用于网页的外部样式表规则。
像这样查看网页的源代码提供了一个向其他 web 开发人员学习的好方法。每当你在网页上发现一个有趣的元素——无论它是用 HTML、CSS 还是 JavaScript 创建的——页面源代码都会揭示它是如何创建的。
评论
CSS 中的注释是使用 C 风格的符号(/* */)创建的。放置在/*和*/之间的所有内容都将被浏览器忽略，即使分隔符跨越多行。
/* Multi-line
Comment */
注释的主要用途是向开发者，包括以后的你，阐明代码。它们还可以用来分隔样式表的各个部分或提供关于文件的元数据，如作者姓名，从而提高可读性。
/*
* Meta data
*/
/*** Section heading ***/
p { margin-top: -1px; } /* clarification */
注释对于出于测试目的临时停用声明或整个样式规则也很有用。
p { /* color: white; */ }
空白
空白是指空格、制表符和换行符。你可以随意设置样式表的格式，用空白来使它们更容易阅读。一个常见的格式化惯例是将声明分成多行。
.fruit {
color: red;
margin: 1px;
}
另一个流行的惯例是将规则的声明放在一行中，只有在声明太多的时候才将其分成多行。
.fruit { color: red; margin: 1px; }
.fruit.apple { color: green; margin: 2px; }
您使用的格式是个人喜好的问题。选择一个对你有意义的，并致力于保持一致。
二、分组
为了保持样式表简短和易于编辑，可以将相似的规则组合在一起。这种分组提供了几种指定一组相关规则的方法。例如，您可以用四种不同的方式将两个 header 元素的文本涂成红色，背景涂成黑色，如以下部分所述。
未分组的规则
每个规则都可以单独编写，这允许您对每个选定的元素应用单独的样式规则。
h1 { color: red; }
h1 { background: black; }
h2 { color: red; }
h2 { background: black; }
分组选择器
可以通过用逗号分隔来将选择器分组在一起。这将把声明应用于两个选择器。
h1, h2 { color: red; }
h1, h2 { background: black; }
分组声明
可以通过用分号分隔来将声明组合在一起。声明块中的所有样式都将应用于选择器。
h1 {
color: red;
background: black;
}
h2 {
color: red;
background: black;
}
分组选择器和声明
选择器和声明都可以组合起来，形成一个规则。这个方法提供了编写这些规则的最简洁的方式。
h1, h2 {
color: red;
background: black;
}
应该尽可能对规则进行分组，以使样式表更加简洁。这对性能有一点好处，因为简洁的规则减小了样式表的大小，这使得 CSS 文件加载更快。此外，只在一个地方指定属性很方便，以防以后必须更改它们。此外，将样式相似的选择器分组可以更容易地维护它们之间的一致性。
三、类和 ID 选择器
类和 id 选择器定义了只应用于一组选定的 HTML 元素的规则。它们允许您标识单个元素或元素组，而不必设置元素类型的所有实例的样式。
类选择器
类选择器用于标识一组元素。它由句点(.)识别，后跟一个类名。这里定义了一个通用类，可以应用于任何元素。
/* Selects any element with class name myclass */
.myclass {}
选择器也可以是一个特定的类，它只能应用于一种类型的元素。这种类是通过在句点符号前声明元素名称来定义的。
/* Selects any <p> element with class name myclass */
p.myclass {}
特定的类使得识别类的使用位置变得更加容易，而通用的类可以允许更大程度的代码重用。
班级示例
假设某些元素中的文本应该是有颜色的，但不是这些元素的所有实例都有颜色。然后，第一步是添加一个指定了颜色属性的通用类规则。
.info { color: green; }
这条规则规定任何元素的class属性的值为"info"的元素都将具有这种样式。
<p class="info">Green</p>
如果一个类规则只被一个元素类型使用，它可以被定义为一个特定的类。这样做可以让任何阅读样式表的人更容易理解在哪里使用该样式。
p.warn { color: orange; }
特定的类规则以与通用类规则相同的方式应用于文档，但是它将只设计指定类型的元素的样式。
<p class="warn">Orange</p>
通过用空格分隔每个类名，可以将多个类规则应用于单个元素。这使得班规非常通用。
<p class="style1 style2"></p>
ID 选择器
id 选择器用于标识一个唯一的元素。它的工作方式很像类选择器，但是使用了井号(#)代替句点，使用了id属性代替了class属性。像class属性一样，id是一个通用属性，几乎可以应用于任何 HTML 元素。它为文档中的元素提供了唯一的标识符。
/* Selects the element with id set to myid */
#myid {}
像类选择器一样，id 选择器可以用元素限定。但是，因为应该只有一个元素具有给定的 id，所以这个额外的限定符被认为是不必要的。
/* Selects the <p> element with id set to myid */
p#myid {}
ID 示例
下面的 id 选择器将匹配文档中唯一的元素，该元素的id属性被设置为该 id。因此，如果某个样式只应用于单个元素实例，则可以使用此选择器来代替类选择器。
#err { color: red; }
使用id属性将 id 规则应用于元素。因为id属性必须是惟一的，每个 id 选择器只能在每个 web 页面的一个元素上使用。因此，id 选择器隐式指定该样式在任何一页上只使用一次。
<p id="err">Red</p>
类和 ID 指南
在许多情况下，使用类是在 CSS 中选择元素的首选方法，因为类既灵活又可重用。另一方面，id 通常用于站点的结构元素，如#content和#footer，以突出这些元素的独特作用。
四、属性选择器
属性选择器允许根据元素的属性和属性值为元素添加样式。
属性选择器
使用特定属性的元素可以使用属性选择器进行匹配。这个选择器不考虑属性的值。
input[type] {}
该选择器将只匹配使用type属性的输入元素，例如以下元素:
<input type="text">
属性值选择器
属性和值都可以使用属性值选择器进行匹配。
input[type="submit"] {}
将type属性设置为submit的输入元素将按照此规则进行匹配，如下例所示:
<input type="submit">
语言属性选择器
语言属性选择器用于匹配lang属性。
p[lang|="en"] {}
这个选择器将匹配任何lang属性值以“en”开头的元素，比如“en-US”。注意，像这样的语言代码是不区分大小写的。
<p lang="en">English</p>
<p lang="en-US">American English</p>
分隔值选择器
[attribute~=value]选择器将应用于属性值包含空格分隔的单词列表中给定单词的元素。
input[value~="word"] {}
该规则将选择以下两个元素。单词需要精确区分大小写，因此选择器不会应用于“word”或“words”等。
<input type="text" value="word">
<input type="text" value="word word2">
值子串选择器
[attribute*=value]选择器匹配属性值包含指定子串的元素。
p[title*="para"] {}
带有包含“para”的title的段落元素将按照此规则进行匹配。
<p title="my paragraph"></p>
值开始选择器
[attribute^=value]选择器匹配属性值以指定字符串开头的每个元素。
p[title^="first"] {}
具有以“第一个”开始的title值的段落将应用此规则。
<p title="first paragraph"></p>
值结束选择器
如果一个元素的属性值以指定的字符串结尾，那么[attribute$=value]选择器匹配该元素。
p[title$="1"] {}
在下面的标记中，title属性的值以“1”结束，因此将与该规则匹配。
<p title="paragraph 1"></p>
五、伪选择器
伪类和伪元素是可以附加到选择器上的关键字，使它们更加具体。它们很容易识别，因为它们前面总是有一两个冒号。
伪元素
伪元素允许对元素的某些部分进行样式化。其中只有一个可以应用于任何一个选择器。
首字母和首行
伪元素::first-letter和::first-line可以将样式应用到元素的第一个字母和第一行。它们只对诸如段落之类的块元素有效。
p::first-letter { font-size: 120%; }
p::first-line { font-weight: bold; }
前面的第一条规则使段落中的首字母比其他文本大 20%。第二个规则是将段落中的第一行文本加粗。
前后
顾名思义，::before和::after伪元素可以指向元素前后的位置。它们与content属性一起使用，在元素之前或之后插入内容。
p::before { content: "Before"; }
p::after { content: "After"; }
这些规则使下面的段落显示为“BeforeMiddleAfter”:
<p>Middle</p>
属性的特殊之处在于它只能与这两个伪元素一起使用。它也是唯一打破内容(HTML)和设计(CSS)界限的属性。请记住，只有当一段内容的出现归结为设计决策时，这条线才应该被打破。例如，content属性可以用来在元素前添加一个图标，这可以通过使用url函数来完成。
p.bullet::before { content: url(my-bullet.png); }
到目前为止描述的四个伪元素是在 CSS 2 中引入的，它们只使用了一个冒号(:)。CSS 3 引入了双冒号(::)符号来区分伪元素和伪类。W3C 不赞成使用单冒号表示法，但所有主流浏览器都继续支持这两种语法。只有在需要支持传统浏览器 IE8 的情况下，包含单冒号才是合适的。
.foo:after {} /* CSS 2 */
.foo::after {} /* CSS 3 */
所有主流桌面浏览器都支持第五种伪元素—::selection。顾名思义，这个伪元素可以为用户选择的内容添加样式。大多数浏览器的有效样式属性仅限于color和background-color。
::selection { background-color: blue; }
伪类
伪类允许基于元素关系和 HTML 文档中没有的信息进行样式化。它们中的大多数分为三类:动态类、结构类和用户界面伪类。与伪元素不同，可以将多个伪类应用于一个选择器，使其更加具体。
动态伪类
第一类伪类用于在链接或其他交互元素的状态改变时将样式应用于它们。共有五个，都是在 CSS 2 中引入的。
链接并访问过
动态伪类:link和:visited只能应用于锚元素(<a>)。:link伪类匹配未浏览页面的链接，而:visited匹配已浏览页面的链接。
a:link {} /* unvisited links */
a:visited {} /* visited links */
活动和悬停
另一个伪类是:active，它匹配被激活的元素，例如通过鼠标点击。这对于设置锚元素的样式非常有用，但是它可以应用于任何元素。
a:active {} /* activated links */
当用户在所选元素上移动鼠标等定点设备时，会应用一个附加了:hover伪类的选择器。它通常用于创建链接翻转效果。
a:hover {} /* hovered links */
当应用于同一个选择器时，这四个伪类需要以正确的顺序出现。具体来说，:hover伪类必须在:link和:visited之后，为了让:active工作，它必须出现在:hover之后。短语“爱与恨”可以用来提醒组成正确顺序的首字母。
a:link {} /* L */
a:visited {} /* V */
a:hover {} /* H */
a:active {} /* A */
集中
最后一个动态伪类是:focus，可以用在可以接收焦点的元素上，比如 form <input>元素。:active和:focus的区别在于:active只持续点击的持续时间，而:focus持续到元素失去焦点。
input:focus {}
结构伪类
结构伪类基于元素与其他元素的关系来定位元素。CSS 2 在这个类别中只包含了一个结构化的伪类:first-child，而 CSS 3 引入了大量的新类。所有主流浏览器都支持 CSS 3 结构伪类。
第一胎
t-child 伪类匹配所选元素的第一个子元素。
p:first-child {} /* first paragraph child */
在以下示例中，此规则适用于段落的第一个子元素。
<p>
<span>First child</span>
<span>Text</span>
</p>
最小的孩子
:last-child伪类表示所选元素的最后一个子元素。
p:last-child {} /* last paragraph child */
该规则以下面段落元素的最后一个子元素为目标。
<p>
<em>Text</em>
<em>Last child</em>
</p>
独生子女
:only-child伪类匹配没有任何兄弟的元素。
p:only-child {} /* children without siblings */
该规则应用于下面的第一个<strong>元素，因为它是该段落的唯一子元素。第二个段落元素有两个子元素，因此它们都不是此规则的目标。
<p>
<strong>Only child</strong>
</p>
<p>
<strong>Text</strong>
<em>Text</em>
</p>
唯一的类型
顾名思义，:only-of-type选择器只有在没有任何相同类型的兄弟元素时才匹配所选元素。
p:only-of-type {} /* only <p> element */
以下段落是此规则的目标，因为它是其父级的唯一段落元素。
<div>
<h1>Text</h1>
<p>Only of type</p>
</div>
一流的
:first-of-type伪类匹配所选类型的第一个子元素。
p:first-of-type {} /* first <p> element */
它匹配以下标记中的第一个段落元素:
<div>
<h1>Text</h1>
<p>First of type</p>
<p>Text</p>
</div>
最后的类型
可以用:last-of-type伪类选择特定类型的最后一个兄弟。
strong:last-of-type {} /* last <strong> element */
这条规则适用于它的兄弟姐妹中最后一个<strong>柠檬。
<div>
<strong>Text</strong>
<strong>Last of type</strong>
</div>
第 n 个孩子
在子元素被分成多组a元素后，:nth-child(an + b)伪类匹配每个b子元素。
p:nth-child(1) {} /* first child */
p:nth-child(2n) {} /* even children */
p:nth-child(2n+1) {} /* odd children */
这些规则适用于以下 HTML 标记:
<p>
<span>First and odd</span>
<span>Even</span>
<span>Odd</span>
</p>
奇偶子匹配是常见的操作。为了简化这种选择，也可以使用关键字odd和even，例如匹配表格中的每隔一行。
tr:nth-child(even) {} /* even table rows */
tr:nth-child(odd) {} /* odd table rows */
如图所示，:nth-child()的参数可以是整数、关键字even或odd，或者是以an+b形式的表达式。在表达式形式中，关键字n是一个遍历所有子元素的计数器。计数器可能是负的，在这种情况下，迭代向后进行。这可用于选择特定数量的第一个孩子。
p:nth-child(-n+3) {} /* first three children */
与:nth-child()一起使用的数学和参数对于接下来的三个伪类也是有效的，它们都以:nth开始。
第 n 种类型
在所选类型的兄弟被分成多组a元素后，:nth-of-type(an+b)伪类匹配该类型的第b个元素。
p:nth-of-type(2) {} /* second paragraph sibling */
p:nth-of-type(2n) {} /* even paragraph siblings */
p:nth-of-type(2n+1) {} /* odd paragraph siblings */
这个伪类的行为类似于:nth-child，但是它匹配指定元素的相同类型的兄弟，而不是匹配指定元素的子元素。
<div>
<em>Text</em>
<p>Odd</p>
<p>Second and even</p>
<p>Odd</p>
</div>
类似于其他的:nth伪类，关键字odd和even可以用来匹配索引为奇数或偶数的相同类型的兄弟。
p:nth-of-type(even) {} /* even paragraph siblings */
p:nth-of-type(odd) {} /* odd paragraph siblings */
第 n 个类型的最后一个
:nth-last-of-type(an+b)伪类匹配所选类型的元素，该元素后面有相同类型的an+b元素。这个行为相当于:nth-of-type伪类，只是元素是从底部而不是顶部开始计数的。
p:nth-last-of-type(3) {} /* third last paragraph */
p:nth-last-of-type(-n+2) {} /* last two paragraphs */
这两条规则适用于以下示例。<em>元素没有被计算在内，因为它不是指定的类型——在本例中是段落。
<div>
<p>Third last</p>
<p>Last two</p>
<p>Last two</p>
<em>Text</em>
</div>
倒数第 n 个孩子
:nth-last-child(an+b)伪类表示其后有an+b兄弟的任何元素。它的行为与:nth-child相同，除了它从底部元素而不是顶部元素开始。
p:nth-last-child(3) {} /* third last child */
p:nth-last-child(-n+2) {} /* last two children */
这两条规则适用于以下示例中的子元素:
<div>
<p>Third last</p>
<p>Last two</p>
<p>Last two</p>
</div>
空的
:empty伪类匹配没有任何内容的选定元素。
p:empty {} /* empty paragraphs */
如果一个元素除了注释之外没有子元素、文本或空白，则被认为是空的。上述规则适用于以下两段:
<p></p>
<p><!-- also empty --></p>
根
:root伪类匹配文档树中最顶端的元素。在 HTML 文档中，这总是<html>元素。
:root {} /* root element */
这个伪类主要在 CSS 用于其他语言(如 XML)时有用，在 XML 中，根元素可以变化。
用户界面伪类
CSS 3 引入了许多用户界面伪类，用于根据交互元素的当前状态来设计它们的样式。
启用和禁用
:enabled和:disabled伪类匹配所选类型的任何启用或禁用的元素。它们仅适用于处于启用或禁用状态的交互式元素，如表单元素。
input:enabled { background: green; }
input:disabled { background: red; }
下面的表单包含一个启用的和一个禁用的输入元素，它们受这两个规则的影响:
<form>
<input type="text" name="enabled">
<input type="text" name="disabled" disabled>
</form>
检查
:checked伪类匹配处于选中状态的元素。它只能用于复选框、单选按钮和<option>元素。
input[type="checkbox"]:checked {}
此规则匹配网页上选中的任何复选框。
<form>
<input type="checkbox">
</form>
有效和无效
:valid和:invalid伪类用于在用户填写表单时向用户提供反馈。现代浏览器可以根据表单元素的输入类型执行基本的字段验证，结果可以与这些伪类一起用于样式化输入元素。
input:valid { background: green; }
input:invalid { background: red; }
这里给出了两个字段，一个是必需的，一个是可选的。第一个字段保持无效，直到在该字段中输入电子邮件。第二个字段是可选的，因此如果留空则有效。
<form>
<input type="email" required>
<input type="email">
</form>
注意，这些伪类绝不是使用 JavaScript 或 PHP 等适当形式验证的替代品。Chrome 10+、Firefox 4+、Safari 5+、Opera 10+、IE 10+中都有对这两个伪类的浏览器支持。
必需和可选
设置了required属性的表单字段与:required伪类匹配。相关的:optional伪类则相反:它匹配没有设置required属性的输入元素。
input:required { color: red; }
input:optional { color: gray; }
下面的表单包含一个必需的和一个可选的 input 元素，这是以前的样式所针对的:
<form>
<input type="email" required>
<input type="url">
</form>
像:valid和:invalid伪类一样，对:required和:optional的支持存在于 Chrome 10+、Firefox 4+、Safari 5+、Opera 10+和 IE 10+中。
超出范围和在范围内
输入元素可以包含最小和最大属性，以定义该元素合法值的范围。范围外和范围内伪类可以应用于当前位于指定范围之内或之外的目标输入元素。
input:out-of-range { color: red; }
input:in-range { color: black; }
Chrome 53+、Firefox 50+、Safari 10.1+、Opera 40+和 Edge 13+都增加了对这两个伪类的支持。下面的表单显示了使用 min 和 max 属性的两个输入字段。
<form>
<input type="number" min="1" max="5">
<input type="date" min="1900-01-01">
</form>
读写和只读
不能编辑包含只读属性的输入元素。这种元素可以使用只读伪类作为目标。相比之下，任何可以编辑的元素都可以用读写伪类来选择。
input:read-only { color: gray; }
input:-moz-read-only { color: gray; }
input:read-write { color: black; }
input:-moz-read-write { color: gray; }
这些伪类可以在 Chrome 36+、Firefox 3+、Safari 4+、Opera 11.5+和 Edge 13+中使用。–moz–前缀对于所有版本的 Firefox 都是必需的。下面的标记显示如何将只读属性应用于表单 input 元素。
<form>
<input type="text" value="unavailable" readonly>
</form>
其他伪类
一些伪类不适合任何早期的类别，即:target、:lang、:not伪类。
目标
:target伪类可以对通过id链接定位的元素进行样式化。这对于突出显示文档的目标部分非常有用。
:target { font-weight: bold; } /* targeted element */
当跟随以下内部页面链接时，此规则应用于锚元素。浏览器也会向下滚动到该元素。
<a href="#my-target" id="my-target">In page link</a>
语言
伪类:lang()匹配由参数提供的语言中确定的元素。
p:lang(en) {}
这个伪类适用于面向英语读者的段落元素，例如下面的段落:
<p lang="en">English</p>
注意，这个伪类的行为类似于语言属性选择器。不同之处在于，如果语言是在祖先元素上设置的，或者以其他方式(比如通过页面 HTTP 头或<meta>标签)设置的，:lang伪类也匹配元素。
<body lang="fr">
<p>French</p>
</body>
不
否定伪类:not匹配非指定选择器目标的元素。
p:not(.first) { font-weight: bold; }
本示例规则选择不使用first类的段落。
<p class="first">Not bold</p>
<p>Bold</p>
六、关系选择器
关系选择器根据元素与其他元素的关系来匹配元素。要理解这些选择器，重要的是要认识到 web 文档中的元素是如何相互关联的。
HTML 层次结构
一个 HTML 文档可以被想象成一棵以<html>元素为根的树。每个元素都适合这个树上的某个位置，并且每个元素都是另一个元素的父元素或子元素。任何位于另一个元素之上的元素都称为祖先，直接位于其上的元素是父元素。类似地，一个元素在另一个元素之下称为后代，直接在它之下的元素是子元素。反过来，与另一个元素共享同一个父元素的元素称为兄弟元素。考虑下面这个简单的 HTML 5 文档:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
在这个例子中，<h1>和<p>是兄弟元素，因为它们共享同一个父元素。它们的父元素是<body>，和<html>一起，它们都是兄弟元素的祖先。反过来，这两个兄弟元素是<body>的子元素以及<body>和<html>的后代。图 6-1 显示了这个简单文件的层次结构。
图 6-1
HTML 层次结构示例
遗产
继承是 CSS 中的另一个重要概念。它使某些样式不仅适用于指定的元素，还适用于它的所有后代元素。例如，color属性是默认继承的，而border属性不是。这通常是预期的行为，使得继承使用起来非常直观。任何属性都可以显式地被赋予值inherit,以使用与该属性的父元素相同的值。
/* Inherit parent’s border */
p { border: inherit; }
继承使您能够在找到每个后代元素都需要相同样式的地方时，将该样式应用于共同的祖先。这个过程比将样式应用于需要特定样式的每个后代元素更方便，也更易于维护。例如，如果整个文档的文本需要设置为特定的颜色，您可以将该样式应用于<body>元素，它是所有可见元素的共同祖先。
/* Set document text color to gray */
body { color: gray; }
现在您已经了解了 HTML 层次结构和继承概念，可以讨论 CSS 的关系选择器了。
相邻选择器
如果第二个元素紧跟在第一个元素之后，则相邻的同级选择器选择第二个元素。
div+p { color: red; }
这个选择器匹配跟在<div>元素后面的段落。
<div>Not red</div>
<p>Red</p>
<p>Not red</p>
后代选择器
如果一个元素是另一个元素的子元素或孙元素，则后代选择器匹配该元素。当您希望仅在一个元素驻留在另一个元素中时将样式应用于该元素时，这很有用。
div p { background: gray; }
前面的规则适用于下面的段落，因为它是从<div>元素派生出来的:
<div>
<p>Gray</p>
</div>
直接子选择器
如果第二个元素是第一个元素的直接后代，则直接子选择器匹配第二个元素。
div > span { color: green; }
当应用于以下标记时，该规则将第二个<span>元素涂成绿色。第一个<span>元素没有颜色，因为它不是<div>的直接子元素。
<div>
<p>
<span>Not green</span>
</p>
<span>Green</span>
</div>
通用兄弟选择器
CSS 3 添加了通用的兄弟选择器，只有当第二个元素前面有第一种类型的兄弟元素时，它才匹配第二个元素。
h1~p { color: blue; }
在下面的例子中，最后两个段落被选中，因为它们前面有<h1>并且都共享同一个父段落:
<p>Not blue</p>
<h1>Not blue</h1>
<p>Blue</p>
<p>Blue</p>
所有主流浏览器都支持通用兄弟选择器，包括 Chrome 1+、Firefox 3.5+、Safari 3.2+、Opera 10+和 IE 7+。
七、特异性
当多个规则应用于同一个元素并且它们指定了相同的属性时，会有一个优先级方案来确定哪个规则具有优先权。简而言之，CSS 优先考虑具有最具体选择器的规则。
选择器特异性
计算特异性有一些基本规则。权重为 0 的最低特异性由通用选择器(*)给出，它匹配文档中的所有元素。
* { color: red; } /* 0 */
类型选择器和伪元素的权重为 1，因此包含两个类型选择器和一个伪元素的选择器的特异性为 3。
p { color: blue; } /* 1 */
body p::first-letter { color: gold; } /* 3 */
类选择器的权重为 10，伪类和属性选择器也是如此。将这些选择器中的一个与类型选择器包括在内，总权重为 11。
.a { color: lime; } /* 10 */
p:first-child { color: navy; } /* 11 */
p[class=a] { color: teal; } /* 11 */
Id 选择器的权重为 100，所以 id 规则会覆盖大多数其他冲突的样式。
#i { color: aqua; } /* 100 */
内联样式有更大的特异性。权重为 1000 时，内联样式甚至比 id 规则更重要。
<p style="color: black;">Text</p>
为了覆盖所有其他冲突的样式，包括那些定义为内联样式的样式，可以将声明声明为!important。注意,!important修饰符适用于单个声明，而不是整个规则。
p { color: red !important; }
如果两个冲突规则之间的特异性相同，则级联决定应用哪个规则。
串联
在 CSS 中，不止一个样式表可以影响文档的显示。这个特性被称为层叠(CSS 的“C”部分)，因为浏览器在应用样式之前会合并所有样式表以解决任何冲突。
Web 文档可以有来自三个不同来源的样式表:浏览器、站点设计者和阅读文档的用户。设计者的样式表通常具有最高的优先级，其次是用户的个人样式表(如果有的话)，然后是浏览器的默认样式表。
设计师风格
如前所述，web 设计者有三种方法来包含 CSS 规则:内联样式、内部样式表和外部样式表。在这三种样式中，内联样式的优先级最高，其次是内部样式表，然后是外部样式表。
如果网页包含多个具有冲突规则(相同特性)的外部样式表，则 HTML 标记中最后包含的样式表优先。在样式表中也是如此。如果选择器是相同的，那么最后声明的属性是最重要的。
p { color: orange; } /* overridden */
p { color: silver; } /* dominant */
对于继承的样式，元素自身的样式优先于从其祖先继承的样式。
p { color: orange; } /* dominant */
body { color: silver; }
特异性指南
如本章所示，一个元素的样式可以在许多不同的地方用不同的优先级来指定。层叠特性为 CSS 提供了很大的灵活性，但是如果管理不好，也会导致不必要的复杂性。
通常，您希望保持较低的特异性，以便更容易知道哪些规则将优先。这样，您可以通过调整样式规则出现的顺序来让级联为您工作，而不是不必要地增加 id 和!important的特异性来覆盖冲突的样式。
八、颜色
在 CSS 中有几种不同的方法来指定颜色，这将在下面的章节中介绍。
命名符号
只需输入该颜色的常用名称即可设置颜色。
p { color: red; } /* color paragraphs red */
HTML 和 CSS 颜色规范包括 140 个预定义的颜色名称，如white、lime和olive。这些颜色都是主流浏览器支持的。
十六进制符号
对于整个调色板，可以单独设置颜色的红色、绿色和蓝色分量。每个颜色分量由一个两位十六进制数组成，整个六位数以一个散列符号(#RRGGBB)为前缀。十六进制意味着以 16 为基数计数，因此有效数字是 0 到 9 和 A 到 f。每个红绿蓝对的范围可以是 00 到 FF，或者十进制表示法中的 0-255。总而言之，这提供了 1600 万种颜色可供选择。
p { color: #FF0000; } /* red:255, green:0, blue:0 */
尽管这种颜色表示法是最混乱的一种，但由于其精确性、简洁性和浏览器支持，它也是最常见的一种。发现颜色的十六进制值的一个简单方法是使用颜色选择器工具，例如 Google 搜索引擎在搜索“颜色选择器”时提供的工具
短十六进制记数法
十六进制表示法有一个简短的形式，其中仅使用三个十六进制数字而不是六个来指定颜色。通过复制每个数字，可以将这种记数法转换为十六进制记数法。
p { color: #f00; } /* same as #ff0000 */
当不需要较长的十六进制表示法提供的完整精度时，较短的十六进制表示法是一种有用的快捷方式。
RGB 符号
rgb()功能允许将颜色值指定为红色、绿色和蓝色分量的三个强度值。该值可以是 0 到 255 之间的整数，也可以是百分比。
p { color: rgb(255, 0, 0); }
p { color: rgb(100%, 0%, 0%); }
这种表示法允许与十六进制表示法相同的颜色精度。使用什么符号取决于个人喜好，但是十六进制符号通常是首选，因为它更短，并且可以很容易地从图像编辑器中复制。
RGBA 符号
CSS 3 引入了 RGBA 符号，增加了一个 alpha 值来指定颜色透明度。该 alpha 值是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
/* Red with 50% transparency */
p { color: rgba(100%, 0%, 0%, 0.5); }
Chrome 1+、Firefox 3+、Safari 3.1+、Opera 10+和 IE 9+支持 RGBA 颜色值。如果不支持，则忽略该规则，因此，如果需要传统浏览器支持，则可以设置后备颜色值，如下所示:
p {
color: rgb(100%, 0%, 0%); /* fallback */
color: rgba(100%, 0%, 0%, 0.5);
}
不支持 RGBA 的浏览器会忽略第二个声明，并继续应用不透明版本。
HSL 符号
可以使用hsl()功能(代表色调、饱和度和亮度)设置颜色值。色调是色环上从 0 到 360 的度数，其中 0 和 360 是红色，120 是绿色，240 是蓝色。饱和度是一个百分比值，0%表示灰色，100%表示全色。亮度也指定为百分比，从 0%(暗)到 100%(亮)。
p { color: hsl(0, 100%, 100%); }
与 RGB 颜色相比，HSL 颜色可以更直观地调整，但请记住，IE 8 等传统浏览器不支持它们。HSL 是一个 CSS 3 值，在 Chrome 1+、Firefox 1+、Safari 3.1+、Opera 10+和 IE 9+中受支持。
HSLA 符号
类似于 RGB，HSL 符号可以扩展为 alpha 值，用于指定透明度。
/* Red with 50% transparency */
p { color: hsla(0, 100%, 100%, 0.5); }
HSLA 在 Chrome 1+、Firefox 3+、Safari 3.1+、Opera 10+和 IE 9+中受支持，与 RGBA 功能相同。
九、单位
指定属性值大小时，有几种单位可供选择。
绝对单位
长度的绝对单位是厘米(cm)、毫米(mm)和英寸(in)。尽管不管屏幕分辨率如何，这些单元看起来都是一样的，但情况并不总是如此，因为 web 浏览器并不总是知道显示介质的确切物理尺寸。
.one-cm { font-size: 1cm; }
.one-mm { font-size: 1mm; }
.one-in { font-size: 1in; }
这些单位主要在输出介质的大小已知时有用，例如用于将被打印到纸上的内容。由于屏幕尺寸可能会有很大变化，因此不建议将它们用于屏幕显示。
印刷单位
点(pt)和十二点活字(pc)是印刷单位。根据定义，一英寸等于 72 点，一点活字等于 12 点。像绝对单位一样，印刷单位对于打印样式表最有用，而不是在屏幕上使用。
.one-point { font-size: 1pt; }
.one-pica { font-size: 1pc; }
相对单位
长度的相对单位是像素(px)和百分比(%)。百分比是与该属性的父值成比例的单位；像素是相对于所使用的显示设备上的物理像素而言的。
.one-pixel { font-size: 1px; }
.one-percent { font-size: 1%; }
像素和百分比是 CSS 中用于屏幕显示的两个最有用的单位。像素的大小是固定的，因此可以非常精确地控制 web 文档的布局。另一方面，百分比对于定义文本内容的字体大小很有用，因为文本仍然是可缩放的，这对小型设备和辅助功能很重要。当文本是设计的一部分，并且需要匹配其他元素时，可以按像素调整大小，以便更好地控制。现代浏览器都支持整页缩放，这使得基于像素的字体大小更容易被接受。请注意，对于高分辨率屏幕，CSS 像素呈现为多个屏幕像素。例如，第一款 Apple Retina 显示屏将所有像素维度渲染为四个物理像素。
字体相关单位
两个额外的相对测量值是内高(em)和外高(ex)。Em-height 与 font-size 相同；前高大约是字体大小的一半。
.one-ex { font-size: 1ex; }
.one-em { font-size: 1em; }
像百分比一样，em-height 是一个很好的相对单位，通常用于设置 web 文档文本的字体大小。它们都尊重用户在浏览器中对字体大小的选择，并且比基于像素的字体大小更容易在小屏幕设备上阅读。另一方面，前高度单位并不常用。
CSS 3 引入了两个额外的字体相关单元:rem和ch。根 em-height ( rem)单位与根元素的字体大小(<html>)相关，在大多数浏览器中默认为 16px。它可以代替em来防止元素的字体大小受到其祖先元素字体大小的影响。
html { font-size: 16px; }
.one-rem { font-size: 1rem; }
字符单元(ch)测量元素字体的字符零(0)的宽度。它对于定义包含文本的框的宽度很有用，因为该单位大致对应于该框中的字符数。
/* Same width */
<div style="width: 5ch;"></div>
<div>00000</div>
Chrome 27+、Firefox 19+、Safari 7+、Opera 15+和 IE 9+都支持ch单元，因此它只能与后备一起使用。rem单元的支持略好，可以在 Chrome 4+、Firefox 3.6+、IE 9+、Safari 4.1+和 Opera 11.6+中工作。
视口单位
视口宽度(vw)和视口高度(vh)单位允许相对于视口来确定元素的尺寸，这意味着文档的可见部分。每个单位代表当前视口的一个百分比。
width: 50vw; /* 50% of viewport width */
height: 25vh; /* 25% of viewport height */
另外两个视口单位是vmin和vmax，它们给出视口尺寸的最小值或最大值。
width: 1vmin; /* 1vh or 1vw, whichever is smallest */
height: 1vmax; /* 1vh or 1vw, whichever is largest */
Chrome 26+，Firefox 19+，Safari 6.1+，Opera 15+，Edge 16+支持所有的视口单元。vh、vw、vmin单位比vmax有更大的支持，回溯到 Chrome 20+、Safari 6、IE 10+。
单位值
可以使用小数设置长度。一些属性也允许负值的长度。
p { font-size: 0.394in; } /* decimal value */
p { margin: -1px; } /* negative value */
请注意，如果单位前有一个空格，或者没有指定单位，则规则不起作用，但零值除外。在零后面包含一个单位是可选的，但是省略它是一个好习惯。
p { font-size: 1ex; } /* correct */
p { font-size: 0; } /* correct */
p { font-size: 0ex; } /* correct */
p { font-size: 1 ex; } /* invalid */
p { font-size: 1; } /* invalid */
每当 CSS 声明包含错误时，浏览器都会忽略它。规则中的任何其他有效声明仍然适用。
变量
CSS 3 增加了对变量的支持，允许在一个位置存储一个命名值，该值可以在整个样式表中重用。变量名以两个破折号(--)开头，区分大小写。可以在选择器中指定它们以限制它们的范围，或者在 html 选择器中指定它们以允许从样式表中的任何选择器引用它们。
html { --bg-color: black; }
var 函数用于插入变量值，在本例中，它将黑色背景应用于使用该内容类的元素。变量的另一个好处是，它们为值提供了一种更易于阅读的格式，以传达其预期用途。
.content { background-color: var(--bg-color); }
第二个参数可以传递给 var 函数。如果变量不可用，例如变量尚未定义，将使用该值。
.content {
width: var(--content-width, 80%);
}
Chrome 49+，Firefox 31+，Safari 1+，Opera 36+，Edge 15+都支持变量。注意 IE 不支持变量。如果需要遗留浏览器支持，另一种实现变量优势和其他编程功能的方法是使用 CSS 预处理器，比如 SASS。然而，这增加了一层复杂性，因为 SASS 代码需要编译成 CSS 才能使用。
计算
calc 函数允许使用简单的表达式计算属性值。它可以在任何允许数字的地方被调用，并且可以包括四个算术运算符中的任何一个(+、-、/和*)。不同的单位可以用于表达式的不同部分，如此处所示。
.content { width: calc(50% - 1em); }
可以将 calc 与变量结合使用，如下例所示，结果宽度为 25px。
.content {
--widthA: 50px;
--widthB: calc(var(--widthA) / 2);
width: var(--widthB);
}
支持 calc 功能的浏览器有 Chrome 26+，Firefox 16+，Safari 7+，Opera 15+，IE 9+。
Footnotes 1https://sass-lang.com
十、CSS 属性
既然已经介绍了 CSS 的基础知识，那么是时候看看众多可用的属性了。在接下来的章节中，可能的属性值将使用正式符号给出，如下所示:
text-shadow : inherit | none | <offset-x> <offset-y>
[<blur-radius>] [<color>]
这种表示法意味着text-shadow属性可以有三种不同的值。首先列出默认值；这种情况下就是inherit。因为inherit关键字可以为任何属性设置，所以它不会包含在列表中，除非它是默认值。第二个值none，也是一个关键字。这是该属性的初始值，可用于禁用继承的属性效果。
该符号中的第三个选项包括一组四个值——两个必需值和两个可选值——用方括号([])表示。尖括号(<>)表示不是关键词；它们是其他值类型。在这种情况下，它们是三个长度值和一个颜色值。按照这种表示法，下面的声明显示了一个使用text-shadow属性的有效示例:
text-shadow: 1px 1px 1px red;
通用关键字
除了inherit之外，在 CSS 中你可能会遇到另外两个通用属性关键字:initial和unset。这两个通用关键字都是在 CSS 3 中引入的，可以在任何属性上设置。
关键字initial将属性的初始值应用于元素，如 CSS 规范所定义的。在 Chrome 4+，Firefox 19+，Safari 3.2+，Opera 15+，Edge 12+中都支持。IE 6-11 对这个关键字没有支持，但是微软的 Edge 浏览器一开始是支持的。请记住，Edge 是从取代 IE 11 的版本 12 开始的，因此 IE 中支持的 CSS 功能在 Edge 中也受支持。在 IE 使用率下降到足够低之前，initial关键字的用处是有限的。建议改为显式指定给定属性的初始值来重置它。
第三个通用关键字是unset，它是initial和inherit关键字的组合。它将属性重置为其继承的值(如果有)；否则，它将属性设置为初始值。对unset关键字的支持仅限于 Chrome 41+，Firefox 27+，Safari 9.1+，Opera 28+，Edge 13+。没有版本的 IE 支持这个关键字。
怪癖模式
当 HTML 和 CSS 被万维网联盟(W3C)标准化时，Web 浏览器不能仅仅遵从这些标准，因为这样做会破坏大多数已经存在的网站。相反，浏览器创建了两种独立的呈现模式:一种用于符合新标准的站点(完全标准模式)，另一种用于旧的遗留站点(古怪模式)。
在全标准模式下，浏览器尽最大努力按照 HTML 和 CSS 规范渲染页面，这是你设计网站时想要的。相比之下，怪癖模式解决了传统浏览器(特别是 IE 4 和 IE 5)中的错误，使旧网页按照作者的意图显示。浏览器使用 doctype 的唯一目的是在完全标准模式和古怪模式之间做出决定。web 文档开头的有效 doctype(如下面的 HTML 5 doctype)可确保页面以完全标准模式呈现:
<!DOCTYPE html>
<html> ... </html>
这种 doctype 在所有主流浏览器中触发全标准模式，最早可以追溯到 IE 6。
供应商前缀
许多浏览器在规范变得稳定之前很久就开始加入新的 CSS 属性。因为这些实现是实验性的，所以它们的属性名包含一个供应商前缀，以表明该规范将来可能会发生变化。
主要的厂商前缀包括 Firefox 的-moz；-ms用于 Internet Explorer 和 Edge-o为 Opera 版本之前；以及针对 Chrome、Safari、Android 和 iOS 的-webkit。从 15.0 版本开始，Opera 也开始使用 WebKit 渲染引擎，因此增加了对与-o前缀并行的-webkit前缀的支持。例如，可以通过使用以下供应商前缀来增加对 CSS 3 border-radius属性的支持。请注意，不带前缀的版本应该总是最后包含在内。
.round {
/* Safari 3-4, iOS 1-3.2, Android 1.6-2.0 */
-webkit-border-radius: 3px;
/* Firefox 1-3.6 */
-moz-border-radius: 3px;
/* Opera 10.5+, IE 9+, Safari 5+, Chrome 1+,
Firefox 4+, iOS 4+, Android 2.1+ */
border-radius: 3px;
}
随着时间的推移，新属性的规范变得稳定，浏览器会去掉供应商前缀。随着时间的推移，网络用户会放弃旧的浏览器，转而使用新的版本，对厂商前缀的需求也会减少。对于border-radius属性来说，这已经发生了，现在开发人员被鼓励去掉前缀，这对于全球的 web 开发人员来说更容易一些。
渐进增强
当决定是否使用一个最新的 CSS 特性时，重要的是要考虑如果没有它你的站点会是什么样子。如果这个特性增强了你的站点的外观，比如 CSS 3 border-radius属性，你可能会想开始使用这个特性，即使只有一小部分访问者可以看到它。时间对你有利，随着人们放弃旧的浏览器，更多的访问者可以看到这个特性，这增强了他们在你的网站上的体验。这是渐进增强的本质。
另一方面，如果你的站点依赖于这个特性，如果没有它就会崩溃，你需要仔细考虑这个特性的支持程度，以及是否有可以利用的后备或脚本来增加这种支持。在 CSS 中通常有很多方法可以达到同样的效果，所以对于站点的关键元素，比如布局，选择一种所有主流浏览器都支持的方法是个好主意。
十一、文本
文本属性用于格式化文本内容的视觉外观。
颜色
属性通过使用任一种颜色符号来设置文本的颜色。默认情况下，它的值被设置为inherit，这意味着它继承了其父元素的颜色。
color : inherit | <color>
所有主流浏览器的初始值都是黑色的。在下面的示例规则中，段落颜色为蓝色:
p { color: #00f; }
文本转换
text-transform控制文本大小写。可能的值如下所示，初始值为none:
text-transform : inherit | none | uppercase | lowercase | capitalize
该属性使文本能够转换成大写或小写字母。capitalize值将每个单词的第一个字母大写。这个属性默认继承，所以none值可以用来移除继承的text-transform效果。
text-transform: none; /* remove effect */
文本装饰
可以使用text-decoration属性为文本添加一种或多种视觉效果。
text-decoration : none | underline + overline + line-through + blink
要添加多个装饰，请用空格分隔这些值(如前所示，用“+”符号表示)。以下规则在受此类影响的文本内容的上方和下方添加一行:
.highlight { text-decoration: underline overline; }
此属性不继承，但其效果以类似于继承的方式跨后代内联元素呈现。
文本缩进
block 元素中的第一行文本可以用text-indent属性缩进。它可以设置为父元素宽度的度量单位或百分比。使用负值也可以使文本向后缩进。
text-indent (block) : inherit | <length> | <percentage>
注意，这个属性只能为块元素设置，比如段落元素<p>。以下示例将段落元素的第一行缩进一个 em:
p { text-indent: 1em; }
文本对齐
块元素的文本内容可以与text-align属性对齐。该属性可以替换 HTML 中不推荐使用的align属性的用法。
text-align (block) : inherit | left | center | right | justify
文本和行内元素可以左对齐、右对齐或居中。justify值还会拉伸每一行，使左右两边看起来都是直的。
p { text-align: justify; }
text-align属性是继承的，因此需要在子元素中显式地更改它，以恢复默认的左对齐。
方向
使用direction属性可以切换文本的书写方向。
direction (block) : inherit | ltr | rtl
默认值是ltr，意思是从左到右。可以将其更改为rtl以使块元素内的文本内容向右流动。它表示文本应该从右向左阅读，例如在希伯来语或阿拉伯语文本中。
<p style="direction: rtl">
Aligned from right-to-left
</p>
这个属性是继承的，所以只需设置一次，就可以将<body>元素应用于整个网页。
文本阴影
可以使用text-shadow属性给文本添加阴影效果。
text-shadow : inherit | none | <offset-x> <offset-y> [<blur-radius>] [<color>]
阴影是使用两个偏移值定义的，后面是模糊半径和颜色的两个可选值。x 和 y 偏移被指定为相对于文本的长度值。正值向右下移动阴影；负值表示向左上方移动。
可以通过设置模糊半径来添加模糊效果，这使得阴影在边缘拉伸和淡化。属性的最后一个可选值是阴影的颜色。如果没有指定颜色值，大多数浏览器会以与文本相同的颜色呈现阴影。以下示例样式会在<h1>元素的右上方出现一个略微模糊的灰色阴影:
h1 { text-shadow: 1px -1px 1px gray; }
text-shadow是一个 CSS 3 属性，大多数主流浏览器都支持，包括 Chrome 2+，Firefox 3.5+，Safari 1.2+，Opera 9.5+，以及，IE 10+。
箱形阴影
除了文本之外，还可以使用box-shadow属性为块元素添加阴影效果。
box-shadow (block) : inherit | none | [inset] <offset-x> <offset-y> [<blur-radius>] [<spread-radius>] [<color>]
方框阴影的值与text-shadow的值相同，但有两个例外。可以指定第四个长度值spread-radius来增大或缩小阴影。该值是可选的，如果未指定，则为 0，以与元素相同的大小呈现阴影。例如，以下类规则在使用该类的任何块元素的右下角显示模糊的灰色阴影:
.drop-shadow { box-shadow: 3px 3px 3px 6px #ccc; }
对于box-shadow属性唯一的第二个值是inset关键字。如果存在，阴影会显示在框内，而不是作为投影显示在框外。
.inset-shadow { box-shadow: inset 3px 3px 3px 6px #ccc; }
box-shadow是 CSS 3 属性，在 Chrome 10+、Firefox 4+、Safari 5.1+、Opera 10.5+和，IE 9+中实现。可以使用-webkit和-moz前缀扩展支持，如下所示:
.drop-shadow
{
/* Chrome 1-5, Safari 2-5.1+ */
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
/* Firefox 3.5-3.6 */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
文本渲染
默认情况下，浏览器会自动决定在呈现文本时是否优化速度、易读性或几何精度。可以使用文本呈现属性来更改此行为。
text-rendering (text elements) : inherit | auto | optimizeSpeed | optimizeLegibility | geometricPrecision
优化易读性通常是可取的，但请记住，这可能会对性能产生负面影响，特别是当应用于文本繁重的页面并在移动设备上查看时。
p.legibility {
text-rendering: optimizeLegibility;
}
p.speed {
text-rendering: optimizeSpeed;
}
文本呈现属性没有被任何 CSS 标准定义，但是被 WebKit 和 Gecko 浏览器支持，包括 Chrome 4+、Firefox 3+、Safari 5+和 Opera 15+。
十二、文本间距
下列属性处理文本内容之间的间距。它们都是默认继承的。
行高
line-height设置线条之间的距离。初始值为normal，一般渲染为字体大小的 120%。行高也可以设置为长度、当前字体大小的百分比或乘以当前字体大小的无量纲数。
line-height : inherit | normal | <length> | <percentage> | <number>
line-height属性继承，所以设置line-height的首选方式是使用无量纲数。将line-height设置为长度或百分比会对使用不同字体大小的子元素产生意想不到的结果，因为继承的行高是固定的，而不是相对于子元素的字体大小。
/* Line height is 1.5 times font size */
line-height: 1.5;
行高对替换的内联元素如<img>没有影响。当用于其他(非替换的)行内元素时，它按预期设置行高。对于块元素，line-height设置元素中行框的最小高度。
单词间距和字母间距
word-spacing设置单词之间的间距，letter-spacing设置单个字符之间的间距。这两个属性都允许负值。
word-spacing : inherit | normal | <length>
letter-spacing : inherit | normal | <length>
以下规则在段落内创建 3 像素的字母间距和 5 像素的单词间距:
p {
letter-spacing: 3px;
word-spacing: 5px;
}
空白
属性改变了块元素中空白字符的处理方式。
white-space (block) : inherit | normal | nowrap | pre | pre-wrap | pre-line
在 HTML 中，多个空白字符通常被折叠成一个字符，文本根据需要换行以填充包含块元素的宽度。
/* Wrap text and collapse newlines, spaces and tabs */
p { white-space: normal; }
将 whitespace 设置为nowrap可以防止文本换行，除了换行标记<br>。pre(预格式化)值也防止换行，并保留所有空白字符。它的行为与 HTML 中的<pre>元素相同。
pre-wrap和pre-line值都允许文本正常换行，pre-wrap保留空白序列，pre-line折叠它们。pre-line和normal的区别在于pre-line保留了换行符。
十三、字体
字体属性可用于更改字体的外观和加载自定义字体。它们可以应用于任何元素，并且都是继承的。
字体系列
font-family设置字体的表面。其值可以是特定的字体名称，如times或verdana；或者一个通用的姓，如sans-serif、serif或monospace。
font-family : inherit | <family-names> | <generic-families>
该属性的值是一个或多个字体名称的优先列表。如果浏览器无法访问第一种字体，它将使用下一种字体，依此类推。
font-family: "Times New Roman", times, serif;
建议以一个系列名称结束列表，以确保至少该字体系列在不同浏览器之间是一致的。请注意，如果字体名称包含空格，则必须用双引号括起来，就像前面的例子一样。
字体大小
font-size设置字体的大小。该值可以是任何度量单位或父字体大小的百分比。还有几个预定义的值，如下所示:
font-size : inherit | <length> | <percentage> |
smaller | larger | xx-small | x-small |
small | medium | large | x-large | xx-large
larger和smaller值是相对于父字体大小的；其他预定义值指的是绝对尺寸。初始大小为medium，正常文本为 1 em (16 像素)。
字体样式
font-style使文本倾斜。根据规范，italic是正常脸的草书伴脸，oblique是正常脸的倾斜形式。然而，对于大多数字体来说，两面的渲染方式都是一样的。
font-style : inherit | normal | italic | oblique
字体变体
font-variant可用于使用小型大写字母而非小写字母显示文本。值small-caps以比普通大写字母小的大写字母呈现文本。
font-variant : inherit | normal | small-caps
字体粗细
font-weight设置字体的粗细。bolder和lighter值设置相对于父元素的厚度，数值指定绝对权重。bold的值等于 700，normal与 400 相同。
font-weight : inherit | normal | bold | bolder |
lighter | 100 | 200 | ... | 900
即使可以指定多个粗细值，大多数字体也只有一种加粗类型，如下面的渲染示例所示:
lighter normal bold bolder 100 200 300 400 500 600 700 800 900
字体
有一个名为font的方便快捷的属性，它在一个声明中设置所有的字体属性。
font : inherit | <font-style> + <font-variant> +
<font-weight> + <font-size> / <line-height> +
<font-family>
必须按照前面列出的顺序指定属性。只要保持这个顺序，任何一个属性都可以省略(除了font-size和font-family，这两个属性是必选的)。如果遗漏了一个属性，则使用该属性的默认值，即继承父属性的值。以下示例将四种字体属性应用于 paragraph 元素:
p { font: italic 50%/125% Verdana; }
这个字体声明在一个声明中设置了font-style、font-size、line-height和font-family属性。因为没有包含font-variant和font-weight，使用这个声明的副作用是它们都被重新设置为继承父值。
自定义字体
只有在用于查看网站的设备上安装了所选字体时，才能看到该字体。如果需要非标准字体，可以使用@font-face规则从在线位置加载字体。
@font-face {
font-family: MyFont;
src: url(myfont.ttf);
}
这个规则创建一个名为MyFont的字体，并提供一个浏览器可以下载它的 URL。有了这个规则，自定义字体就可以像任何标准字体一样使用了。
p { font-family: "MyFont", arial, sans-serif; }
Chrome 5+、Firefox 3.5+、Safari 3.1+、Opera 10+和 IE 9+都支持使用@font-face规则。如果浏览器不支持自定义字体，它将恢复为列表中的下一种标准字体。
十四、背景
背景属性可以添加背景效果。这些属性都不继承，它们可以应用于任何元素。
背景色
元素背景的颜色是用background-color属性设置的。默认情况下，其值设置为transparent。
background-color : transparent | <color>
即使使用背景图像，设置背景颜色也是一个好主意。这样，在背景图像由于任何原因不可用的情况下，就有了后备颜色。
background-color: #ccc;
背景图像
background-image用url功能指定用作背景的图像。
background-image : none | url(<url>)
用url函数定义的图像位置可以是绝对的，也可以是相对于 CSS 文件的位置。
/* Relative path */
background-image: url(img/mybg.jpg);
/* Absolute path */
background-image: url(http://mydomain.cimg/mybg.jpg);
背景-重复
默认情况下，背景图像会水平和垂直重复。这可以用background-repeat属性改变，使背景只水平重复(repeat-x)、只垂直重复(repeat-y)或根本不重复(no-repeat)。
background-repeat : repeat | repeat-x | repeat-y | no-repeat
背景-附件
在浏览器中滚动视区时，背景图像通常会跟随页面的其余部分。这种行为由具有初始值scroll的background-attachment属性决定。如果该值设置为fixed，背景的位置相对于视窗，即使页面滚动，背景也保持不动。
background-attachment : scroll | fixed | local
CSS 3 为这个属性引入了第三个值local，它固定了相对于元素内容的背景，而不是整个视口。有了这个值，只有当元素滚动时，背景才会随着元素的内容一起滚动(通过使用overflow属性实现)。Chrome 4+、Firefox 25+、Safari 5+、Opera 10.5+和 IE 9+中引入了对该值的支持。
背景位置
属性用于定位背景图像，一个值用于垂直放置，另一个值用于水平放置。它们都可以设置为长度或元素大小的百分比，并且允许负值。该属性还有一些预定义的值，包括垂直放置的top、center和bottom；以及水平放置的left、center和right。
background-position : <length> <length> | <percentage> <percentage> |
top/center/bottom + left/center/right
默认情况下，背景图像位于其父元素填充区域的左上角。给定的任何长度值都会相对于这些边缘移动背景图像。例如，下列属性将背景向下偏移 5 个像素，向右偏移 10 个像素:
background-position: 5px 10px;
CSS 3 增加了一个四值语法，允许选择图像相对于元素的哪一侧放置。使用此语法，下一个示例中的背景相对于元素的右下角而不是左上角定位。
background-position: bottom 5px right 5px;
只有 Chrome 25+、Firefox 13+、Safari 5.28+、Opera 10.5+和 IE 9+支持这种四值符号。
背景尺寸
背景图像的尺寸通常与图像的实际尺寸相同。它可以通过background-size属性来改变，该属性允许背景被调整到以像素为单位或者以相对于背景定位区域的百分比来指定的尺寸。
background-size (1-2) : auto | <length> | <percentage> | cover | contain
有两个值，第一个值决定图像的宽度，第二个值决定图像的高度。
background-size: 150% 100%;
单个值仅定义图像的宽度。然后高度被隐式设置为auto，保持图像的纵横比。
background-size: 150%;
contain和cover关键字调整背景大小以填充父容器，同时保持纵横比。cover值确保图像完全覆盖背景定位区域，而contain确保背景包含在该区域内。它们的区别如图 14-1 所示。
图 14-1
背景大小与封面和包含关键字
该属性是在 CSS 3 中添加的，在 Chrome 4+、Firefox 4+、Safari 5+、Opera 10.5+和 IE 9+中受支持。使用-webkit和-moz前缀扩展了对 Chrome 1+、Safari 3+和 Firefox 3.6+的支持。
背景剪辑
背景图像或颜色的绘画区域可以用background-clip属性设置。
background-clip : border-box | padding-box | content-box
背景通常延伸到边框的外边缘(border-box)并呈现在任何可见边框的后面。相反，padding-box的值在元素的填充内绘制背景。第三个可能的值content-box，在内容区域内绘制背景。使用下面的声明，背景被裁剪到内容的外部边缘:
background-clip: content-box;
background-clip在 Chrome 1+、Firefox 4+、Safari 3+、Opera 12+和 IE 9+中受支持。
背景-来源
background-origin属性决定背景图像或颜色的起点。
background-origin : padding-box | border-box | content-box
背景图像通常从元素填充区域的左上角开始呈现(padding-box)。可以进行更改，使背景从边框区域的左上边缘(border-box)或内容区域(content-box)开始。
background-origin属性通常与background-clip一起使用来改变背景的起点和剪辑区域。以下声明将它们都设置为内容区域:
background-origin: content-box;
background-clip: content-box;
background-origin属性是一个 CSS 3 属性，可以在 Chrome 4+、Firefox 4+、Opera 10.5+、Safari 5+和 IE 9+中工作。所有版本的 Firefox 和 Chrome 以及 Safari 4 都支持前缀为-moz和-webkit的浏览器，如下例所示。注意火狐在版本 4 之前使用了值padding和border；没有将内容框指定为原点的值。
/* Chrome 1-3, Safari 4 */
-webkit-background-origin: border-box;
/* Firefox 1-3.6 */
-moz-background-origin: border;
background-origin: border-box;
背景
background属性是在一个声明中设置所有背景属性的快捷方式。
background : <background-color> + <background-image> +
<background-repeat> + <background-attachment> +
<background-position> + <background-size> +
<background-clip> + <background-origin>
这些值的顺序无关紧要，因为它们之间没有歧义。任何一个值都可以省略，但是请记住，在使用该属性时，那些被省略的属性将被重置为默认值。
background: url(bg.png) no-repeat fixed right bottom;
在大多数情况下，当设置多个单独的属性时，最好使用像这样的简写属性。与使用此处所示的等效手写属性相比，它具有更好的性能，并且更易于维护:
background-image: url(bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
多重背景
通过在逗号分隔的列表中指定属性值，可以将多个背景应用于同一元素。列表中的第一个背景出现在顶部，每个后续背景只能通过堆叠在它上面的背景的透明区域看到。
background-image: url(bg1.png), url(bg2.png);
background-repeat: no-repeat, repeat-y;
background-attachment: fixed, fixed;
background-position: right bottom, top left;
速记属性也可以通过以下方式用于多种背景:
background: url(bg1.png) no-repeat fixed right bottom,
url(bg2.png) repeat-y fixed top left;
对多背景的支持是在 CSS 3 中添加的，并且从 Chrome 4+、Firefox 3.6+、Safari 3.1+、Opera 10.5+和 IE 9+开始就包含在浏览器中。可以为不支持多背景的旧浏览器提供后备图像。
background-image: bg.png; /* fallback */
background-image: bg1.png, bg2.png;
