HTML5-权威指南-五-HTML5 权威指南（五）十六、上下文中的 CSS 在接下来的章节中，我将描述 CSS 定义

HTML5 权威指南（五）

原文：The Definitive Guide to HTML5

协议：CC BY-NC-SA 4.0

十六、上下文中的 CSS

在接下来的章节中，我将描述 CSS 定义的属性，更恰当的说法是级联样式表。第四章提供了 CSS 基础知识的快速复习，在我们开始深入细节之前，这一章提供了一些额外的背景知识。

了解 CSS 标准化

CSS 有过艰难的过去。在浏览器被视为分割市场的工具的时期，浏览器制造商将 CSS 作为一种关键工具来创建他们软件独有的功能。这是一个混乱——相同名称的属性以不同的方式处理，特定于浏览器的属性被用来访问特定于浏览器的功能。这个想法是为了迫使网络开发者让他们的网站或应用只在一个浏览器上运行。

好消息是，浏览器大多在速度、易用性以及越来越符合 CSS 等标准方面与众不同。坏消息是 CSS 的标准化过程并不理想。

正如你将在接下来的章节中看到的，CSS 中有很多功能。W3C(CSS 和 HTML 的标准团体)没有试图创建一个单一的标准，而是决定将 cs3s 分解成个模块，并让每个模块遵循自己的时间表。这是一个很好的想法——它肯定胜过了单一的方法——但是这意味着没有一个符合 CSS3 的整体标准。相反，您必须依次考虑每个模块，并决定它是否有足够广泛的支持。

更复杂的是，只有极少数的 CSS3 模块已经完成了标准化过程。一些模块，尤其是那些向 CSS 引入新功能领域的模块，仍处于开发过程的早期阶段，可能会发生变化。可以添加、更改或删除属性。模块可能被合并或删除；模块之间的关系可能会改变(因为模块通常依赖于其他模块中定义的属性或单元)。这意味着你可能会发现，自从我写这本书以来，一些新的属性已经发生了变化。

在接下来的章节中，我包含了一些来自模块的属性，这些属性看起来很稳定，并且有望被主流浏览器很快实现。在大多数情况下，这些功能是稳定的，可以在最近的浏览器版本中依赖。为了帮助您决定使用一个属性是否适合您的项目，我在本章后面的“属性快速参考”一节中包含了 CSS 版本，每个属性都添加到该版本中。

在模块定义的更不稳定的阶段，浏览器将使用特定于浏览器的前缀来实现一个特性。这不像过去那样糟糕——这些是试验性的实现，允许早期采用者测试浏览器对一组特定属性的实现。我通常避免使用这样的属性，但是 CSS3 的一些特性非常重要，所以我在例子中使用了前缀。在所有情况下，特定于浏览器的实现都非常接近规范。每个浏览器都有不同的前缀。你可以在表 16-1 中看到最流行的浏览器的前缀。

了解盒子模型

CSS 中的一个基本概念是盒子模型。如果一个元素是可见的，它将占据页面的一个矩形区域。这被称为元素的盒。该盒由四部分组成，如图图 16-1 所示。

图 16-1。CSS 盒子模型

其中两个部分是可见的:内容和边框。填充是内容和边框之间的间距，边距是边框和页面上其他元素之间的间距。理解这四个部分之间的关系对于充分利用 CSS 是至关重要的。在接下来的章节中，我将向您介绍 CSS 属性，这些属性允许您控制边距、填充和边框，并控制内容的整体外观。

一个元素可以包含其他元素。在这种情况下，父元素的上下文框被称为子元素的容器块(或者有时只是容器)。这种关系如图图 16-2 所示。

图 16-2。父元素和子元素之间的盒子模型关系

您可以使用包含块的特征来确定元素的外观。这不仅适用于级联和继承的属性，也适用于显式定义的属性，正如你在第二十一章中看到的元素布局。

选择器快速参考

我在第十七章和第十八章中深入描述了 CSS 选择器。为了快速参考，表 16-2 总结了选择器，并显示了它们是在哪个版本的 CSS 中添加的。

属性快速参考

在第十九章–第二十四章中，我描述了 CSS 属性。为了快速参考，以下部分总结了这些属性以及它们所添加到的 CSS 版本。

边框和背景属性

表 16-3 总结了可用于元素应用边框和背景的属性。这些属性在第十九章中有完整描述。

盒子模型属性

表 16-4 总结了可用于配置元素盒的属性。这些属性在第二十章中有完整描述。

布局属性

表 16-5 总结了可用于创建元素布局的属性。这些属性在第二十一章中有完整描述。

文本属性

表 16-6 总结了可用于文本样式的属性。这些属性在第二十二章中有完整描述。

过渡、动画和变换属性

表 16-7 总结了可以用来改变元素外观的属性，通常是在一段时间后。这些属性在第二十三章中有完整描述。

其他属性

表 16-8 总结了不适合其他章节的特性。这些属性在第二十四章中有完整描述。

总结

在这一章中，我为后面的章节提供了一些背景，在这些章节中我描述了 CSS 属性。我还提供了快速参考表，当你在一个真实的项目中使用 CSS 时，它会让你找到你想要的属性。当考虑在项目中使用 CSS 功能时，考虑定义属性的 CSS 版本是很重要的。正如我在本章开始时解释的那样，一些 CSS3 模块仍然不稳定，而另一些则没有像我们希望的那样广泛实现。

十七、使用 CSS 选择器——第一部分

在第四章的中，我解释了当使用style元素或外部样式表时，使用 CSS 选择器来识别想要应用样式的元素。在本章和下一章中，我将描述和演示核心 CSS3 选择器。您将看到做出选择是多么容易，以及如何定制这些选择以满足广泛或非常具体的条件。

随着时间的推移，这些选择器在不同版本的 CSS 中被引入。主流浏览器对所有的选择器都有相当好的支持，但是您可能会发现在不太流行的浏览器中覆盖范围有点不完整。为了帮助您找出可以依赖的内容，我指出了每个选择器是在哪个 CSS 版本中引入的。表 17-1 对本章进行了总结。

使用基本的 CSS 选择器

有一组非常简单易用的选择器。把它们想象成基本的选择器。您可以使用这些选择器在文档中进行大范围的选择，或者在组合在一起时作为更小范围匹配的基础(这种技术我将在本章后面介绍)。在下面的每一节中，我将向您展示如何使用一个基本的选择器。

选择所有元素

通用选择器匹配文档中的每个元素。这是 CSS 选择器中最基本的，但是很少使用，因为它匹配的范围太广了。表 17-2 总结了选择器。

清单 17-1 展示了一个使用通用选择器的样式的例子。

清单 17-1。使用通用选择器

Example ** * {** ** border: thin black solid;** ** padding: 4px;** ** }** ` ` Visit the Apress website

I like apples and oranges.

Visit the W3C website `

我在清单 17-1 中定义的样式在选中的元素周围放了一个细黑盒子。这是我在本章中用来演示选择器匹配方式的样式之一。你可以在图 17-1 中看到这个选择器的效果。

图 17-1。使用通用 CSS 选择器

如果这个图看起来有点奇怪，那是因为通用选择器确实匹配文档中的每个元素的*，包括html和body元素。这个选择器是一个有效的工具，但是有点残忍，你应该小心使用它。*

按类型选择元素

您可以通过将元素类型指定为选择器来选择文档中元素的所有实例(例如，如果您想要选择所有的a元素，那么您可以使用a作为选择器)。表 17-3 总结了元素类型选择器。

清单 17-2 提供了一个例子。

清单 17-2。使用元素类型选择器

Example ** a {** ** border: thin black solid;** ** padding: 4px;** ** }** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

你可以在图 17-2 中看到这个选择器的效果。

图 17-2。按类型选择元素

提示您可以将一个样式应用于多个元素类型，方法是用逗号分隔这些类型。有关示例，请参见本章后面的“组合选择器”一节。

按类别选择元素

类选择器允许我们选择已经使用类全局属性分配给特定类的元素。表 17-4 描述了这个选择器。我在第三章的中描述了class属性。

清单 17-3 展示了这个选择器。

清单 17-3。按类别选择元素

Example ** .class2 {** ** border: thin black solid;** ** padding: 4px;** ** }** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

在清单 17-3 中，我使用了选择器.class2。这具有选择已经被分配给类class2的任何类型的所有元素的效果。

这个选择器有两种表达方式:有和没有通用选择器。选择器*.class2和.class是等价的。第一种形式更具描述性，但第二种形式是最常用的。这是 CSS 选择器中反复出现的模式。当您继续浏览可用的选择器时，您会发现每个选择器实际上都是一个过滤器，它缩小了选择器的范围，使其匹配更少的元素。您可以组合这些选择器来创建焦点匹配。在本章后面的“组合选择器”一节中，我将向你展示组合选择器的不同技术。

在清单 17-3 中，有两个元素被分配给目标类:一个a元素和一个span元素。你可以在图 17-3 中看到这种风格的效果。

图 17-3。使用类别选择器

您可以更具体地将选择限制为已分配给某个类的单一类型的元素。你可以用元素类型替换通用选择器，如清单 17-4 所示。

清单 17-4。为单个元素类型使用类选择器

Example ** span.class2** { border: thin black solid; padding: 4px; } Visit the Apress website

I like apples and oranges.

Visit the W3C website `

在这种情况下，我缩小了选择器的范围，使其只匹配已经分配给class2的span元素。你可以在图 17-4 中看到缩小范围的效果。

图 17-4。缩小类选择器的范围

提示如果要选择多个类中的成员，可以指定用句点分隔的类名(如span.class1.class2)。这将只选择分配给class1和class2的元素。

按 ID 选择元素

ID 选择器允许您通过全局id属性的值来选择元素，我在第三章的中对此进行了描述。表 17-5 总结了这个选择器。

正如我在第三章中解释的，元素的id属性的值在 HTML 文档中必须是唯一的。这意味着当您使用 ID 选择器时，您正在寻找单个元素。清单 17-5 演示了id选择器的使用。

列表 17-5。使用 id 选择器

Example` `** ** ** #w3canchor {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

在这个例子中，我选择了具有w3canchor的id的元素。你可以在图 17-5 中看到它的效果。

图 17-5。通过 ID 选择元素

看起来，如果您将单个元素作为样式的目标，那么您可以通过使用元素的style属性来实现相同的效果。这是真的，但是当你把它和其他选择器结合起来的时候，这个选择器的真正价值才体现出来，这是我在本章后面演示的技术。

按属性选择元素

属性选择器允许你根据属性的不同方面匹配属性，如表 17-6 所述。

通过使用通用选择器(*)，或者在更常见的形式中，通过省略通用选择器并将条件放在方括号内([和]字符)，可以选择匹配属性满足条件的所有元素(或者给定类型的所有元素)。清单 17-6 展示了属性选择器的使用。

清单 17-6。使用元素属性选择器

Example ** [href] {** ** border: thin black solid;** ** padding: 4px;** ** }** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

在清单 17-6 中，我使用了最简单的属性选择器，它匹配任何具有href属性的元素，而不考虑属性的赋值。在示例 HTML 文档中，这意味着两个a元素都将被选中，如图图 17-6 所示。

图 17-6。基于属性的存在选择元素

您可以创建更复杂的条件来匹配属性，如表 17-7 所示。这些条件已经分两次添加到 CSS 中，所以我指出了每个条件在哪个版本的 CSS 中受支持。

最后两个条件需要进一步解释。~=条件对于处理支持由空格字符分隔的多个值的属性很有用，比如 class global 属性。清单 17-7 给出了一个演示。

清单 17-7。基于多个值之一进行选择

Example ** ** ** [class~="class2"] {** ** border: thin black solid;** ** padding: 4px;** ** }** ** **` ` Visit the Apress website

I like apples and oranges.

Visit the W3C website `

在清单 17-7 中，我使用了class全局属性，因为这是我迄今为止引入的唯一一个接受多个值的属性。您不需要使用属性选择器来匹配class值；类选择器自动处理多个类成员。

我在选择器中使用的条件是匹配定义了class属性并且该属性的值包含class2的元素。我已经突出显示了内容元素的类属性，你可以在图 17-7 中看到选择器的效果。

图 17-7。基于多值属性进行选择

当几条信息用一个属性值表示并用连字符分隔时,|=条件很有用。一个很好的例子是lang全局属性，它可以与包含区域子标记的语言说明符一起使用(例如，en-us是美国的英语口语，en-gb是英国的英语口语)。清单 17-8 展示了如何选择所有的英文标签，而不必列举所有的地区差异(地区差异有很多)。

清单 17-8。使用|=属性条件

Example ** ** ** [lang|="en"] {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** ` ` Visit the Apress website

I like apples and oranges.

Visit the W3C website `

你可以在图 17-8 的中看到这个选择器的效果。注意，选择器匹配第二个a元素，它没有区域子标记(即lang元素的值是en，而不是en-us或en-gb)，以及那些有子标记的元素。

图 17-8。基于语言属性选择元素

组合选择器

通过创建选择器的组合，您可以更具体地选择元素。这些要么拓宽了应用样式的元素范围，要么起到了相反的作用:让你在选择时变得非常具体。在接下来的几节中，我将向您展示组合选择器的不同方式。

创建选择器联合

创建一个逗号分隔的选择器列表意味着样式被应用到每个单独的选择器匹配的所有元素的并集。表 17-8 总结了选择器的联合。

清单 17-9 提供了一个创建选择器并集的例子。

清单 17-9。创建选择器联合

Example ** ** ** a, [lang|="en"] {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

在清单 17-9 的中，我指定了一个类型选择器(a)和一个属性选择器([lang|="en"])，用逗号(a, [lang|="en"])隔开。浏览器将依次评估每个选择器，并将样式应用于所选元素。您可以自由地混合和匹配不同类型的选择器，匹配的元素之间不需要任何通用性。你可以从图 17-9 中的清单 17-9 中看到选择器的效果。

图 17-9。创建选择器联合

您可以根据需要组合任意数量的选择器，每个选择器之间用逗号分隔。

选择后代元素

您可以使用后代选择器来选择包含在另一个元素中的元素。表 17-9 提供了一个总结。

应用第一个选择器，然后根据第二个选择器评估匹配元素的后代。后代选择器将匹配第一个选择器匹配的元素中包含的任何元素*，而不仅仅是直接子元素。清单 17-10 提供了一个演示。*

清单 17-10。选择后代

Example ** ** ** p span {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

清单 17-10 中的选择器选择p元素的后代span元素。给定示例中的 HTML，我可以直接选择span元素来获得相同的结果，但是这种方法更加灵活，如下例所示。

清单 17-11。更复杂的后代选择器示例

Example ** ** ** #mytable td {** ** border: thin black solid;** ** padding: 4px;** ** }**` `** **

Name	City
Adam Freeman	London
Joe Smith	New York
Anne Jones	Paris

I like apples and oranges.

Name	City
Peter Pererson	Boston
Chuck Fellows	Paris
Jane Firth	Paris

在清单 17-11 中，我定义了两个简单的表格，每个表格都定义了id属性。使用 ID 选择器，我选择具有mytable的id值的表，然后选择它包含的td元素。在图 17-10 中可以看到效果。

图 17-10。选择后代元素

注意，在这个例子中我没有选择直系后代。我跳过了tr元素来选择td元素。

选择子元素

与后代选择器相对应的是子选择器，它只匹配直接包含在匹配元素中的元素。表 17-10 总结了子选择器。

清单 17-12 展示了如何选择子元素。

清单 17-12。选择子元素

Example ** ** ** body > * > span, tr > th {** ** border: thin black solid;** ** padding: 4px;** ** }** ** **

Name	City
Adam Freeman	London
Joe Smith	New York
Anne Jones	Paris

I like apples and oranges.

Name	City
Peter Pererson	Boston
Chuck Fellows	Paris
Jane Firth	Paris

在这个选择器中，我创建了一个子选择器的联合。在第一个例子中，我寻找作为元素的子元素的span元素，以及作为body元素的子元素的元素。在第二个例子中，我在寻找tr元素的子元素th元素。你可以在图 17-11 中看到哪些元素匹配。

图 17-11。选择子元素

选择同级元素

您可以使用直接兄弟选择器选择紧跟在其他元素之后的元素。表 17-11 总结了该选择器。

清单 17-13 展示了如何选择直接兄弟元素。

清单 17-13。使用直接兄弟选择器

Example ** ** ** p + a {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website Visit Google `

在清单 17-13 的中，选择器将匹配紧跟在p元素之后的a元素。正如你在图 17-12 中看到的，清单中只有一个这样的元素，那就是a元素，它创建了一个到 W3C 网站的超链接。

图 17-12。选择直接兄弟

您可以使用通用兄弟选择器使选择稍微宽松一点，它选择另一个指定元素之后的元素，但不一定是立即选择。表 17-12 描述了这个元素。

清单 17-14 展示了如何使用通用兄弟选择器。

清单 17-14。使用通用同级选择器

Example ** ** ** p ~ a {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website Visit Google `

我们不局限于紧跟在第一个选择器匹配的元素之后的元素，这意味着在这个例子中第二个选择器将匹配两个a元素。被排除的a元素(链接到 apress.com 的元素)未被选中，因为它位于p元素之前；我们只能选择后继的兄弟姐妹)。你可以在图 17-13 的中看到这个选择器的效果。

图 17-13。使用通用同级选择器

使用伪元素选择器

到目前为止，您已经看到了使用 HTML 文档中定义的元素的选择。CSS 还包括伪选择器，它们提供更复杂的功能，但并不直接对应于文档中定义的元素。伪选择器有两种:伪元素和伪类。在这一节中，我将描述并演示伪元素选择器。顾名思义，伪元素并不真正存在；它们是 CSS 提供的一种便利，让您可以做出有帮助的选择。

使用::首行选择器

::first-line选择器匹配文本块的第一行。表 17-13 总结了::first-line选择器。

清单 17-15 显示了一个使用::first-line选择器的例子。

清单 17-15。使用::第一行伪元素选择器

Example ** ** ** ::first-line {** ** background-color:grey;** ** color:white;** ** }** ** **

Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.

I like apples and oranges.

Visit the W3C website

我在这个例子中单独使用了选择器，但是它也可以作为一个修饰符应用于其他选择器。例如，如果我想只选择第一行的p元素，我可以指定p::first-line作为选择器。

提示伪元素选择器以两个冒号字符(::)为前缀，但是浏览器将识别只有一个冒号的选择器(即:first-line而不是::first-line)。这使得格式与我在本章前面描述的伪类选择器保持一致，以便向后兼容。

当浏览器窗口调整大小时，浏览器将重新评估第一行是什么。这意味着样式总是正确地应用于文本的第一行，如图图 17-14 所示。

图 17-14。浏览器确保样式被应用到第一行，即使当窗口被调整大小时

使用::首字母选择器

选择器顾名思义:它选择文本块中的第一个字母。表 17-14 总结了这个伪元素选择器。

清单 17-16 显示了正在使用的选择器。

清单 17-16。使用::首字母伪元素选择器

Example ** ** ** ::first-letter {** ** background-color:grey;** ** color:white;** ** border: thin black solid;** ** padding: 4px;** ** }** ** **

Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.

I like apples and oranges.

Visit the W3C website

你可以在图 17-15 中看到这个选择器的效果。

图 17-15。使用::首字母选择器

使用:之前和:之后选择器

:before和:after选择器的不同寻常之处在于它们生成内容并将其添加到文档中。我在第九章的中介绍了:before选择器，并展示了如何使用它来创建定制列表。:after选择器是:before的对等物，它在元素之后添加内容，而不是在元素之前。表 17-15 描述了这些选择器。

清单 17-17 展示了这些属性的使用。

清单 17-17。使用之前和之后选择器

Example ** ** ** a:before {** ** content: "Click here to "** ** }** ** a:after {** ** content: "!"** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

在清单 17-17 中，我选择了a元素并应用了:before和:after伪选择器。当使用这些选择器时，通过为content属性设置一个值来指定想要插入的内容。这是一个特殊的属性，只能与这些选择器一起使用。在这个例子中，内容Click here to将被插入到a元素的内容之前，感叹号(!)将被插入到内容之后。你可以在图 17-16 中看到这些增加的效果。

图 17-16。使用:之前和之后选择器

使用 CSS 计数器功能

:before和:after选择器通常与 CSS 计数器功能一起使用，它可以让您生成数字内容。我在第九章中给出了一个使用这些计数器创建自定义列表的例子。清单 17-18 给出了一个演示。

清单 17-18。使用 CSS 计数器功能

Example ** ** ** body {** ** counter-reset: paracount;** ** }** ** p:before {** ** content: counter(paracount) ". ";** ** counter-increment: paracount;** ** }** ** ** Visit the Apress website

I like apples and oranges.

I also like mangos and cherries.

Visit the W3C website `

要创建一个计数器，您可以使用特殊的counter-reset属性，并将值设置为您想要用于计数器的名称，如下所示:

counter-reset: paracount;

这具有初始化名为paracount计数器的计数器并将值设置为1的效果。您可以通过在计数器名称后添加一个数字来指定不同的初始值，如下所示:

counter-reset: paracount 10;

如果想要定义多个计数器，只需将名称(和可选的初始值)添加到同一个counter-reset声明中，如下所示:

counter-reset: paracount 10 othercounter;

这个声明创建了一个名为paracount(初始值为10)的计数器和一个名为othercounter(初始值为1)的计数器。初始化计数器后，可以在使用:before和:after选择器的样式的content属性中使用它，如下所示:

content: counter(paracount) ". ";

因为这个声明已经在包含:after的选择器中使用，所以它的效果是在选择器匹配的每个元素之前包含 HTML 中计数器的当前值，在这种情况下，在每个值之后附加一个句点和一个空格。该值默认为十进制整数(1、2、3等)。)，但您也可以指定其他数字格式，如下所示:

content: counter(paracount, lower-alpha) ". ";

counter 函数的另一个参数是您想要的数字样式。你可以为list-style-type属性使用任何支持的值，我在第二十四章中对此进行了描述。

您使用特殊的counter-increment属性增加计数器。该属性的值是要递增的计数器的名称，如下所示:

counter-increment: paracount;

默认情况下，计数器递增 1，但是您可以通过将所需的步长添加到声明中来指定不同的增量，如下所示:

counter-increment: paracount 2;

你可以从图 17-17 中的清单 17-18 中看到计数器的效果。

图 17-17。使用带有生成内容的计数器

总结

在这一章中，我描述了 CSS 选择器和伪元素，它们是你识别想要应用样式的元素的方法。选择器允许您在大范围内匹配元素，或者通过组合选择器，将您的关注点缩小到 HTML 文档中特定部分的元素。伪元素便于您选择文档中并不存在的内容。在下一章研究伪类时，你会看到类似的原理。

学习选择器是充分利用 CSS 的关键。在接下来的章节中，你将会看到很多选择器的例子，我建议你花时间去试验并熟悉它们。

十八、使用 CSS 选择器——第二部分

在这一章中，我将继续你的 CSS 选择器之旅，并向你展示伪类。与伪元素一样，这些不是已经应用于元素的类，而是一种方便，允许您基于一些公共特征选择元素。表 18-1 对本章进行了总结。

使用结构化伪类选择器

结构伪类选择器允许您根据元素在文档中的位置来选择元素。这些选择器以冒号字符(:)为前缀；比如:empty。您可以单独使用这些选择器，也可以与另一个选择器结合使用；例如，p:empty。

使用:根选择器

:root选择器选择文档中的根元素。这可能是伪类选择器中最没用的，因为它总是返回html元素。表 18-2 总结了:root选择器。

清单 18-1 显示了正在使用的:root选择器。

清单 18-1。使用:根选择器

Example ** ** ** :root {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

你可以在图 18-1 中看到这个选择器的效果。可能有点难以辨认，但整个文档周围有一个边框。

图 18-1。使用:根选择器

使用子选择器

子选择器允许您选择直接包含在其他元素中的单个元素。表 18-3 总结了这些选择器。

使用:第一个孩子选择器

:first-child选择器将匹配包含它们的元素定义的第一个元素(众所周知，父元素)。清单 18-2 显示了正在使用的:first-child选择器。

清单 18-2。使用:第一个孩子选择器

Example ** ** :first-child { ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

在清单 18-2 中，我单独使用了:first-child选择器，这意味着它将匹配任何作为其包含元素的第一个子元素的元素。你可以在图 18-2 的中看到哪些元素被选中。

图 18-2。使用:第一个孩子选择器

您可以使用:first-child选择器作为修饰符，或者将它与其他选择器结合起来，这样就更具体了。清单 18-3 展示了如何操作。

清单 18-3。将第一个孩子选择器与其他选择器组合

Example ** ** ** p > span:first-child {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

该选择器将匹配任何作为p元素的第一个子元素的span元素。在这个例子的 HTML 中只有一个这样的元素，你可以在图 18-3 中看到匹配。

图 18-3。将第一个孩子的选择器与另一个选择器组合

使用:最后一个子代选择器

:last-child选择器选择由包含元素定义的最后一个元素。清单 18-4 显示了正在使用的:last-child选择器。

清单 18-4。使用:最后一个孩子选择器

Example ** ** ** :last-child {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

你可以在图 18-4 中看到这个选择器匹配了哪些元素。请注意，内容区域周围有一个边框。这是因为body元素是html元素的最后一个子元素，因此由选择器匹配。

图 18-4。使用:最后一个孩子选择器

使用:独生子女选择器

:only-child选择器匹配父元素所包含的唯一元素。清单 18-5 展示了这个选择器的使用。

清单 18-5。使用:独生子女选择器

Example ** ** ** :only-child {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

唯一有一个子元素的元素是p元素，它包含一个span元素。你可以看到这是选择器在图 18-5 中唯一匹配的元素。

图 18-5。使用:独生子女选择器

使用:仅类型选择器

:only-of-type选择器匹配由父元素定义的类型的唯一子元素。清单 18-6 提供了一个演示。

清单 18-6。使用:唯一类型选择器

Example ** ** ** :only-of-type {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

你可以在图 18-6 中看到这个选择器匹配的元素。您可以看到，这个选择器在单独使用时匹配范围非常广。在任何文档中，通常都有一些元素，它们是由它们的父元素定义的类型中唯一的元素。当然，您可以通过将该选择器与其他选择器组合来缩小匹配范围。

图 18-6。使用:唯一类型选择器

使用第 n 个子选择器

第 n 个子选择器类似于我在上一节中描述的子选择器，但是它们允许您指定一个索引来匹配特定位置的元素。表 18-4 总结了第 n 个子选择器。

每个选择器都有一个参数，它是您感兴趣的元素的索引；索引从 1 开始。清单 18-7 显示了正在使用的:nth-child选择器。

清单 18-7。使用:第 n 个子选择器

Example ** **` `** body > :nth-child(2) {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

在清单 18-7 的中，我选择了作为body元素的第二个子元素的所有元素。这样的元素只有一个，如图图 18-7 所示。

图 18-7。使用第 n 个子元素

我不打算演示其他第 n 个子选择器，因为它们的功能与相应的常规子选择器相同，只是增加了一个索引值。

使用 UI 伪类选择器

UI 伪类选择器允许您根据元素的状态来选择元素。表 18-5 描述了用户界面选择器。

选择启用/禁用的元素

一些元素有启用和禁用状态。这样做的是那些可以用来收集用户输入的。:enabled和:disabled选择器不会匹配任何不能被禁用的元素。清单 18-8 给出了一个使用:enabled选择器的例子。

清单 18-8。使用:启用选择器

Example ** ** ** :enabled {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** This is an enabled textarea This is a disabled textarea `

清单 18-8 中的 HTML 包含两个textarea元素，其中一个定义了disabled属性。:enabled选择器将选择第一个textarea而不是第二个，如图 18-8 中的所示。

图 18-8。使用:启用选择器

选择选中的元素

被选中的单选按钮和复选框(通过checked属性或由用户)可以通过:checked选择器选择。演示这个选择器的问题是，没有多少样式可以应用于复选框和单选按钮。清单 18-9 展示了:checked选择器的应用。

清单 18-9。使用:选中的选择器

Example ** ** ** :checked + span {** ** background-color: red;** ** color: white;** ** padding: 5px;** ** border: medium solid black;** ** }** ** **

Do you like apples: ` ` This will go red when checked

为了避开样式限制，我使用了兄弟选择器(在第十七章的中描述)来改变复选框旁边的span元素的外观。在图 18-9 中可以看到从未选中到选中的转变。

图 18-9。选择选中的元素

对于未检查的元素没有特定的选择器，但是您可以将:checked与否定选择器结合使用，这将在本章后面的“使用否定选择器”一节中描述。

选择默认元素

:default元素从一组相似元素中选择默认元素。例如,“提交”按钮总是表单中的默认按钮。你可以看到清单 18-10 中使用的:default选择器。

清单 18-10。使用:默认元素

Example ** ** ** :default {** ** outline: medium solid red;** ** }**` `** **

Name:

Submit Vote Reset `

这个选择器最常用于outline属性，我在第十九章的中描述过。你可以在图 18-10 的中看到这个选择器的效果。

图 18-10。使用:默认选择器

选择有效和无效的输入元素

:valid和:invalid选择器分别匹配符合或不符合输入验证要求的input元素。你可以在第十四章中了解更多关于输入验证的信息。清单 18-11 展示了这些选择器的使用。

清单 18-11。使用:有效和:无效选择器

Example :invalid { outline: medium solid red;` `** }** :valid { outline: medium solid green; }

Name:

City:

Submit `

在清单 18-11 中，我为无效元素应用了红色轮廓，为有效元素应用了绿色轮廓。文档中有两个input元素，都有required属性。这意味着它们只有在输入了值的情况下才有效。你可以在图 18-11 中看到这些选择器的效果。

图 18-11。选择有效和无效的输入元素

提示注意提交按钮也受到了影响，至少在 Chrome 中是这样。发生这种情况是因为:valid选择器背后的逻辑相当简单，选择任何不是无效的input元素。要过滤掉某些输入元素，您可以使用第十七章中描述的属性选择器，或者更具体的选择器，如下所述。

选择有范围限制的输入元素

输入验证的一个更具体的变化是选择对它们可以包含的值的范围有约束的input元素。:in-range选择器匹配范围内的input元素，而:out-of-range选择器选择范围外的元素。清单 18-12 展示了这些属性的使用。

清单 18-12。使用:范围内和范围外选择器

Example ** ** ** :in-range {** ** outline: medium solid green;** ** }** ** :out-of-range: {** ** outline: medium solid red;** ** }** ** **

$ per unit in your area:

在我写这篇文章的时候，主流浏览器都没有实现:out-of-range选择器，只有 Chrome 和 Opera 支持:in-range选择器。我预计这种情况会很快改变，因为这种功能与新的 HTML5 支持紧密相关，这种支持可能会被广泛采用。你可以在图 18-12 的中看到:in-range选择器的效果。

图 18-12。范围内选择器的效果

选择必需和可选的输入元素

:required选择器匹配具有required属性的输入元素。这确保了用户在提交与input元素相关联的 HTML 表单之前必须输入一个值(你可以在第十四章中获得关于required属性的更多细节)。:optional选择器选择没有required属性的input元素。这两个属性都显示在清单 18-13 中。

清单 18-13。选择必需和可选输入元素

Example ** ** ** :required {** ** outline: medium solid green;** ** }** ** :optional {** ** outline: medium solid red;** ** }** ** **

$ per unit in your area: $ per unit in your area:` `

在清单 18-13 中，我定义了两个number类型input元素。一个具有required属性，但在其他方面两者是相同的。你可以在图 18-13 中看到选择器和相关样式的效果。注意submit型input也被选中。:optional选择器不区分input元素的类型。

图 18-13。选择必需和可选输入元素

使用动态伪类选择器

动态伪类选择器之所以如此，是因为它们基于变化的条件匹配元素，而不是文档的固定状态。随着 JavaScript 被广泛用于修改文档内容和元素状态，静态和动态选择器之间的界限已经变得模糊，但是它们仍然被认为是选择器的一个独立类别。

使用:链接和:已访问选择器

:link选择器匹配超链接，而:visited选择器匹配用户以前访问过的超链接。表 18-6 总结了这些选择器。

用户点击链接后，浏览器可以自由决定链接保持被访问的时间。当用户清除浏览器历史记录时，或者当历史记录自然超时时，链接将返回到未访问状态。清单 18-14 展示了这些选择器的使用。

清单 18-14。使用:link 和:visited 选择器

Example ** ** ** :link {** ** border: thin black solid;** ** background-color: lightgrey;** ** padding: 4px;** ** color:red;** ** }** ** :visited {** ** background-color: grey;** ** color:white;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

本例中唯一需要注意的一点是，使用:visited选择器只能将一些属性应用于链接。你可以改变颜色和字体，但仅此而已。你可以在图 18-14 中看到链接被访问时的变化。我从一对没有被访问过的链接开始，点击其中一个链接进入http://apress.com网站。当我回到示例 HTML 时，被访问的链接的样式有所不同。

图 18-14。使用:link 和:visited 选择器

提示:visited选择器将匹配任何链接，其href属性是用户从任何页面访问过的 URL，而不仅仅是你的页面。:visited选择器最常见的用途是应用一种样式，使得已访问的链接与未访问的链接没有区别。

使用:悬停选择器

:hover选择器将匹配用户鼠标悬停的任何元素。当用户在文档中移动鼠标时，选定的元素会发生变化。表 18-7 描述了这个选择器。

浏览器可以自由地以对正在使用的显示器有意义的方式解释:hover选择器，但是大多数浏览器将选择器与鼠标在窗口上的移动联系起来。清单 18-15 显示了正在使用的选择器。

清单 18-15。使用:悬停选择器

Example ** ** ** :hover {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

这个选择器将匹配多个嵌套元素，正如你在图 18-15 中看到的。

图 18-15。使用:悬停选择器

使用:活动选择器

:active选择器在用户激活元素期间匹配元素。同样，浏览器有解释这种激活的自由，但对于大多数浏览器来说，这发生在按下鼠标时(或手指在触摸屏上按下)。表 18-8 总结了:active选择器。

清单 18-16 给出了一个使用这个选择器的例子。

清单 18-16。使用:活动选择器

Example ** ** ** :active {** ** border: thin black solid;** ** padding: 4px;** ** }** ** **` ` Visit the Apress website

I like apples and oranges.

Hello `

我在清单的标记中添加了一个按钮，但是:active选择器并不局限于用户可以与之交互的元素。鼠标按下的任何元素都会被选中，如图 18-16 中的所示。

图 18-16。使用:活动选择器

使用:焦点选择器

最后一个动态伪类选择器是:focus，它在元素拥有焦点时选择元素。表 18-9 总结了该选择器。

清单 18-17 展示了这个选择器的使用。

清单 18-17。使用:焦点选择器

` ` Example ** ** ** :focus{** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Name:

City:

当我浏览标记中的input元素时，样式依次应用于每个元素。你可以看到图 18-17 中所示的效果。

图 18-17。焦点选择器的效果

其他伪选择器

有几个选择器不完全符合我在本章中用来对选择器进行分组的类别。在接下来的几节中，我将依次解释它们。

使用否定选择器

否定选择器允许您反转任何选择。它是一个非常有用的选择器，但却经常被忽视。表 18-10 总结了否定选择器。

清单 18-18 显示了使用中的否定选择器。

清单 18-18。使用否定选择器

Example ** ** ** a:not([href*="apress"]) {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

Visit the W3C website `

这个选择器匹配所有没有包含字符串apress的href元素的a元素。你可以在图 18-18 的中看到这个选择器的效果。

图 18-18。使用否定选择器

使用:空选择器

:empty选择器匹配没有定义子元素的元素。该选择器总结在表 18-11 中。很难说明这个选择器，因为它的匹配不包含任何内容。

使用:语言选择器

:lang选择器基于lang全局属性匹配元素(在第三章中描述)。表 18-12 总结了该选择器。

清单 18-19 显示了正在使用的lang选择器。

清单 18-19。使用语言选择器

Example ** ** ** :lang(en) {** ** border: thin black solid;** ** padding: 4px;** ** }** ** ** Visit the Apress website

I like apples and oranges.

` ` Visit the W3C website `

该选择器匹配具有表示它们是用英语编写的lang属性的元素。:lang选择器的效果与第十七章中的清单 17-8 中的|=属性选择器示例相同。

使用:目标选择器

在第三章的中，我提到您可以将片段标识符附加到 URL 上，以便根据id全局属性的值直接导航到元素。例如，如果 HTML 文档example.html中有一个元素的id值为myelement，那么您可以通过请求example.html#myelement直接导航到该元素。:target选择器匹配 URL 片段标识符引用的元素。表 18-13 总结了该选择器。

清单 18-20 显示了正在运行的:target选择器。

清单 18-20。使用:目标选择器

Example :target { border: thin black solid; padding: 4px; color:red; } Visit the Apress website

I like apples and oranges.

Visit the W3C website `

你可以在图 18-19 中看到被请求的 URL 是如何改变由:target选择器匹配的元素的。

图 18-19。使用:目标选择器

总结

在这一章中，我描述了 CSS 选择器，通过它你可以识别你想要应用样式的元素。选择器允许您在大范围内匹配元素，或者通过组合选择器，将您的关注点缩小到 HTML 文档中特定部分的元素。学习选择器是充分利用 CSS 的关键。

十九、使用边框和背景

在这一章中，我将介绍一些你可以用来给一个元素应用背景和边框的属性。这些是在 CSS3 中得到增强的非常常用的特性。例如，您现在可以创建带有弯曲边缘的边框，使用图像作为边框，以及为元素创建投影。这些看起来似乎很简单，但是 CSS 对它们的省略导致了以其他方式提供这些特性的无尽努力，并获得了混合的成功。表 19-1 对本章进行了总结。

应用边框

让我们从控制边框的属性开始。这些是非常常用的，当你考虑第二十章中的margin和padding属性时，它们会给你一些可见的东西。基本边界的三个关键属性是border-width、border-style和border-color。表 19-2 描述了所有三个属性。

您可以在清单 19-1 的中看到这些正在使用的属性。

清单 19-1。定义基本边界

Example ` ` p { ** border-width: 5px;** ** border-style: solid;** ** border-color: black;** }

There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices.

在清单 19-1 中，我使用了一个p元素来表示一个段落，使用border-width、border-style和border-color属性使用style元素来应用一个边框。

定义边框宽度

您可以将border-width属性表示为一个常规的 CSS 长度，表示为将要绘制边框的区域宽度的百分比，或者表示为三个快捷方式值中的一个。表 19-3 描述了这些选项。默认的border-width值是medium。

定义边框样式

border-style属性可以是表 19-4 中显示的值之一。默认值为none，表示不绘制边框。

你可以在图 19-1 中看到这些边框类型是如何出现的。

图 19-1。边框样式属性的不同值

当border-color属性为black时，有些浏览器在应用双色边框样式时会出现问题，比如inset和outset。包括谷歌 Chrome 在内的这些浏览器对两种色调都使用了black，产生了与solid风格相同的效果。更聪明的浏览器知道使用灰色阴影，包括 Firefox。为了创建图形(显示 Chrome)，我将groove、inset、outset和ridge样式的border-color属性设置为gray。

将边框应用于单侧

您可以使用更具体的属性将不同的边框应用到元素的每一侧，如表 19-5 中所述。

您可以使用这些属性构建边框，也可以将它们与更通用的属性结合使用来覆盖边框的特定边缘。清单 19-2 显示了后一种方法。

清单 19-2。使用侧面特定的边界属性

Example p { border-width: 5px; border-style: solid; border-color: black; ** border-left-width: 10px;** ** border-left-style: dotted;** ** border-top-width: 10px;** ** border-top-style: dotted;**` ` }

你可以在图 19-2 中看到这些属性的效果。

图 19-2。将边界应用到单个边缘

使用边框速记属性

您可以使用简化的属性在一个步骤中设置所有三个值，而不是使用样式、宽度和颜色的单独属性。表 19-6 描述了这些特性。

通过在一行中指定宽度、样式和颜色值来设置这些属性的值，用空格分隔，如清单 19-3 所示。

清单 19-3。使用边框速记属性

Example p { ** border: medium solid black;** ** border-top: solid 10px;** }

请注意，我没有为border-top属性指定颜色。如果您忽略一个或多个值，浏览器将使用先前定义的任何值；在这种情况下，颜色由border速记属性指定。你可以在图 19-3 中看到这些属性的效果。

图 19-3。使用边框速记属性

创建圆角边框

您可以使用边框radius功能创建圆角边框。有五个属性与此功能相关联。表 19-7 总结了这些。

通过指定两个半径值(长度或百分比)来定义曲线拐角。第一个值指定水平半径，第二个值指定垂直半径。百分比值是元素框的水平和垂直大小。你可以在图 19-4 中看到半径值是如何用于确定边界曲线的。

图 19-4。使用半径来指定边界的曲线

如图所示，半径值用于投影一个与元素的框相交的椭圆，并形成边框的角。清单 19-4 显示了这些作为样式声明一部分的值。

清单 19-4。创建曲线边框

Example p { border: medium solid black; ** border-top-left-radius: 20px 15px;**` ` }

如果只提供一个值，那么水平半径和垂直半径都将使用该值。你可以在图 19-5 中看到浏览器显示的效果。我放大了弯曲的边界区域，让它看起来更清楚。

图 19-5。创建曲线边框

提示注意边框接触到图中的文字。为了在一个元素的内容和它的边框之间创建空间，你添加了填充，这将在第二十章中介绍。

border-radius速记属性允许你为所有四个角指定一个值，或者在一个值中指定四个单独的值，如清单 19-5 所示。

清单 19-5。使用边框半径速记属性

Example ` ` p { border: medium solid black; } #first { ** border-radius: 20px / 15px;** } #second { ** border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%** }

在清单 19-5 中，有两段，每段都有自己的border-radius声明。第一个声明只指定了两个值，它们应用于边框的所有四个角。请注意，水平值和垂直值由一个/字符分隔开。第二个声明指定了八个值。前四个值是每个角的水平半径值，后四个值是水平对应值。这些值集也由一个/字符分隔。

你可以在图 19-6 中看到这些声明的效果。结果有点奇怪，但是它演示了如何使用单个声明为每个角定义不同的曲线，以及如何自由混合百分比和长度值。

图 19-6。使用边框半径速记属性

使用图像作为边框

您并不局限于由border-style属性定义的边框。您还可以使用图像为您的元素创建真正自定义的边框。有五个属性配置图像边框的各个方面，还有一个快捷的属性，您可以用它来配置单个声明中的所有内容。表 19-8 显示了所有六个属性。

问题是，当我写这篇文章时，主流浏览器不支持这些属性。你可以使用图片作为边框，但是只能通过速记属性，并且只能使用我在第十六章中描述的浏览器特有的前缀(而 IE 根本不支持这个特性)。这允许我演示基本特性，但不是向您展示单个属性。特定于浏览器的速记属性的工作方式与border-image属性相同，因此当浏览器支持时，将本节中的示例转换为标准属性应该没有问题。

分割图像

使用图像作为边框的关键是切片。您指定的值是图像的偏移量，浏览器使用这些值将图像分割为九个部分。为了演示切片的效果，我创建了一个图像，可以很容易地看到浏览器如何执行切片，以及如何使用每个切片。你可以在图 19-7 中看到这个图像。

图 19-7。旨在展示边界特征的图像

这个图像是 90 像素乘 90 像素，并且每个单独的拼贴是 30 像素乘 30 像素。中间的瓷砖是透明的。要对图像进行切片，需要从图像的顶部、右侧、底部和左侧边缘提供插入，以长度或图像大小的百分比表示。您可以为所有四个插入提供不同的值，或者提供两个值(用于水平和垂直插入)，或者只提供一个值，然后用于所有四个插入。对于这幅图像，我使用了一个单独的值30px，它创建了所需的切片，如图 19-8 中的所示。

图 19-8。对边界图像进行切片

对图像进行切片会生成八个图块。标有1、3、6和8的拼贴用于绘制边界的角，标有2、4、5和7的拼贴用于绘制边界边缘。清单 19-6 显示了浏览器特有的属性，用于对图像进行切片，并将其用作边框。

清单 19-6。分割图像并将其用作边界

Example p { ** -webkit-border-image: url(bordergrid.png) 30 / 50px;** ** -moz-border-image: url(bordergrid.png) 30 / 50px;** ** -o-border-image: url(bordergrid.png) 30 / 50px;** }

每个属性声明都有相同的参数。您必须使用url函数来指定图像(这是必需的，因为 CSS 规范保留了实现其他获取图像的方法的权利)。在每种情况下，我都提供了一个切片值30，匹配示例图像的平铺尺寸。请注意，在指定切片时，您不需要提供单位，因为它们被假定为像素。

/字符用于将切片值与边框宽度值分开。我们可以为元素的每一边指定不同的宽度，但是我提供了一个单一的值，它将用于所有四边；在本例中，我选择了50px的边框宽度。图 19-9 显示了 Chrome 如何显示图像。火狐和 Opera 看起来一模一样。

图 19-9。使用图像作为边框

您可以看到浏览器是如何使用图像的每一部分的。标记为 2 和 7 的切片可能有点难以辨认，但它们分别用于顶部和底部边缘。

控制切片重复样式

你可以在图 19-10 中看到，切片已经被拉伸以填充边界的可用空间。您可以更改重复样式以获得不同的效果。这是border-image-repeat属性的责任，但是您也可以使用速记属性来指定重复样式。表 19-9 描述了可用于定义重复样式的值。

在我写这篇文章时，对重复样式值的支持是不完整的。没有一个浏览器支持space值，Chrome 也不支持round值。清单 19-7 展示了如何在 Firefox 中使用repeat和round值来改变边框重复样式。

清单 19-7。控制切片重复样式

Example p { -moz-border-image: url(bordergrid.png) 30 / 50px **round repeat**; }

在清单 19-7 中，第一个值指定水平重复样式，第二个值指定垂直重复样式。如果您只提供一个值，它将用于水平和垂直重复。你可以在图 19-10 中看到这些值之间的差异。

图 19-10。边界切片重复的舍入和重复值

请注意，顶部和底部边缘不包含任何部分切片。2和7数字被稍微拉伸了一下，然后重复，这样就没有零碎了。相比之下，设置为使用repeat样式的左右边缘被分割以填充空间。

设置元素背景

盒子模型的第二个可见区域是元素的内容。在这一节中，我将介绍可以用来设置该区域背景样式的属性。(有关如何对内容本身进行样式化的详细信息，请参见第二十二章。)其特性在表 19-10 中描述。

设置背景颜色和图像

元素背景的起点是使用背景属性设置背景颜色或图像，或者两者都设置，如清单 19-8 所示。

清单 19-8。设置背景颜色和图像

Example ` ` p { ** border: medium solid black;** ** background-color: lightgray;** ** background-image: url(banana.png);** ** background-size: 40px 40px;** ** background-repeat: repeat-x;** }

在这个例子中，我将background-color设置为lightgray，并使用url函数为background-image属性加载一个名为banana.png的图像。你可以在图 19-11 中看到这个图像的效果。背景图像总是绘制在背景颜色上。

图 19-11。使用背景颜色和图像

这张图片在某种程度上覆盖了元素的文本，但背景图片往往会这样，除非选择得非常仔细。请注意，该图像在图中的元素上水平重复。这通过background-repeat属性实现，其允许值在表 19-11 中描述。

您可以为水平和垂直重复指定一个值，但是如果您只提供一个值，浏览器将在两个方向上使用该重复样式。例外情况是repeat-x和repeat-y，浏览器将对第二个值使用no-repeat样式。

设置背景图像尺寸

我指定的图像对于元素来说太大了，所以我使用了background-size属性来指定图像的大小应该由40像素调整为40像素。除了长度，您还可以指定百分比(从图像的宽度和高度得出)和一些预定义的值，如表 19-12 所述。

contain值确保图像被缩放，以便可以在元素内部看到所有图像。浏览器确定图像的长度或高度是否更大，并以此作为缩放的轴。根据约定，对于cover值，浏览器选择最小值，并沿该轴缩放图像。这意味着不会显示所有的图像。在图 19-12 中可以看到两种不同的尺寸样式。

图 19-12。容器和盖子尺寸样式

香蕉图像的高度大于宽度。这意味着当您使用cover值时，图像将被缩放，以便完全显示宽度，即使不能显示图像的全部高度。你可以在最上面的元素图 19-12 中看到这个效果。当使用contain值时，图像被缩放，使得最大轴完整可见，这意味着整个图像将被显示，即使它没有覆盖整个背景区域。你可以在图 19-12 的下部元素中看到这种效果。

设置背景图像位置

属性让你指示浏览器背景图片应该放在哪里。当您不重复图像时，这是最有用的。您可以在清单 19-9 中看到这个属性的使用。

清单 19-9。定位背景图像

Example p {` ` border: 10px double black; background-color: lightgray; background-image: url(banana.png); background-size: 40px 40px; background-repeat: no-repeat; ** background-position: 30px 10px;** }

该声明告诉浏览器从左边缘 30 像素处和从上边缘 10 像素处绘制背景图像。我使用长度指定了位置，但是您也可以使用表 19-13 中显示的预定义值。

第一个值控制垂直位置，可以是top、bottom或center。第二个值控制水平位置，可以是left、right或center。你可以在图 19-13 中看到定位图像的效果。

图 19-13。定位背景图片

为背景设置附件

将背景应用于具有视口的元素时，可以指定如何将背景附加到内容。带有视窗的元素的一个很好的例子是textarea(在第十四章中有描述)，它会自动添加滚动条来显示内容。另一个常见的例子是body元素，当内容比浏览器窗口长时，它可以有滚动条(你可以在第七章中找到body元素的细节)。您可以使用background-attachment属性控制后台附件。表 19-14 描述了允许值。

清单 19-10 显示了与border-attachment属性一起使用的textarea元素。

清单 19-10。使用边框附件属性

Example ` ` textarea { border: medium solid black; background-color: lightgray; background-image: url(banana.png); background-size: 60px 60px; background-repeat: repeat; ** background-attachment: scroll;** }

** ** ** There are lots of different kinds of fruit - there are over 500 varieties** ** of banana alone. By the time we add the countless types of apples, oranges,** ** and other well-known fruit, we are faced with thousands of choices.** ** **

我不能用图形来演示不同的连接模式。这是你必须亲自在浏览器中看到的东西。要查看固定模式和滚动模式之间的差异，请使用示例 HTML 文档，调整浏览器窗口的大小以使textarea不完全显示，然后使用浏览器滚动条(而不是textarea滚动条)进行滚动。

设置背景图像原点和裁剪样式

背景的原点指定应用背景颜色和图像的位置。剪辑样式确定元素框中绘制背景色和图像的区域。background-origin和background-clip属性控制这些特性，每个属性都有相同的三个允许值，在表 19-15 中有描述。

清单 19-11 展示了background-origin属性的使用。

清单 19-11。使用背景-起源属性

Example p { border: 10px double black; background-color: lightgray; background-image: url(banana.png); background-size: 40px 40px; background-repeat: repeat; ** background-origin: border-box;** }

在清单 19-11 中，我选择了border-box值，这意味着浏览器将在边框下绘制背景颜色和图像。我说在下面，因为边框总是画在背景上。你可以在图 19-14 中看到效果。

图 19-14。使用背景-原点属性

background-clip属性通过应用剪辑框来确定背景的哪个部分可见。框外的任何内容都被丢弃并且不显示。您有与background-origin属性相同的三个可用值，您可以在清单 19-12 中看到组合这些属性的效果。

清单 19-12。使用背景剪辑属性

Example p { border: 10px double black; background-color: lightgray; background-image: url(banana.png); background-size: 40px 40px; background-repeat: repeat; background-origin: border-box; ** background-clip: content-box;** }

这种组合告诉浏览器在边框内绘制背景，但丢弃内容框之外的任何内容。你可以在图 19-15 中看到相当微妙的效果。

图 19-15。一起使用边框起点和边框裁剪属性

使用后台速记属性

属性允许你在一个声明中设置所有不同的背景值。以下是该属性的值的格式，引用了各个属性:

background: <background-color> <background-position> <background-size> <background-repeat> <background-origin> <background-clip> <background-attachment> <background-image>

这是一个相当长的值声明，但是您可以省略值。如果这样做，浏览器将使用默认值。清单 19-13 展示了正在使用的border速记属性。

清单 19-13。使用边框速记属性

Example p { border: 10px double black; ** background: lightgray top right no-repeat border-box content-box** ** local url(banana.png);** }

该单个属性相当于以下一组单独的属性:

background-color: lightgray; background-position: top right; background-repeat: no-repeat; background-origin: border-box; background-position: content-box; background-attachment: local; background-image: url(banana.png);

提示目前并非所有浏览器都支持该属性。

创建方框阴影

最令人期待的 CSS3 特性之一是为元素的盒子添加阴影的能力。你可以使用drop-shadow属性来完成，这在表 19-16 中有描述。

box-shadow柠檬的值组成如下:

box-shadow: hoffset voffset blur spread color inset

这些单个值元素在表 19-17 中描述。

注意省略color值时要小心。这应该是一个可选值，允许浏览器应用一个标准颜色，也许是一个适合用户操作系统或浏览器选择的颜色。但在撰写本文时，基于 Webkit 的浏览器不会用未指定的颜色绘制边框。因此，值得在box-shadow值中明确指定一种颜色。

您可以在清单 19-14 的中看到这个属性。

清单 19-14。创建投影

Example p { border: 10px double black; ** box-shadow: 5px 4px 10px 2px gray;** }

你可以在图 19-16 中看到该属性的效果。

图 19-16。应用于元素的方框阴影

您可以在一个box-shadow声明中定义多个阴影。为此，用逗号分隔每个声明，如清单 19-15 所示。

清单 19-15。对一个元素应用多重阴影

Example p { border: 10px double black; ** box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset;** }

在清单 19-15 中，我定义了两个阴影，其中一个是插入的。你可以在图 19-17 中看到效果。

图 19-17。为一个元素定义多个阴影

使用轮廓

轮廓是边框的替代物。它们对于暂时将用户的注意力吸引到某个元素上非常有用，例如必须按下的按钮或数据输入中的错误。您在边框外绘制轮廓。边框和轮廓的主要区别在于，轮廓不被视为页面的一部分，因此在应用它们时不会导致页面布局的调整。表 19-18 描述了与轮廓相关的元素。

清单 19-16 展示了一个大纲的应用。我在这个例子中包含了一个简单的脚本，这样我就可以演示如何绘制轮廓，而不会导致页面被重新布局。

清单 19-16。使用大纲

Example p { width: 30%; padding: 5px; border: medium double black; background-color: lightgray; margin: 2px; float: left; } #fruittext { ** outline: thick solid red;** }

Outline Off Outline On `

你可以在图 19-18 中看到应用轮廓的效果。请注意元素是如何不改变位置的。这是因为在页面布局中没有为大纲分配它们自己的空间。

图 19-18。对元素应用轮廓

总结

在这一章中，我已经向你展示了可以用来给元素的盒子添加边框、背景和轮廓的属性。

您可以从一组简单的样式中选择边框，或者使用图像完全自定边框。图像边界的关键技术是切片，其中图像被分成多个部分，每个部分用于绘制部分边界。

你可以用背景来补充边框。我向您展示了如何创建颜色或图像背景，以及如何将它们配置为与元素框的其余部分相关联。

我通过演示阴影结束了这一章，它和弯曲的边框一起，是 CSS3 添加到边框和背景区域的主要新特性。