CSS3-快速参考指南-全-
CSS3 快速参考指南（全）
一、使用 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+。
十、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;
十五、渐变
渐变是一种从一种颜色平滑过渡到另一种颜色的颜色填充。CSS 3 中引入了渐变函数，根据规范，渐变函数可以用在任何需要图像的地方，但是它们主要与background或background-image属性一起使用来创建背景渐变。
线性渐变
linear-gradient()函数定义了一个渐变，提供了从一种颜色到另一种颜色的平滑过渡。
linear-gradient([<angle> | to <side-or-corner>]
{, <color stop> [stop position]} (2-∞) )
最简单的形式是，线性渐变由两种颜色组成，从上到下均匀分布。在图 15-1 中，渐变从灰色开始，在底部过渡到黑色。
图 15-1
简单线性渐变
.mygradient {
background-image: linear-gradient(gray, black);
}
可以使用关键字to设置渐变的角度，后跟渐变结束的目的地:top、right、bottom、left或它们的任意组合。示例如图 15-2 所示。
图 15-2
右下线性渐变
linear-gradient(to bottom right, gray, black);
使用deg单位可以指定更精确的角度，0 deg与to top相同。度数顺时针旋转，允许负角度。
linear-gradient(0deg, gray, black); /* to top */
linear-gradient(90deg, gray, black); /* to right */
linear-gradient(180deg, gray, black); /* to bottom */
linear-gradient(-90deg, gray, black); /* to left */
可以在起始色和结束色之间添加额外的色标。任何颜色停止点后面都可以跟一个以百分比或长度值指定的停止点位置。如果没有指定停止位置，颜色会均匀分布。在下面的例子中，白色设置为 25 %,而不是默认的 50%。图 15-3 展示了这段代码的结果。
图 15-3
具有多个色标的渐变
linear-gradient(gray, white 25%, black);
目前描述的标准语法在 Chrome 26+、Firefox 16+、Safari 6.1+、Opera 12.1+和 IE 10+中受支持。遗留语法可以与-moz、-webkit和-o前缀一起使用，以扩展对 Firefox 3.6、Chrome 1、Safari 4 和 Opera 11.1 的支持。
.linear-gradient
{
background-color: red; /* fallback color */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(linear, left top, right top, from(red), to(orange));
/* Chrome 10-25, Safari 5.1-6.1 */
background: -webkit-linear-gradient(left, red, orange);
/* Firefox 3.6-15 */
background: -moz-linear-gradient(left, red, orange);
/* Opera 11.1-12.1 */
background: -o-linear-gradient(left, red, orange);
/* Standard syntax */
background: linear-gradient(to right, red, orange);
}
径向渐变
径向渐变从中心点向外过渡。在 CSS 中，这些渐变是用radial-gradient()函数定义的。
radial-gradient([<shape> + <size>] [at <position>]
{, <color stop> [stop position]} {2-∞} )
要创建径向渐变，必须定义至少两个色标。图 15-4 中的径向渐变从中间的灰色开始，逐渐变为黑色。
图 15-4
简单径向渐变
radial-gradient(gray, black);
像linear-gradient()一样，允许有两个以上的颜色停止点，它们后面可以有一个长度或百分比值，表示颜色的停止位置。示例如图 15-5 所示。
图 15-5
设置停止位置的径向渐变
radial-gradient(black 25%, white, black 75%);
径向渐变的形状可以是ellipse或circle。默认的形状是ellipse，它允许渐变扩展以匹配元素的高度和宽度，如图 15-5 所示。可选的circle值，如图 15-6 所示，强制渐变为圆形，与元素的形状无关。
图 15-6
圆形径向渐变
radial-gradient(circle, black 25%, white, black 75%);
省略号的两个长度值或圆的单个值可用于设置渐变的水平和垂直半径。对于省略号，它们也可以是相对于元素尺寸的百分比值，如图 15-7 所示的例子。
图 15-7
调整径向渐变的大小
radial-gradient(75% 25%, gray, black);
如果需要更小的精度，可以使用预定义的关键字之一来设置尺寸:closest-side、closest-corner、farthest-side或farthest-corner。这些值规定了离原点最近或最远的元素的边或角是否包含渐变(见图 15-8 )。例如，farthest-side值调整渐变的大小，使它的最后一种颜色在元素远离其原点的最远一侧结束。
图 15-8
大小关键字
radial-gradient(farthest-side, gray, black);
默认情况下，径向渐变的原点居中。可以通过用关键字at指定渐变原点的位置，后跟一个以与background-position属性相同的方式指定的位置来更改。首先指定水平位置，然后选择垂直位置。可以用关键字(left、center、right + top、center和bottom)、长度值、百分比值或其组合来设置位置。图 15-9 给出了一个例子，其中渐变原点被移动到元素的右下方。
图 15-9
右下原点
radial-gradient(at right bottom, gray, black);
当与-moz、-webkit和-o厂商前缀一起使用时，对radial-gradient()功能的支持基本上与对linear-gradient()的支持相同。像linear-gradient()一样，径向渐变的语法也经历了一些修改。这里显示了一个完整的跨浏览器语法示例:
.radial-gradient
{
background-color: red; /* fallback color */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,red), color-stop(100%,orange));
/* Chrome 10-25, Safari 5.1-6.1 */
background: -webkit-radial-gradient(center, ellipse cover, red 0%, orange 100%);
/* Firefox 3.6-16 */
background: -moz-radial-gradient(center, ellipse cover, red 0%, orange 100%);
/* Opera 11.6-12.1 */
background: -o-radial-gradient(center, ellipse cover, red 0%, orange 100%);
/* Standard syntax */
background: radial-gradient(ellipse at center, red 0%, orange 100%);
}
重复渐变
线性和径向渐变不允许渐变图案重复，因为它们会自然拉伸以填充定义它们的元素。另外两个函数用于创建重复的渐变:repeating-linear-gradient()和repeating-radial-gradient()。
为了重复线性渐变，使用了repeating-linear-gradient()功能。该功能的参数与linear-gradient()相同。
repeating-linear-gradient([<angle> | to <side-or-corner>]
{, <color stop> [stop position]} (2-∞) )
重复的线性渐变会无限重复色标。渐变的大小由最终的色标决定。为避免急剧过渡，图 15-10 中的起始颜色在结束时重复。
图 15-10
重复线性渐变
repeating-linear-gradient(-45deg, white 0, black 10%, white 20%);
径向渐变的重复函数也与非重复版本共享相同的语法。图 15-11 所示的例子说明了重复功能。请注意，与前面的示例相比，此渐变具有明显的颜色过渡。
图 15-11
重复径向渐变
repeating-radial-gradient(black, black 5%, white 5%, white 10%);
定义渐变的语法比其他 CSS 特性要复杂得多。因此，最好使用在线工具来图形化设计所需的渐变。一个这样的工具可以在 Colorzilla 上找到。com 。 1 除了符合标准的渐变代码，它还提供了最大浏览器兼容性所需的前缀版本。
十六、盒子模型
CSS 的所谓盒子模型描述了 HTML 元素所占据的空间。在这个模型中，每个元素由四个框组成:内容、填充、边框和边距，如图 16-1 所示。
图 16-1
CSS 盒子模型
内容周围的三个框在元素的顶部、右侧、底部和左侧可以有不同的大小。任何或所有这些大小也可以设置为零。
内嵌和块
HTML 有两个主要的元素类别:块和内联。盒子模型对这两种元素的应用是不同的，所以了解它们之间的区别是很重要的。内嵌元素的例子包括<a>、<strong>和<em>，而<p>、<h1>和<form>是块元素。
内联元素随文本内容流动，并根据需要拆分以适合其容器的宽度。它们可能不包含块元素，除了<a>元素，它可以包装任何类型的元素。
块元素可以包含块元素和行内元素(见图 16-2 )。它们通过在自身周围创建一个水平扩展的虚拟框来中断文本流，使其看起来好像在每个块元素的前后都有换行符。由于这些属性，块元素也被称为盒子或容器。
图 16-2
块和内联元素
内联元素和块元素周围的框具有不同的功能。block 元素可以操作 box 模型中的所有属性，包括内容区域的宽度和高度，以及边框、填充和边距。如果没有设置宽度，block 元素将水平扩展到包含元素所允许的最大值。
内联元素的局限性更大，因为它不能设置垂直边距(顶部或底部)。它也不能改变其内嵌框的宽度或高度。对于内联元素，可以用line-height属性设置最小高度，但是宽度和高度会自动调整以适合元素容纳的内容。
内联元素有一个子类，叫做替换内联元素，它使用外部对象，比如<img>、<video>和<object>；并形成<input>、<textarea>等元素。有了这些内嵌元素，所有的框属性都可以像块元素一样被操作。
跨度和分度
使用<span>和<div>元素是向 web 文档添加结构的一种通用方式。这些元素没有关联的样式，这使得它们特别适合使用类和 id 选择器。两者的区别在于<span>是内嵌元素，而<div>是块元素。
<span>Inline</span>
<div>Block</div>
作为一个行内元素，<span>主要用于给文本添加样式。它不能用于样式块元素，因为根据 HTML 规范，这种元素不允许出现在内联元素中。
<span style="color: red;">Red text</span>
相反，<div>用于为其他块和行内元素创建样式化的容器。这些自定义容器通常构成了网页的布局。因为它是一个 block 元素，<div>允许操作元素的所有 box 属性(宽度、高度、填充、边框和边距)。
<div class="a">
<div class="b">Block within a block</div>
</div>
语义元素
在 HTML 4 中，一般的<div>元素是用来定义用 CSS 格式化的网页部分的主要元素。它没有传达任何语义，这被认为是语言的一个缺点。HTML 5 规范引入了许多其他鼓励使用的结构元素，比如<header>、<footer>、<section>、<article>和<nav>。
出于可访问性和可维护性的原因，当这些新的容器元素在给定的上下文中合适时，它们是首选的。每当没有语义上更合适的元素可用时，<div>元素仍然是合适的，并继续被广泛用作通用容器。HTML 5 元素在 Chrome 6+、Firefox 4+、Safari 5+、Opera 11.5+和 IE 9+中得到支持。
HTML 5 元素的 CSS 样式可以通过 HTML 5 Shiv 脚本添加到 IE 6-8 中。 1 这个 JavaScript 文件可以使用 IE 条件注释下载和引用，这样就不会影响现代 web 浏览器的性能:
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
Firefox 3+、Safari 3.1+和 Opera 10+已经允许未知元素的样式化。但是，要按预期方式运行，这些元素需要显式设置为显示为块元素，因为这不是默认样式。
header, footer, section, article, aside, details, figcaption, figure, hgroup, menu, nav {
display: block;
}
十七、边框
边框属性用于格式化元素周围的边框。它们可以应用于任何元素，并且不继承。
边框样式
要使元素周围的边框可见，必须将border-style属性设置为除默认值none之外的值。
border-style (1-4) | border-top-style |
border-right-style | border-bottom-style |
border-left-style :
none | dashed | dotted | double | groove |
hidden | inset | outset | ridge | solid
实心边框样式是最常用的一种，但是还有其他几种显示边框的选项，如图 17-1 所示。hidden值移除边框，与none同义，除了它还隐藏具有折叠边框的表格中的共享边框。
图 17-1
边框样式外观
border-style属性是可以设置一到四个值的几个属性之一。当指定的值少于四个时，border-style值被复制，如图 17-2 所示。
图 17-2
解释了 1 到 4 值语法
根据这些规则，下列声明是同义的，并且在元素的顶部和底部显示实线边框:
border-style: solid none solid none;
border-style: solid none solid;
border-style: solid none;
要以相同的样式呈现所有边框，只需指定一个样式值。
border-style: solid;
border-style属性有四个子属性，也可以用来定位每个边框的样式。
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: ridge;
border-left-style: inset;
边框宽度
控制边框宽度的border-width属性可以用长度单位或预定义值之一来设置:thin、medium或thick。初始值为medium，通常渲染为 3 个像素。
border-width (1-4) | border-top-width |
border-right-width | border-bottom-width |
border-left-width :
<length> | thin | medium | thick
与border-style一样，该属性可以有一到四个值，并且有四个子属性用于设置各个边框的宽度。
/* Shortcut property */
border-width: thin medium;
/* Full-length properties */
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thin;
border-left-width: medium;
宽度为零表示不显示边框。该值与将边框样式设置为none的效果相同。
边框颜色
border-color设置边框的颜色。CSS 没有指定默认的边框颜色，但是大多数浏览器都是黑色的。该属性可以有一到四个值，并且有四个子属性用于设置各个边框的颜色。
border-color (1-4) | border-top-color |
border-right-color | border-bottom-color |
border-left-color :
<color> | transparent
将颜色设置为透明会使边框不可见，而不会更改布局。从 CSS 3 开始，transparent关键字可以用在任何需要颜色值的地方。
border-color: transparent;
边界
属性可以在一个声明中设置宽度、样式和颜色边框属性。这是控制边框最常用的属性。
border | border-top | border-right |
border-bottom | border-left :
<border-width> + <border-style> + <border-color>
这些值可以按任何顺序设置，因为它们之间没有歧义。这两个值中的任何一个都可以省略。
border: 1px solid black;
border属性有四个子属性，用于指定四个边的边界设置。
border-top: 1px solid red;
border-right: 1px solid blue;
border-bottom: 1px solid aqua;
border-left: 1px solid lime;
边框半径
使用border-radius属性或它的四个子属性可以使边框的角变圆。
border-radius (1-4) | border-top-left-radius |
border-top-right-radius | border-bottom-right-radius |
border-bottom-left-radius :
<length> | <percentage> [ / <length> | <percentage> ]
border-radius属性可以有一到四个值。每个半径值可以通过使用一个圆半径值或两个椭圆半径值来设置。该值可以是长度或百分比。如果使用百分比，它是相对于容器的尺寸。以下示例如图 17-3 所示。
图 17-3
边框半径示例
.a { border-radius: 5px; }
.b { border-radius: 5px 20px; }
.c { border-radius: 50%; }
.d { border-radius: 30px/10px; }
可以使用border-radius的四个子属性设置四条边的半径。以下示例渲染与图 17-3 中的第二个盒子相同:
border-top-left-radius: 5px;
border-top-right-radius: 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 20px;
border-radius是一个支持良好的 CSS 3 属性。为了增加对旧浏览器的支持，可以使用浏览器前缀-webkit和-moz。
.round {
/* Safari 3-4 */
-webkit-border-radius: 5px;
/* Firefox 1-3.6 */
-moz-border-radius: 5px;
/* Chrome 1+, Firefox 4+, Safari 5+, Opera 10.5+, IE 9+ */
border-radius: 5px;
}
十八、概述
轮廓是围绕元素绘制的线条，位于边框边缘之外。它通常呈现为交互式元素周围的虚线，以显示哪个元素具有焦点。虽然与边框相似，但轮廓的不同之处在于它不占用盒子模型中的任何空间。此外，与边框不同，轮廓的所有四个边都必须相同。大纲属性可以应用于任何元素，并且它们都不会继承。
轮廓样式
轮廓的样式用outline-style属性设置。要显示大纲，需要将该值设置为除默认的none之外的值。
outline-style : none | solid | dotted | dashed | double |
groove | ridge | inset | outset
该属性允许与border-style相同的值，除了hidden不是有效的outline-style。它们的渲染也是一样的，如图 18-1 所示。
图 18-1
轮廓样式的外观
轮廓宽度
轮廓的粗细由outline-width属性指定。像border-width属性一样，它的值可以是指定的长度或者关键字thin、medium或thick中的一个。
outline-width : <length> | thin | medium | thick
CSS 没有定义这三个关键字的数值粗细，但是它们通常分别呈现为 1px、3px 和 5px。像border-width一样，这个属性的初始值是medium。
轮廓颜色
轮廓的颜色可以用outline-color属性改变。除了标准的颜色符号，关键字invert也是该属性的有效值。
outline-color : invert | <color>
为了确保适当的对比度，规范建议默认值为invert，它将轮廓设置为下面颜色的反义词。但是实际上只有 IE 8+和 Opera 7+支持这个可选值，所以不常用。
概述
outline是一个简写属性，用于在一个声明中设置所有前面的大纲属性。
outline : <outline-width> + <outline-style> + <outline-color>
这些值可以按任何顺序指定，因为它们之间没有歧义。他们中的任何一个都可以被忽略。
outline: thin solid red;
这与设置所有单个属性的效果相同，但语法更方便:
outline-width: thin;
outline-style: solid;
outline-color: red;
轮廓偏移
轮廓和边框边缘之间的间距可以用 CSS 3 中引入的outline-offset属性来设置。
outline-offset : <length>
以下声明将轮廓向外移动 3 个像素。允许负值，但这会将轮廓移动到元素内部。
outline-offset: 3px;
虽然 IE 不支持该属性，但它可以在所有现代浏览器中工作，包括 Chrome 4+、Firefox 2+、Safari 3.1+、Opera 12.1+和 Edge 15+。
十九、边距和填充
边距和填充用于调整元素的位置并在其周围创建空间。
填料
填充是元素内容与其边框之间的空间。它是使用这里显示的填充属性设置的。这些属性不继承，可以应用于任何元素。
padding (1-4) | padding-top | padding-right |
padding-bottom | padding-left :
<length> | <percentage>
有四个属性可以分别设置每一侧的填充。在下面的示例中，垂直(上、下)边距为 10 像素，水平(右、左)边距为零。
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
可以使用padding属性将这些声明缩短为一个声明。然后按顺时针顺序指定填充值:顶部、右侧、底部和左侧。
padding: 10px 0 10px 0;
像许多其他与盒子模型相关的属性一样，padding属性可以用一到四个对应于元素盒子边缘的值来设置。少于四个值时，如图 19-1 所示重复填充。
图 19-1
解释了 1 到 4 值语法
例如，如果指定了两个值，第一个值设置顶部和底部填充，第二个值设置右侧和左侧填充。这给出了一种更短的方式来编写前面的例子。
padding: 10px 0;
请记住，填充是元素背景的一部分，受背景属性的影响，而边距总是透明的。
边缘
边距是元素边框周围的空间，使用下面列出的边距属性进行设置。这些属性不会被继承，可以应用于任何元素，但垂直边距不会影响未替换的行内元素。
margin (1-4) | margin-top | margin-right |
margin-bottom | margin-left :
<length> | <percentage> | auto
Margin 和 padding 都可以使用相对于包含元素的宽度和高度的百分比值。与填充相反，边距可以是负数，这允许元素区域重叠。auto关键字让浏览器自动计算边距。
像填充和边框属性一样，margin属性可以用一到四个值来设置。例如，在下面的声明中，上下边距为 1 厘米，左右边距为 0:
margin: 1cm 0;
margin属性也有四个子属性，它们为设置四条边的边距提供了一个更详细的方法。
margin-top: 1cm;
margin-right: 0;
margin-bottom: 1cm;
margin-left: 0;
上下边距在相邻的框之间共享，因此两个框之间的垂直距离不是边距之和，而只是两个边距中较大的一个。因此，下面两个<div>框之间的距离只有 10 个像素:
<div style="margin-bottom: 5px;">Top box</div>
<div style="margin-top: 10px;">Bottom box</div>
二十、尺寸
尺寸属性控制元素的大小及其最小和最大尺寸。它们不继承，只能应用于块元素和替换的行内元素。
宽度和高度
元素内容区域的宽度和高度可以用width和height属性设置。这两个属性可以指定长度或百分比值，其中百分比相对于父元素的尺寸。
width | height : auto | <length> | <percentage>
块元素通常延伸到其容器的边缘。相反，元素的高度会折叠以适合其内容。使用width和height属性，可以改变这些默认行为。在下面的示例中，应用类的元素的宽度为 100 像素，高度为 50 像素。这样设置尺寸后，无论页面大小如何调整，元素都会保持该尺寸。
.mybox {
width: 100px;
height: 50px;
}
最小宽度和最小高度
min-width和min-height属性设置元素的最小尺寸。元素的宽度和高度仍会扩展以适应内容，但元素不会折叠到指定的最小尺寸以下，其中不包括填充、边框或边距。
min-width | min-height : <length> | <percentage>
这些属性的有效值是长度和百分比，其中百分比是相对于包含块的尺寸。例如，下面的类使元素占据至少一半的可用宽度和高度:
.half {
min-width: 50%;
min-height: 50%;
}
最大宽度和最大高度
元素内容区域的最大尺寸是用max-width和max-height属性设置的。它们可以设置长度或百分比值，以及关键字none来清除先前设置的值。
max-width | max-height : none | <length> | <percentage>
通过设置最大和最小宽度，可以定义元素宽度变化的间隔。如果可以的话，使用下面的类的 block 元素扩展到填充 500 个像素。当水平空间有限时，允许元素缩小到不少于 200 个像素。
.mybox {
max-width: 500px;
min-width: 200px;
}
max-width属性优先于min-width。然而，高度属性正好相反，因为min-height的优先级高于max-height。因此，使用以下类的元素的高度为 5 em，除非其内容需要更高的高度。在这种情况下，元素垂直扩展到其最大允许值 20 em。
.mybox {
max-height: 20em;
min-height: 5em;
}
请记住，固定的width和height属性不应与min-和max-属性一起使用。所有主流浏览器都支持四个min-和max-属性，包括 Chrome 1+、Firefox 1+、Safari 1+、Opera 8+和 IE 7+。它们通常与媒体规则一起使用，用于创建在不同屏幕尺寸上都能很好工作的流畅布局。
盒子大小
维度属性通常指的是内容区域，而不是填充区域或边框区域。因此，要知道元素在盒子模型中占据的实际宽度或高度，必须考虑周围的填充和边框。
/* 100 pixels wide element */
.mybox {
padding: 3px;
border: 2px solid red;
width: 90px;
}
CSS 3 引入了box-sizing属性，允许 web 开发人员选择如何计算宽度和高度。它的默认值是content-box，这意味着维度属性只引用内容区域。可选的border-box值包括这些尺寸中的填充和边框。
box-sizing : content-box | border-box
通过将框大小改为border-box，您可以更容易地创建网格布局，因为您不再需要考虑填充和边框大小。
/* 100 pixel wide element */
.mybox {
box-sizing: border-box;
padding: 3px;
border: 2px solid red;
width: 100px;
}
border-box属性。不继承，但可以使用通用选择器将其应用于网站上的所有元素。为了增加对浏览器的支持，可以使用前缀-webkit和-moz。
/* Use border-box for all elements */
* {
/* Chrome 1-8, Safari 3-5 */
-webkit-box-sizing: border-box;
/* Firefox 1-28*/
-moz-box-sizing: border-box;
/* Chrome 9+, Firefox 29+, Safari 5.1+, Opera 9.5+, IE 8+ */
box-sizing: border-box;
}
浏览器对box-sizing属性的支持已经足够好，现在所有主流浏览器都支持它。因此，许多网站利用这一特性来简化布局的网格计算。
二十一、定位
定位属性可以更改元素的显示方式和位置。它们能够非常精确地控制网页布局。
位置
使用position属性可以用四种不同的方式定位元素。属性设置为除了static之外的任何值的元素被称为定位元素。
position : static | relative | absolute | fixed
可以使用top、left、right和bottom属性移动已定位的元素，这些属性可用于将元素定位在页面上的任何位置，还可以水平和垂直调整元素的大小。它们允许正负长度和百分比值，百分比与包含块的尺寸相关。
top | right | bottom | left (positioned) :
auto | <length> | <percentage>
静电
默认情况下，position属性的值为static。该值表示元素出现在页面流中的常规位置，不受top、left、right或bottom定位属性的影响。
/* Not positioned element */
.static { position: static; }
因为position属性没有被继承，而static是默认值，所以不需要显式地将position属性设置为static。
亲戚
将position值更改为relative意味着元素可以相对于其在页面流中的正常位置进行定位。例如，要显示比正常位置低 20 个像素的选定元素，使用以下声明:
/* Move element 20 pixels down */
.relative {
position: relative;
top: 20px;
}
相对定位的元素被视为正常页面流的一部分，因此其他元素不会移动来填充移动元素留下的间隙。
相对于正常位置移动元素的效果也可以通过使用元素的边距来实现。这种解决方案通常是首选的，除非有特定的需要使元素定位，例如它是否将是一个绝对定位的子元素的容器。
/* Move element 20 pixels down */
margin-bottom: -20px;
请记住，更改边距会影响布局和填充间隙，而相对位置不会。
绝对的
position值absolute将元素从任何包含元素中分离出来，并允许它相对于其最近的定位祖先或文档体(如果没有的话)进行定位。
/* Place element in upper left corner */
.absolute {
position: absolute;
top: 0;
left: 0;
}
固定的；不变的
固定元素相对于屏幕视口定位。当页面滚动时，它不会移动。与绝对定位元素类似，固定元素在正常页面流中不保留任何空间。
/* Place element
fixed in bottom right corner */
.fixed {
position: absolute;
bottom: 0;
right: 0;
}
泛滥
属性决定如何处理块元素的内容溢出。它默认为visible，意味着扩展到元素内容区域之外的文本和子元素是可见的。将值设置为hidden会隐藏溢出的内容，使用scroll值，元素的块可以滚动以容纳溢出的内容。auto值类似于scroll，但是滚动条仅在必要时出现。
overflow (block) : visible | hidden | scroll | auto
该属性控制水平和垂直溢出的行为。另外两个属性overflow-x和overflow-y可用于区分水平溢出和垂直溢出的处理方式。这两个属性的值与overflow属性的值相同。
overflow: hidden; /* hide all overflow */
overflow-x: hidden; /* hide horizontal overflow */
overflow-y: hidden; /* hide vertical overflow */
夹子
如果一个元素被定位为绝对或固定，那么clip属性可以将它裁剪成一个矩形。它使用一个名为rect()的 CSS 函数来指定剪辑区域。
clip (absolute | fixed) :
auto | rect(<top>, <right>, <bottom>, <left>)
rect()需要四个长度值，每个值用逗号分隔。这些值相对于元素的左上角。图 21-1 所示的例子从应用它的元素中剪切并显示一个 200 x 400 的像素区域。
图 21-1
阴影区域被移除
.myclip {
position: absolute;
clip: rect(100px, 500px, 300px, 100px);
}
关键字auto可以用作右侧或底部的值，分别表示元素的全宽或全高。这个关键字也是clip属性的默认值，这意味着元素不会被裁剪。
/* Remove 100px from left and top */
clip: rect(100px, auto, auto, 100px);
/* No clipping */
clip: auto;
浏览器对 clip 属性的支持几乎是通用的:Chrome 1+、Firefox 1+、Safari 1+、Opera 7+和 IE 8+。
z 指数
相互重叠的定位元素通常根据它们在 web 文档中的顺序进行分层。这种自然的堆叠顺序可以用z-index属性来改变
z-index (positioned) : auto | <integer>
z-index属性取一个正整数或负整数作为它的值，表示堆叠顺序。值较高的元素位于值较低的元素之前，如下例所示:
<img src="ace-of-hearts.png" style="
position: absolute;
left: 0;
top: 0;
z-index: 1;">
<img src="ace-of-spades.png" style="
position: absolute;
left: 100px;
top: 100px;
z-index: 0;">
在本例中，如图 21-2 所示，红桃 a 由于其较高的堆叠顺序而层叠在黑桃 a 之上。
图 21-2
定制堆叠顺序
垂直对齐
一行中文本和行内元素的垂直对齐可以用vertical-align属性来控制。该属性也可用于表格单元格元素。
vertical-align (inline | table-cell) :
baseline | <length> | <percentage> | top | middle |
bottom | text-top | text-bottom | super | sub
默认情况下，文本和内联元素(如图像)的底部在基线处对齐，基线是所有字母所在的不可见线。值top和bottom分别将图像与线条的顶部和底部对齐。不太直观的是值middle，它将图像的中间与父图像中小写字母的中间对齐。图 21-3 中显示了这些公共对准值的渲染。
图 21-3
常见垂直对齐值
vertical-align的两个不常用值是text-bottom和text-top。text-bottom值将元素的底部与文本的底部对齐。与之相反，text-top值将元素的顶部与文本的顶部对齐。还有sub和super值，它们分别将元素与下标和上标位置对齐。使用这些值的结果如图 21-4 所示。
图 21-4
其他垂直对齐值
元素也可以用长度或百分比值升高(正值)或降低(负值)。百分比和长度值都从基线开始；百分比值相对于行高。
/* Align text segment 5 pixels below normal text */
Normal <span style="vertical-align: -5px;">Lowered</span>
当应用于表格单元格元素<th>和<td>时，vertical-align属性的行为类似于 HTML 中不推荐使用的valign属性。表格单元格的有效值为baseline、bottom、middle和top。其他值，包括长度和百分比，不应用于表格单元格。
top。值将单元格的顶部填充边缘与行的顶部对齐。同样，bottom将单元格的底部填充边缘与行的底部对齐。更值得注意的是，baseline值对齐单元格的内容，以便它与其他基线对齐的单元格共享相同的基线。
与默认为baseline的行内元素相比，表格单元格元素通常在中间对齐。对于表格单元格，middle值的行为更加直观，它将单元格的填充框对齐到行的中间，使单元格的内容居中显示。
在以下示例中，表格单元格元素在底部垂直对齐:
<table>
<tr>
<td style="vertical-align: bottom;">Bottom</td>
</tr>
</table>
定中心
有几种方法可以使 CSS 中的元素居中。一种方法是使用值为center的text-align属性。
.text-center { text-align: center; }
通过将此属性应用于 block 元素，其中的文本将居中对齐。
<p class="text-center">Centered text</p>
此方法适用于文本和内联子元素，但不适用于子块元素。要使块元素居中，可将左右边距设置为auto，使水平边距相等，从而使块居中。
.box-center { margin: 0 auto; }
请记住，对于要居中显示的块元素，其宽度必须是固定的，而不是灵活的；否则，它会占用所有可用的宽度。
<div style="width: 50px; height: 50px;
border: 1px solid black;"
class="box-center"></div>
对于垂直居中，将内容居中对齐的一种方法是使用父元素的vertical-align属性，将其值设置为middle。这种行为仅适用于表格单元格元素，因此需要将容器改为表格单元格元素，如下面使用display属性的示例所示:
<div style="vertical-align: middle;
display: table-cell;
min-height: 100px;">Centered</div>
用 flexbox 模块在 CSS 中添加了更简单的对齐控制，这将在后面的章节中讨论。
转换
transform 属性允许对元素进行可视化操作，例如旋转、倾斜、平移或缩放。
transform (block) : none | rotate(<angle>) | rotateX(<angle>) |
rotateY(<deg>) | rotateZ(<deg>) | rotate3d(<x>,<y>,<z>,<deg>) |
skew(<x-deg>[, <y-deg>])> | skewX(<deg>) | skewY(<deg>) |
translate(<x>,<y>) | translateX(<x>) | translateY(<y>) |
translateZ(<z>) | translate3d(<x>,<y>,<z>) | scale(<x>[, <y>]) |
scaleX(<x>) | scaleY(<y>) | scaleZ(<z>) | scale3d(<x>,<y>,<z>)
matrix(n,n,n,n,n,n)> | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
perspective(<p>)
考虑下面的样式规则，这些规则将用于说明转换是如何工作的。请注意，这里使用的 float 属性使块元素水平堆叠，而不是垂直堆叠。
.box {
float: left;
width: 100px;
height: 100px;
margin: 0 1em;
background: #ccc;
}
/* Rotate element clockwise 45 degrees */
.a { transform: rotate(45deg); }
/* Tilt element 15 degrees right */
.b { transform: skewX(-15deg); }
/* Move element 25% down and scale height to 50% */
.c { transform: translateY(25%) scaleY(0.5); }
将这些样式应用于一组块元素的结果可以在图 21-5 中看到。
图 21-5
变形盒子
<div class="box a"></div>
<div class="box b"></div>
<div class="box c"></div>
矩阵函数可以使用一组六个值来执行一个或多个 2d 变换。前两个值分别用于垂直和水平缩放，值 1 表示不应用缩放。第二个和第三个值用于倾斜元素，最后两个值用于平移元素。
/* Scale to half size and skew 45 degrees left and down */
.d { transform: matrix(1,0.5,0,0.5,0,0) }
.e { transform: scaleY(0.5) skew(45deg) }
这两种转换将产生相同的结果，如图 21-6 所示。
图 21-6
矩阵变换
<div class="box d"></div>
<div class="box e"></div>
默认情况下，变换的原点是元素的中心。可以使用 transform-origin 属性更改该原点。第一个值是水平位置，第二个值是垂直位置，第三个值表示 Z 轴上的位置。第三个值仅在使用 3d 变换时有效，并且不能是百分比。
transform-origin (block) : 50% 50% 0 |
<x-axis: left | center | right | <length> | <%>> +
<y-axis: top | center | bottom | <length> | <%>> +
[<z-axis: <length>>]
Chrome 4+、Firefox 3.5+、Safari 3.1+、Opera 11.5+和 IE 9+都支持 2d 变换以及 transform-origin 属性。3d 转换是后来添加的，从 Chrome 12+，Firefox 10+，Safari 4+，Opera 15+和 IE 10+开始可用。
二十二、分类
分类属性指定元素如何显示以及是否可见。
显示
属性决定了包围一个元素的盒子的种类。它可以使任何元素显示为内联、块或任何其他类型。每个元素都有一个默认的显示值，这取决于元素的类型。
display : none | inline | block | list-item | inline-block |
inline-table | table | table-cell | table-row |
table-column | table-column-group | table-footer-group |
table-header-group | table-row-group | flex | inline-flex |
grid | inline-grid | run-in
大多数 HTML 元素显示为内联或块；其他的有特殊的显示属性，比如<li>元素的list-item和<td>和<th>元素的table-cell。通过使用display属性，任何元素都可以被改变为这些或任何其他元素类型。例如，以下链接呈现为块元素，而不是内联元素:
<a href="#" style="display: block;">Block link</a>
display的一个更有用的值是inline-block，它结合了块和内联的特性。一个inline-block元素就像一个内嵌元素，除了它也可以像块元素一样操作盒子模型的宽度、高度和垂直边距属性。这些特性与被替换的内联元素相同，比如<img>和<button>。因此，这些元素在 HTML 5 中被正式重新定义为inline-block元素。
inline-block的一个常见应用是让列表项元素(<li>)适合水平导航菜单。请注意，将列表项元素的显示类型从list-item更改为inline-block会自动移除列表标记。
li {
display: inline-block;
width: 100px;
background: #ccc;
}
有了这条规则，下面的标记呈现了三个灰色背景的盒子，如图 22-1 所示。
图 22-1
演示的内联块值
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
另一个有用的display值是none。它完全隐藏了一个元素，使得页面呈现得好像该元素不存在一样。
.removed { display: none; }
能见度
通过将属性的值设置为hidden,visibility属性可以隐藏一个元素，而不会删除它所占据的空间。
visibility (block) : inherit | visible | hidden | collapse
collapse值只用于某些表格元素:行(<tr>)、列(<col>)、列组(<colgroup>)和行组(<thead>、<tbody>和<tfoot>)。根据规范，collapse应该移除隐藏的元素(与display: none相同)并为其他元素腾出空间。遗憾的是，并不是所有主流浏览器都遵循这个值的规范。将display属性设置为none会导致更一致的浏览器行为，应该改为使用。
不透明
属性可以使一个元素及其内容透明。
opacity : <number>
使用介于 0.0 和 1.0 之间的小数值来设置透明度。值为 1 时，元素是不透明的；0 表示元素完全透明或不可见。
.half-transparent { opacity: 0.5;}
Chrome 1+、Firefox 1+、Safari 1.2+、Opera 9+和 IE 9+中都包含对这个 CSS 3 属性的支持。可以使用以下过滤器增强 IE 支持:
.half-transparent {
filter: alpha(opacity=50); /* IE 5-8 */
opacity: 0.5;
}
漂浮物
属性将一个元素从它包含的元素中分离出来，并使它浮动在它的顶部，或者在左边或者在右边。它的目的是让文字环绕图像，在更现代的布局方法出现之前，它也常用于制作布局。浮动内联元素会自动将其更改为块元素。
float : none | left | right
若要让文本和其他内联内容环绕图像，您可以将它向左或向右浮动。
<img style="float: left;" src="myimage.png" alt="">
浮动允许阻塞。要水平对齐的元素。例如，可以用下面的类创建一个盒子网格:
.box {
float: left;
width: 100px;
height: 100px;
margin: 0 1em;
background: #ccc;
border-radius: 10px;
}
这个类使盒子水平堆叠而不是垂直堆叠，这是块元素的正常行为(见图 22-2 )。
图 22-2
浮动框
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
使用浮动的一个副作用。这些浮动框后面的任何元素也是水平排列的。clear属性旨在阻止这种行为。
清楚的
属性用于从元素的左边、右边或两边清除浮动元素。
clear (block) : none | left | right | both
此属性通常被赋予其自己的类，该类与属性同名。
.clear { clear: both; }
带有clear类的空div容器通常放在浮动元素之后。这个被清除的元素被移到浮动元素的下面，而不是出现在它们旁边。
<div class="clear"></div>
因为浮动布局趋向于复杂和脆弱，它们已经被其他更现代的布局方法所取代，比如 flexbox 和 grid 模块。
光标
属性指定当光标悬停在一个元素上时，用户会看到什么。默认值是auto，意思是浏览器决定使用什么光标。标准光标值及其外观见表 22-1 。
表 22-1
标准光标值
|  |除了这些值，可以使用url函数定义自定义光标。如果此游标不可用，可以在自定义游标之后指定一个通用游标，用逗号分隔。
cursor: url(new.cur), pointer;
二十三、列表
CSS 列表属性处理列表元素，特别是<ul>、<ol>和<li>元素。
列表样式类型
列表呈现时在每个列表项元素前显示一个标记(<li>)。使用list-style-type属性可以改变这个标记的外观。对于一个无序列表(<ul>)，每个列表项都以同样的方式标记。可以使用此处显示的预定义项目符号值，将disc(实心圆)作为初始值:
list-style-type : inherit | disc | circle | square | none
在有序列表(<ol>)中，每个列表项都用数字字符标记，以显示其在序列中的位置。所有主流浏览器都支持以下数值类型，以decimal作为初始值:
list-style-type : inherit | decimal | none | upper-alpha |
lower-alpha | upper-roman | lower-roman |
lower-greek | lower-latin | armenian |
georgian | decimal-leading-zero
下面的示例为两个列表元素分配:一个新的列表样式。可以让<ul>显示有序的标记，让<ol>显示无序的标记，但这不是好的做法。
ul { list-style-type: square; } /* ■ */
ol { list-style-type: upper-roman; } /* I, II, III, ... */
标记的颜色与列表元素的文本颜色相同。请记住，任何元素都可以通过将其显示类型更改为list-item来显示列表标记。
列表样式图像
作为预定义标记的替代，使用list-style-image属性允许自定义图像用作列表项目符号。
list-style-image : inherit | none | url(<url>)
图像路径是在 CSS url函数中指定的。
list-style-image: url(my-bullet.png)
该属性会覆盖使用list-style-type属性选择的任何标记类型。即便如此，指定一个list-style-type作为后备也是一个好主意，以防自定义项目符号图像由于任何原因不可用。
列表样式位置
列表标记通常位于元素框的外部。list-style-position提供了一种替代方法:将项目符号放在元素框中。
list-style-position : inherit | outside | inside
选择outside会将每行文本与第一行的开头对齐，而inside会使后续文本行在标记下方换行。inside值也可视地缩进标记，如图 23-1 所示。
图 23-1
外部和内部标记放置
列表样式
list-style是设置所有列表属性的简写属性。这些值可以按任何顺序设置，因为它们之间没有歧义。也可以省略任何一个值，在这种情况下，将使用该属性的默认值。
list-style : <list-style-type> + <list-style-image> + <list-style-position>
在下面的例子中，设置了list-style的type和position值，它们被继承到列表项中。
<ul style="list-style: inside square;">
<li>Apple</li>
<li>Orange</li>
<li>Pear</li>
</ul>
请记住，列表属性不仅可以设计列表容器<ul>和<ol>,的样式，还可以设计单个列表项<li>的样式。
计数器
CSS 中的元素可以使用counter-increment和counter-reset属性自动编号。counter-reset属性指定计数器的名称。它后面可选地跟有计数器的初始值，缺省情况下是零。
/* Create a counter named chapter */
body { counter-reset: chapter; }
counter-increment属性接受计数器的名称，后跟一个可选的数字。默认情况下，number 为 1，它设置元素每出现一次计数器增加多少。
/* Increment the counter at each <h1> */
h1:before { counter-increment: chapter; }
创建计数器的最后一步是使用 CSS counter()函数显示它，并将计数器的名称作为它的参数。在本例中，章节号显示在<h1>元素之前:
/* Increment and display the counter */
h1:before {
content: "Chapter " counter(chapter) " - ";
counter-increment: chapter;
}
柜台。现在在<h1>元素前添加章节号。
<h1>First</h1> <!-- Chapter 1 - First -->
<h1>Second</h1> <!-- Chapter 2 - Second -->
<h1>Third</h1> <!-- Chapter 3 - Third -->
可以添加另一个计数器来枚举<h2>子标题。此处，该计数器在每个<h1>元素处重置为零:
h2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
h1 { counter-reset: section; }
以下示例说明了计数器的显示方式:
<h1>Head</h1> <!-- Chapter 1 - Head -->
<h2>Sub</h2> <!-- 1.1 Sub -->
<h2>Sub</h2> <!-- 1.2 Sub -->
<h1>Head</h1> <!-- Chapter 2 - Head -->
<h2>Sub</h2> <!-- 2.1 Sub -->.
嵌套计数器
CSS 计数器可以嵌套任意多级。这些嵌套的计数器可以使用一个名为counters()的 CSS 函数进行组合和显示。该函数的第一个参数是计数器名称，第二个参数是分隔每个计数器的字符串。
ul { counter-reset: mycounter; }
li:before {
content: counters(mycounter, ".") " ";
counter-increment: mycounter;
}
这些规则适用于以下无序列表(注意，会为每个嵌套列表自动创建一个新的计数器实例):
<ul>
<li>item</li> <!-- 1 item -->
<li>item</li> <!-- 2 item -->
<ul>
<li>item</li> <!-- 2.1 item -->
<li>item</li> <!-- 2.2 item -->
</ul>
</ul>
所有主流浏览器都支持计数器，包括所有版本的 Chrome、Firefox、Safari 和 Opera，以及 IE 8+。
二十四、表格
CSS 有许多专门用于表格元素的属性。这些属性提供了对浏览器如何呈现表格数据的控制。
边框间距
相邻表格单元格的边框之间的距离可以用border-spacing属性来改变，该属性相当于 HTML 中的cellspacing属性。W3C 将该属性的初始值定义为 0，但大多数浏览器默认将其呈现为 2px。
border-spacing : inherit | <length> [<length>]
该属性可以用一个或两个长度值来指定。有两个值，第一个设置水平间距，第二个设置垂直间距。
.spacing {
border-spacing: 5px 10px;
}
border-spacing是表格的属性，而不是单元格的属性，因此它应用于<table>元素，如下例所示:
<table class="spacing">
<caption>My Table</caption>
<tr>
<td>1st cell, 1st row</td>
<td>2nd cell, 1st row</td>
</tr>
<tr>
<td>1st cell, 2nd row</td>
<td>2nd cell, 2nd row</td>
</tr>
</table>
这张表格。如图 24-1 所示，实线边框应用于<td>元素。
图 24-1
示例表
表格单元格有边框和填充，但没有任何边距。他们用border-spacing代替。填充的工作方式与其他元素相同，其行为类似于 HTML 中的cellpadding属性。
边界崩溃
border-collapse属性决定表格边框是折叠成一个边框还是分开。
border-collapse : inherit | separate | collapse
通常，表格单元格有自己独特的边框，并由使用border-spacing属性设置的距离分隔。如果边框设置为折叠，则单元格共享边框，并且忽略任何border-spacing属性的值。
table { border-collapse: collapse; }
标题侧
元素为表格提供了一个标签。可以使用caption-side属性改变它的位置。
caption-side : inherit | top | bottom
标题通常显示在顶部，但是也可以使用caption-side属性将其放置在表格的下方。该属性适用于<caption>元素，但也可以为<table>元素设置，因为它是继承的。
caption { caption-side: bottom; }
空单元格
没有任何内容的表格单元格通常仍会显示其边框和背景。这种行为可以用empty-cells属性来改变。
empty-cells : inherit | show | hide
将该属性的值设置为hide会导致单元格的边框和背景被隐藏。表格的布局不受影响。
表格布局
table-layout属性决定表格单元格的宽度应该是固定的还是可变的。与其他表属性不同，table-layout不会被继承。
table-layout : auto | fixed
该属性最初设置为auto，这意味着表格单元格的宽度会自动扩展以适应其内容，即使这意味着超出其设置的宽度。为了强制表格的指定宽度，可以将table-layout设置为fixed。水平布局只取决于表格的设定宽度，而不取决于单元格的内容。
/* Enforce table width */
.fixed { table-layout: fixed; }
固定的表格布局有一个额外的好处，即浏览器可以更快地呈现表格，因为它一收到第一行就知道表格的尺寸。
二十五、媒体
CSS 提供了一种以不同方式显示文档的方法，这取决于查看文档的设备。这样的条件样式规则被放在一个媒体规则中，该规则由@media组成，后跟一个限制范围的表达式和一组包含条件样式规则的花括号。
@media screen {
/* screen devices only */
}
媒体类型
CSS 2 中引入的媒体类型条件列出了以下有效值，包括针对所有设备类型的默认值all:
all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
不幸的是，媒体类型并不能说明设备的太多信息，所以它很少用于其预期目的。现代智能手机、平板电脑、笔记本电脑和台式电脑都把自己归为screen类型。今天，媒体类型条件的主要用途是区分屏幕文档和打印文档，以实现更便于打印的文档格式。
/* Print only */
@media print
{
/* Hide navigation */
#navigation { display: none; }
/* Start h1 elements on a new page */
h1 { page-break-before: always; }
}
媒体规则通常放在样式表的底部，这允许级联覆盖前面定义的规则。如果样式表包含许多条件规则，最好将它们移到主样式表之后的单独样式表中。然后可以用<link>元素上的media属性指定媒体条件。
<link rel="stylesheet" media="print" href="myprint.css">
该样式表包含打印条件，因此仅在文档发送到打印介质时应用。请记住，浏览器仍然下载样式表，即使它的媒体条件是假的。
媒体查询
CSS 3 上了一个台阶。更进一步，允许媒体规则针对设备的功能，而不仅仅是类型。它引入了一系列有针对性的媒体功能，如下表所示。所有这些特征，除了orientation、grid和scan，都可以加上前缀min-或max-来定义约束。
width | height | device-width | device-height | aspect-ratio | device-aspect-ratio | resolution | orientation | color | color-index | monochrome
最重要的媒体功能min-width和max-width允许您创建响应式设计，其中站点布局根据设备浏览器的视窗进行更改。
媒体查询组合了媒体类型和由一个或多个媒体特征组成的条件。例如，只有在最小宽度为 600 像素的基于屏幕的媒体上查看时，才会应用以下媒体查询中的规则:
@media screen and (min-width: 600px) {}
媒体查询不区分大小写，条件两边需要括号。这里看到的and操作符用于组合媒体类型和媒体特征，但它也可以将多个媒体特征组合在一起:
@media (max-width: 500px) and (min-aspect-ratio: 1/1) {}
这个媒体质疑。如果查看设备的最大宽度为 500 像素，纵横比至少为 1:1(方形或横向视窗)，则为 true。请注意，此处省略了媒体类型，因此该规则适用于所有媒体类型。
逻辑运算符
除了逻辑运算符and之外，媒体查询还可以包括逻辑运算符not和only以及逻辑运算符or。逗号(,)用作or运算符来分隔多组查询。如果屏幕宽度至少为 700 像素，或者设备处于横向模式，则以下媒体规则成立:
@media (min-width: 700px), (orientation: landscape) {}
not操作符用于否定整个媒体查询。它不能否定一个单独的特征。例如，以下媒体规则仅适用于设备屏幕宽度不是 800 像素的情况:
@media not screen and (device-width: 800px) {}
添加了only操作符来隐藏旧浏览器的媒体查询。根据规范，不支持媒体查询的浏览器应该将以下规则解释为应用于only媒体类型，这是无效的，从而导致条件样式规则被忽略。
/* Not applied in older browsers */
@media only screen and (min-width: 600px) {}
遗憾的是，IE 6-8 没有正确实现规范。因此，即使省略了only关键字，媒体查询也会被忽略，而不是将媒体规则应用于所有基于屏幕的设备。
/* Not applied in IE 6-8 */
@media screen and (min-width : 600px) {}
注意，not和only操作符都需要使用显式媒体类型，而逻辑or ( ,)和逻辑and操作符则不需要。
在所有主流浏览器中，对媒体查询的支持已经变得非常普遍。例如，Chrome 1+、Firefox 3.5+、Safari 4+、Opera 8+和 IE 9+都支持min-width和max-width查询。
测试媒体查询
测试你的媒体查询以确保你的网站在尽可能多的设备上看起来不错是很重要的。随着浏览器环境的改变(例如，当窗口被调整大小时)，最新的 web 浏览器都重新评估媒体查询。因此，您可以通过调整浏览器窗口的大小来测试您的设计如何响应不同的设备尺寸。Chrome 还有一个内置的工具栏，用于测试你的网站在不同设备上的外观。要显示器件选择工具栏，首先调出检查窗口(Ctrl+Shift+I)，然后单击左上角的切换器件工具栏图标(Ctrl+Shift+M)。
响应式设计指南
当设计一个响应式布局时，最简单的方法通常是先从移动布局开始，在没有任何媒体规则的情况下定义它的外观。当您扩展视口时，请注意该布局何时不再好看。这是您应该更改布局中视觉上中断或不再有用的部分的断点。此更改可能包括添加第二列或更改为更高级的导航菜单。当视口变大时，使用min-width和max-width媒体功能覆盖样式来定义这些断点，如下例所示。继续这种寻找断点的方法，直到达到足够高的分辨率。根据您的布局，您可能只需要定义几个断点。
@media (min-width: 800px) {
body { background: red; }
}
@media (min-width: 401px) and (max-width: 799px) {
body { background: green; }
}
@media (max-width: 400px) {
body { background: blue; }
}
二十六、布局
在 CSS 中创建布局有很多种方法。本章将介绍其中一些方法，以及它们在创建简单布局时的比较。
浮动
在 CSS 的早期，创建网格状设计的少数可用方法之一是使用 float 属性使块元素保持在同一行上。
.left { float: left; }
.clear { clear: both; }
为了显示浮动元素的效果，将使用下面的框样式。
.box {
width: 100px;
height: 100px;
margin: 1em;
background: #ccc;
}
除了清除问题和浏览器不一致之外，float 属性提供了一种非直观的方式来定义布局，这种方式随着更好的方法的出现而长期以来一直被弃用。这里定义的浮动布局如图 26-1 所示。
<div class="left box"></div>
<div class="left box"></div>
<div class="clear"></div>
<div class="left box"></div>
<div class="left box"></div>
<div class="clear"></div>
内嵌块
与浮动布局相比，内嵌块显示类型有几个优点，包括更简单，不需要清除浮动。此外，当元素具有不同的高度时，布局不会像浮动元素那样中断。vertical-align 属性可用于指定元素高度不同时的对齐方式。
.inline {
display: inline-block;
vertical-align: top;
}
内联块元素的一个问题是，元素周围的任何空白都将被视为空白。删除空白，或者像这里看到的那样移动结束标签，解决了这个问题，但是使得 HTML 可读性更差。这里给出的例子产生了如图 26-1 所示的相同结果。
图 26-1
浮动布局
<div>
<div class="inline box">
</div><div class="inline box"></div>
</div>
<div>
<div class="inline box">
</div><div class="inline box"></div>
</div>
多列
多栏布局允许内容流入多个栏，就像在报纸中一样。它是通过设置以下一个或两个属性来启用的:列数和列宽。column-count 属性指定内容将分成的列数，让浏览器平均划分它们的宽度。相反，column-width 属性设置所有列的固定宽度，让浏览器根据可用的屏幕宽度来计算适合的列数。
.flexible-cols {
column-count: 3;
}
.fixed-cols {
column-width: 14em;
}
CSS 中的列框不能单独定位，所以所有列的大小必须相同。可以使用 column-rule 属性在列之间添加垂直线，其行为类似于 border 属性。也可以使用 column-gap 属性调整列间距。它可以更改为任何有效的长度单位，默认情况下为 1em。
.mycols {
column-gap: 2em;
column-rule: 1px solid #ccc
}
Chrome 50+、Firefox 50+、Safari 10+、Opera 37+和 IE 10+都支持多栏属性。可以使用-webkit-和-moz-前缀来扩展对 Chrome 4+、Firefox 2+、Safari 3.1+和 Opera 11.5+的支持。
flex box(flex box)的缩写形式
flexbox 或 flex box 模块提供了一种简单的方法来创建一维流体布局，无论是水平行还是垂直列。为了启用 flexbox 布局，flex display 属性被应用到称为 flex 容器的容器元素。
.flex-wrapper {
display: flex;
}
该容器的子元素称为 flex 项目。默认情况下，它们按照在源文档中出现的顺序，按照文本方向(通常是从左到右)排列在一行中。考虑以下弹性项目。
.item1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 10em
}
.item2 {
flex-grow: 3;
flex-shrink: 2;
flex-basis: 10em
}
flex-basis 属性指定两个项目都希望为 10 米宽。由于 flex-grow 属性，如果 flex 容器大于 20em，第二个项目将占用第一个项目剩余空间的三倍。相反，如果容器收缩到小于 20em 宽度，第二个项目将收缩第一个项目的两倍，这由 flex-shrink 属性指定。这三个属性通常都是使用 flex 速记属性定义的，以确保所有值都已设置。
flex (flex): 0 1 auto | flex-grow + flex-shrink + flex-basis
如果容器的空间变得太窄而不适合该项的 flex-basis 设置，可以使用 flex-wrap 属性使容器换行到另一行。
flex-wrap (flex): nowrap | wrap | wrap-reverse
每个新的行(或列)将成为一个新的 flex 容器，在包装到该容器的项目之间分配空间。换行到第二行的项目不会与第一行的项目对齐。
.flex-wrapper {
display: flex;
flex-wrap: wrap;
}
放置在 flex 容器中，这些项目将均匀分布在水平轴上，即使浏览器被调整大小，也不需要任何媒体查询，如图 22-1 所示。
<div class="flex-wrapper">
<div class="item1 box"></div>
<div class="item2 box"></div>
</div>
默认情况下，Flex 项目按照它们在源文档中出现的顺序沿文本方向水平布局。flex 容器的方向由 flex-direction 属性确定，该属性可以有四个不同的值。
flex-direction (flex): row | row-reverse | column | column-reverse
还可以使用 order 属性更改单个项目的顺序，order 属性是一个无单位的数字，第一个项目从 0 开始。当与媒体查询一起使用时，如果需要，可以根据可用的屏幕大小重新排列项目。
.item2 {
/* Position before item1 */
order: -1;
}
flexbox 的一个特性是使用 align-items、align-self、align-content 和 justify-content 属性可以很容易地正确对齐项目。
align-items (flex): stretch | flex-start | flex-end | center | baseline
align-self (flex): auto | flex-start | flex-end | center | baseline | stretch
align-items 属性设置所有直接子 flexbox 项目的主轴对齐，这是指水平 flexbox 的垂直对齐。可以使用 align-self 属性在单个项目上覆盖此设置。
.flex-wrapper {
display: flex;
/* Vertically align items to top */
align-items: start;
}
.item1 {
/* Stretch auto-sized item to container height */
align-self: stretch;
}
使用 justify-content 属性完成次轴的对齐，这意味着水平 flexbox 的水平对齐。
justify-content (flex): flex-start | flex-end | center | space-between | space-around | space-evenly
该属性应用于 flex 容器并影响所有项目。
.flex-wrapper {
display: flex;
/* Center items vertically */
align-items: center;
/* Center items horizontally */
justify-content: center;
}
最后，align-content 属性指定当次轴上有额外的可用空间时，flex 容器行将如何对齐。这仅在 flex 容器中有多行时有效。
align-content: stretch | flex-start | flex-end | center | space-between | space-around
默认情况下，每一行的高度都会拉伸并均匀分布在次轴上，但是 align-content 属性可以更改这种行为，例如，在 flex 容器的中间将各行组合在一起。
.flex-wrapper {
display: flex;
height: 100vh;
flex-wrap: wrap;
/* Align rows in center */
align-content: center;
}
所有现代浏览器都支持 flexbox 属性，包括:Chrome 29+、Firefox 22+、Safari 10+、Opera 48+和 IE 11+。
网格盒
当需要通过行和列来控制布局时，grid 模块是为二维布局设计的。尽管 flexbox 可以根据可用空间调整每行的项目数，但网格将始终具有指定的列数和行数。要开始定义网格布局，显示值设置为 grid。与 flexbox 一样，这将容器的所有直接子容器都更改为网格项目。
.grid-wrapper {
display: grid;
}
这将默认为一列网格，因此下面的项目看起来与它们在一列两行的正常流程中一样。
<div class="grid-wrapper">
<div class="box"></div>
<div class="box"></div>
</div>
网格布局可以隐式或显式定义。这里的网格是隐式的，因为行数和列数没有明确定义。这种行的高度可以用 grid-auto-rows 属性设置。
grid-auto-rows (grid): auto | max-content | min-content | length
使用 grid-template-columns 属性可以添加更多的列，每个指定的值将列的大小定义为长度值或百分比。
.grid-wrapper {
display: grid;
grid-template-columns: 100px 100px;
grid-auto-rows: 100px;
}
如果添加比行高更高的项目，其内容将溢出。相反，为了获得一个灵活的高度，可以使用 minmax 函数来扩展以适应内容。该函数设置行的最小和最大高度(或列的宽度),以便它可以自动调整到内容的高度。该函数可用于以下网格属性:网格-模板-列、网格-模板-行、网格-自动-列和网格-自动-行。
grid-auto-rows: minmax(100px, auto);
可以使用 grid-template-rows 属性定义明确的行数。请记住，放置在明确定义的网格之外的任何项目都会自动扩展网格。
grid-template-rows (grid): none | auto | max-content | min-content | length
指定网格行或列大小的一种方法是使用由fl表示的分数单位。这个单元代表了网格容器中可用空间的一部分，所以下面的网格布局将有两行，第一行占了可用空间的 40%，第二行占了剩余的 60%。请注意，这里使用的 repeat 函数是指定四列等宽的简单方法。它给出了与指定值auto四次相同的结果。
.grid-wrapper {
display: grid;
height: 100vh;
grid-template-rows: 2fr 3fr;
grid-template-columns: repeat(4, 1fr);
}
有一个名为 grid-template 的简写属性可用于一次性设置网格模板属性。
grid-template (grid): none | grid-template-rows / grid-template-columns | grid-template-areas
下面指定了一个高度为 200 像素的两列一行的网格布局。
.grid-wrapper {
display: grid;
grid-template: 200px / auto auto
}
请注意，grid-template 属性有一个名为 grid-template-areas 的可能值。此属性提供了定义网格布局的另一种方法，即首先用 grid-area 属性命名各个项目。然后可以引用这些名称，使用 grid-template-areas 属性将它们放置在网格上，如此处所示。请记住，一个元素可以在网格中占据多个单元格。
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: content; }
.item4 { grid-area: footer; }
.grid-wrapper {
display: grid;
grid-template-areas:
'header header header' /* row 1 */
'menu content content' /* row 2 */
'footer footer footer'; /* row 3 */
}
项目通常按照它们在 HTML 中列出的顺序出现在网格中。可以使用 grid-column 和 grid-row 属性来指定某项将出现的位置，从而更改这种放置方式。例如，下面的样式放置了 header 元素，使它占据了网格第一行的前两个单元格。
header {
grid-column: 1 / 2;
grid-row: 1;
}
Chrome 57+、Firefox 52+、Safari 10.1+、Opera 44+和 Edge 16+提供了对网格布局属性的支持。
二十七、最佳实践
现在你已经了解了 CSS 的基本原理。这最后一章回顾了样式表开发的良好编码实践和标准。遵循这些准则可以帮助您编写易于维护、重用和扩展的健壮 CSS 代码。
可重用代码
可管理样式表的一个关键思想是避免重复代码。类有助于实现这一目标，因为它们是可重用的，并且可以以不同的方式组合，为您提供了一个易于发展的灵活设计。
每当您发现共享样式属性的页面项目时，您应该考虑组合这些重复的模式。这使得重用和更新代码以及保持网站风格的一致性变得更加容易。考虑下面这个简单的例子:
.module {
width: 200px;
border: 1px solid #ccc;
border-radius: 3px;
}
.widget {
width: 300px;
border: 1px solid #ccc;
border-radius: 3px;
}
这些类有两个共同的样式，可以移到第三个类中以避免不必要的重复。这个过程使得类更加通用，因此更加可重用。
.box-border {
border: 1px solid #ccc;
border-radius: 3px;
}
.module { width: 200px; }
.widget { width: 300px; }
当为了重用而优化类时，考虑它们的大小是很重要的。目标是在不太宽也不太窄的类别之间找到中间立场。过宽的班级导致不必要的重复；太窄的类很难改变设计。
全局修改器
有一些非常常用的样式属性。与其将这些样式添加到每个其他类中，有时不如创建一个具有单一样式的通用类，然后将其应用到需要它的元素中。例如，向左或向右浮动元素就是这样一种常见的操作。这些样式非常适合作为全局修改器。
.left { float: left; }
.right { float: right; }
当您想让一个元素浮动到右边或左边时，您可以简单地将这些类之一添加到元素中:
<div class="left">...</div>
当只需要一个样式属性时，这样的全局修饰符非常有用。但是，您应该避免将它们组合在一起，因为如果所有的页面项目都由这样的小类组成，那么调整您的设计会变得很困难。
样式表结构
通过组织样式表，您可以让自己和其他开发人员更容易快速理解 CSS 的结构。网站变得越大，越多的开发者参与其中，就越有必要将事情组织得井井有条。但是不管网站大小如何，始终保持样式表结构良好是一个好习惯。
样式表的顶部通常包括关于文件及其作者的信息。该元数据应该包括作者的姓名和联系信息。这样，如果出现关于文档的任何问题，当前在站点上工作的开发人员知道该问谁。其他可能有用的元数据包括文件的创建日期、最后修改日期、版本号、标题和描述。
/*
* Title: My Theme
* Version: 1.2.3
* Author: My Name
*/
至于样式规则，它们应该被分成几个部分，每个部分都应该标上有区别的注释。这种分组和标记使您能够更快地找到您需要的内容。您需要的部分取决于站点，但这里有一些示例部分:
/* === Normalization === */
/* === Primary layout === */
/* === Secondary layout === */
/* === Tertiary layout === */
/* === Navigation === */
/* === Text-related === */
/* === Links and images === */
/* === General styles === */
/* === General classes === */
/* === Miscellaneous === */
部分名称后的等号有助于在视觉上将部分与其他注释区分开来。它们还充当一个标记，您可以通过搜索来轻松地遍历这些部分。
对于大型样式表，节名可以作为目录列在元数据下面，这使得开发人员更容易了解文件是如何组织的。
/* Table of Contents
-----------------
Normalization
Primary layout (body, primary divs)
Secondary layout (header, footer, sidebar)
Tertiary layout (page regions)
Navigation (menus)
Text-related (paragraphs, headings, lists)
Links and images
General styles (forms, tables, etc.)
General classes (.clear, .center, etc.)
Miscellaneous
*/
在每个部分中，您应该首先声明最通用的规则，然后是越来越具体的规则。您的元素可以继承样式，并且在需要时您可以更容易地覆盖特定的样式。
另一件要考虑的事情是如何在规则中构造属性。一种流行的方法是根据类型对属性进行分组。您不必像下面的示例那样标记组，但是如果您在整个样式表中保持组的顺序不变，会有所帮助。这样做使您能够更快地浏览规则以搜索特定的属性。
.myclass {
/* Positioning */
position: absolute;
top: 0;
right: 0;
/* Box model */
display: inline-block;
width: 100px;
height: 100px;
/* Color */
background: #ccc;
color: #fff;
/* Text */
font-size: 1em;
line-height: 1.2;
text-align: right;
/* Other */
cursor: pointer;
}
请记住，这些只是指导方针；选择一个适合你的结构，并努力保持它的一致性。
命名规格
以明确其预期用途的方式命名类和 id 是有帮助的。这种结构化的命名约定意味着名称应该描述类或 id 的用途，而不是它的外观或它在 web 文档中的使用位置。
这种命名约定的优点是，更改网站的外观变得更加容易。例如，将 id 容器命名为#main-content比命名为#center-column-500px更好。除了直观地理解 id 的用法之外，名字还具有更多的用途，以防您以后需要调整它所应用到的元素的位置或大小。
#main-content {
width: 500px;
margin: 0 auto; /* centered */
}
名称应该有语义，但不要太语义化以至于限制重用。例如，命名一个类.header-top-margin不像命名一个类.small-top-margin(或者.small-tm)那样灵活。到后来回想起来，这个类主要用在 header 中是很容易的；例如，在 web 浏览器中查看页面源代码时，可以使用搜索功能搜索类名。
.small-top-margin { margin-top: 1em; }
除了传达预期用途，类名还可以显示它与其他类的关系。例如，如果一个容器类被称为.post，那么这个容器的标题可以被命名为.post-title，以表明这个类应该只在应用了.post类的元素中使用。
.post {
margin: 1em 0;
}
.post-title {
font-size: 1.2em;
}
标题类也可以写成.post.title，以确保.title类只能在使用.post类的容器中使用。然而，.post-title名称有助于避免命名冲突，并且不会增加特异性，因此命名约定通常是更可取的。注意，使用缩进进一步强调了规则之间的关系，这可以显著提高代码的可读性。
正常化
不同的浏览器呈现某些元素的方式略有不同，主要是因为它们的默认样式表有所不同。为了获得一个共享的基线，通常包括一组规则来规范这些浏览器的不一致性并设置合理的默认值。最受欢迎的选择是 GitHub Normalize.css项目。通过将这些规则包含在你的样式表的顶部(或者根据你的站点需求的一个子集)，你在所有的浏览器上都有一个一致的起点，你可以从这个起点开始构建。Normalize.css样式表包含大量注释，解释它解决的每个浏览器不一致。
排除故障
有许多有用的调试工具可以极大地简化 web 开发人员的工作。例如，Chrome 和 Firefox 具有内置的浏览器支持，可以在任何网页上实时调试 CSS、HTML 和 JavaScript 以进行测试。为了利用这一点，您可以在 Windows 上使用快捷键 Ctrl+Shift+I 或在 Mac 上使用快捷键 Cmd+Opt+I 来打开开发工具窗口。
或者，您可以右键单击页面上的某个元素，然后选择 Inspect Element，在元素检查模式下打开同一个窗口。此窗口的一个功能是准确地发现哪些样式适用于所选元素，以及当您打开或关闭特定样式时元素如何变化。要获得更复杂的调试和 web 开发工具，您可以下载 Firefox 浏览器的开发者版。 2
确认
检查你的 CSS 是否符合 W3C 标准是一个好主意。不正确的代码可能会导致您的站点在不同浏览器中出现意外的结果。此外，拥有没有错误的代码是一个高质量网站的标志。
W3C 提供了自己的在线工具来验证 CSS。 3 它检查提交的页面，并返回页面上发现的任何错误和警告，供您修复。它还有一个类似的验证 HTML 文档的工具， 4 ，这也是非常重要的。为了使验证更加方便，您可以下载一个浏览器插件来检查页面代码，例如 Chrome、Firefox 和 Opera 上的 Web Developer 插件。 5
单一样式表
出于性能原因，最好在一个外部样式表中包含一个站点的样式规则。这样做可以最大限度地减少加载网站所需的 HTTP 请求数量，同时允许缓存 CSS 文件，以便访问者的浏览器只需下载一次。
在大型网站的开发过程中，通常最好将样式规则分成几个更易于管理的 CSS 文件。为了两全其美，可以使用 CSS 预处理程序将这些开发文件合并成一个文件，作为站点构建过程的一部分。
预处理程序
随着网站的发展，它的样式表也在发展，当样式表变得难以浏览和维护时，它会很快达到一个临界点。降低大型样式表复杂性的一种方法是使用 CSS 预处理程序，比如 SASS。 6 预处理器以基本的编程特性，如变量、循环、条件和函数，可感知地扩展 CSS 语言。这允许您更好地组织样式表，并利用可重用的组件以更少的代码获得更好的结果。请注意，预处理程序并不扩展 CSS 标准本身。扩展语法中的样式表由程序处理，并转换成常规的 CSS 样式表。
缩小
缩小是从代码中删除不必要的字符以减小代码大小的过程。当一个 CSS 文件被缩小时，空白字符被删除，规则被优化和重构以更快地加载。这种压缩可以极大地减小文件的大小，从而以代码可读性为代价提高站点性能。由于可读性降低，最好使用未压缩的样式表，并在每次更新 CSS 文件时重复缩小步骤。缩小可以使用前面提到的 CSS 预处理器自动完成，也可以使用 Clean CSS 等在线工具手动完成。 7
缩小工具不能做的一个优化是找到并删除未使用的 CSS 规则。一个有用的 Firefox 插件可以帮助你完成这个任务，它就是 Dust-Me 选择器。这个插件可以单独测试页面，也可以扫描整个网站来寻找未使用的选择器。
跨浏览器测试
即使您的代码已经过规范化和验证，在不同的浏览器中，尤其是在旧版本中，网页的呈现方式仍然会有一些差异。因此，有必要在您希望您的站点支持的所有浏览器版本中测试您的站点。
为了使这个测试过程更容易，你可以使用浏览器堆栈， 9 ，这是一个检查浏览器兼容性的在线工具。它向您展示了您的站点在您选择的不同版本的浏览器上的外观。您还可以看到您的网站在移动设备和平板电脑上的外观。
