Web-设计游乐场-全-

Web 设计游乐场（全）

原文：Web Design Playground_ HTML & CSS the Interactive Way

译者：飞龙

协议：CC BY-NC-SA 4.0

第一部分. 从 HTML 和 CSS 开始

本书从定义 HTML 和 CSS 开始，向您介绍标签和属性，并展示您可以使用这些网页设计技术做什么（以及不能做什么）。第一章的简要但必要的介绍完成之后，在第二章中，您将深入其中，创建您的第一个网页，包括格式化文本、标题和链接。第一部分的其余部分通过向您展示如何为您的页面添加结构（第三章）以及如何设置字体、段落和颜色（第四章）来建立这个基础。第五章通过一个项目将所有内容整合在一起，向您展示如何构建一个个人主页向世界展示。

第一章了解 HTML 和 CSS

本章涵盖

查看 HTML 和 CSS 的基础知识
介绍网页设计游乐场
学习如何构建 HTML 标签和 CSS 属性

当爵士乐手创作即兴作品时，无论多么复杂，她都是通过使用七个音符（A 到 G）的组合来演奏的。当艺术家创作一幅画时，无论多么详细，他都是通过使用三种原色（红色、黄色和蓝色）的组合来绘制的。当诗人创作诗歌时，无论多么有创意，他们都是通过使用字母表的 26 个字母的组合来书写的。这些例子表明，创造力和游戏并不需要复杂的资源或复杂的原材料。想象力和好奇心加上一些构建块就足以让你在几乎任何艺术中表达自己，包括网页设计艺术。正如你在本章和整本书中学到的，HTML 和 CSS 提供了这些构建块。尽管这些块比音符、原色甚至字母表的字母要多，但并不多，但足以让你在令人兴奋的现代画布上表达自己：网络。

什么是 HTML？

HTML 最困难的事情莫过于它的名字。HTML代表超文本标记语言，听起来就像税务审计一样令人畏惧。但当你分解其术语时，它就会变得不那么令人畏惧。

我将从超文本开始。正如你肯定知道的，链接是一个特殊的单词或短语（甚至是一个图像），它位于网页中，指向另一个网页。当你点击这些链接之一时，你的浏览器会立即将你传输到另一个页面。发明网络的人使用这个古怪的术语超文本链接来指代这种特殊的文本。（前缀hyper意味着超越。）因为这些超文本链接是网络的显著特征，所以页面通常被称为超文本文档。所以HTML中包含超文本，因为你可以用它来创建这些超文本文档。（称这种语言为 WPML，或网页标记语言，也是同样准确的。）

我的词典将标记定义为（在许多其他事物中）“在即将排版的手稿上写下的详细风格说明。”为了本章的目的，我可以将这个定义重新表述如下：“在即将发布到万维网上的文本文档中键入的详细风格说明。”这就是 HTML 的本质。它包含一些简单的字母代码——称为标签——用于详细说明如何将文本组织成段落、创建项目符号列表、插入图像，以及（当然）定义链接。你将这些标签键入普通文本文档的适当位置，然后网络浏览器处理将标签翻译或渲染的脏活。结果？你的页面会自动以你想要的方式显示。

“语言”这个词可能是最令人畏惧的，因为它似乎暗示 HTML 是一种编程语言。幸运的是，你可以放心，HTML 与计算机编程无关。相反，HTML 是一种“语言”，因为它有一小部分单词，你使用这些单词来指定你希望文本如何显示——例如，作为标题或编号列表。

简而言之，玩转 HTML 意味着在常规文本的段落之间战略性地插入一些代码，这样你最终会得到一个真正的网页。尽管现在这可能听起来很离谱，但你将在本章结束时创建一个工作的网页，到本书结束时，你将创建几个令人印象深刻的 HTML 项目。

你可以用 HTML 做什么？

当你向文档添加 HTML 时，你实际上是在向网页浏览器提供一系列指令，这些指令指定了你在浏览器窗口中希望页面如何布局。你使用 HTML 以简洁的方式指定页面的整体结构，并让浏览器知道你希望页面的每一部分是什么。你使用 HTML 提供类似于以下指令的指令：

使用此行作为页面的主要标题。
将这些行视为子标题。
将这段文本作为一个独立的段落。
将这五个连续的项目转换为一个项目符号列表。
将这六个连续步骤转换为编号列表。
将这个短语设置为链接。

这些说明现在可能对你来说有点抽象，所以我将向你展示 HTML 的实际应用的一个具体例子。

从纯文本到 HTML：一个示例

图 1.1 显示了一个在网页浏览器中显示的纯文本文档。正如你所见，除了偶尔的换行外，浏览器显示的是一堵未格式化、未包裹的文本墙。这段文本非常难以阅读，而且由于几乎完全未区分，从文本中提取意义特别困难。

图 1.1 浏览器可以显示纯文本文件，但它们很难阅读。

HTML 拯救了文本，不仅提供了使纯文本更易读的手段，还允许你以读者认为有意义的方式显示文本。图 1.2 展示了应用了一些 HTML 的图 1.1 中的文本。

图 1.2 应用了一些 HTML 后，图 1.1 中的文本变得更容易阅读、导航和理解。

在这里，我使用了标题来显示文章标题在顶部和接近底部的一个部分标题。注意，部分标题的字体大小略小于主要标题，这使得文章的层次结构立即清晰。我还使用了 HTML 添加了一张图片以增加视觉兴趣。为了帮助在这个页面的 HTML 中放入H，我将两个单词设置为链接到（在这种情况下）其他网站。虽然你会在本章稍后看到文本格式通常属于 CSS 的范畴，但你也可以使用 HTML 在你的页面上添加一些格式修饰，比如我这里添加的斜体。我还设置了一个引用，浏览器将其缩进显示为常规文本，并为该引用添加了斜体以增加区分度。最后，我使用 HTML 设置了一个项目符号列表。

现在你已经知道了 HTML 能做什么，是时候更仔细地看看你是如何告诉浏览器你想要你的页面看起来像什么的了。

什么是 CSS？

当你建造一栋房子时，早期的任务之一是框架，这涉及到搭建地板、墙壁和屋顶的基本结构。当你向页面添加 HTML 时，你正在做的就是这个基础框架：你指定你想要在页面上显示的内容，你想要页面的各种项目是什么（比如标题、段落或列表），以及你想要这些项目以何种顺序出现。

但正如房子没有装饰如装饰线、油漆和地板就不能成为家一样，直到你使用 CSS 添加一些收尾工作，你的文档才是一个现代网页的例子。"CSS"代表层叠样式表，和 HTML 一样，它的名字比它所做的事情要复杂。我会分解这些词，尽管在这个例子中，为了简单起见，我会稍微改变它们的顺序。

首先，样式是浏览器用来修改页面显示内容的指令。（这可以是单词、段落或特定 HTML 元素的每个实例。）这些修改通常与格式相关，例如更改字体或文本颜色，但你也可以使用样式来控制页面布局，甚至创建动画效果。如果你曾经在任何文字处理程序中使用过样式，那么你对网页样式能做什么已经有了一个很好的了解。

好吧，那么什么是表单？在出版的早期，公司维护着定义他们首选的字体、标题、引文等的格式的手册。这种格式被称为房屋风格，而手册被称为样式表。在网页设计中，样式表执行的是本质上相同的工作。它是一组应用于特定网页的样式。

要理解 CSS 的层叠部分，你需要知道，就像水流从山上流下来可以采取不同的路线到达底部一样，样式在应用到元素之前也可以采取不同的路线。一些样式来自网页浏览器；一些样式来自用户（例如，如果用户配置浏览器使用不同的默认字体大小）；还有一些样式来自你的样式表。当这些样式重叠时，网页浏览器使用一个复杂的算法来决定应用哪种样式，这个算法被称为层叠。

小心

层叠的概念是 CSS 中最复杂和最复杂难懂的部分。我将在本书的后面部分详细介绍（见第十九章），但到目前为止，我强烈建议你把它放在一边，直到你达到那个阶段。

你使用 CSS，换句话说，来定义你的页面看起来如何。虽然你可能认为你只使用 CSS 给页面添加“视觉糖果”，但 CSS 确实提供了工具来做出微不足道或轻浮的修改。然而，页面的外观与页面包含的内容一样重要，因为很少有人会费心去阅读格式不佳或不连贯的文本。

关于结构和呈现分离的注意事项

当你在尝试理解 HTML 和 CSS 之间的区别时，让我提供一个关键的区别。虽然我有些夸张，但以下是两者的基本区别：

HTML 定义了网页的整体结构。
CSS 定义了网页的视觉呈现。

这里有一些重叠（例如，HTML 可以影响页面的呈现，CSS 可以影响布局），但大部分情况下，HTML 和 CSS 分别使你能够分离结构和呈现。这种区别很重要，因为当你将网页的这两个方面分开时，你的页面将更容易构建、维护和定制。

你可以用 CSS 做什么？

当你在文档中添加 CSS 时，你是在告诉网页浏览器你希望特定元素看起来如何。每个样式都是对浏览器的一种格式化指令。你可以使用这些指令以多种方式，类似于以下示例：

将所有链接以红色文字显示。
所有标题使用特定的字体。
在这段文字周围创建一些额外的空间。
给这张照片添加一个阴影。
所有编号列表使用小写罗马数字。
总是在窗口的右侧显示这个文本部分。
将这张图纸旋转 45 度。

我将通过一个示例使这个列表更加具体。

从结构到呈现：一个 CSS 示例

在本章的早期，我使用了一个纯文本文档（图 1.1）并应用了一些 HTML 来给它一些结构和提高其可读性（图 1.2）。在图 1.3 中，我应用了一些样式使页面看起来更美观。

图 1.3 应用了一些样式的示例网页

这里是我所做的主要样式更改的总结：

以更大的文本大小、居中和小写形式显示了标题
为照片添加了阴影
将所有文本略微缩小
从链接中移除了下划线
以浅色文本显示引用
将项目符号转换为两列列表
增加了边距

你不能用 HTML 和 CSS 做什么？

之前我提到过，HTML 不是一种编程语言，因此学习它并部署到你的网页上相对简单，这是个好消息。坏消息是，HTML 无法处理许多高级操作，因为它不是一种编程语言。仅使用 HTML 无法完成的事情列表相当长，但我会提到以下内容，因为其中之一可能在你待办事项列表中：

从服务器数据库或其他远程地址获取数据
处理通过表单提交的数据
处理用户账户、登录和密码
在线添加、隐藏或删除网页元素

执行这些任务需要像 JavaScript 或 PHP 这样的编程语言，这些内容超出了本书的范围。

HTML 和 CSS 如何创建网络

关于网络最非凡的事实之一是（除了图像、视频和声音等额外功能之外），其页面仅由文本组成。没错——你上网时看到的几乎所有内容都是由键盘上可以敲击的字母、数字和符号组合而成的。

这个想法至少是神秘的，所以我会快速给你看看它是如何工作的。图 1.4 显示了这个过程。

以下步骤详细说明了这个过程：

你使用文本编辑器或类似软件创建你的 HTML 和 CSS 文件。
你将 HTML 和 CSS 文件上传到名为“网络托管服务提供商”的在线服务，该服务运行网页服务器。

当你注册账户时，托管服务商会为你分配一个唯一的地址，例如 www.yourdomain.com。因此，如果你上传一个名为 index.html 的文件，该页面的地址就是 www.yourdomain.com/index.html。
网站访客使用她的网络浏览器输入你页面的地址。
网络浏览器使用该地址从网络服务器请求你的页面。
确认地址无误后，网页服务器将页面发送到用户的网络浏览器。
网络浏览器通过称为“渲染”的过程解释页面 HTML 标签和 CSS 属性，渲染后的代码出现在用户的设备上。

图 1.4 要从 HTML 和 CSS 生成网页，你需要将代码发送到网页服务器，访客使用他们的网络浏览器检索并渲染你的代码为页面。

如您所见，虽然网络由简单的东西组成，但这并不意味着将这些东西放到网络上是一件简单的事情。实际上，这个过程有点复杂，尤其是在您刚开始的时候。这就是为什么我把附录 A 专门用于这个过程。

介绍网页设计游乐场

然而，目前您可能迫不及待地想要开始玩转 HTML 和 CSS，看看这些迷人的技术能做什么。我不怪您。本书的核心思想之一是，学习 HTML 和 CSS 的最佳方式是通过乐趣来玩转您的新知识，尝试不同的标签和属性，以及尝试不同的值。为了帮助您以最少的麻烦完成所有这些，我创建了一个名为网页设计游乐场的在线工具，如图 1.5 所示，您可以通过 https://webdesignplayground.io/访问它。

图 1.5 网页设计游乐场让您在线玩转 HTML 和 CSS。

您可以使用此网站尝试 HTML 标签和 CSS 属性，加载书中的示例文件，学习帮助您学习主题的课程，访问各种“构建工具包”进行功能实验，保存您的作品，甚至将生成的文件下载到您的计算机上。接下来的几节将提供详细信息。

玩转 HTML 和 CSS

网页设计游乐场的主要目的是提供一个易于使用的工具，让您可以玩转 HTML 标签和 CSS 属性。以下是它的工作原理：

在网页设计游乐场中，使用 HTML 编辑器输入您想要尝试的 HTML 标签。

如果一个标签需要一个或多个属性，请确保也添加它们。
使用 CSS 编辑器输入您想要使用的 CSS 属性定义。
查看结果框，它将显示您的 HTML 和 CSS 在网页浏览器中的样子。
重复步骤 1-3 以修复任何问题或进行进一步实验。

加载课程文件

本书包含大量的 HTML 和 CSS 代码。一般来说，如果您亲手输入示例（这给您一种我所说的“指尖感觉”），您将更深入地学习这些主题。然而，我理解您可能是一个忙碌的人，可能没有时间逐个输入每个示例。为了帮助您，网页设计游乐场包含一个菜单，链接到书中的每个课程。当您选择一个课程时，您将看到一个介绍，然后是一个或多个示例，接着是一个或多个帮助您学习课程材料的活动。在每种情况下，代码都会自动出现，您可以根据需要对其进行操作。

按照以下步骤加载课程：

在网页设计游乐场中，点击工具栏右端的菜单。出现一个包含网站链接的菜单。

书籍课程部分包含书中每个章节的项目。
点击包含您所需课程的章节。
在出现的子菜单中，点击您想要玩的课程。

出现课程介绍。
点击下一页按钮。

例子中的 HTML 标签和文本显示在 HTML 编辑器中，而例子中的 CSS 代码显示在 CSS 编辑器中。
点击下一页以完成本课的活动。
要跳转到同一章节中的另一个课程，请点击上一页和下一页按钮上方的下拉菜单，然后点击你想要查看的课程。

保存你的工作

你将在 Web 设计沙盒中花费大部分时间进行实验和尝试本书的练习。然而，偶尔你也会创建一些想要保存的代码。Web 设计沙盒为你提供了两种方法来做这件事：

复制一些代码。 要在其他地方使用代码，请使用 HTML 编辑器或 CSS 编辑器选择你想要复制的代码；点击编辑器的菜单图标；然后点击复制到剪贴板。
下载你的工作。 点击菜单，然后在沙盒标题下方点击下载代码。此命令保存 HTML 和 CSS 的单独文件，这些文件存储在一个压缩归档中，并下载到你的网络浏览器默认下载文件夹中。

现在你已经知道了 HTML 和 CSS 能做什么，以及如何使用 Web 设计沙盒，你就可以准备使用沙盒来理解如何使用 HTML 标签和 CSS 属性了。

第 1.1 课：介绍 HTML 标签

覆盖内容：HTML 标签

在线：wdpg.io/1-1-0

Play

本章中此处和其它地方出现的地址指的是 Web 设计沙盒中的位置，本书的配套在线网站。请参阅本章前面的“介绍 Web 设计沙盒”。

HTML 通过称为标签的简短代码施展魔法。每个标签由三个部分组成：

一个打开的左尖括号（<），也称为小于号。
你想要使用的元素名称。元素名称是短数字字母代码，例如p用于段落，em用于强调，h1用于一级标题。
一个闭合的右尖括号（>），也称为大于号。

Master

在本书中，我使用“元素”一词来指代 HTML 的特定项，例如p或em，而使用“标签”一词来指代元素及其周围的尖括号，例如<p>或<em>。

图 1.6 典型 HTML 标签的结构

在大多数情况下，标签告诉浏览器根据你指定的元素开始布局页面。例如，如果你添加了<em>标签，你就是在告诉浏览器以下文本以斜体显示。（em 是强调的缩写。）你还得告诉浏览器何时停止使用该元素显示文本，因此你需要添加一个称为闭合标签的伴侣。（原始标签是打开标签。）闭合标签与打开标签相同，只是在元素名称之前需要有一个正斜杠。闭合标签由以下四个部分组成：

一个打开的左尖括号（<），也称为小于号。
一个正斜杠（/）
元素的名称
一个闭合的右尖括号（>）

图 1.7 显示了 h1 元素的闭标签。

图 1.7 h1 元素的闭标签结构

一起，开标签和闭标签创建了一个容器，你可以向其中添加一些文本（甚至其他元素）；浏览器根据你在标签中指定的元素来显示文本。在本章前面的图 1.1 中，文本 How New Words Are Created 出现在文件顶部。要将该文本转换为如图图 1.2 所示的文章主标题，我应用了 <h1> 标签，该标签将文本显示为一级标题。以下示例显示了我是如何做到这一点的。

精通

尽管大多数 HTML 元素都有开标签和闭标签，但并非所有元素都有。例如，用于插入图像的元素（见第六章）不需要闭标签。这些标签被称为 自闭合标签。

示例

在线：wdpg.io/1-1-1

此示例使用 h1 元素将文本 How New Words Are Created 转换为一级标题。

网页

HTML

<h1>How New Words Are Created</h1>    ①    ②    ③

① 开标签

② 受影响的文本

③ 闭标签

通过添加几个字符，你告诉浏览器对文本执行一系列操作：

将文本显示在其自己的段落中。
在文本上方和下方添加一些垂直空间。
将文本格式化为粗体。
将文本格式得比常规页面文本大，以清楚地表明文本是标题。

你可以在第二章中了解更多关于标题的内容，但你可以看到，这个看似简单的代码让你在不费太多功夫的情况下做很多事情。这就是 HTML 的魔力。

游戏

图 1.1 中的文本有多个单词段落，这些段落旨在作为标题。例如，第 7 行包含文本 Combining。根据你关于将一级标题应用于文章标题所学的知识，将 Combining 文本应用为二级标题。在线：wdpg.io/1-1-3

添加 HTML 标签属性

许多 HTML 元素不需要任何装饰：你只需将标签添加到页面中，浏览器就会完成其余工作。然而，一些标签在浏览器正确处理之前需要额外的信息。例如，使用 <img> 标签将图片插入网页，但你需要告诉浏览器图片的位置。同样，要创建链接，你使用 <a> 标签，但再次，浏览器需要更多信息。在这种情况下，它需要知道 你想要链接什么（例如，另一个网站的地址）。

你通过向标签添加一个或多个属性来向浏览器提供这些和类似的其他数据。属性是一个键值对，其中键告诉浏览器特定的属性，值分配给它你想要使用的特定设置。

当你编写链接时，例如，你通过添加href属性并将其值设置为你要使用的地址来指定链接地址。图 1.8 展示了示例。

图 1.8 你可以使用属性为某些 HTML 元素指定额外的数据，例如为<a>标签指定链接地址。

在这里，href（代表超文本引用）属性被分配了值https://wordspy.com/，这是用户点击此链接将被带到的地址。请注意，属性值被双引号包围。这些引号是可选的，但使用它们可以使你的代码更容易阅读和维护。

记住

虽然技术上允许你在 HTML 元素名称和属性名称中混合使用小写和大写字母，但我强烈建议只使用小写字母。在网页设计中，全部小写是规范，因为它更容易输入和阅读。你还应该使用小写字母来指定属性值，除非特定的值需要大写，例如在文件名或地址中。

当与属性结合使用时，HTML 可以做一些有用且强大的事情。但 HTML 并不是你唯一可以玩耍的网页工具。在许多方面，CSS 比 HTML 更强大、更有趣，你将在下一节开始学习它是如何工作的。

第 1.2 课：介绍 CSS 属性

覆盖内容：CSS 属性

在线：wdpg.io.com/1-2-0/

CSS 由称为属性的大量项目组成，它们控制着页面的一些方面，如文本颜色、字体大小以及围绕对象的边距。对于你想要使用的每个属性，你分配一个值，这个属性值对（也称为声明）是浏览器执行的指令。

你有多种定义样式的途径，正如你在第七章中看到的。现在，我将介绍两种最常见的方法。图 1.9 展示了第一种方法的一般形式。

图 1.9 定义 CSS 属性时要使用的语法

从图 1.9 中，你可以看到定义样式由以下五个部分组成：

指向你想要应用样式的网页元素或元素的引用。这个引用被称为选择器，因为你可以用它来选择你想要浏览器样式化的页面元素。
一个开头的左大括号（{）。
你想要应用属性的名称。属性名称是短字母代码，例如color用于文本颜色，font-size用于文本大小，以及margin用于边距大小。属性名称总是后面跟着一个冒号（:）和一个空格以提高可读性。
你想要分配给属性的值，以及如果需要的话，你想要使用的单位。例如，要指定像素大小的文本大小，你可以在值中添加px。值总是后面跟着一个分号（;）。
一个闭合的右大括号（}）。

这五个部分合在一起构成了一个样式规则。以下示例显示了用于告诉浏览器为主标题（h1）设置字体大小的样式规则。

示例

在线：wdpg.io/1-2-1

此示例使用 CSS 将font-size属性应用于h1元素。

网页

CSS

h1 {    ① 
 font-size: 36px;    ② 
}    ③

① 你想要样式的元素和开括号

② 样式属性及其值

③ 闭括号

HTML

<h1>How New Words Are Created</h1>

样式首先引用了h1HTML 元素，这告诉浏览器将以下内容应用于当前网页中的每个<h1>标签。在开括号（{）之后，下一行指定了属性值对：font-size: 36px;。这一行指示浏览器将每个h1文本实例以 36 像素的字体大小显示。最后，闭括号（}）完成了样式规则。

播放

你会如何格式化网页的第二级标题，使其字体大小为 30 像素？在线：wdpg.io/1-2-2

在这里，你看到了使用样式的一个巨大优点。如果你的页面有十几个h1标题，这个规则将适用于它们所有，这会给页面带来一致的外观。更好的是，如果你认为标题的48px大小看起来更漂亮，你只需在样式规则中更改一次值，这个更改就会自动反映在所有的h1标题中。

注意，你的样式定义中不限于单个声明。正如以下示例所示，你可以根据需要添加多个声明。

示例

在线：wdpg.io/1-2-3

此示例在单个 CSS 定义中指定了多个属性。

网页

CSS

h1 {
    font-size: 36px;     
 text-align: center;    ① 
 font-variant: small-caps;    ② 
}    ③

① 此属性使标题居中。

② 此属性显示标题为小写字母形式。

③ 闭括号

HTML

<h1>How New Words Are Created</h1>

在这里，我添加了声明 text-align: center; 来使标题居中，以及 font-variant: small-caps; 来以小写字母形式显示标题。

精通

在本节的示例中，我使用了四个空格来缩进声明。这种缩进不是必需的，但它使 CSS 更容易阅读，所以养成缩进属性的好习惯是个好主意。

我之前提到，你还有另一种指定样式的途径。你可以通过使用style属性直接将声明插入到 HTML 元素中：

<*element* style="*property1*: *value1*; *property2*: *value2*; etc.">

这里有一个例子：

<h1 style="font-size: 36px; text-align: center">

当你使用这种方法时，你的样式只应用于声明它们的 HTML 元素。我在第七章中详细介绍了这种方法。

CSS 比 HTML 稍微复杂一些，但随之而来的复杂性带来了巨大的力量和表现力。正如你在本书的其余部分所看到的，CSS 是创建出色、有趣的网页的皇家道路。

播放

你会如何格式化网页的第二级标题，使其字体大小为 30 像素并右对齐？在线：wdpg.io/1-2-4

当您的 HTML 结构装饰了 CSS 格式时，您可以创建既美观又便于阅读和导航的网页。

游乐场的一些有用功能

现在您已经知道了 HTML 标签和 CSS 属性的外观，您可以返回 Web 设计游乐场并运行一些旨在帮助您正确输入标签和属性的功能：

HTML 标签和 CSS 属性名称及值以与常规文本不同的颜色显示。这些颜色帮助您区分代码和非代码。
在 HTML 框中，当文本光标位于一个标签内时，编辑器会自动突出显示该标签及其配对标签。在图 1.10 中，您可以看到当我将光标放在开标签<p>（这是创建段落的标签——见第二章）上时，编辑器会突出显示该标签以及其闭合标签</p>。这种突出显示为您提供了一个视觉指示，表明您已经正确关闭了标签。

图 1.10 当光标位于 Web 设计游乐场的 HTML 编辑器中的一个标签内时，编辑器会突出显示开闭标签。

CSS 编辑器具有类似的功能：当光标立即位于花括号的左侧或右侧时，编辑器会突出显示配对的花括号。这种突出显示有助于您在定义样式时确保输入开闭花括号。
您可以通过拖动分隔编辑器的垂直边框来调整编辑器的相对大小。
如果您点击编辑器的菜单图标（如图 1.10 中的所示）然后点击显示错误，Web 设计游乐场可以执行一定程度的错误检查。如果编辑器检测到错误，您会在有问题的行左侧的页边距看到红色错误指示器。将鼠标指针悬停在图标上会显示错误信息。例如，如果您在闭合标签中忘记斜杠，您会看到错误标签必须成对，如图 1.11 所示。

图 1.11 如果 Web 设计游乐场检测到问题，代码左侧的页边距将出现错误图标，并将鼠标悬停在图标上会显示错误信息。

摘要

HTML 定义了您网页的结构，而 CSS 定义了其展示。
HTML 标签 是由尖括号包围的简短代码，例如<h1>或<p>，它应用效果或插入对象。大多数标签还需要一个闭合标签，例如</h1>或</p>。
CSS 属性 是一个名称-值对，CSS 定义（或规则）是一组或多个属性，这些属性用花括号（{和}）包围并应用于指定的元素（如标签名）。
要查看本书的教程并尝试 HTML 和 CSS 代码，请使用本书的配套网站，Web 设计游乐场：https://webdesignplayground.io/。

第二章构建您的第一个网页

无论你能做什么，或者梦想你能做什么，开始去做吧。勇气中蕴含着天才、力量和魔力！——威廉·哈钦森·默里

本章内容涵盖

学习基本页面结构和元素
学习最常见的文本元素和样式
创建链接

我们必须学习的许多现代技术——无论是用微软 Excel 建立电子表格，用 Adobe Photoshop 增强图像，还是用苹果的 iTunes 维护音乐收藏——都需要我们掌握复杂的功能，这些功能充满了设置，并且界面不直观。因此，当我们遇到像 HTML 和 CSS 这样的技术时，我们感到非常高兴，这些技术没有复杂的工具、设置或界面需要理解。事实上，它们根本没有界面。它们仅仅是文本——一个由字母、数字和符号组成的简单而美好的交响乐。它们很简单，但并不简单。通过 HTML 标签和 CSS 属性，您可以构建一个反映您自己的网页，展示您的创造力，并向世界宣布：“是的，这是我建造的！”

因此，在第一章的简要介绍之后，您通过构建您的第一个网页来正确开始您的 HTML 和 CSS 教育。您学习了所有页面共有的基础结构，以及所有标准文本元素，并学习了如何添加标题和链接。如果您有话要说，在本章中，您将学习如何用 HTML 和 CSS 来表达。

让您的网页起飞

本书的目标是帮助您创建自己的网页，从而占据一小块个人网络空间的地盘：如果您愿意，可以说是一个远离家的主页。然而，在您能入住这个简陋的住所之前，您必须浇筑混凝土，这将为您的数字家园奠定基础。在本节中，我将向您展示一些构成所有网页基础结构的 HTML 基础知识。

第 2.1 节课程：奠定基本页面结构

覆盖内容：页面结构元素

在线：wdpg.io.com/2-1-0

您的所有网页项目，从最简单的页面到最复杂的企业网站，都始于相同的基本结构，我在列表 2.1 中概述了它。

列表 2.1 开始任何网页项目的基本 HTML 结构

<!DOCTYPE html>                   #1
<html lang="en">                  #2
    <head>                        #3
        <meta charset="utf-8">    #4
        <title></title>           #5
        <style></style>           #6
    </head>                       #3
    <body>                        #7
    </body>                       #7
</html>                           #2

精通

在这里，我使用了四个空格来缩进其他标签内的标签。这种缩进并不是严格必要的，但这是一个好主意；缩进使您的代码更容易阅读和调试，因为您可以更清楚地看到每一对开标签和闭标签。

毫无疑问，这段代码看起来可能对您来说有点令人生畏。我为这种复杂性道歉，但这是构建网页方式中固有的必要部分。幸运的是，我可以通过提供两条好消息来稍微减轻这种打击：

这段代码是本章中最复杂的代码，所以如果你能艰难地理解接下来的几段内容，接下来的航行将会容易得多。
当你在 Web 设计游乐场工作时，甚至看不到列表 2.1 中的代码，因为游乐场在幕后隐藏了它。（欢迎你。）

结构从顶部的 <!DOCTYPE html> 开始 (#1)，这一行告诉浏览器你正在使用 HTML 的哪个版本。这个声明告诉浏览器你正在使用 HTML5，这是最新版本，也是本书中你将学习的版本。结构的一部分是 <html> 标签及其闭合的 </html> 标签 (#2)，它们共同定义了页面其余部分的 HTML 和 CSS 的整体容器。<html> 标签包含 lang="en" 属性，它告诉浏览器页面的主要语言是英语。

结构的其余部分分为两个部分：标题和主体。

游戏

你可以从 Web 设计游乐场复制并粘贴基本的网页结构。在线：wdpg.io/2-1-0

标题部分由 <head> 标签及其闭合的 </head> 标签 (#3) 定义。标题部分就像是对页面的介绍，因为网页浏览器使用标题来获取有关页面的各种类型的信息。其中一项重要数据是页面使用的字符集，这正是 <meta> 标签所做的事情 (#4)。你还可以使用标题部分来定义页面标题，我将在下一节中讨论。对于本书来说，最重要的是 <style> 标签及其闭合的 </style> 标签 (#6)，这是你输入样式定义的地方。

主体部分由 <body> 标签及其闭合的 </body> 标签 (#7) 定义，这部分是你将输入大多数 HTML 标签的地方。你在主体部分输入的文本和标签将显示在网页浏览器中。

记住

在 Web 设计游乐场中，我故意隐藏了诸如 <!DOCTYPE>、<html>、<head>、<style> 和 <body> 等元素，因为（至少在游乐场中）你不会直接与这些元素工作。当你使用 HTML 编辑器输入标签时，游乐场会在幕后将它们添加到 <body> 和 </body> 标签之间。同样，当你使用 CSS 编辑器输入样式时，游乐场会在幕后将它们添加到 <style> 和 </style> 标签之间。

第 2.2 课：添加标题

覆盖内容：<title> 标签

在线：wdpg.io/2-2-0

你可能会想，页面标题就是出现在页面顶部的文本。然而，在 HTML 中，页面标题是出现在网页浏览器标题栏（或者如果你使用标签页浏览，是页面的标签页）上的内容，如下面的示例所示。

示例

在线：wdpg.io/2-2-0

在标题部分的 <title> 和 </title> 标签之间添加的文本将显示在网页的浏览器标签页上，如本示例所示，或者显示在浏览器的标题栏上。

网页

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
 <title>Neologisms</title>    ① 
        <style></style>
    </head>
    <body>
    </body>
</html>

① 将页面标题放置在 <title> 和 </title> 标签之间。

当你考虑为你的页面添加标题时，以下是一些需要注意的事项：

确保你的标题反映了页面的内容。
使标题相对于你的其他页面是唯一的。
由于较长的标题在浏览器标签页的狭窄空间中显示时往往会截断，因此请将真正描述性的一个或两个词放在标题的开头。
使用一个在无上下文查看时也合理的标题。真正喜欢你的页面的人可能会将其添加到书签中，浏览器会在书签列表中显示页面标题，因此当那个人稍后查看书签时，标题要有意义。

第 2.3 课：添加一些文本

内容：添加网页文本

在线：wdpg.io/2-3-0

如果你尝试加载只包含基本结构的列表 1.1 的页面，你不会在浏览器中看到任何内容。尽管浏览器在内部使用标题部分的标签，包括在浏览器当前标签页或标题栏中显示标题，但浏览器的内容区域仅显示你放置在 <body> 和 </body> 标签之间的标签和文本。

最终，用户访问你的网站是为了其内容。其他一切都是背景。——雅各布·尼尔森

在下面的示例中，我在主体部分添加了文本 Hello HTML World!。

示例

在线：wdpg.io/2-3-1

你在 <body> 和 </body> 标签之间添加的文本将在浏览器窗口中显示。

网页

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The Web Design Playground</title>
        <style></style>
    </head>
 <body>    ① 
 Hello HTML World!    ① 
 </body>    ① 
</html>

① 将页面文本放置在 <body> 和 </body> 标签之间。

在网页中添加文本时，以下是一些你应该知道的事情：

如果你正在 Web 设计游乐场中工作，请记住 HTML 编辑器假定你在该框中输入的内容将被插入到 <body> 和 </body> 标签之间，因此你不需要输入它们。
你可能认为你可以通过连接两个或更多空格来对齐内容并创建一些有趣的效果。唉，不行，那种效果不会起作用。网络浏览器的哲学是，你可以使用 HTML 标签来结构化文档，并使用 CSS 来样式化它。因此，多个空格的连续运行——称为空白字符——将被忽略。
制表符也属于空白字符的范畴。你可以整天输入制表符，但浏览器会忽略它们。
浏览器喜欢忽略的其他事情包括换行符。按 Enter 或 Return 键开始新段落听起来似乎很合理，但在 HTML 世界中并非如此。我将在下一节中更多地讨论这个话题。
之前我提到，网页仅由你可以用键盘敲击的字符组成。这意味着如果你需要使用不在键盘上的字符，比如版权符号或破折号，你就没有机会了吗？幸运的是，你并不孤单。HTML 有这些字符的特殊代码，我在第十六章中会讨论它们。

学习最常见的文本元素

对于任何网页来说，拥有优质的内容都是至关重要的，正如你在这章中看到的那样，你可以通过输入一些文本来开始创建一个网页。但内容只是开始。图 2.1 显示了仅包含文本的网页示例。

图 2.1 仅包含文本的网页

内容先于设计。在没有内容的情况下设计不是设计，而是装饰。——杰弗里·泽尔达曼

你在图 2.1 中看到的是一个没有装饰任何 HTML 元素的页面。是的，你可以阅读这个页面，但你真的想这么做吗？我不这么认为。现状下的页面基本上是不吸引人的，因为它是一堆没有区分的文本，这使得它既难以阅读又乏味。相比之下，看看图 2.2 中显示的页面的修订版。

图 2.2 在图 2.1 中添加了一些基本 HTML 文本元素的网页

啊，这样就好多了！现在页面易于阅读，看起来也相当不错。区别在于在这个版本中，我使用了一些基本的 HTML 文本元素来重新显示文本，使其易于阅读和理解。当你阅读本章时，你会了解到我是如何做到这一点的。在下一节中，你将学习如何使用 HTML 标记文本为重要内容。

第 2.4 课：标记重要文本

覆盖范围：strong元素

在线：wdpg.io/2-4-0

在你的网页中，你可能有一个单词、短语或句子，你想要确保读者看到，因为它很重要。这段文本可能是一个重要的指令、一个关键条件或类似的具有重大意义的段落，因为它需要从常规文本中突出显示，你不希望读者错过它。在 HTML 中，你可以通过使用strong元素来标记文本为重要内容：

<strong>*important text goes here*</strong>

所有浏览器都将<strong>和</strong>标签之间的文本以粗体字体显示。以下示例显示了带有粗体显示的重要段落的网页文本及其使用的 HTML 标记。

精通

所有网络浏览器为每个文本元素定义了一个默认样式，例如，使用strong元素标记的文本将以粗体显示。然而，你不必坚持使用浏览器样式，因为在所有情况下，你可以通过使用自己的样式来增强或覆盖默认设置。你将在第四章中深入了解这个主题。

示例

在线：wdpg.io/2-4-1

此示例使用<strong>标签将文本的重要段落标记为粗体。

网页

HTML

That's because, according to the linguist Victoria Neufeldt (writing in her book A Civil But Untrammelled Tongue), <strong>most word invention goes on as a matter of course</strong>    ①

① 使用<strong>标签标记为重要的文本

游戏

要了解更多关于strong元素的信息，请尝试在 Web 设计游乐场上的练习。在线：wdpg.io/2-4-2

第 2.5 课：格式化关键词

涵盖：b元素

在线：wdpg.io/2-5-0

在某些情况下，你想要吸引对某个单词或短语的注意，并不是因为它本身很重要，而是因为相关的文本在某种角色中发挥作用，使其与常规文本不同。这种文本可能是一个产品名称、公司名称或界面元素，如与复选框或命令按钮相关的文本。再次强调，你正在处理的文本并不重要——它在某些方面是不同的——因此你希望它看起来与常规页面文本不同。

这些项目中的每一个都表示一个具有超出常规页面文本意义的（或短语），在 HTML5 中，这种语义项目使用b元素进行标记：

<b>*keyword*</b>

使用方法

网页关键词的其他候选包括人名（例如，出现在名人八卦专栏中的臭名昭著的“粗体名字”）以及文章的前几个单词或开头句子。

网络浏览器将<b>和</b>标签之间的文本以粗体字体显示。到现在为止，我想你可能正在挠头，想知道strong元素和b元素之间的区别，因为两者都显示为粗体文本。这是一个合理的观点，我必须承认，这种区别是微妙的。我应该说明，这是一个语义上的区别，因为 HTML5 使用这两个不同的元素来区分重要文本和关键词。希望在未来，屏幕阅读器和类似的无障碍辅助技术将使用这种语义差异以某种方式提醒访客，这段文本是重要的，并且这段文本是一个关键词。

以下示例显示了一些网页文本，其中关键词以粗体显示，并使用了与文本一起使用的 HTML 标记。

示例

在线：wdpg.io/2-5-1

此示例显示了一些网页文本，其中关键词由于b元素而以粗体显示。

网页

HTML

The <b>combining</b> process marries a word either with one or more affixes (a prefix, infix, or suffix) or with another word.    ①

① 使用<b>标签标记为关键词的文本

游戏

你会如何标记一篇文章，使其导语句子显示为粗体？在线：wdpg.io/2-5-2

第 2.6 课：强调文本

涵盖：em元素

在线：wdpg.io/2-6-0

在页面上添加某些单词或短语的强调通常很重要。这种强调告诉读者要以额外的强调来阅读或说出这段文本。考虑以下句子：

Verdana is a sans-serif typeface.

现在用强调（以斜体表示）添加到单词无衬线的同一句子阅读：

Verdana is a *sans*-serif typeface.

句子的意义以及你如何阅读句子会随着强调（在这种情况下，强调 Verdana 不是衬线字体的事实）的增加而改变。

在 HTML5 中，这种类型的语义项目使用em（强调）元素进行标记：

<em>*text*</em>

常见问题解答

strong 元素和 em 元素之间有什么区别？ 当问题中的文本对读者至关重要时，您使用 strong；当问题中的文本需要增强强调以传达观点时，您使用 em。

网络浏览器将 <em> 和 </em> 标签之间的文本以斜体显示。以下示例显示了一个带有斜体强调文本的网页，以及创建此效果的 HTML 标记。

示例

在线：wdpg.io/2-6-1

此示例显示了一些使用 em 元素强调的网页文本。

网页

HTML

But for every word with a definite origin, there are hundreds, nay <em>thousands</em>, whose beginnings are unknown and probably unknowable.    ①

① 使用 <em> 标签标记为强调的文本

播放

您可以在其他文本级元素内嵌文本级元素以产生额外效果。您可以通过使用 strong 元素将句子标记为重要，然后在句子内部，您可以使用 em 元素标记一个单词以强调它。在线：wdpg.io/2-6-3

第 2.7 课：格式化替代文本

覆盖内容：i 元素

在线：wdpg.io/2-7-0

在散文中，通常需要标记单词或短语以表明它具有与常规文本不同的声音、语气或角色。常见的替代文本例子包括书籍和电影标题。在 HTML5 中，此类语义文本使用 i（斜体）元素进行标记：

<i>*text*</i>

使用方法

其他替代文本的例子包括出版物名称、技术术语、外语短语以及一个人的想法。

网络浏览器将此类文本以斜体显示。i 元素可能看起来与 em 元素完全相同，但存在显著的语义差异：em 元素通过增加强调来增强受影响文本的强调性质，而 i 元素则告诉读者该文本应以不同于常规文本的方式解释。再次强调，这种细微的差异在可访问性方面可能非常有用；屏幕阅读器（至少在理论上是如此）会强调 em 文本，并让用户了解使用 i 元素标记的替代文本。

以下示例显示了一个带有斜体显示的替代文本的网页，以及执行此任务的 HTML 标记。

示例

在线：wdpg.io/2-7-1

此示例显示了一些使用 i 元素格式化为替代文本的书籍标题的网页文本。

网页

HTML

That's because, according to the linguist Victoria Neufeldt (writing in her book <i>A Civil But Untrammelled Tongue</i>), most word invention goes on as a matter of course:    ①

① 使用 <i> 标签标记为替代文本的文本

播放

要熟悉 i 元素，请尝试在 Web 设计游乐场上的练习。在线：wdpg.io/2-7-2

第 2.8 课：引用文本

覆盖内容：q 和 blockquote 元素

在线：wdpg.io/2-8-0

许多网页包含来自其他作品的引用，这些作品可能是网页、人物、书籍、杂志或任何书面来源。为了确保读者不会认为引用的材料是您自己的（这可能导致剽窃指控），您应该将文本标记为引用。您如何做这取决于引用的长度。

短引用应与您的常规页面文本内联。您可以通过使用q元素来标记此文本作为引用：

<q cite=”*url*”>*quotation*</q>

大多数网络浏览器将以与常规页面文本相同的方式显示使用q元素标记的文本，但周围带有双引号。如果您的引用来自另一个网页，您可以包含可选的cite属性，并将其值设置为网页的 URL。

长引用应单独显示以提高可读性。您可以通过使用blockquote元素来标记长引用：

<blockquote>
*Long quotation*
</blockquote>

网络浏览器会将使用blockquote元素标记的文本显示为一个单独的段落，该段落从包含元素的左右边距略微缩进。

以下示例显示了一些网页文本，其中包括与常规文本内联的短引用和与常规文本分离的长引用，以及相应的 HTML 标记。

示例

在线：wdpg.io/2-8-1

此示例显示了一些网页文本，其中既有与常规文本内联的短引用，也有与常规文本分离的长引用。

网页

HTML

That&rsquo;s because, according to the linguist Victoria Neufeldt (writing in her book <i>A Civil But Untrammelled Tongue</i>), <strong>most word invention goes on as a matter of course</strong>:
<blockquote>    ① 
Neology, far from being a separable linguistic phenomenon that manifests itself periodically or sporadically in response to social stimuli, in fact rises out of ordinary linguistic competence, what might be called the linguistic collective unconscious of the speech community.    ① 
</blockquote>    ① 
This <q>ordinary linguistic competence</q> manifests as various mechanisms that people use to forge new words:    ②

① 使用<blockquote>标签标记的长引用文本

② 使用<q>标签标记的短引用文本

游戏

要熟悉q和blockquote元素，请尝试在 Web 设计游乐场上的练习。在线：wdpg.io/2-8-2

第 2.9 课：使用标题

覆盖范围：h1到h6元素

在线：wdpg.io/2-9-0

标题是一个出现在文本部分之前的一个词或短语，用于命名或简要描述该文本的内容。几乎所有的网页都在页面顶部或附近有一个主要标题，作为内容的标题。（不要将这个标题与页面<head>部分中<title>和</title>标签之间的文本混淆。主要标题出现在页面本身中，而title元素内的文本只出现在浏览器标签上。）

除了标题标题外，许多网页内容被分为几个部分，每个部分都有自己的标题。这些部分可以进一步分为子部分，每个子部分再次有自己的标题，依此类推。总而言之，标题、部分标题和子部分标题形成了一个轮廓，清晰地总结了网页的结构和层次。

文本中穿插的精心编写的、深思熟虑的标题充当页面的非正式轮廓或目录。——史蒂夫·克鲁格

在 HTML 中，你通过使用各种标题元素来标记你的页面标题文本，这些元素从h1（代表页面最高层级的标题，通常是页面的主要标题）到h2（代表章节标题），h3（代表子章节标题），一直到h6（代表最低层级的标题）。网页浏览器会为每个标题显示一个独立的块，将文本格式化为粗体，并且（如以下示例所示）根据使用的元素调整文本大小：h1是最大的；h6是最小的。

示例

在线：wdpg.io/2-9-1

这个例子展示了网页浏览器如何渲染六个 HTML 标题元素。

网页

HTML

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>

虽然 HTML5 提供了其他创建语义页面分隔的方法（见第十一章），但使用标题元素是一个简单且常见的方法，可以告诉浏览器和读者你的网页文本是如何组织的，如下面的示例所示，其中包含了你之前看到的网页的标题。

示例

在线：wdpg.io/2-9-2

这个例子展示了网页浏览器如何渲染h1标题元素。

网页

HTML

<h1>How New Words Are Created</h1>    ①

① <h1> 标题

游戏

你被提供了一个带有标题、主要部分（第一部分、第二部分等）、子部分（第 1.1 部分、第 1.2 部分等）以及次子部分（第 1.1a 部分、第 1.1b 部分等）的文档。为这种结构制定一个标题方案。在线：wdpg.io/2-9-3

第 2.10 课：制作链接

覆盖内容：a元素

在线：wdpg.io/2-10-0

我在第一章提到，HTML（实际上，HTML中的H）的一个定义特征是超文本：指向你自己的网站或互联网上任何地方的网页的链接。事实上，很少有页面不包含至少几个链接，所以你需要知道如何使用 HTML 制作超文本。

你用来创建链接的 HTML 标签是<a>及其对应的</a>闭合标签。a元素与本章中你看到的大多数其他元素略有不同，因为你不能单独使用它。相反，你需要在其中插入链接的地址——通常称为URL（即统一资源定位符）。图 2.3 展示了这个元素是如何工作的：

图 2.3 使用<a>标签的语法

小心

使用大写或小写字母在输入 URL 时可能至关重要。在大多数（但不是所有）网站上，如果你输入目录或文件名的一个字母的大小写错误，你很可能不会到达你想要去的地方（也就是说，你会得到一个 404 未找到错误）。

常见问题解答

<a> 标签中的 "a" 代表什么吗？ a 是锚点的缩写，这源于你可以创建称为锚点的特殊链接，这些链接可以将你的读者带到同一页面的其他部分，而不是将他们带到不同的页面。你将在第十六章中学习这一功能的工作原理。

<a> 标签包含 href 属性，代表 超文本引用。将此属性设置为要使用的网页的 URL，用双引号（或单引号）括起来。大多数链接地址如下所示：

本地链接 ——指向你网站上的另一个页面。为了简化问题，我将假设你网站上的所有页面文件都位于同一个目录中。（对于页面文件位于多个目录的稍微复杂的情况，请参阅第十六章。）在这种情况下，<a> 标签的 href 属性值是你所链接的页面文件的名称。以下是一个示例：
```
<a href="wordplay.html">
```
远程链接 ——指向另一个网站页面的链接。在这种情况下，<a> 标签的 href 属性值是另一个网站上页面的完整 URL。以下是一个示例：
```
<a href="http://wordspy.com/index.php">
```

接下来，你将 *链接文本* 替换为你想要用户点击的描述性链接文本，然后使用 </a> 闭合标签结束。默认情况下，大多数网络浏览器将以蓝色下划线文本显示链接，如下面的示例所示。

示例

在线：wdpg.io/2-10-1

此示例展示了使用 a 元素创建的两个链接的网页文本。

网页

HTML

Where do new words come from? Sometimes we&rsquo;re lucky enough to know the answer. For example, the word 
<a href="http://www.etymonline.com/index.php?term=scofflaw">scofflaw</a>     ①    ②    ③  
originated as a contest winner and 
<a href="https://wordspy.com/index.php?word=frankenfood">Frankenfood</a>     ①    ②    ③  
came from a letter to the editor of a newspaper.

① <a> 标签包含链接地址

② 浏览器显示为链接的文本

③ 闭合标签

摘要

在基本的 HTML 页面结构中，标题由 <head> 和 </head> 标签定义，包括页面标题（位于 <title> 和 </title> 标签之间）和页面 CSS（位于 <style> 和 </style> 标签之间）。
在基本页面结构中，你需要在 <body> 和 </body> 标签之间输入你的 HTML 标签和文本。
使用 <strong> 来强调重要文本，使用 <b> 来格式化关键词。
使用 <em> 来强调文本，使用 <i> 来格式化备选文本。
你可以通过利用标题标签来在你的页面中创建一个强大的视觉层次结构：从 <h1> 到 <h6>。
你通过将文本包围在 <a> 和 </a> 标签中来设置链接。在 <a> 标签中，使用 href 属性来指定本地文件或远程文件的名称。

第三章添加页面结构

组织是在你做某事之前所做的事情，这样当你做的时候，就不会一团糟。——A. A. Milne

本章涵盖

将页面文本分为段落和部分
添加编号列表
构建项目符号列表

你在第二章中学到，你可以通过输入一些文本，然后使用标题和诸如strong和em之类的元素来使文本更易于阅读和理解来创建一个有效的网页。特别是标题是至关重要的页面设备，不仅因为它们帮助读者看到页面的一部分结束和另一部分开始，而且还因为它们给读者一个页面层次结构的总体感觉。所有这些都属于页面结构的一般范畴，这也是本章的重点。

考虑你的网页结构很重要，因为无结构的文本墙难以扫描和阅读，也难以进行样式设计。当你添加结构（如第二章中的标题以及你在这章中学到的段落、部分、容器和列表）时，浏览器会将每个子结构视为一个单独的实体，你可以对其应用许多样式属性。一般来说，你的页面结构越复杂，你对页面外观的控制就越大。幸运的是，正如你在这章中看到的，HTML 提供了几个有用的简单工具来添加页面结构。

结构化页面文本的 HTML 元素

如果你使用文字处理器，你会知道几乎所有的文档都有结构：一个标题，可能有一个副标题，一个或多个主题标题，以及每个主题中的一个或多个段落。这使得文档易于浏览，阅读舒适，因为结构引导读者，使他们能够专注于文本。你可以通过利用 HTML 提供的各种结构元素来在你的网页上获得同样的优势。我将从最常见的一种结构开始：段落。

第三课 3.1：处理段落

覆盖：p元素

在线：wdpg.io/3-1-0

我在第二章中提到，网络浏览器会忽略空白，包括由按 Enter 或 Return 键创建的换行符，这通常是你在文本编辑器或文字处理器中分隔文本的方法。在 HTML 中创建段落的常见方法是在文本开头放置一个<p>（段落）标签，并在文本末尾放置一个关闭的</p>标签。

以下示例展示了创建段落的正确和错误方式。

示例

在线：wdpg.io/3-1-1

在这个例子中，你可以看到，当使用p元素时，网络浏览器会忽略由回车键创建的空白，但会愉快地将文本渲染为段落。

网页

HTML

Line 1  ① 
Line 2  ① 
Line 3  ① 
Line 4  ① 
<p>Paragraph 1</p>    ② 
<p>Paragraph 2</p>    ② 
<p>Paragraph 3</p>    ② 
<p>Paragraph 4</p>    ②

① 错误：仅按 Enter/Return 键创建的单独行

② 正确：使用p元素创建的段落

播放

使用 Web 设计游乐场，修改此示例中的前五行，使文本片段“行 1”、“行 2”、“行 3”和“行 4”各自出现在单独的段落中。在线：wdpg.io/3-1-2

第 3.2 课：插入换行符

覆盖内容：br 元素

在线：wdpg.io/3-2-0

当你将页面文本分成段落时，网络浏览器通过（其他事情中）在段落之间创建一些空间来渲染此文本。这个空间通常是您想要的，因为垂直间隙给读者提供了一个视觉线索，表明一个段落在哪里结束，下一个段落在哪里开始，以及有机会在文本部分之间快速休息。然而，这个空间并不总是您想要的。例如，如果您的页面文本是一首诗，您几乎肯定不希望在行与行之间有段落。如果您的文本是编程代码或歌曲歌词，也是如此。

当您想要开始新的一行但又不希望在两行之间有任何空间时，您需要br（即换行符）元素。正如您在以下示例中可以看到的，网络浏览器通过插入回车符并在上一行下方立即开始下一行来渲染br元素。

示例

在线：wdpg.io/3-2-1

在此示例中，您可以看到网络浏览器通过插入回车符并在上一行下方立即开始下一行来渲染br元素。

网页

HTML

<h3>Contact Info</h3>
Manning Publications Co.<br>    ① 
PO Box 761<br>    ① 
Shelter Island, NY  11964<br>    ① 
support@manning.com<br>    ① 
203-626-1510

① <br> 标签告诉浏览器从新的一行开始显示后续文本。

使用它

使用换行符来分隔诗歌、歌词、地址、联系方式或编程语句，或者显示 HTML 或 CSS 代码的示例。

播放

通过为每行（不是诗节结尾的行）添加换行符，正确渲染阿尔弗雷德·丁尼生（Alfred Lord Tennyson）的诗《Break, Break, Break》。在线：wdpg.io/3-2-2

第 3.3 课：分割网页文本

覆盖内容：div 元素

在线：wdpg.io/3-3-0

在第十一章中，我向您展示了 HTML5 分区元素，包括<section>和<article>。这些元素使您能够通过指定容器作为这些部分内的部分以及标题、页脚、导航等来语义化地构建您的页面。然而，并非所有文本都完美地适合 HTML5 语义类别。对于需要容器但没有任何语义元素（包括p元素）合适的文本，HTML 提供了div（即分割）元素。<div>标签及其相应的</div>结束标签创建了一个简单的文本容器。网络浏览器不对文本应用任何固有的格式，包括在连续的div元素之间不渲染任何空间，正如您在以下示例中看到的。

示例

在线：wdpg.io/3-3-1

此示例使用div元素将网页分割成两个文本块。

网页

HTML

<h2>Shortening</h2>
<div>    ① 
The <b>shortening</b> process is based mostly on a kind of linguistic laziness called <b>clipping</b> that causes us to lop off great chunks of words. For example, we end up with <i>fridge</i> from <i>refrigerator</i> and <em>flu</em> from <i>influenza</i>. Often we clip everything after the first syllable: <i>dis</i> (from <i>disrespect</i>) and <i>gym</i> (from <i>gymnasium</i>).
</div>    ① 
<div>    ① 
A related process is the creation of <b>acronyms</b>, which form a pronounceable word using the first letters of each word in a phrase. For example, <i>UNICEF</i> from United Nations International Children&rsquo;s Emergency Fund, and <i>NATO</i> from North Atlantic Treaty Organization.
</div>    ①

① <div>和</div>标签将你的网页文本划分为块。

播放

br元素通常不是结构化页面文本的好选择，因为它不提供文本的容器，因此你不能对文本进行样式化。在 Web 设计游乐场中，将br元素替换为div元素。在线：wdpg.io/3-3-2

第 3.4 课：创建内联容器

覆盖内容：span元素

在线：wdpg.io/3-4-0

如div和p这样的元素很重要，因为它们提供了容器，在其中你可以添加和样式化文本。有时，你可能只想样式化容器内的子集文本。你可能想对几个单词或一个句子应用字体效果或颜色，例如。在这种情况下，你可以通过将文本包围在<span>标签及其</span>结束标签中来创建一个内联容器。以下示例创建了一些内联容器，并为span元素定义了一个 CSS 属性，以将黄色背景应用于每个容器。

记住

如div和p这样的元素被称为块级元素，因为它们创建了一个类似盒子的容器，内容（如文本）从新的一行开始，并在其中流动。如span这样的元素被称为内联元素，因为每个元素创建的容器存在于某个更大的元素中，并与该更大元素中的其余内容一起流动。

示例

在线：wdpg.io/3-4-1

此示例创建了一些内联容器，并为span元素定义了一个 CSS 属性，以将黄色背景应用于每个容器。

网页

CSS

span {    ② 
 background-color: yellow;    ② 
}    ②

② 这种样式定义告诉浏览器将黄色作为背景颜色应用于所有span元素。

HTML

<p>
Throughout this document, screen items that you click and text that you type appear with a <span>yellow background</span>. Here are some examples:    ①  
</p>

<ul>
    <li>Click the <span>File</span> menu and then click <span>Save</span>.</li>    ①  
    <li>Set the number of copies and then click <span>Print</span>.</li>    ①  
    <li>Click <span>Search</span>, type <span>blockquote</span>, and then press <span>Enter</span>.</li>    ①  
</ul>

① <span>和</span>标签创建内联容器。

播放

要练习span元素，请尝试 Web 设计游乐场上的练习。在线：wdpg.io/3-4-2

第 3.5 课：在块之间添加视觉分隔

覆盖内容：hr元素

在线：wdpg.io/3-5-0

如我之前提到的，p元素会自动在段落之间添加空白，而对于其他如div这样的块级元素，你可以使用 CSS 来创建块之间的垂直间距。有时，你可能需要一个更直接或更强调的视觉指示来表示块之间的分隔。在这种情况下，你可以插入hr（水平线）元素。正如以下示例所示，网页浏览器会在页面中显示一条水平线。如果你不希望线延伸到其容器的宽度，你可以使用width CSS 属性，并将其设置为所需的宽度（例如，以像素或百分比为单位）。

示例

在线：wdpg.io/3-5-1

此示例显示，当你添加hr元素时，网页浏览器会在页面中显示一条水平线。

网页

HTML

<h2>Word Origins: Introduction</h2>
<div>In a cynical world where attention spans are 140-characters long and where much of the populace is obsessed with the low-brow goings-on of Kim or Miley or Kylie, one amazing fact rises above the muck: it's rare to meet someone who isn't in some way interested in words and language. From slang-slinging youngsters to crossword-solving oldsters, from inveterate punsters to intrepid neologists, some aspect of language appeals to everyone.</div>
<hr>    ① 
<div>Is there one slice of the language pie that everyone likes? Probably not. People are just too complex to like any one thing universally. However, in my own admittedly limited experience (I haven't met every person in the world), I have yet to come across a person who doesn't appreciate a good story about the origins of a word or phrase.</div>

① <hr>标签在两个文本块之间插入一条水平线。

我应该在这里指出，许多网页设计大师建议，不要使用hr元素在两个文本块之间获取水平线，而应该给顶部块添加底部边框或给底部块添加顶部边框。有关边框样式的更多信息，请参阅第七章。

将文本组织成列表

现在上网很难不遇到一个或多个列表——可能是前十名列表、最佳列表、事件要点总结，或者是千变万化的列表主题之一。列表通常是展示某些类型信息的完美方式，例如一系列步骤或无序的项目集合。

HTML 提供了这两种列表类型：

编号列表（有时称为有序列表）按照数字顺序展示其项目，每个项目的数字位于左侧，项目文本向右缩进。
项目符号列表（有时称为无序列表）按照你指定的顺序展示其项目，每个项目左侧都有一个项目符号（通常是小圆点），项目文本向右缩进。

记住

虽然这种类型的列表比编号列表和项目符号列表使用得少得多，但你应该也了解描述列表，它是一系列术语和描述。整个列表使用<dl>和</dl>标签作为容器；你指定<dt>和</dt>标签内的每个术语，以及<dd>和</dd>标签内的每个描述。

第 3.6 课：添加编号列表

覆盖内容：ol元素

在线：wdpg.io/3-6-0

如果你想要显示的事物具有固有的顺序，例如在程序步骤或一系列元素中可能找到的顺序，那么编号列表是最佳选择。好消息是，你不必自己输入数字，因为浏览器会自动为你处理。列表中的第一项被赋予数字 1，第二项被赋予数字 2，依此类推。如果你插入或删除项目，浏览器会根据需要调整所有列表编号，以保持数字顺序。

使用它

对于必须按顺序、数字顺序显示的任何集合，请使用编号列表。例如，读者在如何操作程序中必须遵循的步骤、食谱中涉及的任务、文档中的部分（尤其是合同或其他法律文件）或排名中的项目（如前十名列表）。

你可以通过创建一个容器来开始构建编号列表，该容器由<ol>标签（代表有序列表）及其关闭标签</ol>组成。在这两个标签之间，你添加一个或多个<li>标签（代表列表项），然后是项目文本和关闭标签</li>：

<li>*Item text*</li>

浏览器会显示左侧带有数字的项目（其值由项目在列表中的位置决定），然后是*项目文本*，该文本从数字处缩进，整个项目从包含它的元素左侧缩进。

以下示例展示了基本编号列表及其创建所使用的 HTML 标签和文本。

示例

在线：wdpg.io/3-6-1

此示例展示了如何使用编号列表来创建一个前十名列表。

网页

HTML

<h3>Top 10 Modern Words of Unknown Origin</h3>
<ol>    ① 
 <li><em>jazz</em> (1909)</li>         ② 
 <li><em>jive</em> (1928)</li>         ② 
 <li><em>bozo</em> (1920)</li>         ② 
 <li><em>dork</em> (1964)</li>         ② 
 <li><em>pizzazz</em> (1937)</li>      ② 
 <li><em>humongous</em> (1970)</li>    ② 
 <li><em>gismo</em> (1943)</li>        ② 
 <li><em>zit</em> (1966)</li>          ② 
 <li><em>reggae</em> (1968)</li>       ② 
 <li><em>mosh</em> (1987)</li>         ② 
</ol>    ①

① 使用<ol>和</ol>标签作为编号列表的容器。

② 在容器内，将每个项目的文本放在<li>和</li>标签之间。

游戏

要练习ol和li元素，请尝试 Web 设计游乐场上的练习。在线：wdpg.io/3-6-2

默认情况下，列表中使用的数字是标准的十进制值（1，2，3 等等）。您可以通过指定list-style-type CSS 属性来更改数字类型。表 3.1 列出了此属性的常见编号列表值。

表 3.1 常见的用于 CSS 属性 list-style-type 的编号列表值

值	描述	示例数字
`decimal`	十进制数	1, 2, 3, 4, …
`decimal-leading-zero`	带前导零的十进制数	01, 02, 03, 04, …
`lower-alpha`	小写字母	a, b, c, d, …
`upper-alpha`	大写字母	A, B, C, D, …
`lower-roman`	小写罗马数字	i, ii, iii, iv, …
`upper-roman`	大写罗马数字	I, II, III, IV, …
`lower-greek`	小写希腊字母	α, β, γ, δ, …
`upper-greek`	大写希腊字母	Α, Β, Γ, Δ, …

学习

许多list-style-type的值与各种其他语言相关联，例如中文、希伯来语和日语。有关完整列表，请参阅以下页面：developer.mozilla.org/en-US/docs/Web/CSS/list-style-type。

第 3.7 课：添加项目符号列表

覆盖内容：ul元素

在线：wdpg.io/3-7-0

如果您要显示的项目没有固有的数字顺序，例如在待办事项列表或一组特征中，则可以使用项目符号列表。每个项目都出现在自己的段落中，前面有一个项目符号（通常是黑色圆点）。您不需要手动输入项目符号，因为浏览器会自动添加。

使用它

使用项目符号列表来显示任何以某种方式相关联的项目集合，但不必按数字顺序排列。例如，包括待办事项列表或购物清单、与对象相关联的一组特征或课程的一组先决条件。

您可以通过创建一个由<ul>（代表无序列表）标签及其关闭标签</ul>组成的容器来开始构建项目符号列表。在这些标签之间，与编号列表一样，您添加一个或多个<li>标签，然后是项目文本和关闭标签</li>：

<li>*Item text*</li>

浏览器将项目显示为左侧带有项目符号，然后是*项目文本*，该文本从项目符号缩进，整个项目从包含它的元素的左边缘缩进。

以下示例显示了基本的列表和其底层的 HTML 标签和文本。

示例

在线：wdpg.io/3-7-1

此示例向您展示了如何构建项目符号列表。

网页

HTML

<p>This <q>ordinary linguistic competence</q> manifests as various mechanisms that people use to forge new words:</p>
<ul>    ① 
 <li>Combining</li>    ② 
 <li>Shortening</li>    ② 
 <li>Shifting</li>    ② 
 <li>Borrowing</li>    ② 
 <li>Onomatopoeia</li>    ② 
 <li>Mistakes</li>    ② 
 <li>Retronyms</li>    ② 
 <li>Ex Nihilo</li>    ② 
</ul>    ①

① 使用 <ul> 和 </ul> 标签作为项目符号列表的容器。

② 在容器内，在 <li> 和 </li> 标签之间输入每个项目的文本。

游戏

为了练习 ul 和 li 元素，尝试在 Web 设计游乐场上的练习。在线：wdpg.io/3-7-2

默认情况下，列表中使用的项目符号是填充的圆圈（•）。您可以通过指定 list-style-type CSS 属性来更改数字类型。表 3.2 列出了此属性的可用项目符号列表值。

表 3.2 list-style-type CSS 属性的项目符号值

值	描述	示例项目符号
`disc`	填充的圆形	w
`circle`	空心的圆形	y
`square`	填充的方形	u

摘要

要将页面文本结构化为段落，请使用 p 元素。
要将一行与下一行分开，插入 br 元素以添加换行符。
使用 div 元素将页面划分为文本块。
您可以通过将文本包围在 <span> 和 </span> 标签中来创建一个内联容器。
使用 hr 元素通过水平线分隔文本块。
使用 <ol> 标签创建编号列表，使用 <ul> 标签创建项目符号列表。在这两种情况下，您都使用 <li> 标签来指定列表中的每个项目。

第四章格式化您的网页

数字设计就像绘画，但颜料永远不会干。——内维尔·布罗迪

本章涵盖

设置文本字体、大小和样式
对齐和缩进段落
添加文本和背景颜色

你现在知道如何显示重要和强调的文本，创建链接和标题，以及如何以项目符号或编号列表显示项目，但尽管这些重要技术给你的网页增添了一些视觉兴趣，它们却不能为你赢得任何设计奖项。为了让人们坐直身子并注意到你的页面，你需要稍微专注于 CSS 方面的事情，这正是本章要做的。首先，你将学习一些设置网页文本样式的技巧，包括指定你想要使用的字体和设置文本大小。你还将学习如何将粗体应用于任何文本（而不仅仅是重要术语或关键词），以及如何将斜体应用于任何文本（而不仅仅是强调的单词或替代术语）。从单词和短语开始，你将学习如何对段落进行水平对齐和缩进段落文本。章节以一个有趣的点结束，你将学习如何将 CSS 颜色应用于文本和页面背景。

正如你将看到的，这些基本的 CSS 技术易于学习和实施，但不要让它们固有的简单性欺骗了你。这些是强大的工具，你将反复使用它们来让你的页面看起来很棒，并赋予它们个人风格。那些设计奖项就在眼前。

设置文本样式

每个浏览器都使用默认样式来渲染文本，如标题和段落。尽管浏览器之间存在一些差异，但大多数情况下，这些样式在 Google Chrome、Mozilla Firefox、Apple Safari 等浏览器中渲染相似。这些样式是很好的设计选择，但如果你使用这些默认样式，你可能会面临你的网页最终看起来像默认样式的风险。这对于网页设计师来说绝对不是你想要的，因此你最重要的任务之一就是覆盖这些默认样式并指定你自己的文本格式。

网页排版是一个庞大而迷人的主题，你将在第十四章中深入学习。现在，我将保持简单，专注于四个最重要的文本格式化功能：字体、字号、粗体和斜体。

设置字体样式

我喜欢将字体描述为字符的建筑。当你审视一座建筑时，某些特征和模式能帮助你识别建筑的风格。例如，飞扶壁通常是哥特式建筑的明显标志。字体也是如此，它们通过一组独特的特征来区分，而这些特征体现在字体设计中。

字体是一种在相关的字母、数字和符号集中常见的独特设计。字体和字体的区别是什么？从所有实际用途来看，这两个术语是可以互换的。然而，从所有不切实际的用途来看，字体是字体的特定实现，意味着以特定的尺寸、粗细和样式渲染的字体。Helvetica 是一种字体；Helvetica 16 点粗体是一种字体。

字体设计为每个字符赋予独特的形状和厚度，这是该字体的特点，难以分类。五个主要类别用于区分您在网页设计生涯中遇到的大多数字体：

衬线体 — 一种衬线体（与sheriff押韵）字体在每个字符的末端包含细小的横笔画（称为脚）。这些细微的附加物赋予了字体传统、优雅的外观，但在屏幕上以小尺寸显示时可能会丢失。
无衬线体 — 无衬线体字体在字符的末端不包含横笔画。这些字体通常具有干净、现代的外观，非常适合屏幕文本，尤其是在小尺寸时。
等宽体 — 等宽体（也称为固定宽度字体）为每个字符使用相同的空间，因此像i和l这样的细体字母占据的空间与m和w这样的宽体字母一样多。
手写体 — 手写体设计用来模仿手写笔或刷子的书写。
艺术体 — 艺术体通常具有奇异的设计，包含一些极端元素（例如额外加粗）。

USe It

在屏幕上，衬线体通常最适合标题和其他大号文本；无衬线体适合正文文本；等宽体适合代码列表；手写体最适合需要优雅或趣味性的短文本；而艺术体仅在需要特殊效果时使用。

在 CSS 中，您通过使用font-family属性来告诉网络浏览器您希望应用于元素的字体类型。您有几种方法可以设置font-family的值，但我首先查看需要最少工作量的一种方法。

第 4.1 节：指定通用字体

覆盖内容：font-family属性和通用字体

在线：wdpg.io/4-1-0

使用font-family的最简单方法是指定一个通用字体，这是一种所有现代网络浏览器都实现的标准化字体。有五种通用字体族，它们的名称对应于上一节中讨论的五种字体类别：衬线体、无衬线体、等宽体、手写体和艺术体。以下示例展示了font-family属性的使用。

示例

在线：wdpg.io/4-1-1

此示例展示了如何使用 font-family 属性将 sans-serif 通用字体应用于 h3 元素，并将 serif 通用字体应用于 p 元素。

网页

CSS

h3 {    ① 
 font-family: sans-serif;    ① 
}       ① 
p {     ② 
 font-family: serif;         ② 
}       ②

① h3 元素获得 sans-serif 通用字体。

② p 元素获得 serif 通用字体。

HTML

<h3>The Web Design Playground</h3>

<p>Why work towards web design proficiency when you can play your way there?</p>

通用字体很有用，因为它们被所有网络浏览器支持，但只有五种字体家族，它们缺乏多样性。如果你想在网页文本中拥有更多选择，你需要访问更广泛的字体集合。

第四课第二部分：指定系统字体

覆盖内容：font-family 属性和系统字体

在线：wdpg.io/4-2-0

除了内置的通用字体外，每个网络浏览器都可以访问网站访问者在她的计算机上安装的字体。例如，大多数计算机都安装了 Times New Roman 这种 serif 字体，因此你的网页可以使用这种字体而不是通用 serif 字体。这些已安装的字体被称为 系统字体。

记住

使用引号和将系统字体名称中的每个单词的首字母大写是可选的，但养成这些好习惯会使你的代码更易读。

当你指定一个系统字体时，这里有两个需要注意的事项：

如果字体名称包含一个或多个空格、数字或除连字符（-）之外的标点符号，请用引号将该名称括起来：
```
font-family: "Times New Roman";
```
首字母大写（或对于多词名称，每个单词的首字母大写）：
```
font-family: Georgia;
```

注意，只要用逗号分隔名称，指定多个字体名称是完全合法的。在这种情况下，浏览器会按照它们出现的顺序检查字体，并使用用户计算机上安装的第一个字体。这种安排很有用，因为你无法确定每个用户安装了哪些系统字体。特别是，在系统字体之后包含一个类似的通用字体家族是一个好的做法。例如，如果你指定了 Times New Roman 或 Georgia 这样的 serif 系统字体（或者两者都指定），在 font-family 值中将 serif 通用字体作为最后一个项目：

font-family: "Times New Roman", Georgia, serif;

记住

一些系统字体至少安装在 90% 的 Mac 和 Windows PC 上。对于 sans-serif，这些字体是 Arial、Arial Black、Tahoma、Trebuchet MS 和 Verdana。对于 serif，这些字体是 Georgia 和 Times New Roman。对于 monospace，这个字体是 Courier New。

学习

要获取许多流行系统字体的安装百分比，请参阅 www.cssfontstack.com。

以下示例将 Verdana 系统字体应用于 div 元素，正如你可能从第二章回忆起来，这是你用来将网页内容划分为单独部分元素。

示例

在线：wdpg.io/4-2-1

此示例将 Verdana 系统字体应用于 div 元素，并添加了 sans-serif 通用字体作为后备。

网页

CSS

div {    ① 
 font-family: Verdana, sans-serif;    ① 
}    ①

① div元素获得 Verdana 系统字体。

HTML

<div>
The clean, modern look of a sans serif typeface makes it ideal for web page text.
</div>

第 4.3 课：设置字体大小

涵盖：font-size属性

在线：wdpg.io/4-3-0

与网络浏览器为每个元素定义默认字体样式的方式相同，它还定义了默认的字体大小，尤其是对于标题元素h1（最大）到h6（最小）。再次强调，这些默认值通常是合理的，但我要敦促您忘记默认值，并设置自己的字体大小。为什么？优秀网络设计的秘诀之一是控制设计的每一个方面，这是确保网页看起来符合您或您的客户期望的唯一方法。作为网页设计师，您的主要工作之一是设置自己的字体大小，这不仅适用于标题，还适用于您页面的所有元素，包括正文文本、标题、侧边栏和导航。

记住

您可以使用像素以外的单位指定字体大小。我在第七章中为您介绍了所有可用的 CSS 单位。

您通过将font-size属性设置为像素值来指定元素的字体大小，您使用px单位来表示这个值。下面的示例告诉网络浏览器将所有出现在div元素内的文本渲染为 24 像素的文本大小。相比之下，该示例还显示了一些在p元素内的文本以默认大小显示，在所有现代浏览器中，这个默认大小是 16 像素。

示例

在线：wdpg.io/4-3-1

此示例使用 24 像素的文本大小格式化div元素。

网页

CSS

div {    ① 
 font-size: 24px;    ① 
}    ①

① div元素被赋予24px的字体大小。

HTML

<h1>From Milan to Markup</h1>

<div>
The strange-but-true story of one woman’s epic journey from fashion designer to web geek.
</div>

<p>
Hyperia Marcupala always loved design, but one day she discovered she’d rather work with pixels than pleats.
</p>

与文本样式一起工作

当您选择了字体并设置了不同字体大小的页面元素时，您就已经在制作具有良好印刷效果的网页的道路上了。但要让您的页面脱颖而出，您还需要了解两个与文本样式相关的 CSS 属性。接下来的几个部分将带您了解这些样式。

第 4.4 课：使文本加粗

涵盖：font-weight属性

在线：wdpg.io/4-4-0

在第二章中，您学习了如何使用<strong>标签或<b>标签来显示加粗文本。您在具有语义意义的文本上使用这些标签：strong元素用于重要文本，而b元素用于关键词。但如果您有不适合这两个语义类别的文本，但出于外观原因仍然希望它显示为加粗，怎么办？在这种情况下，您可以转向 CSS 属性font-weight。表 4.1 列出了您可以分配给此属性的权重和关键词。

使用它

加粗文本的非语义用途包括在项目符号列表中每个条目开头的标题、段落中的引导词或引导句，以及联系信息。

注意

并非表 4.1 中的所有值在所有系统中都有效。如果你使用的字体不支持其中一个或多个粗细度，指定该粗细度将不会产生任何效果。

表 4.1 font-weight属性的值

粗细度	关键字	描述
100		薄文本
200		非常细的文本
300		细文本
400	`normal`	正常文本
500		中等文本
600		粗体文本
700	`bold`	加粗文本
800		非常粗的文本
900		黑色文本

以下示例通过将 100、400 和 700 粗细度应用于多个span元素来展示加粗文本的外观。（回想第二章，你使用span来创建一个内联容器，该容器适用于一个单词或三个单词。）

示例

在线：wdpg.io/4-4-1

此示例通过将每个粗细度应用于单独的span元素来演示 Calibri 字体的 100、400 和 700 粗细度。

网页

CSS

span {
    font-family: Calibri, sans-serif;
    font-size: 5em;
}

HTML

<span style="font-weight: 100">A</span>    ① 
<span style="font-weight: 400">A</span>    ① 
<span style="font-weight: 700">A</span>    ①

① span元素应用了各种粗细度到字母 A。

常见问题解答

我什么时候会使用正常（或 400）值？ 当你处理默认为加粗样式的元素时，例如标题。为了防止此类元素以加粗文本显示，将其font-weight属性赋值为normal（或400）。

第 4.5 课：使文本斜体

涵盖：font-style属性

在线：wdpg.io/4-5-0

如你在第二章中学到的，你可以通过使用当想要强调文本或格式化替代文本时使用<em>标签来在语义上显示斜体文本。如果你有非语义文本，但希望它以斜体显示，使用 CSS 属性font-style，并将其设置为italic值。以下是一个示例：

使用方法

斜体文本的非语义用途包括引语、段落中的首字或首句，以及文章元数据（如作者姓名和日期）。

示例

在线：wdpg.io/4-5-1

此示例将斜体字体样式应用于span元素。有两个实例：嵌套在h1元素内的<span>和嵌套在div元素开头的span。

网页

CSS

body {
    font-family: Georgia, serif;
}
span {    ① 
 font-style: italic;    ① 
}    ① 
div {
    font-size: 1.25em;
}

① span元素格式化为斜体。

HTML

<h1>Italic Text: <span>A History</span></h1>    ② 

<div>
<span>The first use of italics came in 1500</span> when Aldus Manutius of the Aldine Press wanted a typeface that resembled the handwritten humanist script that was then in common use. He asked his typecutter Francesco Griffo to make the typeface, which Manutius first used in the frontispiece of a book of the letters of Catherine of Siena. He produced the first book set entirely in italics the next year.    ③  
</div>

② 第一个span实例

③ 第二个span实例

记住

当你处理默认为斜体样式的元素时，例如cite或var（见第十六章），你可以通过将该元素的font-style属性赋值为关键字normal来防止该元素以斜体文本显示。

段落样式

当（或者我应该说如果）人们想到排版时，他们往往会关注单个字母或字母组合。这当然很重要，但这只是排版的“树木”视角。如果你想让你的网页看起来最好，你还需要考虑“森林”视角，这包括页面上的较大文本块，包括标题、副标题、标题和特别是段落。正如你在下一两个部分中看到的，注意重要的样式细节，如对齐和缩进，可以大大改变你的页面从单调到精彩。

第 4.6 课：水平对齐段落

涵盖：text-align属性

在线：wdpg.io/4-6-0

要控制段落或文本块的水平对齐方式——即相对于左右页边距的对齐方式——请使用 CSS text-align属性，该属性接受表 4.2 中显示的任何关键字。

表 4.2 text-align属性的可能的值

关键字	描述
`left`	将文本块的左边缘与左边距对齐；文本块的右边缘不对齐（因此被称为参差不齐）；这是从左到右阅读的语言中的默认设置。
`right`	将文本块的右边缘与右边距对齐；文本块的左边缘不对齐（参差不齐）；这是从右到左阅读的语言中的默认设置。
`center`	将文本块中的每一行居中对齐到左右边距之间；文本块的左右边缘都是参差不齐的。
`justify`	将文本块的左边缘与左边距对齐，将文本块的右边缘与右边距对齐。

使用它

对于大多数网页文本块，左对齐的文本最容易阅读。居中对齐的文本适用于页面标题和副标题。当你想要文本看起来更优雅时，使用对齐对齐。

小心

浏览器通过在行内添加空格来对齐文本。如果你的文本块较窄或包含一个或多个长单词，你可能会在文本中留下大而难看的空隙。

对齐的四种模式（居中、对齐、左对齐和右对齐）形成了排版创作的语法基础。——艾伦·卢普顿

以下示例尝试了四个text-align值。

示例

在线：wdpg.io/4-6-1

此示例显示了四种对齐样式在工作中的效果：标题和副标题居中，以及左对齐、右对齐和完全对齐的文本块。

网页

CSS

h1, h2 {    ① 
 text-align: center;    ① 
}    ①

① 居中对齐h1和h2元素

HTML

<h1>Aligning Web Page Text</h1>
<h2>Notes From the Field</h2>
<div style="text-align: left;">    ② 
We read text (in English, anyway) from left to right. This means that when we get to the end of each line, to continue we must jump down one line and then scan to the beginning of that line. That leap-and-scan is most easily made when we "know" where the next line begins. That's why left-justified text is the easiest alignment to read. </div>
<div style="text-align: right;">    ③ 
Compare the left-justified text block above with this right-justified paragraph. In this case, when you reach the end of each line, jumping down to the next isn't a problem, but because the left side of the text block is set ragged, the beginning of each line isn't in a predictable place, which makes right-justified text a tad more difficult to read. </div>
<div style="text-align: justify;">    ④ 
Many books are set with justified paragraphs because it looks more elegant without the right-ragged edges. However, pro book designers use sophisticated layout software to manage things like hyphenation (particularly if the text includes a long word such as <i>honorificabilitudinitatibus</i>). These aren't available for the web, so it's often best not to justify. </div>

② 左对齐第一段

③ 右对齐第二段

④ 第三段进行对齐

第 4.7 课：段落文本缩进

涵盖：text-indent属性

在线：wdpg.io/4-7-0

学习

一些浏览器支持text-align-last属性，该属性在text-align属性设置为justify时设置文本块中最后一行的对齐方式。可能的值包括left、right、center和justify。参见caniuse.com/#feat=css-text-align-last了解此属性的兼容性。

你可以通过使用 CSS 的text-indent属性来缩进段落文本，该属性可以是表 4.3 中显示的任一值。请注意，缩进仅适用于文本块第一行的开头。

表 4.3 可以应用于text-indent属性的值

值	描述
`长度`	带有单位的数值，例如`px`。
`百分比`	一个百分比值。计算出的缩进是文本块宽度乘以百分比。

记住

段落缩进常用的值是16px。

就像大多数排版事物一样，关于文本块是否应该缩进，存在很多争议。一些排版师避免缩进，因为他们认为未缩进的文本更美观；而另一些人则接受缩进，因为他们认为缩进的文本更易读。无论你最终站在哪一方，你应该记住以下要点：

小心

如果你想要为文本块创建缩进，确保该块有足够宽的左边距来容纳缩进的文本。参见第七章了解如何设置文本块的左边距。

永远不要缩进页面的第一段或标题之后的第一段。缩进的目的在于将段落与上面的段落分开，但这不适用于第一段。
如果你缩进你的段落，你不需要在段落之间添加空格。
如果你没有缩进你的段落，你应该在段落之间添加一些边距或填充以提高可读性。参见第六章了解如何设置边距和填充。

使用段落间距和缩进一起浪费空间，并使文本块呈现出松散、不确定的形状。——艾伦·卢普顿

示例

在线:wdpg.io/4-7-1

此示例显示了三种可能的缩进样式：对齐（第一段）；正缩进（第二段）；和负缩进（第三段），这通常被称为缩进或悬挂缩进。

网页

HTML

<div>    ① 
The first word of the first line is the critical word of that particular body of text. Let it start flush, at least. —William Addison Dwiggins
</div>
<div style=”text-indent: 16px;”>    ② 
Typographers generally take pleasure in the unpredictable length of the paragraph while accepting the simple and reassuring consistency of the paragraph indent. —Robert Bringhurst
</div>
<div style=”text-indent: -64px;”>    ③ 
<span style=”font-variant: small-caps;”>Outdents</span> work well when dramatic effect is desired. They sometimes have a second emphasis factor, such as a style or case change, that
contrasts with the body text. —Kristin Cullen
</div>

① text-indent属性未设置，因此第一行与段落的其他部分对齐。

② 缩进段落的第一行

③ 缩进段落的第一行

与颜色一起工作

默认情况下，大多数网页浏览器使用黑色文本和白色背景来显示页面。这种组合当然可读，但并不有趣。我们的眼睛能够区分数百万种颜色，所以只有黑白调色板似乎有些不合适。幸运的是，CSS 允许你通过提供几种访问数字领域中的 1600 万种颜色中的任何一种的方法来充分发挥你的设计师眼光。唉，这些方法中的大多数都比较复杂，所以我将把它们推迟到以后（见第十三章）。

目前，你可以通过 CSS 定义的关键词来获取颜色。表 4.4 列出了几种常见颜色的关键词。

表 4.4 九种常见颜色的 CSS 关键词

关键词	颜色
`red`
`lime`
`blue`
`yellow`
`magenta`
`cyan`
`black`
`gray`
`white`

记住

在每个灰度关键词中，你可以将单词 *gray* 替换为 *grey*，并且所有浏览器（除了 Internet Explorer 7 及更早版本）都会显示相同的颜色。例如，关键词 *darkgray* 和 *darkgrey* 会产生相同的色调。

总共有超过 140 个定义好的关键词，所以你不需要有任何困难就能找到你下一个网络项目所需的正确色调（或色调组合）。我已经将完整的颜色关键词列表放在了 Web 设计游乐场 wdpg.io/colorkeywords 上。图 4.1 展示了部分列表。

图 4.1 要查看 Web 设计游乐场上的 CSS 颜色关键词的完整列表，请访问 wdpg.io/colorkeywords。

第 4.8 节：将颜色应用于文本

覆盖内容：color 属性

在线：wdpg.io/4-8-0

几个 CSS 属性具有颜色组件，包括边框、背景和阴影。你将在本书中了解所有这些属性以及更多内容（包括下一节中的背景），但到目前为止，你只知道文本，所以我将从那里开始。以下是应用颜色到文本元素的通用 CSS 语法：

`*selector*` {    ① 
 color: `*keyword*`;    ② 
}

① 要应用颜色的文本项

② color 属性及其值

*选择器* 可以是一个 HTML 元素，例如 h1 标题或 p 元素，或者它可以是第七章中看到的任何 CSS 选择器。实际的工作是由 color 属性及其关联的值完成的，它可以是由 CSS 颜色关键词（或第十七章中你将学习的 CSS 支持的其他任何颜色值）。

以下示例显示了紫色 h1 文本的 color 定义。

示例

在线：wdpg.io/4-8-1

此示例使用关键词将紫色分配给 h1 元素。

网页

CSS

h1 {    ① 
 color: purple;    ② 
}

① 指定要应用样式的 h1 元素。

使用关键词 purple 来设置 color 属性的值。

HTML

<h1>Royalty: A History</h1>

游戏

将 a 元素样式设置为显示黄色链接文本。然后添加第二个规则，当鼠标悬停在链接上时，链接文本显示为红色并带有下划线。在线：wdpg.io/4-8-4

第 4.9 节：为背景应用颜色

涵盖：background-color 属性

在线：wdpg.io/4-9-0

到目前为止，我只看了设置前景色——网页文本的颜色，但你也可以使用 CSS 为背景应用颜色。这种颜色可以是整个页面的背景（即 body 元素），标题、段落、链接，或者页面的某个部分，如 <div> 或 <span> 标签。

这是将背景颜色应用于网页元素的通用 CSS 语法：

`*selector*` {    ① 
 background-color: `*keyword*`;    ② 
}

① 要应用背景色的项目

② background-color 属性及其值

*选择器* 可以是一个 HTML 元素或你在第七章中学到的任何 CSS 选择器。关键是 background-color 属性及其关联的值，这可以是之前学到的任何颜色关键字。

以下示例显示了一个具有黑色背景和白色文本的目录侧边栏的网页。该示例还展示了设置它所使用的部分 HTML 和 CSS。

示例

在线：wdpg.io/4-9-1

此示例显示了一个具有黑色背景和白色文本的目录侧边栏的网页。

网页

CSS

div {
 background-color: black;    ① 
 color: white;    ② 
 float: right;    ③ 
 font-size: 16px;    ③ 
 font-weight: bold;     ③ 
 margin-left: 0.5em;    ③ 
 padding: 0 10px 5px 10px;    ③ 
 text-align: left;    ③ 
}

① background-color 属性将 <div> 背景设置为黑色。

② color 属性将 <div> 文本设置为白色。

③ 这些属性将各种样式应用于 <div>。

HTML

<div>    ④ 
 <h3>Table of Contents</h3>    ④ 
 Color Psychology<br>    ④ 
 Color Schemes<br>    ④ 
 Color Caveats<br>    ④ 
 A Few Examples<br>    ④ 
 Best Practices<br>    ④ 
 CSS and Color    ④ 
</div>    ④

④ <div> 标签及其相关的 HTML 和文本

播放

你会如何修改这个示例中的 CSS 来显示带有浅灰色文本和紫色背景的目录侧边栏？在线：wdpg.io/4-9-2

播放

编写一个 CSS 规则，将链接的文本设置为蓝色，背景为黄色。在线：wdpg.io/4-9-4

摘要

你可以使用 font-family 属性为页面元素分配字体。这个字体可以是五种通用字体之一——serif、sans-serif、monospace、cursive 或 fantasy——或者用户计算机上已安装的系统字体。
使用 font-size 属性来控制文本元素的大小。
使用 font-weight 属性以非语义方式应用粗体。
使用 font-style 属性以非语义方式应用斜体。
使用 text-align 设置水平对齐，例如居中标题和左对齐文本。
使用 text-indent 来缩进或取消缩进文本块的第一行。
要为元素文本着色，使用 color 属性。
要为元素背景着色，使用 background-color 属性。

第五章项目: 创建个人主页

创造比拥有更好的自我表达方式；生命是通过创造而非拥有来展现的。——维达·达顿·斯卡德

本章涵盖

规划和绘制你的个人主页
为你的页面选择字体
添加页眉和导航链接
添加正文内容

在掌握四个章节的内容后，是时候将新学的 HTML 和 CSS 知识付诸实践，通过构建一些实质性的内容了。具体来说，本章将带你通过创建一个简单的个人主页的过程。简单是这里的关键词，因为你对 HTML 标签和 CSS 属性的掌握还不足以构建复杂的内容。幸运的是，你掌握的已经足够多，可以为自己创建一个看起来很棒的首页。你了解标题和段落；你知道如何使用<div>和<span>标签创建部分；你知道如何创建项目符号和编号列表；你知道如何创建链接；你知道如何添加粗体和斜体等排版效果；你知道如何将颜色应用到背景和文本上。正如本章所示，所有这些已经足够你创建一个值得骄傲的首页。

你将构建的内容

这个项目是一个基本的“看，妈妈，我在网上！”主页，它让你能够将本书前四章学到的工具和技术应用到网络虚拟世界中。结果是简单但美观的页面，让你能够在网络上占据一小块领地。目的何在？这取决于你，但大多数个人主页都是为任何经过的冲浪者提供一个介绍：你是谁，你喜欢什么（甚至你不喜欢什么），你过去做了什么，你现在在做什么，以及你将来想做什么。随着我的介绍，我会基于我的信息给出一个例子，但当然，你将想要用你自己的文本替换我的文本。你的网页是你的房子，你可以用你想要的任何东西来填充它。

绘制布局草图

所有你的网络项目都应该从笔和纸开始，或者说是从其他方便的书写表面开始。创建网页首先是一个设计过程，所以在开始编写代码之前，你需要对你要构建的内容有一个合理的想法。当然，你可以构建页面的心理图像，但最好是从笔和纸提供的更直观的方法开始。

正如你在图 5.1 中看到的，这个草图不需要很详细。用短语或句子描述每个部分的内容，来布局页面的主要部分。

图 5.1 在开始编写 HTML 和 CSS 代码之前，用笔或铅笔快速绘制页面布局和内容的草图。

图 5.1 展示了一个包含以下六个部分的页面布局：

页面的标题
对页面的简要介绍
链接到社交媒体网站，如 Facebook 和 Twitter
关于我职业的文本
关于我感兴趣的事物的文本和项目符号列表
带有版权声明和联系信息的页面页脚

你的下一个页面规划任务是决定你想要为你的页面使用的字体。

选择字体

因为在这本书中我还没有讨论过图片，所以你个人主页的第一个版本将由文本主导，特别是所谓的正文文本——那些构成你页面大部分的非标题文本的大块文本。由于你的一部分读者将在笔记本电脑、平板电脑和智能手机等设备上阅读你的页面，因此一开始花点时间选择在这些较小屏幕上可读的字体是很重要的。

你可以用单一字体构建你的页面，但混合两种字体——一种用于标题，另一种用于正文文本——可以为页面增添活力和对比。我首选的使用方式是标题使用无衬线字体，正文使用衬线字体，但你可以随意反转它们或使用两种衬线字体或无衬线字体。唯一要寻找的标准是两种能够和谐共存的字体。

对于这个项目，我将使用两个经久不衰的网页字体：无衬线字体 Verdana 用于标题，衬线字体 Georgia 用于正文。在我的 CSS 中，我将使用以下规则来指定这些字体家族：

font-family: Georgia, serif;
font-family: Verdana, sans-serif;

当页面布局就绪且你选择了字体后，下一步是选择颜色方案。

选择颜色方案

在这个简单的页面上，颜色不会扮演重要角色，但你可能想要加入一些颜色，以避免在白色背景上全是黑色文字的单调感。你可以通过使用 Web 设计游乐场的渐变构造工具（见wdpg.io/kits/gradient）来添加背景颜色或渐变。对于这个项目，我更喜欢简单的白色背景，因此我自己的颜色重点放在文本上。使用 Web 设计游乐场的 RGB 颜色方案计算器（见wdpg.io/colorcalc），我选择了一个基于颜色值#ffc200的颜色方案，如图图 5.2 所示。当然，你应该选择一个适合你风格的配色方案。

图 5.2 基于十六进制颜色值#ffc200的分割互补颜色方案

当页面布局就绪且你选择了颜色后，是时候将这个粗略草图转换为精确的 HTML 和 CSS 代码了。

构建页面

要构建你的个人主页，你将从我在第二章中介绍给你的基本代码开始。从那里开始，你将逐节进行，添加文本、HTML 标签和 CSS 属性。

初始结构

首先，从第二章的基本页面结构开始，为页面的六个部分中的每一个添加标签和一些占位文本。以下是这些标签的摘要：

页面标题是一个h1标题元素。
页面引言是一个h2标题元素。
社交媒体链接位于一个 h3 标题元素内。
第一个文本块是一个 div 元素。
第二个文本块是另一个 div 元素，后面跟着一个 ul 元素，用于项目符号列表。
页脚是另一个 div 元素。

尝试这个

在线：wdpg.io/projects/home-page/1

这里是构成个人主页初始结构的元素。

网页

CSS

body {    ① 
 width: 550px;    ① 
 color: #444;    ① 
 font-size: 16px;    ① 
 text-align: left;    ① 
}    ①

① body 元素的初始 CSS

HTML

<!--START OF HEADER-->    ② 
<div>    ③ 
 <h1>Page Title</h1>    ③ 
 <h2>Very short page introduction</h2>    ③ 
 <hr>    ③ 
 <h3>Social media links</h3>    ③ 
 <hr>    ③ 
</div>    ③ 
<!--END OF HEADER-->
<!--START OF CONTENT-->
<div>    ④ 
 <p>    ④ 
 First text block    ④ 
 </p>    ④ 
 <p>    ④ 
 Second text block    ④ 
 </p>    ④ 
 <ul>    ④ 
 <li>First item</li>    ④ 
 <li>Second item</li>    ④ 
 <li>Etc.</li>    ④ 
 </ul>    ④ 
</div>    ④ 
<!--END OF CONTENT-->
<!--START OF FOOTER-->
<div>    ⑤ 
 <hr>    ⑤ 
 <p>    ⑤ 
 Copyright and contact info    ⑤ 
 </p>    ⑤ 
</div>    ⑤ 
<!--END OF FOOTER-->

② 注释表示每个部分的开始和结束。

③ 页眉部分

④ 内容部分（两个段落和一个项目符号列表）

⑤ 页脚部分

常见问题解答

你为什么不用 *#000* 或 *black* 作为默认的文本颜色？ 在白色页面背景上，纯黑色文本可能因为两种颜色之间的极端对比而难以阅读。将文本颜色调整为 #444 或 #333 可以使其更容易阅读。

播放

我将页面上的所有内容都左对齐，以在页面的左侧得到一条整洁的线条。然而，你完全可以用其他方式来调整对齐。尝试将三个页面标题元素（标题、简介和社交媒体链接）居中。在线：wdpg.io/projects/home-page/2

注意，初始结构还包括应用于 body 元素的一些 CSS 属性。这些全局属性设置了页面的宽度和文本颜色、字体大小和对齐的默认值。最令人惊讶的可能就是 width 的值为 550px。为什么要限制宽度，为什么要使用这样一个相对较小的值？好的网页排版的一个关键元素是行长。如果你的行太长，它们就难以扫描，如果太短，文本就会显得断断续续。在这两种情况下，结果文本都难以阅读。对于屏幕文本，最佳行长在 65 到 75 个字符之间，因此你需要设置宽度，以确保你的正文中的所有或大多数行都适合这个范围。

播放

为了帮助你了解屏幕阅读的理想行长，我在 Web 设计游乐场设置了一个练习。给定一段文本，调整 body 元素的 width 属性，使行长进入理想的 65-75 个字符范围。尝试更改 font-size 属性，看看这个变化对行长有什么影响。在线：wdpg.io/projects/home-page/3

这里还有一些关于初始结构中使用的 HTML 标签需要注意的事项：

页面分为三个部分：页眉、内容和页脚。
每个部分都嵌入在一个 <div></div> 块中。这个块组织了结构，并允许你将样式（如字体家族）应用于特定部分中的所有内容。
页面的每个部分都被称为注释的特殊标签包围，这些标签标记了部分的开始（例如，<!—START OF HEADER-->）和结束（例如，<!—END OF HEADER-->）。我使用全部大写字母来帮助注释从常规代码中突出出来，但这种做法是可选的。参见第十六章了解如何在代码中使用注释的更多信息。

记住

不要害羞地在你的代码中添加注释。注释帮助你跟踪页面结构，当其他人需要阅读你的代码或者当你几个月没有查看你的页面代码时，它们通常是不可或缺的。

页面标题

毫不奇怪，你希望你的页面标题比页面上的其他文本更加突出。在h1元素中设置文本是一个好的开始，但你可能还需要进一步格式化文本以获得你想要的效果。这里有一些想法：

应用不同的颜色。 如果你使颜色独特，标题将与其他文本区分开来。
应用更大的字体大小。 因为你的页面标题可能只是你的名字这样简单，更大的字体大小可以使它更加突出。

在下面的示例中，我用我的名字作为标题，但你可以自由地使用你喜欢的任何文本。我将无衬线系统字体 Verdana 应用到页眉部分的div元素上（这意味着这个字体也应用到所有标题上）。我还用我颜色方案中的一种颜色（#1800ff）和52px的字体大小来格式化页面标题。

尝试这个

在线：wdpg.io/projects/home-page/4

这个示例用颜色、字体和更大的字体大小来格式化个人主页标题。

网页

CSS

h1 {    ① 
 color: #1800ff;    ① 
 font-size: 52px;    ① 
}    ①

① h1元素的 CSS 代码

HTML

<div style="font-family: Verdana, sans-serif;">    ② 
 <h1>PAUL MCFEDRIES</h1>    ③

② 应用了字体的页眉部分的div元素

③ 添加了文本的h1元素

播放

如果你的页面标题很长，它可能会换行到第二行。这没问题，但你可能需要减小行高，使两行更靠近。对于h1元素，尝试将line-height属性设置为小于 1 的值（例如0.8或0.9）。在线：wdpg.io/projects/home-page/5

页面简介

页面简介充当一种副标题。它应该是一段简短的文本片段，向读者介绍你。因为文本是副标题，所以字体大小应该小于标题文本，但大于正文文本。再次强调，将文本放在h2元素中应该可以完成这项工作，但你需要根据你为标题使用的样式来设置大小。

在下面的示例中，我用灰色文本（#666）和22px的字体大小来格式化我的页面简介。我还使用了一个内联的<span>标签，用我颜色方案中的另一种颜色（#ffc200）来格式化一个关键短语——技术作家。请注意，这个h2元素继承了我在前一个部分应用到页眉的<div>标签上的字体。

尝试这个

在线：wdpg.io/projects/home-page/6

这个例子展示了如何使用颜色和更大的字体大小来格式化个人主页的简介。在文本中，一个<span>标签将关键短语技术作家应用了不同的颜色。

网页

CSS

h2 {    ① 
 color: #666;    ① 
 font-size: 22px;    ① 
}    ①

① h2元素的 CSS 代码

HTML

<h2>I’m a <span style="color: #ffc200">technical writer</span> specializing in HTML, CSS, web design, and web typography</h2>    ②

② 一个内联span元素将不同的颜色应用到包含的短语上。

游戏

页面简介应该简短——理想情况下，不超过两行。同时，它应该在屏幕上视觉上保持平衡，每一行尽可能延伸到文本块的最右边。我已在 Web 设计游乐场设置了一个练习，帮助你练习这样做。在线：wdpg.io/projects/home-page/7

社交媒体链接

页面标题的最后一个元素是链接到你的社交媒体网站，例如 Facebook、Twitter 和 Pinterest。这个集合是页面的重要元素，因此你应该通过使用更大的字体大小或独特的颜色（或两者兼而有之）使其从常规正文文本中脱颖而出。

对于我自己的页面，如下例所示，我用无衬线字体和16px的字体大小格式化了社交媒体文本，并将名称大写。对于链接，我应用了色彩方案中的第三种颜色（#0092ff）并去掉了下划线。悬停在每个链接上时，文本颜色变为#ffc200并带有下划线。注意，还使用了竖线符号（|）来分隔项目。

尝试这个

在线：wdpg.io/projects/home-page/8

这个例子展示了如何使用字体、字体大小、大写字母以及当每个链接被悬停时改变的颜色和下划线来格式化个人主页的社交媒体文本。

网页

CSS

h3 {    ① 
 font-size: 16px;    ① 
}    ① 
a {    ② 
 color: #0092ff;    ② 
 text-decoration: none;    ② 
}    ② 
a:hover {    ③ 
 color: #ffc200;    ③ 
 text-decoration: underline;    ③ 
}    ③

① h3元素的 CSS 代码

② 常规链接文本的 CSS 代码

③ 当读者使用鼠标指针悬停在链接上时的链接文本的 CSS 代码

HTML

<h3> <a href="http://www.facebook.com/PaulMcFedries">FACEBOOK</a> | <a href="https://twitter.com/paulmcf">TWITTER</a> | <a href="https://www.pinterest.com/mcfedries/">PINTEREST</a> | <a href="http://codepen.io/paulmcf/">CODEPEN</a> | <a href="https://www.linkedin.com/in/paulmcfedries">LINKEDIN</a></h3>

常见问题解答

<hr>标签怎么了？ 在初始页面结构中，我在社交媒体链接的上下方使用了水平线来将它们与其他页面文本分开。然而，随着我应用的样式，它们已经完全与其他文本分开，因此水平线变得多余。

正文文本

个人主页的大部分内容是由描述你是谁、你做什么工作、你如何娱乐等的文本组成。这段文本是页面的正文文本，其内容完全由你决定。

您已经为 body 元素设置了默认的文本颜色、字体大小和文本对齐方式，这些值由包含页面内容部分的 div 元素继承。剩下的只是应用正文文本字体，在我的例子中是衬线字体 Georgia。为了确保此字体应用于整个内容部分，我在 div 元素的 font-family 属性中添加了字体。

尝试这个

在线：wdpg.io/projects/home-page/10

这个例子使用 Georgia 字体样式化个人主页文本。它还将项目符号列表的符号更改为圆形。

网页

CSS

ul {
 list-style-type: circle;    ① 
}

① 将 list-style-type 属性设置为 circle 以更改符号。

HTML

<div style="font-family: Georgia, serif;">    ② 
 <p>    ③ 
    I've been a professional technical writer for more than 25 years. 
    I have over 90 books to my credit, which have sold more than four 
    million copies worldwide. I’ve been building websites since 1996, so
    have intimate knowledge of HTML, CSS, and web design. My passion  
    is to write books and articles to pass along that knowledge and to 
    create tools that help people build awesome web pages.
 </p>    ③ 
    <p>
    That’s my work side, so what about my personal side? That is, what 
    do I do in my spare time? I’m glad you asked! Here’s a partial (and 
    alphabetical) list of things and activities that interest me:
    </p>
    <ul>
        <li>Chariot racing</li>
        <li>Dog polishing</li>
        <li>Duck herding</li>
        <li>Extreme ironing</li>
        <li>Navel fluff sculpture</li>
        <li>Staycationing</li>
    </ul>
</div>

② 应用了 Georgia 字体堆栈的内容部分的 div 元素

③ 每个段落使用 <p></p> 块。

精通

您的正文文本也有助于您确定页面的最佳宽度。当您设置文本左对齐时，每个文本块的右侧是参差不齐的，这意味着每行的结束点不同。理想情况下，您应该调整宽度，使您的文本块不要太参差不齐（也就是说，一行或多行在末尾有太多的空白）。

游戏

尽管深灰色（#333 或 #444）的文本通常与白色背景一起使用，但其他文本颜色也可以产生微妙的效果。例如，深棕色文本颜色散发出温暖感。在 Web 设计游乐场中，我设置了一个示例。在线wdpg.io/projects/home-page/11

在这个例子中，请注意以下两点：

我将每个段落嵌入到 <p></p> 块中，以尊重文本的语义角色。
为了给项目符号列表增添一些活力，我将 ul 元素的 list-style-type 属性设置为 circle 以更改默认的项目符号。

页面页脚

尝试这个

在线：wdpg.io/projects/home-page/12

这个例子通过添加水平线和用较浅的灰色、较小的字体大小和斜体样式化页脚文本，将页脚文本与正文文本分开。

网页

CSS

hr {    ① 
 color: #666;    ① 
}    ①

① hr 元素被赋予较浅的颜色。

HTML

<div style="font-family:Georgia, serif; color: #666; font-size: 14px; font-style: italic;">    ② 
    <hr>
    &copy; 2019 Paul McFedries<br>
    Contact: mail at my-last-name dot com    ③  
</div>

② div 元素使用了字体、较浅的颜色、较小的字体大小和斜体。

③ 电子邮件地址被混淆了。

常见问题解答

为什么你的电子邮件地址看起来这么奇怪？ 如果你打算在你的联系信息中包含电子邮件地址，永远不要以纯文本形式显示地址；你可能会冒地址被垃圾邮件收集者捕获的风险。相反，以一种能够挫败垃圾邮件机器人但仍然容易让人理解的方式混淆地址。

小心

从这里开始

个人主页的最终版本（我的主页在图 5.3 中展示）基本上是你所期望的：一个简单、直接的页面，确立了你在网络上的第一个家。（如果你迫不及待想要将你的代码公之于众，请查看附录 A 以获取详细信息。）

图 5.3 一个个人主页，准备上网。

即使你刚开始学习 HTML 和 CSS，你仍有多种方式为你的朴素主页添加个人风格。当然，你可以添加更多文本，包括编号列表（例如你最喜欢的书籍或乐队的排行榜）。你还可以玩转颜色，尝试不同的字体，调整字体大小和对齐方式等印刷细节，并添加一些链接。

如果你对自己的页面略感失望，这是可以预料的。毕竟，在你网络设计教育的早期阶段，你对页面上的元素只有有限的控制权，而且你缺少关键的设计元素，如图片、边距和页面布局。不用担心——你将在第二部分学习所有这些以及更多。

摘要

绘制你想要构建的页面草图。
选择标题和正文文本的字体。
选择一个配色方案。
构建初始页面结构：基本的 HTML 标签和应用于 body 元素的全球 CSS 属性。
逐个填充和设计每个部分：标题、简介、社交媒体链接、正文文本和页脚。

第二部分：处理图像和样式

HTML 标签是每个网页设计师工具箱中的关键部分。你们必须熟悉所有基本 HTML 标签——从<a>到<var>——以构建一个不错的页面。但即使你们记住了 HTML5 规范中的 100 多个标签，任何只由标签和文本组成的页面看起来……嗯，无聊。唉，它也会看起来非常普通，因为像文本、标题和列表这样的默认渲染在所有现代浏览器中基本上是相同的。

我知道你们不是因为想变得无聊和普通才读这本书的！所以在这里，在第二部分，你们将通过工具和技术扩展你们网页设计的视野，这些工具和技术远远超出了基础水平。在第六章中，你们将了解图像、视频和音频，而在第七章中，你们将获得高级但实用的样式表知识。在第八章中，你们将学习如何像专业人士一样定位网页元素，而第九章则介绍了至关重要的 CSS 盒模型，它允许你调整元素大小，并在元素周围添加边框和边距。

最后，在第十章，你们将运用所有新学到的 HTML 和 CSS 知识，用它来构建一个产品吸引人的着陆页。

第六章添加图像和其他媒体

就像他们说的关于完美的图画书一样。艺术和文字各自独立，但结合起来，它们创造出了更好的东西。——Deborah Wiles

本章内容涵盖

在网页上嵌入图像
使用背景图像
为网页优化图像
添加视频、音乐和其他媒体

当你遇到一个全是文本的页面时，这会让你感觉如何？这可能会让你感到失望，甚至可能感到悲伤。除非文本引人入胜，排版特别出色，否则它也可能让你想点击后退按钮，寻找一个可以让你的眼睛得到休息的地方。你不想让人们感到失望、悲伤或急于离开你的网站，所以通过在页面上添加图像，甚至偶尔添加视频，给他们一些视觉上的慰藉。在本章中，我将向你展示如何做到这一点。

第 6.1 课：向页面添加图像

涵盖：img元素

在线：wdpg.io/6-1-0

到目前为止，在这本书中，你已经看到网页的内部是文本，其中穿插了一些 HTML 标签和 CSS 规则。所以你可能想知道图像是如何融入这个纯文本景观的。简短的答案是它们并不直接融入！与文档处理文档或演示文稿不同，你不会直接将图像插入到网页中。相反，你将图像作为单独的文件上传到你的网站，然后在你的页面文本中插入一个特殊的 HTML 标签，告诉浏览器在哪里定位图像。然后浏览器从服务器检索文件，并在你指定的位置在页面上显示图像。

获取浏览器将图像添加到网页的特殊标签是img元素，它使用了图 6.1 中显示的部分语法。

图 6.1 你可以通过使用<img>标签将图像插入到网页中。

在这里，你需要考虑三个属性：

src—这个属性（简称source）指定了图像文件的位置。如果文件位于远程服务器上，请使用文件的完整 URL；如果文件与 HTML 文件位于同一目录下，请使用文件名；否则，使用图像的路径和文件名。如果你在你的网站主文件夹中创建了一个名为images的子文件夹，并且你的图像文件是logo.png，那么你的src值将是/images/logo.png。
alt—这个属性（简称alternative）是一个描述图像的词或短语，如果图像文件无法显示，可以用它来代替图像。例如，一个公司标志可能使用带有公司名称的前缀文本logo作为替代文本。替代文本也被屏幕阅读器和盲文应用使用，以使用户对图像有一个大致的了解。

常见问题解答

我必须包含 alt 属性吗？ 是的。除非你的每个 <img> 标签都有一个存在的 alt 属性，否则你的网页将无法验证。如果你不想为装饰性或其他非必要图像使用 alt 文本，你可以将 alt 属性设置为空字符串 ("")。

title—你可以使用这个可选属性来指定当用户将鼠标指针悬停在图像上时出现的工具提示文本，如下面的示例所示。

下面的示例展示了 img 元素的实际应用。

示例

在线：wdpg.io/6-1-1

这个示例展示了如何使用 <img> 标签将图片添加到网页中。

网页

CSS

span {
    font-family: Optima, Verdana, sans-serif;
    font-size: 3em;
}

HTML

<img 
 src="/images/atomic-logo.png"    ① 
 alt="Atomic Web Design logo"    ② 
 title="Logo for Atomic Web Design">    ③ 
<span>Atomic Web Design</span>

① 图片文件的位置

② 替代文本

③ 工具提示文本

记住

如果你还没有想要使用的图片，但知道图片的最终尺寸，你可以插入一个占位符图片来占据页面上的相同空间，直到图片准备好使用。你有几种方法可以做到这一点，但最简单的是使用占位符服务器，例如 https://placeholder.com。在 <img> 标签中，添加 src="https://via.placeholder.com/``*w*``x``*h*``"，其中 *w* 和 *h* 分别代表宽度和高度。在线：wdpg.io/6-1-2

你的网站需要在文本内容和视觉内容之间保持适当的平衡。没有文本的精彩图片或视频会给你的访客提供很少或没有有用的数据，但你可能发现很难通过大量纯文本来吸引用户。—Helen Stark

理解图片文件格式

在前面的示例中，你可能已经注意到图片文件被命名为 atomic-logo.png，这意味着它使用的是 PNG 图片文件格式。这种格式在网页上很常见，但并不是你唯一可以使用的格式。实际上，网络已经标准化了四种格式，这些格式几乎涵盖了所有网络图像，我在表 6.1 中总结了它们。

表 6.1 图片文件格式

名称	扩展名	描述	用途
GIF	`.gif`	原始的网络图形格式（名称是 Graphics Interchange Format 的缩写，发音为 giff 或 jiff）。GIFs 限制在 256 种颜色，可以有透明背景，并且可以组合成简短的动画。	如果你想将多个图像组合成单个动画图像，请使用 GIFs。
JPEG	`.jpg` `.jpeg`	这种格式（其名称来源于联合图像专家小组，发音为jay-peg）支持具有数百万种颜色的复杂图像。JPEG 文件的主要优点是它们被压缩，因此即使是数字化的照片和其他高质量图像也可以有合理的小尺寸，以便更快地下载。然而，请注意，JPEG 压缩是有损的，这意味着它通过丢弃冗余像素来减小图像的大小。压缩程度越高，丢弃的像素越多，图像看起来就越不清晰。	如果你有一个照片或类似复杂图像，JPEG 几乎总是最佳选择，因为它提供了最小的文件大小。对于网页来说，多小才算足够小？你将在本章后面的“优化图像”中了解到这个主题。
PNG	`.png`	这种格式（缩写为便携式网络图形，发音为p-n-g或ping）支持数百万种颜色。它是一种压缩格式，但与 JPEG 不同，PNG 使用无损压缩。图像保持清晰度，但文件大小可能会相当大。PNG 还支持透明度。	如果你有一个使用纯色或包含大面积近似纯色的插图或图标，PNG 是最好的选择，因为它在保持优秀图像质量的同时，提供了合理的小文件大小。如果你需要透明效果，也可以使用 PNG。
SVG	`.svg`	这种格式（缩写为可缩放矢量图形）使用矢量而不是像素来生成图像。这些矢量被编码为 XML 格式的指令集，这意味着图像可以在文本编辑器中修改，并且可以通过操作产生动画。	如果你有一个标志或图标，并且有一个可以保存为 SVG 格式的图形程序（如 Adobe Illustrator 或 Inkscape），这种格式是一个不错的选择，因为它可以生成小文件，可以无失真地缩放到任何大小。

学习

如果你想要加入动画 GIF 的乐趣，网上有很多网站可以提供帮助。最简单的方法是使用在线工具，如 GIFCreator (gifcreator.me) 或 GIFMaker.me (gifmaker.me)。

获取图形

网页的文字部分，至少从制作角度来看，对大多数人来说都是小菜一碟。另一方面，图形则是完全不同的数字鱼。创建一个炫目的标志或引人注目的插图需要一定的艺术天赋，这比基本的打字技能更难获得。

然而，如果你有这样的天赋，那么你就可以轻松应对：在你的首选图形程序中创建图像，并以 JPEG 或 PNG 格式保存。对于非艺术家来说，他们必须从其他来源获取图形资源。除了上传你自己的照片或扫描你的图像外，你还可以找到大量漂浮的图像。以下是一些想法：

许多程序（包括 Microsoft Office 和大多数绘画和插图程序）都附带剪贴画库。剪贴画是专业质量的美术作品，你可以将其融入自己的设计中。在几乎所有情况下，你都可以自由使用剪贴画，无需担心版权问题。
利用网上众多的图形档案。网上的网站存储了数百甚至数千张图片：库存照片、插图、图标等等。其中许多图片是免费的，但请检查每个网站的用法条款。
从网页上抓取一张图片。当你的浏览器显示包含图片的网页时，相应的图形文件会暂时存储在你的计算机硬盘上。在大多数浏览器中，你可以右键单击图片以永久保存该文件。然而，正如我在旁边的注释中所详细阐述的，存在版权问题，因为你不应该在没有许可和/或致谢的情况下使用你自己的图片。

小心

不要忘记许多图片最初是那些创建它们的人或公司的财产。除非你绝对确定一张图片是公共领域的（例如，它附带了允许你重新使用图片的 Creative Commons 许可证），在使用之前你需要从所有者那里获得许可。无论如何，确保在你的网站上为图片所有者提供致谢。

插入 HTML5 图

虽然你的一些图片纯粹是装饰性的或旨在吸引网站访问者的注意，但你也可能使用许多与页面文本相关的图形。当你直接在文本中引用图片时，该图片被称为图。在 HTML5 中，图是一个语义页面元素，你可以使用figure元素来指定。如果图有标题，那么这个标题也是一个语义元素，你可以使用figcaption元素来指定。以下是要使用的结构：

<figure>
    <img src="*file*" alt="*description*" title="*tooltip*">
    <figcaption>*Caption text*</figcaption>
</figure>

下面是一个示例。

示例

在线：wdpg.io/6-1-4

这个示例向你展示了如何使用figure和figcaption元素将图片指定为图。

网页

HTML

<p>
    During our recent rebranding, we came up with a 
    snazzy new logo, shown in Figure 8.3.
</p>
<figure>    ① 
    <img 
        src="/images/atomic-logo.png"
        alt="Atomic Web Design logo" 
        title="Logo for Atomic Web Design">
 <figcaption>    ② 
        Figure 8.3: The new Atomic Web Design logo
 </figcaption>    ② 
</figure>    ①

② 将标题包含在figcaption元素中。

① 将图片包含在figure元素中。

将图片设置为链接

你已经知道你可以设置一个单词或短语作为链接，但你也可以用图片这样做。你以同样的方式安排事物，用<a>和</a>标签包围<img>标签，如下所示：

<a href="*url*"><img src="*file*"></a>

小心

我已经在一行中展示了将图片转换为链接的代码，这是出于某种目的。如果你将这些标签放在不同的行上——尤其是关闭的</a>标签——你会在文本中遇到奇怪的标记（本质上，是下划线的换行符）。

这里有一个示例。

示例

在线：wdpg.io/6-1-6

这个示例向你展示了如何使用a元素和img元素将图片转换为链接。

网页

HTML

<a href="http://atomicwebdesign.io/">    ① 
<img src="/images/atomic-logo.png" alt="Atomic Web Design logo" title="Logo for Atomic Web Design"></a>    ①  
<span>Atomic Web Design</span>

① 将图片包含在a元素中。

使用图像作为自定义项目符号

如你在第二章所学，CSS 提供了list-style-type属性，允许你指定用于无序列表的其他类型的项目符号字符。你可以通过使用list-style-image属性来指定一个图像作为自定义项目符号来提高该属性的功能：

ul {
    list-style-image: url(*file*);
}

与<img>标签一样，*file*值指定图像文件的位置。注意，然而，你不需要用引号包围该值。以下是一个示例。

示例

在线：wdpg.io/6-1-7

本例展示了如何使用list-style-image属性来指定一个图像作为自定义的项目符号。

网页

CSS

ul {
 list-style-image: url(/images/checkmark.png);    ① 
}

① 将list-style-image属性设置为图像文件位置。

HTML

<h3>
    Prepare Images for the Web:
</h3>
<ul>
    <li>Remove unnecessary images</li>
    <li>Choose the correct image format</li>
    <li>Size the images appropriately</li>
    <li>Compress JPEGs as needed</li>
    <li>Optimize PNGs</li>
</ul>

对齐图像和文本

<img>标签是一个内联元素，因此你可以将其插入到段落或类似的块元素中，并且它将与内容的其他部分一起流动。默认情况下，图像的底部边缘与当前行的基线对齐，但你可以通过使用vertical-align属性来控制这种垂直对齐：

*element* {
    vertical-align: baseline | bottom | middle | top;
}

baseline—图像的底部与当前行的基线对齐（默认）。
bottom—图像的底部与当前行的底部对齐（即下降字母（如 y 和 g）的最底部延伸）。
middle—图像的中间与当前行的基线对齐，加上当前字体 x 高度的一半。
top—图像的顶部与当前行的顶部对齐。

以下示例展示了vertical-align属性的应用。

示例

在线：wdpg.io/6-1-10

本例展示了如何使用vertical-align属性将图像垂直对齐到周围内容。

网页

HTML

<div>
    <img src="/images/animalpath.jpg" 
 style="vertical-align: baseline"> Animal path    ① 
</div>
<div>
    <img src="/images/bridleway.jpg" 
 style="vertical-align: bottom"> Bridleway    ② 
</div>
<div>
    <img src="/images/coffintrail.jpg"
 style="vertical-align: middle"> Coffin trail    ③ 
</div>
<div>
    <img src="/images/desireline.jpg"
 style="vertical-align: top"> Desire line    ④ 
</div>

① 应用baseline对齐

② 应用bottom对齐

③ 应用middle对齐

④ 应用top对齐

精通

如果你需要更精细地控制图像的垂直位置，你可以为vertical-align属性指定一个长度值，单位为像素（px）。要移动图像向上，请指定一个负值。

第 6.2 课：处理背景图像

涵盖：background-image和相关属性

在线：wdpg.io/6-2-0

为了给一个元素添加一些视觉兴趣，你可以使用background-image属性来指定用作背景的图像文件：

*element* {
    background-image: url(*file*);
}

*file*值指定图像文件的位置。如果文件位于远程服务器上，请使用文件的完整 URL；如果文件与 HTML 文件在同一目录下，请使用文件名；否则，使用图像的路径和文件名。

以下示例展示了该属性的实际应用。

示例

在线：wdpg.io/6-2-1

本例展示了如何使用background-image属性将图像应用于元素的背景。

网页

CSS

div {
 background-image: url(/images/bg.png);    ① 
    width: 500px;
    height: 200px;
}

① div 元素获得一个背景图像。

HTML

<img src="/images/bg.png">    ② 
<div>
    <h1>Tiling</h1>
    <p>When you add a background image, the browser doesn’t just add the image once and move on to the next task. Instead, it takes the image and repeats it until it fills the entire parent block element, a process known as <i>tiling</i>.
    </p>
</div>

② 图像单独显示以进行比较。

小心

背景图像可以为页面添加一些视觉上的吸引力，但如果它干扰了页面文本的可读性，就会留下苦涩的印象。始终确保文本和背景之间有足够的对比度。

当处理背景图像时，您应该假设由于某些原因图像可能无法正确加载。因此，始终指定与图像主色相匹配的 background-color 属性值是一个好主意。以下是一个示例：

div {
    background-color: #fec72f;
    background-image: url(/images/bg.png);
}

控制背景重复

在前面的示例中，您可以看到，对于小于元素的背景图像，浏览器默认的行为是水平垂直重复图像，直到元素被填满。这种行为被称为背景图像的平铺，通常是您想要的默认行为。然而，您可以通过使用 background-repeat 属性来控制背景图像是否水平、垂直重复或不重复：

*element* {
    background-image: url(*file*);
    background-repeat: repeat | repeat-x | repeat-y | no-repeat;
}

repeat—水平垂直平铺图像（默认）
repeat-x—如图 6.2 所示，只水平平铺图像
repeat-y—如图 6.3 所示，只垂直平铺图像
no-repeat—只显示一次图像

记住

repeat 值是默认值，因此声明 background-repeat: repeat 是可选的。

游戏

您可以在 Web 设计沙盒中交互式地尝试所有 background-repeat 值。在线：wdpg.io/6-2-2

图 6.2 使用 background-repeat: repeat-x，背景图像在水平方向上重复。

图 6.3 使用 background-repeat: repeat-y，背景图像在垂直方向上重复。

设置背景位置

默认情况下，背景图像平铺从父元素的左上角开始。您可以通过应用 background-position 属性来更改此设置：

*element* {
    background-image: url(*file*);
    background-position: *horizontal* *vertical*;
}

horizontal—指定背景图像平铺的起始水平位置。您可以使用关键词 left、center 或 right；百分比；或像素值。
vertical—指定背景图像平铺的起始垂直位置。您可以使用关键词 top、center 或 bottom；百分比；或像素值。

记住

left top 值是默认值，因此声明 background-position: left top 是可选的。请注意，此值等同于 background-position: 0px 0px 或 background-position: 0% 0%。

游戏

您可以在 Web 设计沙盒中交互式地尝试所有 background-position 关键词。在线：wdpg.io/6-2-3

图 6.4 是一个组合图，展示了当你使用三个水平关键字（left、center和right）和三个垂直关键字（top、center和bottom）时，九种可能的定位方式。请注意，在每种情况下，我都将background-repeat属性设置为no-repeat。

图 6.4 background-position属性的九种可能的基于关键字的定位方式

播放

另一种将图片用作自定义项目符号的方法是将图片设置为li元素的背景，这使你可以使用background-position来控制项目符号和项目文本的对齐方式。在线：wdpg.io/6-2-4

添加英雄图片

过去几年中最受欢迎的网页设计趋势之一是英雄图片：一张引人注目的照片或插图，当你首次进入页面时，它将占据整个浏览器窗口的宽度（以及通常整个高度）。使用英雄图片是立即吸引访客注意力的好方法。

要设置英雄图片，你需要做以下事情：

以一个块级元素（如div）开始页面，该元素被设置为占据整个浏览器窗口：
```
width: 100vw;
height: 100vh;
```
记住

vw和vh单位分别代表浏览器窗口宽度和高度的百分之一。有关这些单位的更多信息，请参阅第七章。
对于相同的块级元素，添加一个背景图片并将其位置设置为background-position: center center。
添加声明background-size: cover，这告诉浏览器调整图片大小，使其覆盖块级元素的整个背景。

以下是一个示例。

示例

在线：wdpg.io/6-2-5

这个示例展示了如何向页面添加英雄图片。

网页

CSS

.hero-image {
 width: 100vw;    ① 
 height: 100vh;    ① 
 background-image: url(/images/toronto.jpg);    ② 
 background-position: center center;    ② 
 background-size: cover;    ③ 
}

① 元素大小与浏览器窗口相同

② 图片显示并居中。

③ 图片覆盖整个元素。

HTML

<div class="hero-image">    ④ 
    <h1>Welcome!</h1>
    <h2>Are you ready to see Toronto in an entirely new way?</h2>
</div>
<div class="main">
    The main page content goes here.
</div>

④ 英雄图片的块级元素

小心

如果你计划在你的英雄图片上叠加文字，确保图片包含一个不太繁忙的区域，这样你的文字才会易于阅读。同时，确保你的图片和文字颜色之间有足够的对比度。

播放

通过添加声明background-attachment: fixed，你可以使背景在滚动页面其他部分时保持位置不变。在线：wdpg.io/6-2-6

播放

背景图片最令人惊讶的方面之一是，你可以在同一个元素上使用多个背景。你可以在两个或更多地方重复相同的背景图片，或者使用两个或更多背景图片（或者两者都使用！）在线：wdpg.io/6-2-7

背景简写属性

CSS 有五个主要的背景相关组件：颜色、图像、重复、附件和位置。这些组件分别由 CSS 属性background-color、background-image、background-repeat、background-attachment和background-position表示。方便的是，你可以通过使用background简写属性来应用这些属性中的任何一个或所有，该属性采用图 6.5 中显示的语法。

图 6.5 你可以通过使用background属性同时应用多达五个背景属性。

这种语法是对你迄今为止所学内容的直接重复，你可以自由地以你喜欢的任何顺序输入属性。

优化图像

在网页设计领域有一个常见的说法：“网络上的颜色是免费的。”这句话的意思是，你可以添加颜色到文本、背景、边框和其他元素，而无需支付性能代价。然而，对于图像来说，情况显然不是这样，因为它们有可能非常大（尤其是我之前提到的那些英雄图像），这确实会带来很高的性能成本。为了确保你的页面不是带宽消耗者，加载时间过长，以下是一些优化你使用的图像时需要记住的技巧：

不要使用不必要的图像。 在将图像添加到页面之前，问问自己这个图像是否需要传达你的信息。如果是，那就这么做。如果不是，就放弃它。你的用户会感谢你的。
注意你的图像大小。 网络浏览器可以根据需要调整图像大小，但它们不应该这样做。如果你想在上左角放置一个 100x100 的标志，不要上传一个 2048x2048 版本的图像并强迫浏览器调整大小（比如，在 CSS 中指定较小的宽度和高度）。更大的文件将需要很长时间才能下载，这是带宽的浪费。
明智地选择文件格式。 一般规则是，你应该使用在保持对当前任务满意的质量水平的同时产生最小文件大小的图像文件格式。英雄图像应该看起来不错，但一个小缩略图不需要是高分辨率的。
利用 JPEG 压缩。 如果你以 JPEG 格式保存图像，你的图像软件允许你为文件选择一个压缩级别。你可能需要做一些实验来找到正确的级别，但对于大多数用途，60 到 75%的压缩级别是一个好的起点。更多的压缩通常会导致图像质量下降，而较少的压缩通常会导致文件大小过大。
优化 PNG 图像。 当你处理 PNG 图像时，决定你是否可以满足于 8 位颜色，这仅仅是 256 种颜色。对于简单的标志或图标，8 位颜色可能已经足够，你最终会得到一个非常小的文件。对于更复杂的图像，你可能需要完整的 24 位调色板。

学习

如果你需要使用 24 位 PNG 文件，有软件工具可以帮助减小这些文件的大小。如果你使用 Mac，尝试 ImageAlpha (pngmini.com)；如果你使用 Windows，可以查看 PNGoo (pngquant.org)。

在页面中添加视频和音频

你知道人们喜欢他们的猫咪视频和播客，所以你想要分一杯羹，在你的网页中添加视频或音频内容。这是个好主意！我将从好消息开始：HTML5 自带<video>和<audio>标签，它们提供了一种相对直接的方法将媒体内容嵌入到页面中。注意，我说的是“相对直接”。为什么我要打这个擦边球？啊，那就是坏消息复杂化的地方。目前，网络媒体是一个由标准、压缩算法和文件格式组成的疯狂拼布。这几乎荒谬至极，但如果你想要为你的访客提供视觉或听觉体验，你就需要深入其中。

我将首先定义网络媒体格式的两个方面：

容器 —称为“容器”的文件格式，因为它类似于媒体的压缩文件——也就是说，它是一个包含多个项目的存档，特别是媒体编解码器（将在下文中讨论）和媒体元数据。
编解码器 —用于在数字格式中对视频或音频进行编码和压缩，以及解码和压缩媒体以进行播放的算法。（编解码器一词是code/decode和compress/decompress的混合。）

因此，你嵌入网页中的网络媒体文件采用特定的媒体格式，该格式使用特定的容器，而在这个容器中包含了该格式支持的所有编解码器。听起来很简单，对吧？然而，当你了解到没有标准或通用的媒体格式时，这种荒谬性就显现出来了。

网络视频格式

对于视频来说，实际上你需要关注的三大格式是：

WebM —这种格式使用 WebM 容器，其中包含 VP8 或 VP9 视频编解码器，以及 Vorbis 或 Opus 音频编解码器。这种格式是开源的，且无版税。文件扩展名：.webm。
Ogg —这种格式使用 Ogg 容器，其中包含 Theora 视频编解码器和 Vorbis 或 Opus 音频编解码器。这种格式是开源的，且无版税。文件扩展名：.ogg或.ogv。
MPEG-4 —这种格式使用 MPEG-4 容器，其中包含 H.264 视频编解码器和 AAC 音频编解码器。这种格式是受专利保护的，但对最终用户是免费的。文件扩展名：.mp4。

学习

有许多工具可以将视频转换为 HTML5 支持的格式。两个值得检查的在线工具是 Zamzar (www.zamzar.com) 和 Online-Convert (www.online-convert.com/)。

你应该使用哪一个？大多数情况下，你可以使用 MPEG-4 格式，因为所有主流浏览器都支持它。然而，这种支持有点问题。首先，Firefox 不原生支持 MPEG-4；相反，它依赖于操作系统内置的 MPEG-4 支持。其次，谷歌暗示它可能不会在未来版本的 Chrome 中支持 MPEG-4。同时提供 MPEG-4 版本和 WebM 版本（比 Ogg 更新且支持更好）是个好主意。

网络音频格式

对于音频，还有更多格式：

MP3 —此格式既是容器也是音频编解码器。此格式受专利保护，但对最终用户免费。文件扩展名：.mp3。
WAV —此格式既是容器也是音频编解码器。文件扩展名：.wav。
WebM —此格式使用 WebM 容器，其中包含 Vorbis 或 Opus 音频编解码器。此格式是开源且无版税的。文件扩展名：.webm。
Ogg —此格式使用 Ogg 容器，其中包含 Vorbis 或 Opus 音频编解码器。此格式是开源且无版税的。文件扩展名：.ogg或.oga。
MPEG-4 —此格式使用 MPEG-4 容器，其中包含 AAC 音频编解码器。此格式受专利保护，但对最终用户免费。文件扩展名：.m4a。

学习

我之前提到的两个在线工具也支持 HTML5 网络音频格式。你可能还想看看 media.io (media.io)。

在音频领域，情况要理智一些，因为现在所有浏览器都支持 MP3 格式，所以你可以使用单一文件类型。

第 6.3 课：在网页中嵌入视频

覆盖内容：video元素

在线：wdpg.io/6-3-0

HTML5 的video元素提供了一种简单直接的方法将视频内容嵌入到你的网页中。好吧，简单直接可能是一种愿望。你可以使用两种语法，具体取决于你想要提供多少种视频文件格式。

首先，如果你提供单个视频格式，请使用以下语法：

<video src="*file*" 
       poster="*file*" 
       width="*value*"
       height="*value*"
       controls
       autoplay
       loop>
</video>

src—指定视频文件的位置，所以它与<img>标签的src属性非常相似
poster—指定在视频播放开始前显示的图像位置，例如视频的标题帧或静态帧
width和height—指定视频播放窗口的尺寸
controls—当包含时，告诉浏览器在视频窗口中显示播放控制
autoplay—当包含时，告诉浏览器一旦下载了足够的视频文件，就自动开始播放视频
loop—当包含时，告诉浏览器每次视频结束时从开头开始播放

下面是一个示例。

示例

在线：wdpg.io/6-3-1

此示例展示了如何在网页中嵌入单个视频文件格式。

网页

HTML

<video src="/videos/movie.mp4"
       poster="/images/movie-poster.jpg"
       width="625"
       height="480"
       controls
       autoplay
       loop>
</video>

要提供两种或多种视频格式，您需要从<video>标签中移除src属性，并用多个source元素替换，每个元素对应您想要提供的格式：

<video poster="*file*" 
       width="*value*"
       height="*value*"
       controls
       autoplay
       loop>
    <source src="*file*"
            type=*'type*; codecs="*codecs*"'>
</video>

src—与之前相同，每个<source>标签的src属性指定视频文件的名称和/或位置。
type—这个字符串（用单引号包围）指定视频格式类型（如本章前面的“Web 视频格式”部分所示），是一个由逗号分隔并用双引号包围的视频和音频编解码器的列表：

MPEG-4 —使用以下格式：

type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'

WebM —使用以下之一：

type='video/webm; codecs="vp8, vorbis"'
type='video/webm; codecs="vp9, vorbis"'
type='video/webm; codecs="vp9, opus"'

Ogg —使用以下之一：

type='video/ogg; codecs="theora, vorbis"'
type='video/ogg; codecs="theora, opus"'

这里有一个示例。

示例

在线：wdpg.io/6-3-2

本示例向您展示如何在网页中嵌入多种视频文件格式。

网页

HTML

<video poster="/images/movie-poster.jpg"
       width="625"
       height="480"
       controls
       autoplay
       loop>
    <source src="/videos/movie.mp4"
            type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
    <source src="/videos/movie.webm"
            type='video/webm; codecs="vp8, vorbis"'>
    <source src="/videos/movie.ogv"
            type='video/ogg; codecs="theora, vorbis"'>
</video>

第 6.4 课：在网页中嵌入音频

涵盖：audio元素

在线：wdpg.io/6-4-0

您会很高兴地听到，在网页中嵌入音频几乎与嵌入视频相同，因为<audio>和<video>标签具有许多相同的属性。

首先，如果您提供单一音频格式，可以使用以下语法：

<audio src="*file*" 
       controls
       autoplay
       loop>
</video>

src—指定音频文件的位置
controls—当包含时，告诉浏览器在音频窗口中显示播放控件
autoplay—当包含时，告诉浏览器一旦下载了足够的音频文件，就自动开始播放音频
loop—当包含时，告诉浏览器每次音频播放结束时从开头开始播放

下面是一个示例。

示例

在线：wdpg.io/6-4-1

本示例向您展示如何在网页中嵌入单一音频文件格式。

网页

HTML

<audio src="/audio/music.mp3"
       controls
       autoplay
       loop>
</audio>

要提供两种或多种音频格式，请从<audio>标签中移除src属性，并用多个<source>标签替换，每个标签对应您想要提供的格式：

<audio controls
       autoplay
       loop>
    <source src="*file*"
            type="*type*">
</audio>

src—与之前相同，每个<source>标签的src属性指定音频文件的名称和/或位置
type—指定音频格式类型（如前文“Web 音频格式”部分所示）

这里有一个示例。

示例

在线：wdpg.io/6-4-2

本示例向您展示如何在网页中嵌入多种音频文件格式。

网页

HTML

<audio controls
       autoplay
       loop>
    <source src="/audio/music.mp3"
            type="audio/mp3">
    <source src="/audio/music.wav"
            type="audio/wav">
    <source src="/audio/music.webm"
            type="audio/webm">
    <source src="/audio/music.ogg"
            type="audio/ogg">
    <source src="/audio/music.m4a"
            type="audio/mp4">
</audio>

概述

主要的图像格式类型有四种——GIF、JPEG、PNG 和 SVG——尽管大多数网页将使用 JPEG 处理照片和复杂图像，而 PNG 则用于使用大量纯色和/或透明度的插图、标志和图标。

要在页面上添加图像，请使用<img>标签：

<img src="*file*" alt="*description*" title="*tooltip*">

要在您的图像中注入 HTML5 语义风格，请将img元素包裹在figure元素中，并可选地添加一个figcaption元素。
要使图像同时作为链接使用，请将img元素包裹在a元素中。
您可以通过向元素的 CSS 中添加以下属性来将图像设置为元素背景：
```
background-image: url(*file*);
```
您可以通过添加以下一个或多个属性来控制背景图像的显示：background-repeat、background-position和background-attachment。
您可以通过使用background简写属性来设置这三个属性，以及background-color和background-image属性。
您可以通过使用<video>标签将视频嵌入到网页中，并通过使用<audio>标签将声音嵌入到网页中。
对于<video>标签和<audio>标签，您可以通过为每个格式添加一个单独的<source>标签来指定多个格式。

第七章学习更多关于样式的内容

样式是一种无需说话就能表达自己的方式。——Rachel Zoe

本章涵盖

学习在网页上添加样式的三种方法
使用类添加功能和灵活性
了解您可以在 CSS 中使用哪些度量单位

如何制作出类别的页面？如何设计超越陈词滥调的页面？一个词：样式。如果您看到过一个您认为设计得很好的网页，知道该页面使用了样式来实现那种外观。如果有一个您钦佩的网页设计师，知道这位设计师掌握了使她的作品脱颖而出的样式。您在本书的第一部分中看到了几个有用的样式，但这些样式只是冰山一角。为了帮助您开始走向真正精通样式的道路，本章将您的样式知识提升到下一个层次。

向页面添加样式

我在第一章中提到，网页是一个充满文字、数字和少量战略性放置的 HTML 标签的文本文件，这些标签为文本提供结构。您会很高兴地听到，CSS 也是一个基于文本的业务，因此您不需要比一个简单的文本编辑器（或本书的便捷 Web 设计游乐场）更高级的工具来开始使用样式。

记住

样式是一种指示浏览器如何修改页面上的显示方式的指令，样式表（CSS 中的SS部分）是一系列样式的集合。因此，在这本书中，我使用CSS和样式这两个术语可以互换使用。

话虽如此，尽管样式包含的内容足够简单，但如何将样式添加到网页上要复杂一些。首先，回想一下第一章的内容，一个单独的样式声明由一个属性-值对组成，该对使用图 7.1 中显示的语法。

图 7.1 属性-值对的语法

常见问题解答

我需要在冒号后添加空格吗？严格来说，不需要，空格不是必需的。然而，我仍然建议添加空格，因为它可以使您的样式更易读。

属性名几乎总是用小写字母书写（尽管不一定要这样）。如果值包含一个或多个空格、数字或除破折号（-）之外的标点符号，请用引号将值括起来。

CSS 的附加复杂性源于您有不止一种、不止两种，而是三种方式来告诉浏览器您想使用哪些样式声明：

内联样式
内部样式
外部样式

接下来的三个课程将向您介绍这些方法。

第 7.1 课：插入内联样式

包括：<style>属性

在线：wdpg.io/7-1-0

向你的网页添加样式最直接的方法是将它们直接插入你想要修改的元素中。这种技术称为行内样式，你通过在想要更改的 HTML 元素中包含 style 属性来插入样式。图 7.2 展示了要使用的一般语法。

图 7.2 使用行内样式的语法

当你使用行内样式时，以下是一些需要注意的要点：

如果你想在单个行内样式中包含两个或多个属性值对，请确保用分号（;）分隔每个对。
如果需要引用一个值，请使用单引号（'）。
行内样式仅影响你放置 style 属性的元素。

谨慎

由于 style 属性的值本身被双引号包围，如果你的属性值对需要自己的引号，请小心。在这种情况下，请用单引号包围值（例如，style="font-family: 'PT Sans';"）。

使用它

行内样式的良好用途是快速测试 CSS 属性或两个。如果你刚开始制作页面，还没有设置外部样式表（见第 7.3 课），行内样式是快速测试一些 CSS 的好方法。

以下是一些行内样式的示例。

示例

在线：wdpg.io/7-1-1

此示例展示了应用于 <p> 标签的行内样式，以及应用于 <ul> 标签的具有多个属性值对的行内样式。

网页

HTML

<p style="font-size: 1.5em"> The <i>snowclone</i> is a kind of <i>phrasal template</i> since it comes with one or more empty "slots" that get filled with words to create a new phrase. Some examples:</p>    ①  
<ul style="color: darkgreen; font-family: 'Trebuchet MS', sans-serif; font-size: 1.25em;">    ②  
    <li>I'm not an X, but I play one on TV</li>
    <li>In X, no one can hear you Y</li>
    <li>X and Y and Z, oh my!</li>
</ul>

① p 元素的行内样式设置了字体大小。

② ul 元素的行内样式设置了文本颜色、字体和大小。

播放

你能否在以下 <a> 标签中找到 style 属性的错误？<a href="https://www.w3.org/TR/css-style-attr/" style="color: indianred; font-weight: bold, text-decoration: none;"> 在线：wdpg.io/7-1-3

虽然行内样式是向页面添加 CSS 代码的最简单方法，但除了最简单的页面之外，它们并不是最方便的方法，因为它们要求你直接将 style 属性添加到每个需要样式的元素上。如果你的页面由，比如说，十几个 h2 元素组成，并且你想要将相同的样式应用到它们上面，你必须添加十个 style 属性。更糟糕的是，如果你后来决定更改 h2 元素的显示方式，你必须更改 style 值的每个实例。这是一项大量工作，所以大多数网页设计师避免使用行内样式，或者只用于特定实例。

这些设计师会做什么呢？啊，这就是内部样式发挥作用的地方。

第 7.2 课：添加内部样式表

覆盖内容：style 元素

在线：wdpg.io/7-2-0

将样式添加到网页的第二种方法是在页面的头部部分（即在页面的<head>和</head>标签之间）添加一个<style></style>标签对，然后在那些标签内定义样式。这种方法被称为内部样式表（有时也称为嵌入式样式表），它使用以下通用语法：

<style> 
 *selectorA* {    ② 
 *propertyA1*: *valueA1*;    ① 
 *propertyA2*: *valueA2*;    ① 
 ...    ③ 
 }    ② 
 *selectorB* {    ④ 
 *propertyB1*: *valueB1*;    ④ 
 *propertyB2*: *valueB2*;    ④ 
 ...    ④ 
 }    ④ 
    ...
</style>

① 一个或多个声明

② 声明被括号包围。

③ 要样式的网页元素

④ 一个样式规则

从这个语法中，你可以看到内部样式表由一个或多个样式规则组成，每个规则定义了一个或多个要应用到指定网页元素上的属性-值对。每个规则具有以下特征：

一个选择器，用于指定你想要应用样式的网页元素。这个选择器通常是一个标签名，但它也可以指定任何其他类型的 CSS 选择器（例如第 7.4 课中描述的类选择器）。
一个开头的左大括号：{。
一个或多个属性-值对，由分号分隔。
一个关闭的右大括号：}。

在 CSS 术语中，属性-值对被称为声明，应用于选择器的声明集合——即大括号及其之间的属性-值对——被称为声明块。选择器和其声明块的组合称为样式规则。

以下示例使用内部样式表来格式化dt元素。

示例

在线:wdpg.io/7-2-1

这个示例使用内部样式表为每个<dt>标签应用字体大小和粗体。

网页

CSS

<style>
    dt {
 font-size: 18px;    ① 
 font-weight: bold;    ① 
 }    ① 
</style>

① dt元素的 CSS 规则

HTML

<p>Some CSS jargon to commit to memory:</p>
<dl>
 <dt>Gaffer</dt>    ② 
    <dd>The head electrician.</dd>
 <dt>Best Boy</dt>    ② 
    <dd>The gaffer's assistant.</dd>
 <dt>Grip</dt>    ② 
    <dd>A person who moves equipment.</dd>
</dl>

② <dt>标签和文本

主

声明块可能会相当长，其中一些包含十多个或更多的属性-值对。使阅读和使用这些大块更容易的一种方法是将声明按属性名称的字母顺序添加。

在这里，你可以看到使用内部样式的一个巨大优势。如果你的页面有十几个dt元素，这个样式将应用到它们所有，这给了页面一个一致的外观。更好的是，如果你认为20px的大小对于你的dt文本看起来会更好，你只需在样式声明中更改一次值；这个更改会自动反映在所有的dt元素中。

如果你的网站只包含一个网页，内部样式表工作得非常好。这样的网站并不罕见，但你的或你的客户的网站更有可能包含几个页面，甚至可能多达几十个。如果你想让你的页面保持一致的外观——你应该这样做，因为页面之间的一致性是良好网页设计的标志之一——使用内部样式表意味着将相同的<style>标签复制到每个页面上。此外，如果你更改了任何样式规则的任何方面，你必须对每个页面上相同的规则进行相同的更改。

你的网站越大，所有这些维护听起来就越不吸引人，你更有可能转向外部样式表。

第 7.3 课：引用外部样式表

涵盖：link元素

在线：wdpg.io/7-3-0

在页面上添加样式的第三种和最后一种方法涉及创建一个用于定义你的样式规则的第二个文本文件。这种方法称为外部样式表，并且按照传统，它的文件名使用.css扩展名（如styles.css）。在该文件中，你使用与之前内部样式表相同的语法，但不需要style元素：

*selectorA* {    ①    ②  
 *propertyA1*: *valueA1*;    ③ 
 *propertyA2*: *valueA2*;    ③ 
 ...    ③ 
}    ② 
*selectorB* {    ④ 
 *propertyB1*: *valueB1*;    ④ 
 *propertyB2*: *valueB2*;    ④ 
 ...    ④ 
}    ④ 
    ...

① 要样式化的网页元素

② 声明被括号包围。

③ 一个或多个声明

④ 一个样式规则

记住

传统上，你将外部样式表文本文件保存为.css扩展名（styles.css）。

为了让网页浏览器知道你有外部样式表，你需要在网页的头部添加一个<link>标签。图 7.3 显示了语法。

图 7.3 将外部样式表附加到网页的<link>标签语法

在这个语法中，*位置*值可能是最棘手的。有四种可能性：

在同一目录中引用 CSS 文件。 省略位置，只引用文件名，如下所示：
```
<link href="styles.css" rel="stylesheet">
```
在网页目录的子目录中引用 CSS 文件。 位置是子目录的名称。例如，如果子目录命名为css，你会使用以下内容：
```
<link href="css/styles.css" rel="stylesheet">
```
在网站主子目录的子目录中引用 CSS 文件。 位置是根目录（/）后跟子目录的名称。例如，如果子目录命名为css，你会使用以下内容：
```
<link href="/css/styles.css" rel="stylesheet">
```
在远程服务器上引用 CSS 文件。 位置是 CSS 文件的完整 URL。以下是一个示例：
```
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
```

记住

与<style>标签一样，你可能看到一些包含type="text/css"属性的 CSS 外部文件<link>标签。这个属性在 HTML 4.01 中是必需的，但在 HTML5 中不需要它。

使用外部样式表为你的网页带来三个主要优势：

这使得在多个页面之间应用一致的外观变得容易得多。 如果你将相同的样式表附加到几个页面上，并且那些 CSS 样式，比如你的h1元素，这些标签在所有页面上看起来将完全相同。
这使得更新和维护你的页面变得容易得多。 如果你对外部样式表中的 CSS 进行了更改，该更改将自动传播到链接到 CSS 文件的每个网页。
它增强了结构和表现之间的分离。 通过使用外部样式表，你将项目分为两个不同的层：一个只包含 HTML 标签的结构层文件和一个只包含 CSS 规则的表现层文件。很好。

这并不是说你应该只使用外部样式表而不是内联样式或内部样式表。你有许多很好的理由去使用style元素，而且你会发现，有些网页设计问题最容易被通过在 HTML 标签中使用style属性来解决。没有必要对 CSS 采取教条式的方法；做对你有用的就好。

第 7.4 课：使用类选择器

覆盖：.``*class*选择器

在线：wdpg.io/7-4-0

之前，你学习了在定义样式规则时，首先指定的是你想要样式的网页对象，然后是声明块：

*selector* {
*property1*: *value1*;
*property2*: *value2*; 
    ...
}

指定的对象被称为选择器，到目前为止，在这本书中，你只看到它被用于标签名，如h1和div。这个选择器被称为类型选择器，因为它针对特定类型的 HTML 元素。

类型选择器很方便，在你的网页设计生涯中，你会经常使用它们，但很快你就会遇到一个难题：当你有多个需要不同样式的相同元素时，你应该怎么做？一个网页可以轻松地有几十个<div>标签，所以如果一个div需要，比如说，右对齐、斜体、浅灰色文本，设置为 20px，而其他div需要居中对齐、粗体、深灰色文本，设置为 24px，那么程序员该怎么办呢？当然，你可以插入所有这些样式作为内联样式，但是当你处理超过六个元素时，这项任务很快就会变得难以控制。

记住

虽然有例外，但为了这本书的目的，你的类名必须以字母开头；名称的其余部分可以包括任何组合的字母、数字、连字符(-)和下划线(_)。参见wdpg.io/7-4-3/。

你可以通过利用许多其他类型的 CSS 选择器来解决这个问题和类似的问题。CSS 的大部分巨大灵活性和力量都来自于这些选择器。我认为我一点也没有夸张，如果你想要成为一个 CSS 大师——或者说（这有点一样）如果你想要让自己成为一个不可抗拒的网页设计师——掌握选择器是通往这个目标的皇家道路。要开始这条道路，请查看可能是最强大的 CSS 选择器：类选择器。

最常见的网页设计场景之一是拥有多个需要相同样式的页面对象。每当你有需要相同样式的元素集时，你可以在单个 HTML 和 CSS 范围内将这些元素分组。在 HTML 中，这个范围以类属性的形式出现，其语法在图 7.3 中显示。

图 7.4 使用类属性为 HTML 元素分配类名。

小心

类名是区分大小写的，这意味着浏览器将myClassName和myclassname视为两个不同的类。

以下代码将类名custom-bullet-text分配给一个<span>标签：

<span class="custom-bullet-text">

这里的关键点——以及使用类所固有的力量来源——在于你可以将相同的类分配给多个元素。当这样做时，你可以通过在 CSS 中使用点（.）作为选择器，在类名前使用类名来定义该类的样式，无论是内部样式表还是外部样式表：

.*class-name* {
*property1*: *value1*;
*property2*: *value2*; 
    ...
}

以下示例展示了如何使用类选择器。

示例

在线：wdpg.io/7-4-1

此示例将类名分配给每个 <span> 标签，然后使用 CSS 类选择器将这些 span 元素的规则应用于它们。

网页

CSS

.custom-bullet-text {    ① 
 color: brown;    ① 
 font-size: 18px;    ① 
 line-height: 1.5;    ① 
}    ①

① custom-bullet-text 类的规则

HTML

<h3>Cube, Dice, or Mince? What's the Diff?</h3>
<ul>
    <li><span class="custom-bullet-text">Chop: To cut into small pieces.</span></li>    ②  
    <li><span class="custom-bullet-text">Cube: To cut into cube-shaped pieces.</span></li>    ②  
    <li><span class="custom-bullet-text">Dice: To cut into small, cube-shaped pieces.</span></li>    ②  
    <li><span class="custom-bullet-text">Mince: To cut into very small pieces.</span></li>    ②  
    <li><span class="custom-bullet-text">Shred: To cut or tear into long, thin irregular strips.</span></li>    ②  
</ul>

② custom-bullet-text 类被分配给每个 span 元素。

主

为什么不将 CSS 应用于此例中的 li 元素？这样的规则也会样式化项目符号。通过将每个列表项包裹在一个 <span> 中，你可以仅样式化文本。

CSS 中的度量单位

许多网页样式需要度量值，包括字体大小、边框宽度和边距大小。到目前为止，在这本书中，我使用了像素（px）来指定度量值，但你也可以使用其他几个单位，这些单位我在表 7.1 中列出。

表 7.1 CSS 属性度量单位

单位	名称	描述
`px`	像素	相对于 1/96 英寸的绝对测量值
`pt`	点	相对于 1/72 英寸的绝对测量值
`em`	em	相对于元素的默认、继承或定义的字体大小
`rem`	根 em	相对于网页根元素的字体大小
`vw`	视口宽度	相对于浏览器窗口当前宽度的 1/100 的相对测量值
`vh`	视口高度	相对于浏览器窗口当前高度的 1/100 的相对测量值

小心

不要将度量单位中的 em 与用于在 HTML 中强调文本的 em 元素混淆。

记住

网页的根元素是 html 元素。此元素自动分配浏览器默认的字体系列大小（通常是 16px）或用户在浏览器首选项中设置的字体大小。

表 7.1 列出了两种类型的单位：绝对和相对。绝对度量具有固定的大小——例如，一个像素就是一个像素——因此你可以确信使用绝对度量的元素始终以一致的方式出现。作为一个设计师，你可能认为这个事实是个好事，但并不总是这样——尤其是在网络上，用户有时会更改浏览器设置中的默认文本大小。作为一个设计师，你的工作应该是尊重这种变化，而不是覆盖它。绝对值不受欢迎，因为它们会覆盖用户设置的字体大小更改，这是设计的大忌。此外，正如你在第十四章中将会看到的，绝对值会使你的页面设计过于僵化，因此在大型和小型屏幕上显示效果不佳。

播放

类比我在这里展示的还要强大，因为你可以通过在 class 属性值中用空格分隔类名来将多个类应用到单个元素上。例如，<span class="red-text big-text"> 代码将 red-text 类和 big-text 类都应用到 span 元素上。在线：wdpg.io/7-4-2

因此，现代网页设计最佳实践通常避免使用绝对单位，而是选择相对单位，通常是 rems 或百分比。相对度量没有固定的大小。相反，它们基于提供给元素的任何大小。这个大小可能来自父元素，或者可能是用户指定的默认值。如果浏览器的默认字体大小是 16px，而你将你的 <p> 字体设置为 1.5rem，你的段落文本将以 24px 渲染。如果用户将默认文本大小增加到 20px，你的段落将以 30px 渲染，从而保持文本的相对大小。此外，相对度量在不同尺寸的设备上都能很好地缩放，所以一个在桌面屏幕上看起来很好的设计也可以调整到在智能手机屏幕上看起来同样好。（再次提醒，第十四章是获取详细信息的地点。）

摘要

内联样式通过使用 style 属性直接添加到标签中。
你通过将你的定义添加到 <style> 标签中来创建内部样式表。
外部样式表作为一个单独的 .css 文件存在，并通过 <link> 标签进行引用。
一个 类选择器 将 CSS 规则应用到使用指定类名的任何元素上。
对于需要测量值的 CSS 属性，请使用以下单位之一：px、pt、em、rem、vw 或 vh。

第八章浮动和定位元素

浮动属性是任何使用 HTML 和 CSS 的网页设计师/开发者宝贵的强大工具。 ——Noah Stokes

本章涵盖

学习元素如何在页面上下流动
通过浮动元素中断正常流程
使用浮动创建首字下沉和引文
通过定位元素中断正常流程

如果浏览器自行决定，它会对你的网页施加一个不可变的结构，你的网站可能会变得无聊（至少从设计角度来看）。为了避免这种情况，你需要掌握你的页面元素，并摆脱浏览器关于如何布局的固定想法。你可以通过运用网页设计师工具箱中最强大的两个 CSS 工具来实现这一点：浮动和定位。有了这些工具，你可以打破浏览器的默认元素流程，构建有趣、富有创意的页面，人们会迫不及待地想要访问。本章将告诉你需要知道的一切。

理解默认页面流程

当你向网页添加元素时，浏览器会根据以下规则按照它们在 HTML 文件中出现的顺序来布局这些元素：

块级元素垂直堆叠，第一个元素在最上面，第二个元素在它下面，以此类推。
每个内联元素都在其父块级元素内从左到右（在英语和其他从左到右的语言中）渲染。

图 8.1 展示了几个块级元素的示意图，按照浏览器渲染的方式堆叠。图 8.2 展示了添加了内联元素的相应网页。

图 8.1 浏览器将块级元素一个堆叠在另一个上面。

图 8.2 来自图 8.1 的块级元素，填充了内联元素

第 8.1 课：浮动元素

涵盖：float属性

在线：wdpg.io/8-1-0

你可以通过将一个或多个元素浮动到左侧或右侧来中断元素的上下流程。浮动意味着浏览器将元素从常规流程中取出，并将其放置在其父元素中尽可能远的左侧或右侧（取决于你提供的值），尽可能高（取决于其他内容）。然后，页面的其余内容围绕浮动元素流动。

你可以通过设置其float属性来浮动一个元素：

*element* {
    float: left|right|none;
}

精通

由于附近的非浮动页面元素围绕浮动元素包裹，你应该通过在浮动元素周围添加边距来确保它们之间有足够的空白。

记住

与非浮动元素不同，浮动元素的上下边距不会合并。参见第九章了解关于边距合并的更多信息。

例如，在图 8.2 中，如果目录可以被推到右边，而引用围绕它流动，页面看起来会更好，空间利用也会更合理。这可以通过float属性轻松实现，如下例所示。

示例

在线：wdpg.io/8-1-1

此示例使用float属性将目录浮动到右边。

网页

CSS

.toc {
 float: right;    ① 
    margin-left: 2em;
    margin-bottom: 2em;
    etc.
}

① 应用于toc类的float属性

HTML

<h1>Using Colors Effectively</h1>
<div class="toc">    ② 
    <h3>Table of Contents</h3>
    <div>Color Psychology</div>
    <div>Color Schemes</div>
    <div>Color Caveats</div>
    <div>A Few Examples</div>
    <div>Best Practices</div>
    <div>CSS and Color</div>
    <div>Color Resources</div>
</div>
<p class="quotation">
“There are only 3 colors, 10 digits, and 7 notes; its what we do with them that's important.” —Jim Rohn
</p>
etc.

② 这个<div>标签使用了toc类。

常见问题解答

我能否只浮动块级元素？ 不，你还可以将float属性应用于内联元素，例如span。但是，当你这样做的时候，浏览器会将该元素从正常流程中移除，将其转换为块级元素，然后再进行浮动。

谨慎

如果你浮动一个内联元素，务必给它一个宽度，这样浏览器就知道为该元素分配多少空间。

播放

你可以浮动多个元素。在线：wdpg.io/8-1-3

清除浮动元素

在前面的示例中，请注意，不仅三个引用围绕了浮动的目录；第一个h2元素（“色彩心理学”）及其后的部分段落也是如此。这种行为通常是您想要的。但如果是出于美学或其他原因，您更希望h2元素及其文本不围绕目录折叠？

你可以通过告诉浏览器你希望h2元素清除浮动元素来实现这一点。清除浮动元素意味着浏览器在浮动元素之后渲染该元素。你通过设置其clear属性来清除元素：

*element* {
    clear: left|right|both|none;
}

你使用left来清除*元素*中任何已经左浮的元素，使用right来清除*元素*中任何已经右浮的元素，或者使用both来清除*元素*中左右浮动的元素。为了清除示例中的h2元素，我会使用以下代码：

h2 {
    clear: right;
}

图 8.3 显示了现在清除浮动目录的h2（色彩心理学）页面。

图 8.3 现在色彩心理学的h2元素清除浮动目录。

防止容器塌陷

浮动元素有几个需要注意的问题。最大的问题是，在特定情况下，一个浮动的元素可能会溢出或直接从其父容器中掉落。为了理解我的意思，请看以下代码（见图 8.4），它有两个<p>标签在一个带有浅蓝色背景和红色边框的<div>容器中：

CSS:

div {
    border: 1px solid red;
    background-color: lightcyan;
}

HTML:

<div>
    <p>
        If you float two consecutive elements, the second floated element will always appear either beside the first floated element or below it.
    </p>
    <p>
        For example, if you float the elements left, the second will appear to the right of the first. If there isn’t enough room to the right, it will appear below the first element.
    </p>
</div>

图 8.4 <div>容器内的两个<p>元素

图 8.5 显示了当我使用宽度并左浮动<p>标签时的结果：

CSS:

.col {
    float: left;
    width: 300px;
}

HTML:

<p class="col">

图 8.5 当我浮动<p>元素时，<div>容器会自己收缩。

奇怪的是，<div>容器几乎消失了！顶部的那条红线就是它留下的全部。发生了什么？当我浮动<p>元素时，浏览器将它们从页面的正常流程中移除。<div>容器看到它不再包含任何内容，因此它自己收缩了。这种情况总是发生在父元素只包含浮动子元素时。

为了解决这个问题，你可以告诉父元素清除它自己的子元素，从而防止它收缩。图 8.6 显示了一个执行此操作的类。

图 8.6 一个允许父元素清除其自己的子元素的类

记住

这种解决方案有时被称为clearfix技巧。

精通

一些网页开发者更喜欢使用更语义化的类名，例如group。

这个类告诉浏览器插入一个空字符串，将其渲染为块级元素，并使其清除左右浮动的元素。以下示例显示了修复的效果和完整代码。

示例

在线：wdpg.io/8-1-5

这个示例通过告诉父元素清除它自己的浮动子元素来修复收缩父元素的问题。

网页

CSS

div {    ① 
 border: 1px solid red;    ① 
    background-color: lightcyan;
 width: 675px;    ① 
}    ① 
.col {    ② 
 float: left;    ② 
 width: 300px;    ② 
}    ② 
.self-clear::after {    ③ 
 content: "";    ③ 
 display: block;    ③ 
 clear: both;    ③ 
}    ③

① 这个规则样式化div元素。

② 这个类为元素添加宽度并将其浮动。

③ 这个类防止父元素收缩。

HTML

<div class="self-clear">
<p class="col">
If you float two consecutive elements, the second floated element will always appear either beside the first floated element or below it.
</p>
<p class="col">
For example, if you float the elements left, the second will appear to the right of the first. If there isn’t enough room to the right, it will appear below the first element.
</p>
</div>

浮动下沉首字母

浮动有许多用途，但其中我最喜欢的是创建一个下沉首字母，这是一个段落的大写首字母，位于基线以下，并“下沉”几行到段落中。技巧是使用::first-letter伪元素选择开头的字母，并将其浮动到段落的左侧。然后你通过调整字体大小、行高和填充来得到你想要的效果，如下面的示例所示。

示例

在线：wdpg.io/8-1-6

这个示例使用float和::first-letter伪元素来创建下沉首字母。

网页

CSS

.first-paragraph::first-letter {    ① 
 float: left;    ② 
 padding-top: .1em;    ③ 
 padding-right: .1em;    ③ 
 color: darkred;    ③ 
 font-size: 5em;    ③ 
 line-height: .6em;    ③ 
}

① 1. 选择第一个字母。

② 2. 向左浮动。

③ 3. 根据个人喜好进行样式设计。

HTML

<p class="first-paragraph">
Starting an article doesn’t have to be boring! Get your text off to a great beginning by rocking the opening paragraph with a giant first letter. You can use either a <i>raised cap</i> (also called a <i>stick-up cap</i> or simply an <i>initial</i>) that sits on the baseline, or you can use a <i>drop cap</i> that sits below the baseline and nestles into the text.
</p>

精通

如果你更喜欢凸起的首字母而不是下沉的首字母，你可以修改示例代码以适应这种偏好。你需要移除float声明以及padding-top和padding-right声明。

浮动引言引用

浮动元素的一个很棒用途是为文章添加一个引言引用。一个引言引用是从文章中摘取的简短但重要或富有启发性的摘录，它从常规文本中突出显示。一个精心挑选和设计的引言引用可以吸引那些可能不会阅读文章的网站访客。

你可以通过在元素（如span）周围包围摘录的文本，然后浮动该元素（通常向右），来创建引用引语。现在根据需要样式化元素，以确保它与常规文本区分开来：顶部和/或底部边距、不同的字体大小、样式或颜色等。以下是一个示例。

示例

在线：wdpg.io/8-1-7

本例使用浮动来创建引用引语。

网页

CSS

.pullquote {
 float: right;    ① 
 width: 50%;    ② 
 margin: 1.25em 0 1em .25em;    ② 
 padding-top: .5em;    ② 
 border-top: 1px solid black;    ② 
 border-bottom: 1px solid black;    ② 
 font-size: 1.05em;    ② 
 font-style: italic;    ② 
 color: #666;    ② 
}
.pullquote::before {    ③ 
 content: "\0201c";    ③ 
 float: left;    ③ 
 padding: .1em .2em .4em 0;    ③ 
 font-size: 5em;    ③ 
 line-height: .45em;    ③ 
}

① 此代码使元素浮动。

② 此代码为引用引语添加样式。

③ 创建一个可选的大引号。

HTML

<p>
A <i>pull quote</i> is a short excerpt or an important phrase or quotation that has been copied (“pulled”) from a piece of text and displayed as a separate element between or, more often, to one side of the regular text.
<span class="pullquote">    ④ 
It’s the job of the pull quote to entice the would-be reader.    ④ 
</span>    ④ 
It’s important that the pull quote be styled in a way that not only makes it stand apart from the regular text (with, for example, a different font size, style, or color), but also makes it stand out for the reader. After all, it’s the job of the pull quote to entice the would-be reader and create a desire to read the article.
</p>

④ 引用引语元素

尽管存在诸如父元素塌陷等令人挠头的表现，但浮动元素对于将其从默认流中分离出来以实现有趣的布局和效果非常有用。浮动让浏览器做大部分工作，但如果你想要对页面外观有更多的控制，你需要通过指定元素的定位来更多地参与其中。

第 8.2 课：定位元素

涵盖：position属性

在线：wdpg.io/8-2-0

我在本章前面提到，浏览器为页面元素使用的默认布局按照它们在 HTML 文件中出现的顺序渲染元素，堆叠块级元素，并允许内联元素从左到右填充其父块。这个系统很少产生令人信服的布局，因此除了浮动元素之外，你还可以使用另一种技术（即定位一个或多个元素），通过使用 CSS position属性结合一个或多个 CSS 偏移属性来自定义流：

*element* {
    position: static|relative|absolute|fixed;
    top: *measurement*|*percentage*|auto;
    right: *measurement*|*percentage*|auto;
    bottom: *measurement*|*percentage*|auto;
    left: *measurement*|*percentage*|auto;
    z-index: *integer*|auto;
}

对于前四个偏移属性—top、right、bottom和left—你可以使用在第七章中学到的任何 CSS 度量单位，包括px、em、rem、vw和vh。你也可以使用百分比或auto（默认值）。z-index属性设置元素在堆叠上下文中的位置，这定义了当元素重叠时，元素是如何层叠在彼此之上和之下的。z-index值较高的元素会覆盖z-index值较低的元素。

对于position属性，以下是对四种可能性的快速总结：

静态定位—忽略偏移属性（这是浏览器使用的默认定位）
相对定位—将元素相对于其默认位置进行定位，同时保持元素在页面流中的默认位置
绝对定位—将元素放置在最近具有非静态定位的祖先元素中的特定位置，同时从页面流中移除该元素
固定定位—将元素放置在浏览器视口中特定位置，同时从页面流中移除该元素

接下来的几节将更详细地介绍相对、绝对和固定定位。

相对定位

当你相对定位一个元素时，元素的默认位置仍然保持在正常页面流中，但元素会根据你指定的偏移值或值进行偏移：

如果你提供一个 top 值，元素会向下偏移。
如果你提供一个 right 值，元素将从右侧进行偏移。
如果你提供一个 bottom 值，元素将从上方进行偏移。
如果你提供一个 left 值，元素将从左侧进行偏移。

记住

这些偏移假设你为每个属性提供正值。允许使用负值（并且在网页设计领域经常使用）并且会导致相反方向的偏移。例如，负 top 值将元素向上偏移。

浏览器保持元素的默认页面流位置可能会导致一些不寻常的渲染，如下面的示例所示。

示例

在线：wdpg.io/8-2-1

此示例将 span 元素设置为具有 top 偏移的相对定位。

网页

CSS

span {    ① 
 position: relative;    ① 
 top: 3em;    ① 
 border: 2px solid blue;    ① 
}    ①

① 将相对定位和顶部偏移应用于 span 元素

HTML

<div>
Relative positioning shifts an element out of its default position while preserving the element’s original space in the page flow. This can cause page weirdness. For example, if you set the top property, the element <span>shifts down</span>. This leaves a gap where the element would have been, which can look odd.    ②  
</div>

② span 元素

播放

使用相对定位将水印文本添加到段落中。在线：wdpg.io/8-2-2

你可能不会经常直接使用相对定位来布局页面元素，但正如你在下一节中看到的，当你想要准备元素以使用绝对定位时，它非常有用。

绝对定位

当你绝对定位一个元素时，浏览器会做两件事：它将元素从默认页面流中移除，并相对于其最近的非静态（即定位）祖先定位元素。如果你想要正确地使用绝对定位，找出这个祖先至关重要：

向上移动到元素的父元素、祖父元素等。第一个其 position 属性设置为非 static 的元素就是你要找的祖先。
如果找不到这样的祖先，浏览器将使用视口，这意味着元素的绝对位置是相对于浏览器的内容区域设置的。

找到祖先后，浏览器将根据以下方式设置元素的绝对位置：

如果你提供一个 top 值，元素将从祖先的顶部向下移动。
如果你提供一个 right 值，元素将从祖先的右侧向左移动。
如果你提供一个 bottom 值，元素将从祖先的底部向上移动。
如果你提供一个 left 值，元素将从祖先的左侧向右移动。

记住

与相对定位一样，允许使用负值，并将元素定位在相反方向。例如，负 left 值将元素相对于祖先的左侧向左移动。

示例

在线：wdpg.io/8-2-3

此示例将 span 元素和 strong 元素都设置为绝对定位。

网页

CSS

h1, div {
 position: relative;    ① 
    z-index: 2;
}
span {
 position: absolute;    ② 
 top: 0;    ② 
 left: 0;    ② 
    z-index: 1;
    padding: 0.25em 6em 3em 0.25em;
    background-color: yellow;
    color: blue;
}
strong {
 position: absolute;    ② 
 top: 0;    ② 
 left: 0;    ② 
    z-index: -1;
    padding: 0.25em 5em 2.5em 0;
    background-color: orange;
    color: purple;
}

① div 元素是非静态的。

② span 和 strong 元素被绝对定位。

HTML

<h1>
Absolute Positioning
</h1>
<div>
Absolute positioning moves an element from its default position, but doesn’t preserve the its original space in the page flow. The element’s new position is set with respect to the nearest ancestor in the hierarchy that has a non-static position, or the browser window if no such ancestor exists. <strong>Intro</strong>    ③  
</div>
<span>Lesson 8.6</span>    ④

③ strong 元素

④ span 元素

看看它

要查看此示例中浏览器定位元素的动画，请打开 Web 设计游乐场中的示例并点击“看看它”按钮。在线：wdpg.io/8-2-3

精通

此示例还演示了 z-index 属性。h1 和 div 元素已被赋予 z-index 值为 2。span 元素被赋予 z-index 值为 1；因此，它出现在 h1 的后面。strong 元素被赋予 z-index 值为 -1；因此，它出现在 div 的后面。

在此示例中，有两个元素被绝对定位：

span—此元素没有非静态定位的祖先元素，因此它相对于浏览器窗口进行定位。当您将 top 和 left 都设置为 0 时，span 元素移动到窗口的左上角。
strong—此元素嵌套在一个相对定位的 div 元素中。因此，strong 元素的绝对位置相对于 div。在这种情况下，当您将 top 和 left 都设置为 0 时，strong 元素移动到 div 的左上角。

固定定位

我将要考虑的最后一个 position 属性值是 fixed。这个值与 absolute 类似，除了两点：

浏览器始终相对于浏览器窗口计算位置。
元素在浏览器定位后不会移动，即使您滚动页面的其余内容。

如您所想象，这个值对于添加固定在屏幕顶部的导航栏或固定在底部的页脚非常有用。您可以在第十五章中看到后者的一个示例。

常见问题解答

你为什么给 strong 元素的 *z-index** 设置为 -1*？strong 元素是 div 元素的子元素，在 CSS 中，使子元素在堆叠上下文中比其祖先元素显示得更低，唯一的方法是给子元素一个负的 z-index 值。

播放

您可以使用绝对定位为您的链接添加 工具提示（弹出描述）。在线：wdpg.io/8-2-4

摘要

在默认页面流中，块级元素垂直堆叠，内联元素在其父块内从左到右渲染。
要将元素从默认页面流中拉出，将其 float 属性设置为 left 或 right。
要定位一个元素，将其 position 属性设置为 relative、absolute 或 fixed；然后使用 top、right、bottom 和 left 指定新位置。
使用 z-index 属性在堆叠上下文中设置元素的位置，该属性将值较高的元素层叠在值较低的元素之上。

第九章设置大小、边框和边距样式

理解 CSS 盒模型对于使你的设计按预期表现至关重要。—克雷格·坎贝尔

本章涵盖

理解 CSS 盒模型
设置元素的宽度和高度
在元素内容周围添加填充
为元素应用边框
在元素周围添加边距

当你学习设计时，第一个出现的概念之一是邻近性原则：相关项目应彼此靠近，不相关项目应分离。这种做法为设计提供了清晰的视觉组织，使得读者更容易理解和导航设计。邻近性原则也适用于你的网页设计，但有一个问题。如果你坚持使用浏览器的默认样式，你的网页元素将没有邻近性结构；没有元素被分组或分离，因此没有组织。幸运的是，CSS 提供了一套强大的属性，使你能够通过调整页面上的元素大小、间距和分离来应用邻近性原则。你将在第三部分认真学习网页布局，但本章将介绍一些重要的基础。

元素框的解剖结构

使你的网页内容按照你的意愿弯曲的关键在于理解，你添加到页面上的每个元素——每个<div>、每个<p>、每个<span>，甚至是每个<strong>和每个<em>——都被一个不可见的框所包围。为什么那是一件大事呢？因为你可以使用 CSS 来控制该框的许多方面，包括其高度、宽度、间距、边框和页面上的位置。要达到这一点，你需要熟悉框的各个部分。

图 9.1 提供了基本盒部分的一个抽象视图，而图 9.2 展示了这些相同的部分如何影响一些实际的页面内容。

图 9.1 元素框的主要部分

图 9.2 元素框的各部分及其在真实页面内容中的显示

在避免重复自己的风险中：网页设计中的每个元素都是一个矩形框。这是我顿悟的时刻，它帮助我真正开始理解基于 CSS 的网页设计，并完成我想要完成的布局。—克里斯·科伊尔

每个元素框有四个部分：

内容 —这个区域是框的内矩形，由框内包含的内容（如一些文本或图像）组成。
填充 —这个区域位于内容和边框之间，代表在内容区域的顶部、右侧、底部和左侧边缘之外添加的额外空白。
边框 —这一部分沿着填充区域的边缘运行，并用线条包围内容和填充。
边距 —这个区域是框的外部矩形，代表在顶部、右侧、底部和左侧边框之外添加的额外空白。

在 CSS 领域，内容区域、填充、边框和边距的组合被称为 盒模型。令人惊讶的是，这个盒模型不仅适用于常见的块级元素（如 <div>、<h1> 和 <p>），也适用于所有内联元素（如 <span>、<em> 和 <a>）。为什么盒模型如此重要？主要有两个原因：外观和定位。

外观至关重要，因为盒模型允许你控制围绕内容的空白 ——填充和边距。正如任何设计师都会告诉你的，充分利用空白是任何成功布局的关键部分。

定位至关重要，因为 CSS 还提供了相当多的控制元素框在页面上的位置的能力。CSS 提供的与盒模型相关的属性，让你可以将每个框移动到你想要的布局位置，而不是默认的——并且无聊 ——布局，即一个元素堆叠在下一个元素上，一直延伸到页面底部。

在尽可能记住所有这些的情况下，现在是时候将你的注意力转向那些有用且强大的 CSS 属性，这些属性使你能够操纵任何元素框。首先：更改盒尺寸。

第 9.1 节：设置宽度和高度

覆盖内容：width 和 height 属性

在线：wdpg.io/9-1-0

当网页加载时，网络浏览器会进行大量的自动计算。其中两个自动值是页面中每个元素框的宽度和高度，这些值根据以下指南设置：

每个元素框的宽度设置为元素容器的宽度，默认情况下是浏览器窗口的宽度。
每个元素框的高度设置为足够高的值，可以包含所有元素的内容。

记住

我应该在这里澄清，这些计算仅适用于块级元素，如 <div> 和 <p>。内联元素，如 <span> 和 <a>，与文本一起流动，因此忽略 width 和 height。

精通

如果你想要处理内联元素的 width、height 和其他与块相关的属性，但保持元素内联，请将 display: inline-block 添加到元素的 CSS 中。要使元素成为真正的块级元素，请添加 display: block。

良好网页设计的主要原则之一是，你应该覆盖这些和类似的浏览器默认设置，以便你对页面外观和布局有最大程度的控制。要使用任何块级元素框的尺寸，请使用 CSS 的 width 和 height 属性。这些属性可以采用你在第七章中学到的任何 CSS 测量单位，包括 px、em、rem、vw 和 vh。你还可以将 width 或 height 设置为百分比或 auto（默认值，允许浏览器自动设置尺寸）。

小心

你很少，如果有的话，应该设置元素的高度属性。设置高度对于图像很有用，但与文本相比，有太多的变量，无法确定所有内容是否都能适合你指定的宽度。让内容自然地创建元素的高度。

到目前为止，你可能正在问自己一个重要的问题。当你设置宽度或高度时，你是在调整元素框的四个矩形区域中的哪一个——内容、内边距、边框还是外边距？直观地，你可能猜测是边框，因为该区域包含内容和内边距，或者感觉像是元素框的“内部”。令人惊讶的是，情况并非如此。默认情况下，width 和 height 属性仅应用于内容区域。这真是太不幸了，因为当你调整元素的大小时，为了得到其在页面上渲染的真实大小，你必须加上其内边距和边框的值。如果这听起来像是一种不必要的复杂方法，你是对的。相反，你可以将元素的 box-sizing 属性设置为 border-box：

*element* {
    box-sizing: border-box;
}

精通

而不是对单个元素应用 box-sizing，你可以通过使用通用元素（*）一次性分配它，它将应用于每个元素。此外，如果你希望将某个元素恢复到默认的尺寸行为，请使用声明 box-sizing: content-box。

这段代码告诉网页浏览器将 width 和 height 值应用到元素框的边框（包括边框）上。请注意，外边距不包括在宽度和高度内。

width 属性对于设置文本行长度以实现最佳阅读效果非常有用。对于理想的屏幕阅读，你的正文文本块每行应包含 50 到 80 个字符（包括空格和标点符号）。在大多数情况下，大约 65 个字符的行长度是最理想的，但如果你使用较大的字体大小，可以设置更长的行，如果你使用较小的字体大小，可以设置较短的行。你通过调整文本块的 width 属性来设置行长度。考虑图 9.3 中显示的文本。

图 9.3 在大屏幕上的默认宽度下，这段文本的行长度太长，难以舒适阅读。

游戏

如果你设置了元素的高度，你可能会发现其内容溢出了元素框。为了控制这种行为，你可以使用 overflow 属性。在线：wdpg.io/9-1-4

这段文本的行长度超过 150 个字符，很难阅读。你可以通过调整文本包含元素的宽度来解决这个问题，如下面的示例所示。

示例

在线：wdpg.io/9-1-1

这个示例将包含 div 元素的宽度减小，以便更容易阅读行长度。

网页

CSS

div {
 box-sizing: border-box;    ① 
 width: 630px;    ② 
}

① 应用了 border-box。

② 宽度设置为理想的行长度。

HTML

<div>
On March 19, 1988, a man named Robert Muller Jr. was a passenger in a car driving along US Route 441 in Florida. At some point in the journey, the car was cut off (or, at least, it appeared that way), enraging the car's occupants. Unfortunately, Mr. Muller had access to a gun, which he subsequently used to shoot out the back window of the other car, wounding 20-year-old Cassandra Stewart in the neck. Police described the shooting as an incident of "road rage," and a name for an all-too-common form of motorist madness was born.
</div>

游戏

您可以使用max-width属性为元素指定最大宽度；同样，您可以使用min-width属性设置最小宽度。在线：wdpg.io/9-1-3

第 9.2 课：添加填充

涵盖：padding-*属性

在线：wdpg.io/9-2-0

在元素框中，填充是添加到内容上方、下方、左侧和右侧的空白。如果您为元素添加了边框，如第 9.3 课所述，则填充是内容与边框之间的空间。填充为元素在其框内提供了一些呼吸空间，确保内容不会被其自身的边框或附近元素拥挤。

您可以通过为四个边分别应用一个值来设置填充：

*element* {
    padding-top: *top-value*;
    padding-right: *right-value*;
    padding-bottom: *bottom-value*;
    padding-left: *left-value*;
}

每个值都可以采用任何标准 CSS 度量单位，包括px、em、rem、vw和vh，或者您可以将值设置为百分比。以下是一个示例：

.pullquote {
    padding-top: 1em;
    padding-right: 1.5em;
    padding-bottom: .75em;
    padding-left: 1.25em;
}

您还可以使用padding简写属性通过单个声明设置所有填充值。您可以使用此属性的四种语法，如图 9.4 所示。

图 9.4 padding简写属性的语法

您可以通过以下简写语法复制先前的规则：

.pullquote {
    padding: 1em 1.5em .75em 1.25em;
}

要了解如何使用填充使您的网页更易于阅读，请考虑以下简单的导航栏，如图 9.5 所示。

图 9.5 没有任何水平填充的导航栏

精通

此示例通过以下两个操作将无序列表转换为导航菜单：将ul元素的list-style-type属性设置为none以隐藏项目符号，并将li元素的display属性设置为inline-block，这告诉浏览器将项目视为块，但以行内方式显示。

最大的问题是，仅凭外观无法判断有多少导航项。您可能有多达六个（主页、研究、论文、博客、联系和信息）或少至三个（主页、研究论文博客、联系信息）。为了解决这个问题，您可以使用填充在项目之间添加一些水平呼吸空间，如下例所示。

在导航项之间具有紧密间距的水平导航是一个常见问题，我在设计良好的网站上经常遇到。如果没有足够的填充，导航项开始聚集在一起，变得难以快速扫描。——杰里米·肖夫

示例

在线：wdpg.io/9-2-1

此示例使用padding-right属性在导航菜单中的元素之间创建空间。

网页

CSS

ul {
    list-style-type: none;
    text-transform: uppercase;
}

li {
    display: inline-block;
 padding-right: 1em;    ① 
}

① padding-right应用于li元素。

HTML

<ul>
 <li>Home</li>    ② 
 <li>Research Papers</li>    ② 
 <li>Blog</li>    ② 
 <li>Contact Info</li>    ② 
</ul>

② li元素

看看这个

要查看浏览器在上面的例子中如何添加填充的动画，请打开 Web 设计游乐场中的示例并点击“查看”按钮。在线：wdpg.io/ 9-2-1

第 9.3 课：应用边框

覆盖内容：border-*属性

在线：wdpg.io/9-3-0

在元素框中，border是定义四侧（顶部、右侧、底部和左侧）填充外边缘的线条。这样，边框位于元素的填充和边距之间。边框是可选的，但通常对于为读者提供视觉指示，表明封装的内容与任何附近的内容是分开的非常有用。

使用方法

给一个元素添加边框，以提供视觉指示，表明内容是自包含的或与周围页面内容分离。

要创建一个基本的边框，请使用border属性，如图 9.6 所示。

图 9.6 border属性的语法

*宽度*值可以接受任何标准的 CSS 度量单位，包括px、em、rem、vw和vh。你也可以将值设置为以下任意一个关键字：thin、medium或thick。对于*样式*值，你可以使用以下任意一个关键字：dotted、dashed、solid、double、groove、ridge、inset或outset。对于*颜色*参数，你可以使用你在第四章中学到的任何颜色名称。

这里有一个例子：

.pullquote {
    border: 1px solid black;
}

此规则定义了pullquote类，具有一像素宽、实线、黑色边框。

以下示例从第 9.2 课的导航列表中添加了边框。

示例

在线：wdpg.io/9-3-1

此示例在导航菜单周围添加了边框。

网页

CSS

ul {
 border: 1px solid black;    ① 
 padding-top: .75em;    ② 
 padding-bottom: .75em;    ② 
    list-style-type: none;
 text-align: center;    ③ 
    text-transform: uppercase;
}

li {
    display: inline-block;
    padding-right: 1em;
}
li:first-child {    ④ 
 padding-left: 1em;    ④ 
}

① 边框

② 顶部和底部添加填充

③ 项目居中。

④ 左侧额外填充

HTML

<ul>
    <li>Home</li>
    <li>Research Papers</li>
    <li>Blog</li>
    <li>Contact Info</li>
</ul>

当你需要将内容分成逻辑部分，并且你的设计需要内容分离，且没有它设计看起来会杂乱无章时，请使用边框。——安德鲁·斯托克

一个奇怪的小细节可能会让你皱眉：li:first-child元素有一个padding-left值为1em。怎么回事？回想一下第 9.2 课的例子，你需要添加1em的填充来分隔菜单项。你是通过使用padding-right属性来做到这一点的，但这样做也意味着在“联系信息”项目的右侧添加了1em的填充。为了补偿右侧的额外填充，你需要添加相同数量的左侧填充，以便菜单正确居中。li:first-child规则为第一个li元素添加了所需的填充。

演示

CSS 盒模型一开始可能有些令人困惑，因为它难以可视化围绕每个元素的框。为了帮助理解，可以使用outline属性，该属性在框边框的外侧边缘添加一条线。outline属性使用与border属性相同的语法。在线：wdpg.io/9-3-3

第 9.4 课：控制边距

涵盖：margin-*属性

在线：wdpg.io/9-4-0

在元素框中，边距是添加到边框上方、下方、左侧和右侧的空白。边距让您能够控制元素之间的空间。例如，正值边距可以防止页面元素相互碰撞或重叠，并防止元素触及浏览器视口的边缘。另一方面，如果您的设计需要元素重叠，您可以通过使用负值边距来实现这种效果。

您通过设置一个或多个元素的四个方向的值来应用边距：

*element* {
    margin-top: *top-value*;
    margin-right: *right-value*;
    margin-bottom: *bottom-value*;
    margin-left: *left-value*;
}

每个边距值可以使用任何标准 CSS 度量单位，例如px、em、rem、vw和vh。您还可以使用百分比或auto关键字（让浏览器自动设置边距以适应可用空间）。以下是一个示例：

.pullquote {
    margin-top: 1.5em;
    margin-right: 2.5em;
    margin-bottom: 2em;
    margin-left: 3em;
}

精通

正值边距用于将元素从周围元素（或浏览器视口的边缘）推开。有时，您可能希望将元素靠近，您可以通过设置负值边距来实现这一点。在线：wdpg.io/9-4-5

使用它

边距对于建立页面文本块之间的间距，尤其是段落之间的间距非常有用。为每个段落设置间距的一个好规则是将底部边距设置为1em。

与padding一样，margin简写属性允许您通过单个声明应用边距。图 9.7 显示了您可以使用此属性的四种语法。

图 9.7 margin简写属性的语法可能性

您可以通过使用如下简写语法重写前面的规则：

.pullquote {
    margin: 1.5em 2.5em 2em 3em;
}

重要的是要记住，网络浏览器通过使用其内部样式表为所有元素设置默认边距。这听起来很方便，但网络设计的一个关键原则是通过自己设置样式来获得对页面外观的最大控制。朝着这个方向迈出的重要一步是在样式表顶部添加以下代码：

我们认为我们的 CSS 是修改文档的默认外观——但使用“重置”样式表，我们可以使默认外观在浏览器之间更加一致，从而减少与浏览器默认设置斗争的时间。——埃里克·迈耶

html, body, abbr, article, aside, audio, blockquote, button, canvas, code, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, iframe, img, input, label, legend, li, nav, object, ol, option, p, pre, q, section, select, table, tbody, td, tfoot, th, thead,  tr, ul, video {
    margin: 0;
    padding: 0;
}

此代码移除了浏览器默认的所有这些元素的边距和填充，使您能够根据需要自行调整页面上的这些设置。如果您的页面较小，您可以使用以下简化版本：

* {
    margin: 0;
    padding: 0;
}

注意，然而，你确实需要设置你的页边距。为什么需要这样做，图 9.8 展示了当页边距被重置为 0 时的简单导航栏。

图 9.8 没有任何页边距的导航栏

播放

你也可以使用一个页边距技巧来在父元素内垂直居中子元素。在线：wdpg.io/9-4-4。

如你所见，导航栏被渲染得紧贴浏览器的顶部、右侧和左侧边缘，导航栏底部和文本之间几乎没有空间。为了解决这个问题，你可以设置导航栏的页边距，在其周围添加一些欢迎的空白，如下面的例子所示。

示例

在线：wdpg.io/9-4-1

这个例子使用margin属性在导航菜单周围创建空间。

网页

CSS

ul {
    border: 1px solid black;
 margin-top: .75em;    ① 
 margin-right: 2em;    ① 
 margin-bottom: 1em;   ① 
 margin-left: 2em;     ① 
    padding-top: .75em;
    padding-bottom: .75em;
    list-style-type: none;
    text-align: center;
    text-transform: uppercase;
}
div {
 margin-right: 2em;    ② 
 margin-left: 2em;     ② 
}

① 应用于ul元素的页边距属性

② 应用于div元素的页边距属性

HTML

<ul>
    <li>Home</li>
    <li>Research Papers</li>
    <li>Blog</li>
    <li>Contact Info</li>
</ul>
<div>
Welcome! You’ve landed at the web home of Monday Morning Ideas, the inventors of the Helium Paperweight, the Water-Resistant Sponge, the Teflon Bath Mat, and the world-famous Inflatable Dartboard.
</div>

播放

如果你已经设置了元素的宽度，你可以通过使用声明margin: *top/bottom* auto快速水平居中元素，其中*top/bottom*是顶部和底部页边距的值。在线：wdpg.io/9-4-3。

小心页边距塌陷！

在前面的例子中，我在ul元素上添加了margin-bottom: 1em以将其与div文本分开。假设我决定我想在这两个元素之间有2em的空间，所以我调整了div规则如下。图 9.9 展示了结果：

div {
 margin-top: 1em;    ① 
    margin-right: 2em;
    margin-left: 2em;
}

① 添加到div元素的顶部页边距

图 9.9 添加了1em顶部页边距的div文本

不，你的眼睛并没有欺骗你：导航栏和div文本之间的空间与之前完全相同！这里发生的是一种巧妙的 CSS 现象，称为页边距塌陷。当一个元素的底部页边距遇到另一个元素的顶部页边距时，浏览器不会像你预期的那样将两个值相加。相反，它确定两个值中哪个更大，并使用该值作为两个元素之间的垂直页边距。它丢弃较小的页边距值，从而将两个页边距合并为一个值。

精通

如果你确实想在两个元素之间增加额外的垂直空间，你可以增加两个值中较大的一个（例如，在ul元素上设置margin-bottom: 2em）。或者，将塌陷的页边距改为填充（例如，通过在div元素上用padding-top: 1em替换margin-top属性）。

记住

左右页边距永远不会塌陷。此外，对于浮动或绝对定位的元素，不会发生页边距塌陷（见第八章）。

如果您发现一个或多个页面元素的上边距或下边距表现异常——也就是说，比您想象的要大或小——那么折叠边距很可能是罪魁祸首。

摘要

CSS 元素框的四个主要部分是内容、围绕内容的填充、围绕填充的边框以及围绕边框的外边距。
您可以通过设置元素的width和height属性来指定元素的尺寸。
您可以通过使用四个填充属性：padding-top、padding-right、padding-bottom和padding-left来在元素内容周围添加填充。或者，使用padding快捷属性，例如padding: *top*``*right*``*bottom*``*left*。
简化的边框语法是border: *width*``*style*``*color*。
您可以通过使用四个外边距属性：margin-top、margin-right、margin-bottom和margin-left来在元素周围添加外边距。或者，使用margin快捷属性，例如margin: *top*``*right*``*bottom*``*left*。

第十章项目：创建一个着陆页

在在线营销领域的一个关键特性是着陆页——这是（希望是欢迎的）通往你的在线商店的门道，你将向你的网站访客展示。——马丁·哈伍德

本章涵盖

规划和绘制你的着陆页
为页面选择字体和颜色
理解和实现带状内容
添加图片和文本

好的，你已经完成了这个冒险的第九章，你已经走了很长的路。在这里，仅第二部分，你就已经掌握了使用图片和媒体；制作样式表；使用类；浮动元素；使用绝对和相对定位；以及调整大小、边框和边距。这已经很多了，而且（最重要的是）这已经足够你开始构建一些令人惊叹的页面。作为证明，在这个项目中，你将把所有这些 HTML 和 CSS 技能运用到极致，为产品或服务的营销活动创建一个看起来专业的着陆页。如果这个项目听起来超出了你的能力范围，不要担心：你知道足够多的东西来完成这个任务，而且我会在你身边构建我的（正如你将看到的，相当愚蠢的）着陆页。如果你遇到困难，我（或者至少是我的代码）会立即出现帮助你或者给你正确的方向。

你将构建的内容

在最一般的意义上，一个着陆页是访客在导航到（着陆在）你的网站时首先看到的页面。这通常是你的主页，但也可能是任何通过谷歌搜索或其他人发布到社交媒体的链接而遇到的页面。

但这个术语的更具体含义与本项目相关。在这个意义上，一个着陆页是当人们点击广告、博客文章或社交媒体更新中的链接时看到的第一个页面，这些更新是针对特定产品或服务的营销或意识活动的一部分。着陆页的职责是解释产品或服务，并诱导用户执行某些操作，例如购买商品、订阅服务或注册通讯。

本项目将你在前九章中学到的 HTML 和 CSS 技能展示给你，教你如何使用它们来构建一个产品或服务的简单着陆页。它包括图片、描述性文本和“行动号召”按钮，这些按钮会要求读者执行某些操作（如购买或订阅）。页面的总体结构使用了一种流行的现代布局，称为带状内容，其中文本和图片以水平条带的形式出现在浏览器窗口的全宽范围内。随着你的学习，我将基于一本我“出售”的虚构书籍构建一个示例着陆页，但当然，你也会想要用你自己的文本和图片构建你自己的页面。

绘制布局草图

由于您可能已经见过一两个着陆页，您可能对您想要的着陆页的外观有一个合理的想法。如果是这样，太好了！您在这个项目阶段已经领先于大多数人。但请相信我，仅存在于您脑海中的设计很难转化为 HTML 和 CSS 代码。为了使从设计到代码的过渡更加容易，您需要将这个设计从您的脑海中提取出来，并转化为具体的形式。您可以使用 Adobe Photoshop 或 Illustrator 等图形程序来完成这项任务，但我更喜欢用铅笔和纸张绘制页面的基本组件。

如图 10.1 所示，您的草图不需要是一件艺术品，甚至不需要非常详细。绘制页面的主要部分，并包含一些描述每个部分内容的文本。

图 10.1 在开始编码之前，拿一支铅笔和一些纸张，快速绘制页面布局和内容的草图。

您接下来的页面规划任务是决定您想要用于着陆页的字体。

选择字体

通常情况下，着陆页不应该让用户承受大量文本的负担。您想要突出产品或服务的关键特性，给用户一个想要它的理由，然后给他们一个获得它的机会。所以如果您正在构建一个没有大量正文内容的页面，您的字体需要清晰易读，而且不应该吸引过多的注意力（从而转移对产品的注意力）。

在这种情况下，无衬线字体通常是最佳选择，因为衬线的缺失使得这些字体看起来更干净。无衬线字体也比衬线字体更具现代感，这为您提供了额外的优势，使您的产品看起来更新潮、更清新。

我最喜欢的系统字体之一是 Optima，这是赫尔曼·察普夫（您可能从大多数 PC 上可用的著名 Zapf Dingbats 字体中认识他）设计的一款漂亮的 sans-serif 字体。唉，尽管 Optima 安装在所有 Mac 计算机上，但在 Windows PC 上却很少见。因此，作为 Windows 的备用字体，我还会指定 Calibri 字体，它具有相似的特征。在我的 CSS 中，我将使用以下规则将这些字体族应用于所有页面文本：

body {
    font-family: Optima, Calibri, sans-serif;
}

记住

当您在font-family属性中指定多个字体时，网络浏览器会检查它们是否按出现的顺序安装在每个用户的计算机上，并使用它找到的第一个字体。

在绘制了页面布局并选择了字体后，下一步是挑选配色方案。

选择配色方案

由于着陆页使用单一字体，您需要转向其他页面元素来增加一些活力和对比。一个很好的地方是配色方案：

强调颜色 —这种颜色用作页面元素（如行动号召按钮和确保读者不会错过的文本）的背景。因此，它应该是一个醒目、不容错过的色调，能够脱颖而出。
二级颜色 —这种颜色主要用于一些内容带的背景。它应该与强调颜色相似：足够醒目以告知读者内容的重要性，但又不至于与强调颜色冲突或盖过它。
三级颜色 —这种颜色用作不太重要的内容的背景。

学习

如果你不太擅长选择颜色，一个叫做 Palettable（www.palettable.io）的在线工具可以帮助你。输入你的初始颜色，Palettable 会建议一个兼容的颜色。点击“喜欢”以保留它，或者点击“不喜欢”以尝试另一个。

图 10.2 显示了为我着陆页选择的颜色。当然，你应该选择一个适合你风格的配色方案。

当页面布局就绪，并且你已经选择了字体和颜色后，是时候通过添加一些 HTML 和 CSS 代码将所有内容整合在一起了。

图 10.2 我的着陆页配色方案

构建页面

要构建你的着陆页，从我在第一章中介绍的基本代码开始。然后，逐节进行，添加文本、HTML 标签和 CSS 属性。

初始结构

要开始，从第一章的基本页面结构中获取，并为页面每个主要部分添加标签、占位符图片和一些占位符文本。

尝试这个

在线：wdpg.io/projects/landing-page/1

这里是构成着陆页初始结构的元素。

网页

HTML

<div class="header">    ① 
 <div class="header-image">    ① 
 <img src="http://placehold.it/100x150" alt=””>    ① 
 </div>    ① 
 <div class="header-info">    ① 
 Product title, subtitle, intro, etc.    ① 
 </div>    ① 
</div>    ① 
<div class="description">    ② 
 Product description    ② 
</div>    ② 
<div class="testimonials">    ③ 
 Product testimonials    ③ 
</div>    ③ 
<div class="product-versions">    ④ 
 Pricing table for the different versions of the product    ④ 
</div>    ④ 
<div class="social">    ⑤ 
 Social media links    ⑤ 
</div>    ⑤ 
<div class="footer">    ⑥ 
 Site links and copyright notice    ⑥ 
</div>    ⑥

① 标题内容带

② 描述内容带

③ 推荐内容带

④ 定价表格内容带

⑤ 社交媒体内容带

⑥ 页脚内容带

在初始结构中使用的 HTML 标签有一些需要注意的事项：

页面被分为六个部分：标题、描述、推荐、定价表格、社交媒体和页脚。
每个部分都嵌入在一个<div></div>块中。
每个div元素都被分配了一个类，这使得你可以将 CSS 属性应用于该部分内的所有内容。

标题

标题可能是着陆页上最重要的部分，因为它是访客到达时看到的第一个部分。你希望标题不仅要有影响力，还要开始推销你的产品的工作。项目标题通过包括以下功能来实现这些目标：

英雄背景图片 —这张图片应该是视觉上引人注目的，或者应该讲述与你的产品相关的故事。无论如何，确保图片不会干扰标题文本的可读性。
产品图片 — 此图片应是一个简单的插图或照片，使潜在买家能够看到产品的样子。
产品信息 — 至少，这些信息应包括产品名称或标题、简短（两到三句话）的介绍以及价格。我还选择包括一个副标题（例如“现在可用！”或“特价优惠！”）和一个子标题。
行动号召按钮 — 用户点击此按钮执行您想要执行的操作，例如购买、订阅或下载产品。

由于页眉对于落地页的成功至关重要，请慢慢来，一次添加一个功能，从英雄背景开始构建页眉。

英雄背景图片

你可能还记得第六章中提到的英雄图片是一种引人注目的照片或插图，当你首次进入页面时，它占据了整个浏览器窗口的宽度，有时甚至占据整个高度。以下示例展示了带有英雄背景图片的虚构产品页眉。

尝试以下操作

在线：wdpg.io/projects/landing-page/2

此示例展示了带有英雄背景的落地页页眉。

网页

CSS

.header {
    background: url(/images/landing-page-header-bg.jpg);
 background-attachment: fixed;    ① 
    background-position: right center;
    background-size: cover;
    padding-bottom: 1em;
    width: 100vw;
    height: 100vh;
}

① 防止英雄图片随内容滚动。

HTML

<div class="header">
</div>

记住

我添加了 height: 100vh 定义，以给页眉一些高度，因为它没有内容。稍后，在我添加页眉内容后，我会移除该定义。

这张照片（你几乎认不出它是夜景城市场景的模糊图像）使用了在第六章中学到的标准英雄图片代码。我添加了 background-attachment: fixed 属性，以防止图片随页面其他部分滚动，这是一个很好的效果。

产品图片

接下来，添加展示产品的照片或插图。此图片应大小适中，足够让读者了解产品外观，但不要太大，以免压倒英雄背景。以下是一个示例。

尝试以下操作

在线：wdpg.io/projects/landing-page/3

此示例将产品图片添加到落地页的页眉中。

网页

CSS

.header-image {    ① 
 float: left;    ① 
 width: 33%;    ① 
 margin-top: 3em;    ① 
 padding-right: 3em;    ① 
 text-align: right;    ① 
}

① 图片的 CSS 代码

HTML

<div class="header">
 <div class="header-image">    ② 
 <img src="/images/landing-page-book-cover.png"    ② 
alt="Front cover">    ② 
 </div>    ② 
</div>

② 图片作为标准的 HTML img 元素添加。

图片向左浮动，并设置了边距和填充，以提供与其他内容的分隔。

产品信息

现在是时候将产品信息添加到页眉中了。同样，这些信息至少需要包括产品标题和简要介绍，但请随意添加如副标题和子标题等元素，如下例所示。

尝试以下操作

在线：wdpg.io/projects/landing-page/4

此示例将产品信息添加到落地页的页眉中。

网页

CSS

.header-info {    ① 
 float: right;    ① 
 width: 67%;    ① 
 margin-top: 4em;    ① 
 color: white;    ① 
}

① 产品信息 div 的 CSS 代码

HTML

<div class="header">
   <div class="header-image">
     <img src="/images/landing-page-book-cover.png" alt="Front cover">
   </div>
 <div class="header-info">    ② 
 <div class="surtitle">Coming Soonish!</div>    ② 
 <h1 class="title">The Web Designer</h1>    ② 
 <h3 class="subtitle">    ② 
 A story of HTML, CSS, and the big city</h3>    ② 
 <p class="intro">    ② 
 She knew HTML. She knew CSS. But did she know love? Read this destined-to-be-remaindered novel that <em>The New York Times Book Review</em> described as &ldquo;reasonably grammatical&rdquo; and the <em>Times Literary Supplement</em> called &ldquo;bathroom-worthy.&rdquo;    ② 
 </p>    ② 
 </div>    ② 
</div>

② 信息添加在 div 元素内。

包含所有产品信息的 div 元素向右浮动，并设置了一些边距。各种产品信息——副标题、标题、副标题和简介——出现在它们自己的块级元素中。为了节省空间，我没有显示应用于这些块级元素的 CSS 属性，但它们包括边距和字体大小等样式。（请参阅示例的在线版本以获取完整的代码。）

召唤性用语按钮

标题部分的最后一部分是读者可以点击的号召性用语按钮，用于订购、订阅、下载或执行你在着陆页上偏好的任何操作。此按钮应易于找到，因此请使其可见并加粗，如下例所示。

尝试这个

在线：wdpg.io/projects/landing-page/5

此示例将号召性用语按钮添加到着陆页标题中。

网页

CSS

.btn {    ① 
 max-height: 2.5em;    ① 
 border: none;    ① 
 padding: .75em 1.25em;    ① 
 font-family: inherit;    ① 
 font-size: 1em;    ① 
 font-weight: bold;    ① 
 color: white;    ① 
 background-color: darkorchid;    ① 
}

① 按钮的 CSS 代码

HTML

 <button class="btn" type="button">I Want It!</button>    ②

② button 元素

我使用 <button> 标签创建按钮，然后应用各种样式使按钮突出，包括我的强调颜色（darkorchid）作为背景和加粗白色文本作为前景。

产品描述

着陆页的下一个元素是对产品的简要描述，这是你第一次尝试向用户推销你的产品或服务。你如何进行取决于产品以及你在扮演推销员时的舒适度，但这里有一些想法：

一个简单的段落，解释产品
产品主要功能的列表
一个段落或列表，告诉用户为什么产品适合她
一个段落或列表，简要概述一系列问题并解释产品如何解决这些问题

对于我的着陆页，我选择了对书籍情节的简要回顾，如下例所示。

尝试这个

在线：wdpg.io/projects/landing-page/6

此示例显示了添加到着陆页的产品描述。

网页

CSS

.description {    ① 
 width: 100%;    ① 
 padding: 1em 0;    ① 
 font-size: 1.25em;    ① 
 background-color: white;    ① 
}

① CSS 中 description 类的代码

HTML

<div class="description">
At High Falutin High, the arts high school in her home town, Daisy Fontana fell in love. Not with a boy, or even with a girl, for that matter, but with something altogether more interesting: web design. Instead of a BFF, she had CSS. Instead of singing and... 
</div>

设置内容带

在构建着陆页的这个阶段，你遇到了一个问题。在前面的示例中，描述中的文本横跨整个浏览器窗口宽度，这使得行长度过长，不便于阅读。解决方案是通过使用具有两个特征的内容水平带结构化着陆页：

一种背景颜色或图像，横跨整个浏览器窗口。
前景内容，具有最大宽度以保持可读性。此内容通常出现在浏览器窗口的中心。

然而，根据浏览器窗口的宽度和你分配给内容块的宽度，该块只占据窗口宽度的一部分。那么问题就是如何让背景扩展到整个窗口宽度，同时将内容限制在宽度的一部分。

答案是使用两个 div 元素来结构化每个内容带：

一个外部的 div 元素，它跨越浏览器窗口的宽度，并使用你想要与带区一起使用的背景颜色或图像进行样式化
一个嵌套的 div 元素，它包含内容，被赋予一个最大宽度，并在浏览器窗口中水平居中

在以下示例中，我已经将嵌套 div（使用名为 container 的类）应用于页眉和产品描述。

尝试这个

在线：wdpg.io/projects/landing-page/7

此示例显示了将包含每个内容带内容的嵌套 div 元素。

网页

CSS

.container {    ① 
 max-width: 800px;    ① 
 margin: 0 auto;    ① 
 clear: both;    ① 
}
.container::after {    ② 
 content: "";    ② 
 display: block;    ② 
 clear: both;    ② 
}

① 内容容器的 CSS 代码

② 此 CSS 使容器能够清除其自身的浮动。

HTML

<div class="header">
 <div class="container">    ③ 
 ...    ③ 
 </div>    ③ 
</div>
...
<div class="description">
 <div class="container">    ③ 
 ...    ③ 
 </div>    ③ 
</div>

③ 包含带内容的嵌套 div 元素

container 类做了三件事：

它使用 max-width 来设置内容的最大宽度为 800 像素。
它使用 margin: 0 auto 简写来水平居中元素。此声明将顶部和底部边距设置为 0，将左侧和右侧边距设置为 auto。后者告诉网络浏览器根据元素宽度自动设置边距。因为左右两侧都一起设置，浏览器将相同的边距大小分配给每一侧，从而实现元素居中。
它使用 clear: both 来放置在文档流中位于其之前的任何浮动元素之后的元素。

container::after 伪元素使用了你在第八章中学到的 clearfix 技巧，使元素能够清除它包含的任何浮动元素，并防止容器塌陷。

产品评价

总是在你的着陆页上添加一些第三方正面评价是个好主意，比如来自媒体的闪耀评价，来自另一个网站的正面用户评分，或者直接从产品测试者或用户那里收到的正面反馈。以下示例展示了添加了一些评价的我的着陆页，以及相关的插图。

尝试这个

在线：wdpg.io/projects/landing-page/8

此示例将评价部分添加到着陆页中。

网页

CSS

.testimonials {    ① 
 width: 100%;    ① 
 padding: 1em 0;    ① 
 font-size: 1.25em;    ① 
 background-color: plum;    ① 
}
.testimonials-text {    ② 
 float: left;    ② 
 width: 75%;    ② 
}
.testimonial {    ③ 
 margin-bottom: .75em;    ③ 
}
.testimonials-image {    ④ 
 float: right;    ④ 
}

① 评价内容带的 CSS 代码

② 评价文本容器的 CSS 代码

③ 单个评价的 CSS 代码

④ 评价图片的 CSS 代码

HTML

<div class="testimonials">    ⑤ 
<div class="container">
<div class="testimonials-text">    ⑥ 
<p class="testimonial">“I’ve never seen a novel with so much HTML and CSS code. I mean there is a <em>lot</em> of code in this book! So much code. Code, code, code.” —T. J. Murphy, Nowhere, OK</p>    ⑦ 
<p class="testimonial">“I particularly loved the scenes where Daisy is by herself in her room writing HTML and CSS. It’s hard to make writing tags and properties interesting, and the author almost does it.” —M. Dash, Tightwad, MO</p>    ⑦ 
<p class="testimonial">“I couldn’t put it down. No, really, I could <em>not</em> physically put this book down. Thanks to the cheap cover stock, the book was literally glued to my hands. I had to go to the emergency room to get the thing off me.” —A. Pendergast, Walla Walla, WA</p>
</div>
<div class="testimonials-image"    ⑧ 
alt="Illustration of people talking">
<img src="/images/testimonials.tif">    ⑧ 
</div>    ⑧ 
</div>
</div>

⑤ 评价内容带元素

⑥ 评价文本容器

⑦ 单个评价

⑧ 评价图片

在这个例子中，内容带是一个名为testimonials的div元素，它使用plum背景颜色进行样式化。在内容容器中有一个向左浮动的testimonials-text元素和一个向右浮动的testimonial-image元素。

定价表

在理想的世界里，访问你着陆页的人会对你的产品或服务如此着迷，以至于他会点击你放在页面标题中的行动号召按钮。如果那样做不成功，你需要给这个人第二次购买或订阅的机会。做到这一点的一个最好的方法就是创建一个定价表，概述你产品的版本以及每个版本的价格。如果你的产品没有版本（甚至如果有），你可以创建包含其他项目的套餐，例如配套电子书、时事通讯订阅、未来购买的折扣券等等。

定价表应该至少有两个版本或套餐，但通常不超过四个。其中之一应该是你的首选版本——你理想中希望每个人选择的版本。这个版本可能是能为你带来最多收入、为用户提供最佳价值或相对于其他版本有其他优势的那个。这个首选版本应以某种方式突出。例如，你可以在它上面添加“最佳价值！”标题，或者使用你配色方案中的粗体强调颜色。

使用它

在大多数着陆页上，首选的选项是能带给卖家最高净利的那个。你可以使用其他标准来确定你想要推广的选项，例如最受欢迎的、最具性价比的以及最佳整体价值。

在我的个人着陆页上，我在定价表之前放置了一个内容带，它充当一种标题，但实际上是敦促用户选择一个套餐，如下面的例子所示。

尝试这个

在线：wdpg.io/projects/landing-page/9

这个例子在定价表之前添加了一个内容带。

网页

CSS

.product-versions-title {    ① 
 padding: 1em 0;    ① 
 font-size: 2em;    ① 
 text-align: center;    ① 
}

① 内容带段的 CSS 代码

HTML

<div class="container">    ② 
 <h2 class="product-versions-title">Select the version that's right for you!</h2>    ② 
</div>    ②

② 内容带的 HTML 代码

对于定价表本身，标准格式是将每个版本或套餐放置在一个垂直列中，告诉读者她需要知道的一切：标题、价格（如果有）和功能。然后在列的底部添加一个行动号召按钮。以下例子展示了我虚构的着陆页上的定价表中的一个列。

尝试这个

在线：wdpg.io/projects/landing-page/10

这个例子添加了定价表的第一列。

网页

CSS

.product-versions {
    padding: 1em 0;
    background-color: plum;}
.product-version {
    float: left;
    width: 33.33%;
    border: 1px solid gray;
    text-align: center;
    background-color: white;}
.version-title {
    padding: .75em 0;
    font-size: 1.5em;}
.version-price {
    padding: .75em 0;
    font-size: 2em;
    background-color: lightgray;}
.version-item {
    border-bottom: 1px solid gray;
    width: 100%;
    padding: .75em 0;
    font-size: 1.25em;}
.version-item:last-child {
     border-bottom: 0;}
.btn-plain {
    font-weight: normal;
    color: black;
    background-color: lightgray;}

HTML

<div class="product-versions">    ① 
 <div class="container">    ② 
 <div class="product-version">    ③ 
 <h3 class="version-title">eBook Version</h3>    ④ 
 <h4 class="version-price">$9.99</h4>    ⑤ 
 <div class="version-item">    ⑥ 
                300-page PDF
 </div>    ⑥ 
 <div class="version-item">    ⑥ 
                Free ebook
 </div>    ⑥ 
 <div class="version-item">    ⑥ 
                Free newsletter subscription
 </div>    ⑥ 
 <div class="version-item">    ⑥ 
                10% off your next purchase
 </div>    ⑥ 
 <div class="version-item">    ⑥ 
 <button class="btn btn-plain" type="button">Order Now!</button>    ⑥ 
 </div>    ⑥ 
        </div>
    </div>
</div>

① 内容带

② 内容容器

③ 产品版本容器

④ 版本标题

⑤ 版本价格

⑥ 版本项目

这里使用了七个类，它们的作用如下：

product-versions—这个外部的div创建了内容带。它被赋予了plum背景。
container—这个类是内容div。
product-version—这个div创建单个版本或包的列。它向左浮动，因为有三列，所以被赋予了 33.33%的宽度。
version-title—这个div包含版本或包的标题。
version-price—这个div包含版本或包的价格。对于大多数版本，价格被赋予了朴素的灰色背景。
version-item—这个类包含版本或包中的其余项目，每个功能有一个div，底部还有一个用于行动按钮的div。
btn-plain—这个类用于不需要突出显示的行动按钮。文本被赋予正常重量；文本颜色恢复为黑色；背景设置为浅灰色。

要完成定价表，你添加版本或包，使用与之前相同的样式，但以突出显示的方式为读者设置你的最佳版本，如下一个示例所示。

尝试这个

在线：wdpg.io/projects/landing-page/11

这个示例完成了定价表，包括一个突出显示版本供读者查看的列。

网页

CSS

.version-price-featured {    ① 
 color: white;    ① 
 background-color: darkorchid;    ① 
}

① 突出显示项目价格的 CSS 代码

HTML

<div class="product-version">
    <h3 class="version-title">Print Version</h3>
    <h4 class="version-price">$14.99</h4>
    <div class="version-item">
        300-page paperback
    </div>
    <div class="version-item">
        Free ebook
    </div>
    <div class="version-item">
        Free newsletter subscription
    </div>
    <div class="version-item">
        10% off your next purchase
    </div>
    <div class="version-item">
        <button class="btn btn-plain" type="button">Order Now!</button>
    </div>
</div>
<div class="product-version">
    <h3 class="version-title">eBook+Print Bundle</h3>
 <h4 class="version-price version-price-featured">$19.99</h4>    ② 
    <div class="version-item">
        PDF <em>and</em> paperback versions
    </div>
    <div class="version-item">
        Free ebook
    </div>
    <div class="version-item">
        Free newsletter subscription
    </div>
    <div class="version-item">
        15% off your next purchase
    </div>
    <div class="version-item">
        <button class="btn" type="button">Order Now!</button>
    </div>
</div>

② 突出显示价格的 HTML 代码

记住

当你在元素上指定两个类（就像我在以下示例中的第二个h4元素中做的那样）时，网络浏览器会将这两个类的属性应用到该元素上。

精通

如果你的 CSS 在元素上指定了两个类，并且这些类有一个或多个共同的属性，那么第二个类（即在 CSS 文件中较后出现的类）中的属性将具有优先权。

社交媒体链接

着陆页上的下一个内容带是一组社交媒体链接，它们在页面上居中显示，每个社交网络的图标用作链接。以下示例显示了我在着陆页上设置的链接。

尝试这个

在线：wdpg.io/projects/landing-page/12

这个示例将社交媒体链接内容带添加到着陆页上。

网页

CSS

.social {    ① 
 padding: 1em 0;    ① 
 font-size: 1.5em;    ① 
 text-align: center;    ① 
}    ① 
.social-links {    ① 
 margin-top: .75em;    ① 
}    ① 
.social-link {    ① 
 margin: 0 .25em;    ① 
}    ①

① 社交媒体链接的 CSS 代码

HTML

<div class="social">    ② 
 <div>    ② 
 Follow Logophilia Books on social media:    ② 
 </div>    ② 
 <div class="social-links">    ② 
        <a href="#" class="social-link"><img src="/images/facebook.tif" alt="Facebook icon"></a>
        <a href="#" class="social-link"><img src="/images/twitter.tif" alt="Twitter icon"></a>
        <a href="#" class="social-link"><img src="/images/googleplus.tif" alt="Google Plus icon"></a>
        <a href="#" class="social-link"><img src="/images/linkedin.tif" alt="LinkedIn icon"></a>
 </div>    ② 
</div>    ②

② 社交媒体链接的 HTML 代码

这里使用了三个类：

social—这个外部的div创建了内容带。它被赋予了white背景，并且text-align属性被设置为center。
social-links—这个div创建了所有链接的容器。
social-link—这个类用于设置单个链接的样式。

注意，在这个内容带中你不需要container元素，因为文本和链接在页面上是居中的。

页脚

尝试这个

在线：wdpg.io/projects/landing-page/13

这个例子通过使用浅灰色背景、较小的字体大小和斜体来将页脚文本与正文文本分开。

网页

CSS

.footer {    ① 
 padding: 1em 0;    ① 
 font-variant: small-caps;    ① 
 text-align: center;    ① 
 background-color: lightgray;    ① 
}
.footer-links {    ① 
 margin-bottom: .75em;    ① 
 font-size: 1.5em;    ① 
}
.foote r-link {    ① 
 margin: 0 .5em;    ① 
}
.copyright {    ① 
 font-style: italic;    ① 
 font-size: 1em;    ① 
}

① 页脚的 CSS 代码

HTML

<div class="footer">    ② 
 <div class="footer-links">    ② 
 <a href="#" class="footer-link">About</a>    ② 
 <a href="#" class="footer-link">Contact</a>    ② 
 <a href="#" class="footer-link">Site Map</a>    ② 
 <a href="#" class="footer-link">Privacy</a>    ② 
 </div>    ② 
 <div class="copyright">    ② 
 Copyright 2018 Logophilia Books    ② 
 </div>    ② 
</div>    ②

② 页脚的 HTML 代码

这里使用了四个类：

footer—这个外部的div创建了一个内容带。它被赋予了一个lightgray背景，并且text-align属性被设置为center。
footer-links—这个div创建了一个用于所有页脚链接的容器。请注意，每个链接的 URL 都指向#，这是一个占位符，当点击时，会将用户带到页面的顶部。在生产着陆页面上，你会将每个#替换为你网站上某个文件的 URL。
footer-link—这个类样式化了单个页脚链接。
copyright—这个类样式化了版权声明。

再次强调，在这个区域中，你不需要container元素，因为内容已经居中在页面上。

从这里开始

考虑到你这本书只读了一半，我必须说，最终版本的着陆页面（我的版本在图 10.3 中展示）是一个看起来很棒的网页。它易于阅读，易于理解，并且不会令人感到无聊。（如果你对你的着陆页面像我认为你应该那样满意，并且期待着将你的代码上线，请查看附录 A 以获取详细信息。）

图 10.3 我这本书的着陆主页

如果着陆页有问题，那是因为我们不得不使用大量的填充和边距调整（以及其他 CSS 技巧）来使事物排列得相对整齐。这种烦恼发生是因为我们没有使用真正的页面布局。由于我们的元素在这里和那里浮动，我们几乎进入了布局领域，但还不是。但那不是问题，因为页面布局是第三部分的主题，所以你很快就会学到你需要知道的所有内容，以创建你着陆页和其他页面的稳固布局。

摘要

绘制你想要构建的页面。
选择文本的字体。
选择一个配色方案。
构建初始页面结构：基本的 HTML 标签和全局 CSS 属性。
逐个填写和样式化每个部分：页眉、描述、推荐语、定价表、社交媒体链接和页脚。

第三部分：布局网页

设计网页的一个重要部分是能够以既美观又易于理解和导航的方式布局页面元素。这听起来可能是一项艰巨的任务，但我相信，本部分的第三部分中的章节将帮助你实现这一点。你将从第十一章开始，了解一些页面布局的基础知识，包括学习重要的 HTML5 语义页面元素，如<header>和<article>。从那里，第十二章将带你游览当今最热门和最强大的现代页面布局技术之一：flexbox。

现代网页设计全部关于响应式网页设计，它使页面在任何尺寸的屏幕上看起来都很好，工作得也很好，这正是第十三章和第十四章的主题。最后，在第十五章中，你将运用所有这些新学的页面布局知识，构建一个复杂的相册页面。

第十一章学习页面布局基础

别让我思考！——史蒂夫·克鲁格（克鲁格可用性第一定律）

本章涵盖

理解网页布局类型、技术和策略
了解 HTML5 语义页面布局元素
检查现代、现实世界的页面布局

这本书的前半部分旨在为创建网页打下坚实的基础。当你掌握了 HTML 和 CSS 的基础后，你学习了文本标签、字体、颜色、CSS 类、盒模型、浮动和定位元素以及图像和其他媒体。因此，恭喜你：你已经从仅仅能够构建网页到能够设计它们了。

唉，你将没有太多时间去享受你新获得的荣耀，因为这一章将直接深入到网页设计的下一阶段。在这里，你从 HTML 标签和 CSS 属性的“树木”中退后一步，去审视页面布局的“森林”。这指的是网页的整体结构和组织，如果这听起来微不足道或不重要，那么考虑一下：每个访问你页面的人，无论是有意还是无意，都会提出一堆问题。这个页面是关于什么的？我对它感兴趣吗？这个页面有我想要的信息吗？如果是的话，我能在哪里找到它？

所有这些问题——至少，应该可以通过查看你的布局来回答。如果你的结构混乱或组织杂乱无章，我保证你，大多数人会在几秒钟后离开。避免这种命运意味着花点时间去计划和编写一个布局，以展示你的内容在最佳、最友好的方式。

圣杯布局

为了帮助你学习各种网页布局技术，我将使用所谓的圣杯布局的一个版本，它由以下部分组成：

页面顶部的页眉
页眉下方的导航栏
由左列的主要页面内容和右列（有时是左列）的相关内容侧边栏组成的两个全高列
页面底部的页脚

根据你想要如何严格定义布局，这个主题有许多变体。例如，你可能想在导航栏和页脚之间想要三列而不是两列。另一个常见的变体是，如果内容没有延伸到那么远，页脚会出现在浏览器窗口的底部。

使用它

圣杯布局对于博客文章、文章、论文、教程和类似的内容导向页面非常有用。

图 11.1 展示了你将要构建的布局示意图。

图 11.1 圣杯网页布局的一个版本

要构建这个布局，你需要了解可用的页面布局方法。

理解网页布局方法

正如我在第七章中提到的，默认情况下，网络浏览器以它们在源文档中出现的顺序堆叠块级 HTML 内容。在每个块内部，文本从左到右运行（对于阅读方式为从左到右的语言）。对于最简单的网页（例如你在第五章中构建的个人主页），这种默认布局是足够的，但在这个阶段，你的网页设计生涯已经远远超出了这个水平。在这个层面上，你需要知道如何打破这种默认布局，以获得对网页上显示的网页内容的一些控制。

幸运的是，你有许多方法可以做到这一点，但你需要了解三种主要方法：

浮动 —正如你在第八章中学到的，你可以使用float属性将一个元素从正常的页面流程中分离出来，并将其发送到其父容器内的左侧或右侧。通过这种方式处理多个项目，你可以将内容组织成列和其他复杂的页面布局。本章后面的“使用浮动创建页面布局”中将有更多介绍。
内联块 —display: inline-block声明将块级元素从默认的垂直页面流程中移除，并将其添加到其他内联元素的水平（通常是左到右）流程中。这创造了许多有趣的页面布局机会，你将在本章后面的“使用内联块创建页面布局”中了解到一些。
Flexbox —这个强大但使用较少的 CSS 模块允许您以灵活的方式组织页面内容，这些容器可以包裹、增长和收缩。参见第十二章了解它是如何工作的。

谨慎行事

另一种常见的页面布局技术是一个名为 Bootstrap 的前端库(getbootstrap.com)。该库包含预制 HTML、CSS 和 JavaScript 组件，可以帮助您快速启动项目。然而，大多数现代网页设计师却放弃了像 Bootstrap 这样的复杂解决方案，而是选择自己编写网页代码。

你应该使用哪一个？我建议你不要使用浮动或内联块。我确实建议你学习浮动和内联块如何进行布局——这就是为什么我在本章中讨论它们的原因——因为你需要了解许多旧网站使用的技巧，你可能会发现这些技巧对于小型页面组件很有用。这留下了 flexbox，你将在第十二章中学习它，并在第十五章的项目中加以有效利用。

Flexbox 确实是你应该认真对待的东西。它为现代内容布局风格铺平了道路，并且它不会很快消失。它已经成为一个新的标准。所以，张开双臂，拥抱它吧！——欧汉斯·埃马纽埃尔

学习 HTML5 语义页面元素

在开始之前，你需要了解页面布局的最后一块拼图是 HTML5 元素集合，这些元素使你能够创建语义布局。为什么这很重要？因为每个上传到网络的页面都将以某种方式被自动化过程读取和解析，例如搜索引擎爬虫和为残疾人设计的屏幕阅读器。如果你的页面只是一系列匿名的<div>和<span>标签的集合，那么该软件不太可能分析页面以找到最重要的内容。

为了帮助你解决这个问题，HTML5 提供了一系列语义元素，你可以使用这些元素来指定页面每个区域包含的内容类型。这些元素有很多，但以下七个是最重要的：

<header>

<nav>

<main>

<article>

<section>

<aside>

<footer>

接下来的几个部分将解释这些元素。

正确的语义可以提高可访问性，因为辅助技术，如屏幕阅读器可以更好地解释我们内容的意义。——安娜·莫纳斯

`<header>`

你使用header元素来定义包含介绍性内容的页面区域。这种内容通常是网站标题（应该使用标题元素，如h1进行标记），但它也可以包括网站标志等内容。以下是一个示例：

<body>
    <header>
        <img src="logo.tif" alt="Semantics Depot logo">
        <h1>Semantics Depot</h1>
    </header>
    etc.
</body>

`<nav>`

你使用nav元素来定义包含导航内容的页面区域，例如指向网站其他部分的链接或搜索框。此元素可以在页面的任何位置出现，但通常出现在页面主要header元素之后：

<body>
    <header>
        <img src="logo.tif" alt="Semantics Depot logo">
        <h1>Semantics Depot</h1>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
        <a href="#">About Us</a>
    </nav>
    etc.
</body>

`<main>`

主元素被用作当前页面独特内容的容器。而header、nav、aside和footer元素通常在网站的所有或大多数页面中都是通用的，main元素旨在标记独特的内容。main元素通常出现在header和nav元素之后：

<body>
    <header>
        …
 </header>
    <nav>
        …
    </nav>
    <main>
`*Unique content goes here*`
    </main>
    etc.
</body>

`<article>`

article元素被用来标记一个完整、自包含的组成。这里的模式是报纸或杂志文章，但这个元素也可以应用于博客条目、论坛帖子或论文。大多数页面都有一个article元素嵌套在main元素内部：

<body>
    <header>
        …
    </header>
    <nav>
        …
    </nav>
    <main>
        <article>
 *Article content goes here*
        </article>
    </main>
    etc.
</body>

然而，在单个main元素内拥有多个article元素是完全可接受的。此外，如果这样做在语义上合适，也可以在article元素内部嵌套一个header元素：

<article>
    <header>
        <h2>Isn't It Semantic?</h2>
        <p>By Paul McFedries</p>
    </header>
 *Article content goes here*
</article>

`<section>`

你使用section元素来包围页面中你希望出现在页面大纲中的任何部分。也就是说，如果页面的某个部分由一个标题元素（h1到h6）和一些文本组成，你将使用<section>标签包围标题及其文本。这通常发生在article元素内部，如下所示：

<article>
    <section>
        <h3>Introduction</h3>
 *Introduction text*
    </section>
    <section>
 <h3>Argument</h3>
 `*Argument text*`
    </section>
    <section>
        <h3>Summary</h3>
 `*Summary text*`
    </section>
</article>

`<aside>`

你使用aside元素来标记与页面独特内容不直接相关的页面区域。一个典型的例子是包含最新网站新闻、Twitter 流等的侧边栏。aside元素可以出现在main元素内的任何位置（实际上可以在页面上多次出现），但最佳实践是将aside放在页面的article元素之后，如下所示：

<body>
    <header>
        …
    </header>
    <nav>
        …
    </nav>
    <main>
        <article>
            …
        </article>
        <aside>
            …
        </aside>
    </main>
    etc.
</body>

这是典型 HTML5 页面的语义布局：

<body>
    <header>
        …
    </header>
    <nav>
        …
    </nav>
    <main>
        <article>
            <section>
                …
            </section>
            <section>
                …
            </section>
            <aside>
 …
            </aside>
        </article>
    </main>
    <footer>
        …
    </footer>
</body>

圣杯布局，再访

之前，你学习了圣杯布局，我可以在 HTML5 语义页面元素的环境中重新介绍它。图 11.2 显示了你在图 11.1 中看到的相同示意图，但使用 HTML5 语义布局标签标识每个部分。

图 11.2 带有 HTML5 语义标签的圣杯网页布局

这里是布局的裸骨 HTML 代码：

<header>
    <img src="logo.tif" alt="Our logo">
    <h1>Site Title</h1>
</header>
<nav>
    <ul>
        <li>Item 1</li>
        etc.
    </ul>
</nav>    
<main>
    <article>
        <section>
            <h2>Article Title</h2>
 <p>Article paragraph</p>
            etc.
        </section>
        <aside>
            <p>Sidebar paragraph</p>
            etc.
        </aside>
    </article>
</main>
<footer>
    <p>Footer paragraph</p>
    etc.
</footer>

使用浮动创建页面布局

我有些简化，但使用浮动元素构建页面布局包括重复以下三个步骤：

让元素以默认方式流动。
当你需要两个或更多元素并排显示时，将它们浮动（通常向左浮动）。
当你想恢复默认页面流时，清除浮动。

如果你查看任何具有并排内容或按列排列内容的页面的源代码，大多数情况下该网站使用了浮动元素来实现效果。话虽如此，但对于渴望更直接和稳固布局方法的网页设计师来说，浮动正在失去青睐。这种方法有一天将是 flexbox 与一种称为 CSS Grid 的新技术的结合，但在那一天到来之前，你应该熟悉基于浮动的布局，因为它们仍然被广泛使用。

学习

要了解 CSS Grid 基础，请参阅 Web 设计游乐场上的教程“CSS Grid 入门”。在线：wdpg.io/grid

第 11.1 课：使用浮动创建圣杯布局

覆盖：使用float属性进行布局

在线：wdpg.io/11-1-0

圣杯包括三个并排内容实例：

在页眉中，你通常希望在网站标志旁边有一个网站标题。
在导航栏中，你通常希望导航项以一行显示。
侧边栏必须出现在主要内容右侧。

所有这些实例都需要使用float属性将元素从默认页面流中移出并并排渲染。

从以下示例中的页眉开始。

示例

在线：wdpg.io/11-1-1

这个例子向你展示了如何使用float将页眉标志和标题并排显示。

网页

CSS

header {
    border: 1px solid black;
    padding: .25em 0;
}
header img {
 float: left;    ① 
    padding-left: 1em;
}
h1 {
 float: left;    ② 
    padding-left: .5em;
}
.self-clear::after {    ③ 
 content: "";    ③ 
 display: block;    ③ 
 clear: both;    ③ 
}

① 将img元素向左浮动。

② 将 h1 元素向左浮动。

③ 使用清除浮动来防止标题塌陷。

HTML

<header class="self-clear">
    <img src="/images/your-logo-here.tif" alt="Our logo">
    <h1>Site Title</h1>
</header>

记住

我在这里使用类型选择器（如 header img）来使代码尽可能简单。实际上，通常更好的做法是为每个元素分配类，然后在您的 CSS 中选择这些类。

如您所见，img 元素和 h1 元素都被分配了 float: left，这使得它们在 header 元素的左侧并排排列。因为这些元素超出了默认的页面流，所以您通常需要调整填充或边距才能将它们放置在您想要的位置，就像我在示例中所做的那样。

现在按照以下示例浮动导航栏的项目。

示例

在线：wdpg.io/11-1-2

这个示例展示了如何使用 float 使导航栏项目并排。

网页

CSS

nav {
    border: 1px solid black;
    padding: .5em;
}
nav ul {
    list-style-type: none;
}
nav li {
 float: left;    ① 
    padding-right: 1.5em;
}

① 将 li 元素向左浮动。

HTML

<nav class="self-clear">
    <ul>
        <li>Home</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</nav>

在这种情况下，li 元素被分配了 float: left，这使得它们在 nav 元素的左侧并排排列。同样，我又使用了填充来调整元素的位置。

接下来，将 main 元素的 <article> 和 <aside> 标签浮动，以创建两列内容布局。以下示例展示了如何实现。

示例

在线：wdpg.io/11-1-3

这个示例展示了如何使用 float 在两列布局中使 article 和 aside 元素并排。

网页

CSS

article {
 float: left;    ① 
 width: 75%;    ② 
    border: 1px solid black;
}
aside {
 float: left;    ③ 
 width: 25%;    ④ 
    border: 1px solid black;
}

① 将 article 元素向左浮动。

② 设置 article 元素的宽度。

③ 将 aside 元素向左浮动。

④ 设置 aside 元素的宽度。

HTML

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article paragraph 1</p>
        <p>Article paragraph 2</p>
    </article>
    <aside>
        <h3>Sidebar Title</h3>
        <p>Sidebar paragraph</p>
    </aside>
</main>

在这种情况下，article 元素和 aside 元素都被分配了 float: left，这使得它们在 main 元素的左侧并排排列。（您也可以将 aside 元素向右浮动以获得相同的布局。）您还需要为每个元素分配一个 width 值来设置列的大小。

您列的宽度取决于您将如何使用它们。一般来说，如果其中一列是侧边栏，它不应该占用超过可用宽度的 25%。请注意，如果您已应用 box-sizing: border-box，则列百分比可以相加至 100 以填充主元素的宽度。

注意，两列的底部边框没有对齐，因为没有 CSS height 声明，浏览器会根据其内容的宽度为元素分配一个高度。这个问题在浮动列中很常见，但在下一个示例之后，我会向您展示一个解决方案。

最后，您准备好添加 footer 元素，如下面的示例所示。

示例

在线：wdpg.io/11-1-4

这个示例展示了如何通过清除浮动列将 footer 添加到页面底部。所有元素都添加了颜色，但在代码中大多数都没有显示。

网页

CSS

footer {
    padding: .25em 1em;
    background-color: #b6d7a8;
}

HTML

<footer class="self-clear">
    <p>Footer paragaph</p>
</footer>

游戏

你会如何修改这个布局，以在右侧而不是左侧显示侧边栏？在线：wdpg.io/11-1-6

游戏

你会如何修改这个布局，以显示三个内容列：在article元素的左侧和右侧显示侧边栏？在线：wdpg.io/11-1-7

注意，在此示例中，article和aside列具有相同的高度。我是如何做到这一点的？我通过使用称为伪列的技术来伪造它。以下是它是如何工作的：

在article和aside元素周围放置一个包装元素。

在此示例中，main元素可以充当包装器。
将相同的背景颜色分配给包装元素和aside元素。

在示例中，我将颜色#b6d7a8分配给两者。
将不同的背景颜色分配给article元素。

在示例中，我将article的背景颜色指定为white。

因为包装元素和aside元素使用相同的背景颜色，所以侧边栏看起来一直延伸到页脚。以下是代码的骨架版本：

<main class="self-clear">
    <article>
    </article>
    <aside>
    </aside>
</main>
<footer class="self-clear">
</footer>
<style>
    main, aside {
        background-color: #b4a7d6;
    }
    article {
        background-color: white;
    }
    .self-clear {
        content: "";
        display: block;
        clear: both;
    }
</style>

使用浮动布局网页内容是一个老式的、常见的 CSS 技巧。然而，正如你在本节中看到的，它有一些问题。你必须记住在需要的时候清除你的浮动，例如；边距往往会塌陷；你通常不得不求助于诸如伪列等笨拙的技巧来使事物看起来不错。你可以通过使用内联块来解决这些问题，我将在下一节中介绍。

使用内联块创建页面布局

使用内联块元素构建页面布局与使用浮动类似：

让页面元素以默认方式流动。
当你需要两个或更多元素并排显示时，将它们显示为内联块。

注意，使用内联块的一个主要优点是你不需要显式清除元素。

第 11.2 课：使用内联块创建圣杯布局

覆盖：使用inline-block属性进行布局

在线：wdpg.io/11-2-0

如前所述，圣杯布局包括三个需要内容并排显示的实例：页眉、导航栏和内容列。所有这些实例都需要使用display: inline-block声明来将元素从默认页面流程中取出并并排渲染。默认情况下，内联块是从左到右显示的（或根据默认的内联方向），因此它们类似于声明float: left。

我从以下示例中的页眉开始。

示例

在线：wdpg.io/11-2-1

此示例向您展示了如何使用内联块将页眉标志和标题并排显示。

网页

CSS

header {
    border: 1px solid black;
    padding: .5em 0 .1em 1em;
}
h1 {
 display: inline-block;    ① 
    padding-left: .5em;
    font-size: 2.5em;
}

① 将h1元素显示为内联块。

HTML

<header>
    <img src="/images/your-logo-here.tif" alt="Our logo">
    <h1>Site Title</h1>
</header>

记住

我在这里使用类型选择器（如header img）来尽可能简化代码。在实践中，通常更好的做法是为每个元素分配类，然后在 CSS 中选择这些类。

默认情况下，img元素是内联块，我已经声明了h1元素使用display: inline-block，这使得这两个元素从左到右并排显示。

现在将导航栏的项目转换为内联块，如下例所示。

示例

在线：wdpg.io/11-2-2

这个例子展示了如何使用内联块使导航栏项目并排显示。

网页

CSS

nav {
    padding: .5em;
    border: 1px solid black;
}
nav ul {
    list-style-type: none;
    padding-left: .5em;
}
nav li {
 display: inline-block;    ① 
    padding-right: 1.5em;
}

① 将li元素显示为内联块。

HTML

<nav>
    <ul>
        <li>Home</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</nav>

在这种情况下，li元素被声明为display: inline-block，这使得它们在nav元素的左侧并排显示。

接下来，将main元素的<article>和<aside>标签转换为内联块，这为您提供了两列内容布局。以下示例显示了如何操作。

示例

在线：wdpg.io/11-2-3

这个例子展示了如何使用内联块在两列布局中使article和aside元素并排显示。

网页

CSS

article {
 display: inline-block;    ① 
    width: 75%;
    border: 1px solid black;
}
aside {
 display: inline-block;    ② 
 vertical-align: top;    ③ 
    width: 25%;
    border: 1px solid black;
}

① 将article元素显示为内联块。

② 将aside元素显示为内联块。

③ 将aside元素文本与顶部对齐。

HTML

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article paragraph 1</p>
        <p>Article paragraph 2</p>
 </article><aside>    ④ 
        <h3>Sidebar Title</h3>
        <p>Sidebar paragraph</p>
    </aside>
</main>

④ 列元素之间没有空格

在这种情况下，article元素和aside元素都被分配了display: inline-block，这使得它们在main元素的左侧并排显示。您还需要为每个元素分配一个width值来设置列的大小。

注意，在 HTML 代码中，我将</article>结束标签和<aside>开始标签紧密地放在一起，这样它们之间没有空格。当使用内联块时，这是非常重要的，因为否则浏览器在渲染元素时会在它们之间添加一些空间，这可能会搞乱你的宽度计算。

你无疑已经注意到，与浮动一样，两列的底部边框没有对齐。您将使用相同的解决方案来解决这个问题。

最后，添加footer元素，如下例所示。

示例

在线：wdpg.io/11-2-4

这个例子展示了如何将footer元素添加到页面底部，尽管在这种情况下，没有必要清除任何内容。所有元素都添加了颜色，但大多数在代码中并未显示。

网页

CSS

footer {    ① 
    padding: 1em;
    background-color: #b6d7a8;
}

① 内联块不需要清除。

HTML

<footer>
    <p>Footer paragaph</p>
</footer>

播放

你会如何修改这个布局以将侧边栏放在左侧而不是右侧？在线：wdpg.io/11-2-6

播放

你会如何修改这个布局以显示三个内容列：在article元素左侧和右侧的侧边栏？在线：wdpg.io/11-2-7

就像我在使用浮动布局时做的那样，我通过使用伪列使article和aside列看起来具有相同的高度。（注意，这些伪列只有在article元素比aside元素高时才能正常工作。）

尽管您可以通过轻松创建相当复杂的布局来使用内联块来布局网页内容并不常见。内联块当然有其缺点。您必须注意您的垂直对齐；您通常必须确保块之间没有空白；并且您不能像使用float: right一样将元素发送到父元素的右侧。为了解决这些问题并获得对布局的额外控制，您需要摒弃这些旧技术，转而使用最新的布局技术：flexbox。您将在第十二章中学习您需要知道的一切。

摘要

您可以通过使用 HTML5 页面布局标签来使您的页面更具语义性：<header>, <nav>, <main>, <article>, <section>, <aside>, 和 <footer>.
要使用基于浮动的布局，让元素以默认方式流动；然后，当您需要两个或更多元素并排显示时，将它们浮动（通常向左浮动）。记住，当您想要恢复默认页面流动时，清除浮动。
要使用基于内联块的布局，让页面元素以默认方式流动；然后，当您需要两个或更多元素并排显示时，将它们显示为内联块。

第十二章使用 Flexbox 创建页面布局

Flexbox 是第一个适用于现代网页的 CSS 布局技术。——Paddi MacDonnell

本章涵盖

理解 flexbox 的工作原理
学习与 flexbox 容器和项目一起工作的技术
使用实际想法充分利用 flexbox
使用 flexbox 构建神圣布局

在第十一章中，你看到浮动和内联块可以完成任务，但不是没有遇到问题、怪癖和解决方案，如清除浮动、创建假列和避免空白。即使有了所有这些，这些布局策略也无法实现神圣布局的一个特性：如果页面内容没有填满屏幕高度，则在屏幕底部显示页脚。

本章的布局策略避免了所有这些怪癖，解决了页脚问题，并具有现代技术的清新吸引力。我所说的就是 flexbox，在你开始使用它进行布局之前，你需要了解它是什么以及它是如何工作的。接下来的几节将解释你需要知道的一切。

理解 Flexbox

Flexbox 是这种方法繁琐官方名称的欢迎简写：弹性盒子布局模块。Flexbox 背后的基本原理是提供一种绕过浏览器处理内容块僵硬、繁琐方式的方法。默认情况下是堆叠。考虑以下div元素集合：

<div class="container">
    <div class="item itemA">A</div>
    <div class="item itemB">B</div>
    <div class="item itemC">C</div>
    <div class="item itemD">D</div>
    <div class="item itemE">E</div>
    <div class="item itemF">F</div>
</div>

这里没有展示我应用给每个项目元素的独特背景颜色的类，图 12.1 显示了结果。正如你所看到的，div元素是堆叠的，并扩展到浏览器窗口的宽度。

图 12.1 div元素的默认浏览器布局

即使你使用浮动或内联块打破了这种默认的流动，浏览器仍然负责并按照它认为的位置来调整你的块，这种感觉仍然不舒服。是的，你可以通过恰当地样式化你的浮动和内联块来在一定程度上驯服浏览器，但这些调整是脆弱的。试着想象一下，如果侧边栏文本比文章文本长，浮动和内联块的神圣布局会发生什么。（提示：结果并不美观。）

Flexbox 通过提供简单但极其强大的方法来布局、分配、对齐、调整大小，甚至对父容器中的子元素进行排序，从而拯救了布局问题。名称中的flex部分来源于这项技术的主要原则之一：容器中的子项应该能够通过扩展以填充空余空间（如果空间过多）或通过收缩以允许空间减少来改变尺寸（宽度和高度）。无论内容量是否改变，还是屏幕大小（如最大化窗口或更改设备的屏幕方向）是否改变，这种情况都会发生。

那么，flexbox 是完美的吗？不，它不是。它有两个主要缺点：

它的继承灵活性意味着它有时会以看似不合理的方式表现。一开始可能会让人抓狂，但当你使用它几次之后，你开始看到 flexbox 为什么会有这样的行为。
它不适合大规模布局。Flexbox 非常适合页面组件——例如页眉或侧边栏——并且对于小规模布局（例如神圣的实践布局）来说很好。但对于大型、复杂的项目来说，flexbox 几乎总是处理不过来的。（如果你有时间，等待 CSS Grid Layout 获得足够的浏览器支持。）

学习

要现在学习 CSS Grid 基础知识，请查看我在 Web Design Playground 上的教程“CSS Grid 入门”。在线：wdpg.io/grid

当你使用 flexbox 时，你处理两种页面对象：容器和项目。一个flex 容器是任何类型的父块级元素——div、p、你在第十一章中学到的任何 HTML 语义页面元素，甚至是body元素——它包围一个或多个元素。这些子元素被称为flex 项目。

好了，理论就到这里。现在是时候开始学习 flexbox 是如何工作的了。

与 Flexbox 容器一起工作

在你可以使用 flexbox 之前，你需要决定哪个块级元素将成为 flex 容器。当你这样做之后，你只需通过一个 CSS 声明将该元素转换为容器：display: flex。以下规则将header元素转换为 flex 容器：

header {
    display: flex;
}

容器的子元素自动成为 flex 项目；不需要额外的规则或声明或代码。从那里开始，你可以开始自定义你的 flex 容器及其项目以适应手头的任务。

我发现了解和使用 flexbox 的最佳方式是问自己一系列问题——一套针对容器，另一套针对项目。以下是容器问题：

你希望容器的项目沿哪个方向运行？
你希望项目沿主轴如何排列？
你希望项目沿交叉轴如何排列？
你希望项目是否换行？
你希望多行沿交叉轴如何排列？

（如果你不确定我所说的主轴和交叉轴是什么，所有答案将在下一节中揭晓。）接下来的几节将询问并展示对这些问题的可能答案。

你希望容器沿哪个方向运行？

Flexbox 的第一个灵活性在于它不指定容器项目的唯一方向。尽管浏览器的默认布局严格强制垂直方向，尽管浮动和内联块仅水平工作，但 flexbox 乐于任一方向。使用 flexbox，你来决定。

可能最重要的 flexbox 概念是，flexbox 容器始终有两个轴：

主轴——与容器项目方向相同的轴
交叉轴 —垂直于主轴的轴（交叉轴也称为次轴）

您在设置容器上的 flex-direction 属性时确定主轴方向：

*container* {
    display: flex;
    flex-direction: row|row-reverse|column|column-reverse;
}

row—将主轴设置为水平，项目从左到右运行（默认）
row-reverse—将主轴设置为水平，项目从右到左运行
column—将主轴设置为垂直，项目从上到下运行
column-reverse—将主轴设置为垂直，项目从下到上运行

使用本章前面图 12.1 中显示的 div 元素，以下是您如何通过使用从右到左（row）方向将父 div 转换为 flex 容器的示例：

.container {
    display: flex;
    flex-direction: row;
}

记住

row 是默认值，因此声明 flex-direction: row 是可选的。

游戏

您可以在游乐场交互式地尝试所有 flex-direction 值。在线：wdpg.io/12-1-2

图 12.2 显示了结果，而图 12.3 显示了使用 flex-direction: row-reverse 时会发生什么。

图 12.2 带有 flex 容器和应用 row 方向的 div 元素

图 12.3 带有 flex 容器和应用 row-reverse 方向的 div 元素

记住

如果您将 flex-direction: column 应用于此示例，您将得到本章前面显示的图 12.1 中的布局；主轴将从上到下运行，交叉轴将从左到右运行。如果您应用 flex-direction: column-reverse，您将得到相同布局，但 div 元素的顺序相反；主轴将从下到上运行，交叉轴将保持从左到右。

图 12.2 显示了使用 float: left 或 display: inline-block 的相同结果，而图 12.3 显示了使用 float: right 的相同结果（并且不能与内联块一起使用）。然而，使用 flexbox，您只需向容器添加几个声明即可获得结果，而不是像使用浮动和内联块那样为每个子元素设置样式。一开始，您就可以看到 flexbox 更容易且更高效。

游戏

您将如何使用 flexbox 以倒序显示编号列表？在线：wdpg.io/12-1-4

您希望项目沿主轴如何排列？

当您使用 flex-direction 为容器设置主轴时，您的下一个决定是您希望如何沿该轴排列项目。在容器上使用 justify-content 属性：

*container* {
    display: flex;
    justify-content: flex-start|flex-end|center|space-between|space-around;
}

flex-start—将项目放置在容器的开始处（默认）
flex-end—将项目放置在容器的末尾
center—将项目放置在容器中间
space-between—将项目放置在容器的开始处，将最后一个项目放置在末尾，其余项目在两者之间均匀分布
space-around—通过为每个项目在两侧提供相同数量的空间，在容器内均匀分布项目

谨慎

space-around值并不完全符合预期，因为你在第一个项目之前和最后一个项目之后总是得到更少的空间（参见本章后面的图 12.5）。这是因为每个项目在两侧都分配了一定的空间，所以内部项目之间有两个单位的空间，而第一个项目之前和最后一个项目之后只有一个单位的空间。

记住

flex-start值是默认值，因此声明justify-content: flex-start是可选的。

图 12.4 展示了当主轴水平时，每个值对容器内项目排列的影响。（请注意，我在每个容器周围添加了轮廓，以便你可以可视化其边界。）

播放

你可以在 Playground 上交互式地尝试不同的justify-content值。在线：wdpg.io/12-1-5

你希望如何排列交叉轴上的项目？

在主轴上排列项目后，你的下一个任务是选择交叉轴上的排列方式。你可以通过使用容器的align-items属性来设置：

*container* {
    display: flex;
    align-items: stretch|flex-start|flex-end|center|baseline;
}

stretch—沿交叉轴扩展每个项目以填充容器（默认值）
flex-start—沿交叉轴的开始对齐项目
flex-end—沿交叉轴的末尾对齐项目
center—沿交叉轴中间对齐项目
baseline—沿 flex 容器的基线对齐项目

记住

stretch值是默认值，因此声明align-items: stretch是可选的。

图 12.4 justify-content值的应用

图 12.5 展示了当交叉轴垂直时，每个值对容器内项目排列的影响。（我在每个容器周围添加了轮廓，以便你可以可视化其边界。）

图 12.5 align-items值的作用

播放

你可以在 Playground 上交互式地尝试不同的align-items值。在线：wdpg.io/12-1-6

常见问题解答

这些对齐选项是不是让人困惑，还是只有我这样？ 几乎每个刚开始使用 flexbox 的人都会发现对齐是最让人困惑的部分。将主轴视为对齐轴可能会有所帮助，因为你在该轴上使用justify-content属性来排列项目。同样，将交叉轴视为对齐轴，因为你在该轴上使用align-items属性来排列项目。

你希望项目是否换行？

默认情况下，flexbox 将容器视为单行（如果你已将 flex-direction 声明为 row 或 row-reverse）或单列（如果你已将 flex-direction 声明为 column 或 column-reverse）。如果容器的项目太大而无法适应行或列，flexbox 会沿着主轴缩小项目以使它们适应。或者，你可以强制浏览器将容器的项目折行或折列，而不是缩小它们。你可以通过使用容器的 flex-wrap 属性来完成此操作：

*container* {
    display: flex;
    flex-wrap: nowrap|wrap|wrap-reverse;
}

nowrap—不折行容器项目（默认）
wrap—根据需要将项目折行或折列
wrap-reverse—在交叉轴的末尾折行项目

记住

nowrap 值是默认值，因此声明 flex-wrap: nowrap 是可选的。

图 12.6 展示了当主轴为水平时，每个值对容器内项目排列的影响。（我在每个容器周围添加了橙色轮廓，以便你可以可视化其边界。）

图 12.6 flex-wrap 值的工作原理

游戏

你可以通过在 Playground 上交互式地尝试这三个 flex-wrap 值来理解这三个值。在线：wdpg.io/12-1-8

你希望沿交叉轴排列多行吗？

你最后的容器相关决定是希望多行——即多行或多列——沿交叉轴如何排列。这与沿主轴排列单个 flex 项目类似，但在这里，你处理的是整个项目行。你可以通过使用容器的 align-content 属性来控制这种排列：

*container* {
    display: flex;
    align-content: stretch|center|flex-start|flex-end|space-between|space-around;
}

stretch—将折行沿交叉轴扩展以填充容器高度（默认）
center—将行放置在交叉轴的中间
flex-start—将行放置在交叉轴的开始处
flex-end—将行放置在交叉轴的末尾
space-between—将第一行放置在交叉轴的开始处，将最后一行放置在末尾，并将其余行均匀分布在两者之间
space-around—通过为每行提供两侧的固定空间量，在容器内均匀分布行

小心

与 justify-content 类似，space-around 值在第一行之前和最后一行之后提供一单位空间，但在所有其他行之间提供两单位空间。

记住

stretch 值是默认值，因此声明 align-content: stretch 是可选的。

图 12.7 展示了当主轴为水平时，每个值对容器内行排列的影响。（我在每个容器周围添加了橙色轮廓，以便你可以可视化其边界。）

图 12.7 使用 align-content 值

游戏

你可以在 Playground 上交互式地尝试所有align-content值。在线：wdpg.io/12-1/10

第 12.1 课：使用 Flexbox 实现元素居中

覆盖内容：flex和其他 flex 容器属性

在线：wdpg.io/12-1-1

与网页布局相关的问题中，最常见的一个问题看似简单：我如何水平和垂直居中一个元素？也就是说，你如何使用 CSS 将元素放置在浏览器窗口的中央？多年来，已经创造了许多巧妙的方法来实现这一目标，其中大多数都使用了高级和复杂的 CSS 规则。幸运的是，你不必担心这些，因为 flexbox 让你只需四行 CSS 就能将任何元素居中，如下面的示例所示。

示例

在线：wdpg.io/12-1-1

这个示例向你展示了如何在浏览器窗口中水平和垂直居中h1元素。

网页

CSS

div {
    display: flex;
 justify-content: center;    ① 
 align-items: center;    ② 
 height: 100vh;    ③ 
}

① 水平居中h1。

② 垂直居中h1。

③ 将div的高度设置为窗口的高度。

HTML

<div>
    <h1>Center Me!</h1>
</div>

这个示例通过将div元素转换为 flex 容器来实现，这会自动将h1元素转换为 flex 项目。通过将justify-content和align-items都设置为center，并给div赋予浏览器窗口的全高（默认情况下，它是浏览器窗口的宽度），你就可以在窗口中居中h1。

与 Flexbox 项目一起工作

现在你已经了解了关于 flexbox 容器值得知道的一切，现在将你的注意力转向这些容器内部的 flex 项目。就像以前一样，了解和使用 flex 项目最好的方法是通过提出一系列问题：

如果有额外空间，你希望项目增长吗？
如果空间不足，你希望项目收缩吗？
你想要为项目提供一个初始大小吗？
你想要改变项目的顺序吗？
你想要覆盖项目的对齐方式吗？

接下来的几节将讨论这些问题，并提供一些答案。

如果有额外空间，你希望项目增长吗？

如果你回顾一下图 12.4，注意在flex-start示例中，flex 项目在容器的开始处聚集，在右侧留下了一块空白空间。这种效果可能是你想要的，或者你可能更喜欢让项目填充这块空白空间。你可以通过将flex-grow属性应用于你想要扩展的项目来实现这一点：

*item* {
    flex-grow: *value*;
}

默认情况下，所有 flex 项目都被赋予flex-grow值为0。要将项目增长以填充容器的空白空间，你应将这些项目的值设置为正数，如下所示（参见图 12.8）：

如果你将任何正数分配给容器中的一个 flex 项目，容器中的空白空间量将添加到该项目中。
如果你给容器中的多个弹性项目分配相同的正数，容器中的空余空间将平均分配给这些项目。
如果你给容器中的多个弹性项目分配不同的正数，容器中的空余空间将按比例分配给这些项目，比例基于你提供的值。如果你给三个项目分配值1、2和1，那么这些项目分别获得 25%、50%和 25%的空余空间。

精通

要计算分配给每个项目的空余空间的比例，将给定容器的所有flex-grow值相加，然后将单个flex-grow值除以这个总和。例如，值1、2和1的总和为4，所以百分比分别是 25%（1/4）、50%（2/4）和 25%（1/4）。

图 12.8 不同flex-grow值的影响

游戏

你可以在 Playground 上交互式地尝试不同的flex-grow值。在线：wdpg.io/12-2-2

你希望项目在空间不足时缩小吗？

将弹性项目扩展以填充容器的空余空间的问题的相反问题是当容器没有足够空间时缩小弹性项目。这种缩小默认情况下是激活的，所以如果浏览器检测到弹性项目太大而无法适应容器，它会自动减小弹性项目以适应。

每个项目缩小的程度取决于其与其他项目的大小关系以及容器的大小。假设你正在处理一个水平的主轴（即flex-direction设置为row），并且容器宽度为 1200px，但其中的五个项目每个宽度为 400px。总共是 2000px，所以浏览器必须减小项目宽度 800px 以适应容器。在这种情况下，因为所有项目的宽度都相同，浏览器将每个项目的宽度减少 160px。

如果项目有不同的宽度，计算会变得更加复杂，所以这里就不详细说明了。只需知道每个项目的宽度减少量取决于其初始宽度。初始宽度越大，项目缩小的越多。

学习

Mike Reithmuller 在这里对计算项目缩小涉及的数学进行了清晰的解释：madebymike.com.au/writing/understanding-flexbox。

而不是让浏览器决定每个项目减少多少，你可以指定某个项目比其他项目减少更多或更少。你通过将flex-shrink属性应用于项目来实现这一点：

*item* {
    flex-shrink: *value*;
}

默认情况下，所有弹性项目都被赋予flex-shrink值为1，这意味着在计算缩小因子时它们都被同等对待。要自己控制缩小因子，按照以下方式给这些项目分配正值（参见图 12.9）：

如果你将 flex-shrink 设置为一个大于 1 的数字，浏览器会根据你提供的值按一定比例减少该元素的大小，比其他元素减少得更多。（再次强调，这里的数学计算相当复杂。）
如果你将 flex-shrink 设置为一个大于 0 但小于 1 的数字，浏览器会减少元素的大小，但比其他元素减少得少。
如果你将 flex-shrink 设置为 0，浏览器不会缩小元素。

注意

浏览器不会将元素缩小到小于显示其内容所需的最小尺寸。如果你继续增加元素的 flex-shrink 值，而元素拒绝变得更小，那么该元素可能已经达到了其可能的最小尺寸。

图 12.9 不同 flex-shrink 值的效果。每个元素大小为 300px，容器大小为 600px。

游戏

你可以在游乐场交互式地尝试不同的 flex-shrink 值。在线：wdpg.io/12-2-5

你想为元素提供一个初始大小吗？

你已经看到，弹性元素可以根据它们在容器中的适应情况而增长或缩小，你可以通过 flex-grow 和 flex-shrink 属性来控制这个过程。但是，当我说弹性元素可以增长或缩小，它们是从哪里增长和缩小的呢？这取决于：

如果元素有一个声明的 width 值（如果 flex-direction 设置为 row）或一个声明的 height 值（如果 flex-direction 设置为 column），元素会从这个初始尺寸开始增长或缩小。
如果元素没有声明宽度或高度，浏览器会自动将元素的尺寸设置为适应内容所需的最小值。元素可以从这个初始值增长，但不能缩小到更小的值。

后者情况——即没有声明 width（对于 flex-direction: row）或 height（对于 flex-direction: column）——会导致两个问题。首先，它阻止元素缩小到小于其内容的大小。其次，初始大小（即显示内容所需的最小尺寸）可能比你需要的要小。你可以通过声明一个 flex basis 来解决这两个问题，这是对元素的建议大小。你可以通过应用 flex-basis 属性来实现这一点：

*item* {
    flex-basis: *value*|auto|content;
}

*value*——为宽度（在 flex-direction: row 时）或高度（在 flex-direction: column 时）设置一个特定的尺寸。你可以使用在第七章中学到的任何 CSS 度量单位，包括 px、em、rem、vw 和 vh。你还可以将 *value* 设置为百分比。
auto——允许浏览器根据元素的 width 或 height 属性（默认值）设置初始值。如果没有声明宽度或高度，auto 与 content 相同，将在下一节讨论。
content——根据元素的内容设置初始宽度或高度。

使用弹性简写属性

你应该知道，弹性框提供了一个简写属性用于 flex-grow、flex-shrink 和 flex-basis。这个属性名为 flex，它使用以下任何一种语法：

*item* {
    flex: *flex-grow* *flex-shrink* *flex-basis*;
    flex: *flex-grow* *flex-shrink*;
    flex: *flex-grow* *flex-basis*;
    flex: *flex-grow*;
    flex: *flex-basis*;
}

这是一个使用每个属性的默认值的示例声明：

flex: 0 1 auto;

此示例将 flex-grow 设置为 1，将 flex-shrink 设置为 0：

flex: 1 0;

此最终示例将一个项目的固定大小设置为 10em：

flex: 0 0 10em;

你想改变一个项目的顺序吗？

弹性框提供的最令人惊讶——并且非常实用的技巧之一是能够改变容器中项目的顺序。你会在什么情况下使用这个功能？以下有两个常见的场景：

可访问性的一个重要原则是将页面的主要内容尽可能放置在页面的顶部。如果你在左侧边栏中有广告或其他非必要内容，那么这些内容在源文档中必然是首先出现的。然而，使用弹性框，你可以将边栏的代码放在主要内容之后，然后改变其位置，使其仍然出现在页面的左侧。
移动网页设计的一个重要原则是将主要内容放置在移动用户看到的初始屏幕上。如果你不想为桌面用户重新结构内容，你可以添加一个 CSS 媒体查询，使用弹性框根据所使用的设备改变内容顺序。

你可以通过使用 order 属性来改变弹性项目的顺序：

*item* {
    order: *value*;
}

默认情况下，弹性容器中的所有项目都被赋予 order 值为 0。你可以按照以下方式操作项目顺序：

项目 order 值越高，它在容器中出现的越晚。
order 值最高的项目在容器中最后出现。
order 值最低的项目在容器中首先出现。

精通

允许使用负 order 值，因此将一个项目的 order 值设置为 -1 是将其移动到容器前面的一种简单方法。

图 12.10 展示了几个 order 值的运行情况。

图 12.10 不同 order 值的效果

游戏

你可以在游乐场中交互式地尝试一些 order 值。在线：wdpg.io/12-2-6

你想覆盖一个项目的对齐方式吗？

你之前已经看到，你可以使用 align-items 属性来沿着容器的交叉轴排列项目。与其将所有项目以相同的方式对齐，你可能更喜欢覆盖这种全局对齐并给一个项目分配不同的对齐方式。你可以通过设置项目的 align-self 属性来实现这一点：

*item* {
    align-self: stretch|flex-start|flex-end|center|baseline;
}

可能的值与之前概述的方式相同（见“你希望项目如何沿交叉轴排列？”）。你还可以将值 auto 分配给项目，以将其重置为当前的 align-items 值。图 12.11 显示了一个将 align-items 设置为 flex-start 但最后一个项目的 align-self 设置为 flex-end 的容器。

Figure 12.11 你可以使用align-self来覆盖容器的align-items值。

Flexbox 浏览器支持

关于 flexbox 浏览器支持的好消息是它在所有当前浏览器中都有效。实际上，它甚至在绝大多数最近发布的浏览器中都有效，所以大部分情况下你不需要担心使用浏览器前缀。

如果你必须支持旧版浏览器，那么为了使 flexbox 正常工作，需要一些前缀。这些前缀可能会变得复杂，因为 flexbox 语法在不同版本之间有所变化，所以支持旧版浏览器意味着要支持这些旧语法。与其逐个列出所有这些前缀，我宁愿将这个任务交给一个叫做 Autoprefixer 的出色工具（autoprefixer.github.io），如图 12.12 所示。你将你的非前缀代码粘贴到左侧面板，完全前缀的代码会自动出现在右侧面板。它还附带一个过滤器框，你可以使用它来指定你希望浏览器支持的范围：

输入last *x* versions以支持所有浏览器最近发布的*x*个版本（例如last 4 versions）。
输入> *y*``%以支持至少拥有*y*``%市场份额的浏览器（例如> .5%）。

Figure 12.12 使用 Autoprefixer 的在线版本为你的 flexbox 代码添加浏览器供应商前缀。

第 12.2 课：创建缩略图列表

涵盖：flex-grow和flex-shrink属性

在线：wdpg.io/12-2-0

一个常见的网页组件是一个简单的缩略图列表，左侧有一个缩略图图像，右侧有描述或其他信息。这些元素用于相册、用户目录、书单、项目摘要等等。使用常规 CSS 让图像和文本表现良好是棘手的，但使用 flexbox 则非常简单，如下面的例子所示。

示例

在线：wdpg.io/12-2-1

这个例子展示了如何使用 flexbox 创建一个缩略图列表。

网页

CSS

.dictionary-container {
    list-style-type: none;
}
.dictionary-item {
 display: flex;    ① 
}
.dictionary-image {
 flex-shrink: 0;    ② 
}
.dictionary-entry {
 flex-grow: 1;    ③ 
}

① 每个li元素都变成一个 flex 容器。

② 防止缩略图缩小。

③ 允许文本使用容器的剩余空间。

HTML

<ul class="dictionary-container">
    <li class="dictionary-item">
        <div class="dictionary-image">
            <img src="/images/animalpath.jpg" alt="Photo of an animal path">
        </div>
        <div class="dictionary-entry">
            <h4>animal path</h4>
            <p>A footpath or track made by the constant and long-term walking of animals.</p>
        </div>
    </li>
    etc.
</ul>

第 12.3 课：使用 flexbox 创建圣杯布局

涵盖：使用flex和其他 flexbox 属性进行布局

在线：wdpg.io/12-3-0

好的，现在你可以将注意力转向使用 flexbox 构建圣杯布局。和之前一样，圣杯布局包括三个需要内容并排显示的实例：页眉、导航栏和内容列。在这三个实例中，你将元素放置在具有水平主轴的 flexbox 容器中。

然而，首先请注意，您希望这些元素堆叠，这意味着它们需要一个使用垂直主轴的弹性容器。<body> 标签做得很好，所以将 body 设置为具有垂直主轴且内容从顶部开始的弹性容器：

body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 50em;
    min-height: 100vh;
}

注意，我还指定了容器的最大宽度和最小高度。当我谈到稍后添加页脚时，您将看到我为什么使用 100vh。

现在处理标题，如下例所示。

示例

在线：wdpg.io/12-3-1

此示例向您展示了如何使用弹性盒模型将标题标志和标题并排排列。

网页

CSS

header {
 display: flex;    ① 
 justify-content: flex-start;    ① 
 align-items: center;    ① 
    border: 1px solid black;
    padding: 1em;
}
header img {
 flex-shrink: 0;    ② 
}
h1 {
 flex-grow: 1;    ③ 
    padding-left: .5em;
    font-size: 2.5em;
}

① 将 header 元素显示为弹性容器。

② 防止标志缩小。

③ 让 h1 元素使用标题的剩余空间。

HTML

<header>
    <img src="/images/your-logo-here.tif" alt="Our logo">
    <h1>Site Title</h1>
</header>

在此代码中，我将标题元素转换为弹性容器，其中项目从容器的开始沿主轴（水平）排列，并在交叉轴（垂直）上居中。

现在将导航栏转换为水平弹性容器，如下例所示。

示例

在线：wdpg.io/12-3-2

此示例向您展示了如何使用弹性盒模型将导航栏项并排排列。

网页

CSS

nav {
    padding: .5em;
    border: 1px solid black;
}
nav ul {
 display: flex;    ① 
 justify-content: flex-start;    ① 
    list-style-type: none;
    padding-left: .5em;
}
nav li {
    padding-right: 1.5em;
}

① 将 ul 元素显示为弹性容器。

HTML

<nav>
    <ul>
        <li>Home</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</nav>

在这种情况下，ul 元素被转换为弹性容器，这意味着 li 元素成为从容器开始水平排列的弹性项。

接下来，将 main 元素的 <article> 和 <aside> 标签转换为弹性项，这为您提供了两列内容布局。以下示例显示了如何实现。

示例

在线：wdpg.io/12-3-3

此示例向您展示了如何使用弹性盒模型在两列布局中并排排列 article 和 aside 元素。

网页

CSS

main {
 display: flex;    ① 
 flex-grow: 1;    ② 
}
article {
 flex-grow: 3;  ③

    border: 1px solid black;
}
aside {
 flex-grow: 1;    ④ 
    border: 1px solid black;
}

① 将 main 显示为弹性容器。

② 让它垂直增长。

③ 让 article 使用三个单位的空间

④ 让 aside 使用一个单位的空间。

HTML

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article paragraph 1</p>
        <p>Article paragraph 2</p>
    </article>
    <aside>
        <h3>Sidebar Title</h3>
        <p>Sidebar paragraph</p>
    </aside>
</main>

这里正在进行一些有趣的事情。首先，请注意，main 元素承担双重职责：它作为 article 和 aside 元素的弹性容器，并且它也是 body 元素弹性容器中的一个弹性项。将 main 元素的 flex-grow 设置为 1 告诉浏览器在 body 容器中给 main 所有空的垂直空间。同样，您为什么要这样做将在您到达页脚时变得明显。

对于 article 和 aside 弹性项，我分别分配了 flex-grow 值为 3 和 1，这意味着 article 获得了可用水平空间的 75%，而 aside 获得了剩余的 25%。

精通

注意，article 和 aside 元素的高度相同——这是由于 body 容器默认的 align-items 的 stretch 值带来的一个令人愉快的额外功能。您得到一个真正的全高侧边栏，而无需求助于伪列。

最后，以与第十一章中使用的浮动和内联块布局相同的方式添加 footer 元素。图 12.13 显示了结果。

图 12.13 使用 flexbox 的完整圣杯布局

你能看到什么不同吗？没错：footer 元素出现在浏览器窗口的底部，这正是真正的圣杯布局中它应该出现的位置。你通过以下三个步骤实现了这个优雅的细节：

将 body 元素转换为具有垂直主轴的 flex 容器
在 body 元素上声明 min-height: 100vh，这将强制 body 元素始终至少与浏览器窗口一样高
在 main 元素上设置 flex-grow: 1 以强制它使用 body 容器中可用的任何可用空垂直空间

播放

你如何修改这个布局以将侧边栏放在左侧而不是右侧？在线：wdpg.io/12-3-5

播放

你如何修改这个布局以显示三个内容列：在 article 元素左侧和右侧的侧边栏？在线：wdpg.io/12-3-6

摘要

你希望容器向哪个方向运行？使用 flex-direction。
你希望项目沿主轴如何排列？使用 justify-content。
你希望项目沿交叉轴如何排列？使用 align-items 属性。
你希望项目是否换行？使用 flex-wrap。
你希望多行沿交叉轴如何排列？添加 align-content 属性。
如果有额外空间，你希望项目是否增长？使用 flex-grow。
如果空间不足，你希望项目是否收缩？使用 flex-shrink。
你想为项目提供一个初始大小吗？你可以使用 flex-basis 属性。
你想改变一个项目的顺序吗？你可以使用 order 属性。
你想覆盖一个项目的对齐方式吗？使用 align-self。

第十三章设计响应式网页

而不是为不断增多的各种网络设备量身定制独立的设计，我们可以将它们视为同一体验的各个面。我们可以设计出最佳的观看体验，但将基于标准的科技嵌入到我们的设计中，使它们不仅更加灵活，而且更能适应渲染它们的媒体。简而言之，我们需要实践响应式网页设计。——伊森·马科特

本章涵盖

学习为什么你应该避免固定宽度布局
创建流动和灵活的页面布局
使用媒体查询构建适应屏幕尺寸变化的页面
首先为移动屏幕设计布局

我将从定义我所说的“响应式网页”开始：一个响应式的页面是指它能够自动调整其布局、排版、图片和其他内容以适应访问页面时使用的任何屏幕尺寸。换句话说，页面内容应该在任何显示它的屏幕尺寸下都是可用的、可读的和可导航的。

响应式网页设计——或简称 RWD，在网页设计社区中通常这样称呼——如果只有少数网站用户使用智能手机或平板电脑上网，那它就不会成为一个大问题。然而，在 2014 年左右，全球使用移动设备的网络用户比例超过了使用桌面浏览器的用户比例。

网页设计就是响应式设计。响应式网页设计是正确的网页设计。——安迪·克拉克

有许多原因说明为什么使所有页面都响应式是一个好的实践，随着你通过本章的学习，你会了解到其中许多原因。但可以说，最重要的原因也是最基础的：

在阅读网页时，没有人应该需要水平滚动。

虽然确实有一些页面是为从左到右滚动导航而设计的，但绝大多数页面是垂直方向的，因此你从顶部到底部阅读或扫描它们。最令人烦恼和沮丧的网页体验之一就是当页面宽度不适应你的屏幕时，要看到所有内容就需要向右滚动，然后回到左边，再向右滚动，如此循环。这是令人沮丧的，也是人们几秒钟内就会离开网站——任何网站——的可靠方式。

第 13.1 课：为什么固定宽度布局是敌人

涵盖：固定宽度页面布局

在线：wdpg.io/13-1-1

为什么网页不能适应它们显示的任何屏幕？在大多数情况下，罪魁祸首是使用大型的固定宽度元素。这些元素无论在多宽的屏幕上显示，大小都保持不变，所以如果它们的宽度大于屏幕宽度，就会出现令人讨厌的水平滚动条。为了理解我的意思，请考虑以下示例。

示例

在线：wdpg.io/13-1-1

这个例子展示了典型固定宽度布局的简化版本。

CSS

body {
 width: 960px;    ① 
}
header {
    padding: 16px;
}
article {
    float: left;
 width: 640px;    ② 
    padding: 16px;
}
aside {
    float: left;
 width: 320px;    ③ 
    padding: 12px;
}
footer {
    padding: 16px;
}

① body 元素使用固定的宽度为 960px。

② article 元素使用固定的宽度为 640px。

③ aside 元素使用固定的宽度为 320px。

HTML

<header>
    <h1>Responsive Web Design</h1>
</header>
<main>
    <article>
        <h2>A Brief History</h2>
        <p>Early in the new millennium, etc.</p>        
    </article>
    <aside>
        <h3>Links</h3>
        etc.
    </aside>
</main>
<footer>
    <p>&copy; Logophilia Limited</p>
</footer>

这个例子是一个基本的两列浮动布局，其中 body 和页面的两列——article 和 aside 元素——都使用了像素值固定的宽度。如果浏览器视口至少有 960 像素宽，这个网页显示得很好，如图图 13.1 所示。但当页面通过较小的屏幕访问时会发生什么？如图图 13.2 所见，纵向模式的平板电脑不够宽，因此一些内容被裁剪掉，并且出现了水平滚动条。更糟糕的是，如图图 13.3 所示，智能手机屏幕上的页面甚至更少的内容可见，这意味着读者需要更多的水平滚动。

图 13.1 网页适合桌面屏幕。

图 13.2 网页宽度对于平板屏幕来说略宽。

图 13.3 网页宽度对于智能手机屏幕来说太宽了。

开发固定大小的网页是一种根本性的错误做法。这不仅会导致网页无论用户浏览器大小如何都保持恒定的大小，而且未能充分利用媒介的灵活性。——吉姆·卡尔巴赫

创建响应式布局

现在你已经知道固定宽度布局是糟糕的，你可以采取措施确保你的布局在任何尺寸的屏幕上都能良好显示。你有几种方法可以实现这种响应式理想，接下来的几节将带你了解这些方法。但首先，你需要处理一些先决条件。

首先，你需要确保所有你的块级元素都被调整到边界而不是内容，这是默认的调整方式。正如我在第九章中解释的，这样做最简单的方法是在你的 CSS 顶部包含以下规则：

* {
    box-sizing: border-box;
}

其次，你需要配置浏览器视口的默认宽度和缩放，通过在页面 <head> 部分添加以下标签来实现：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

通过设置 width=device-width，你告诉浏览器将页面宽度设置为与显示页面的设备宽度相同。通过设置 initial-scale=1.0，你告诉浏览器初始时不放大也不缩小地显示页面。

添加了这些调整后，你就可以准备实现响应式布局了。

第 13.2 节：创建流动布局

涵盖：使用百分比进行流动布局

在线：wdpg.io/13-2-0

如你之前所见，固定宽度布局的真正问题是将 width 属性设置为绝对值，例如 960px。你可以通过将你的绝对 width 值转换为使用百分比而不是像素的相对宽度来解决这个问题。这种解决方案通常被称为 流动布局。

记住

使用相对测量单位（如百分比）的布局称为流动布局。

将固定宽度布局转换为流动布局通常是一个三阶段的过程。第一阶段是决定布局的最大宽度。流动布局的目标是在面对较小的屏幕尺寸时允许内容缩小，在遇到较大屏幕时允许内容放大。然而，大多数情况下，您不希望内容变得太宽，因为这可能导致阅读时文本行太长。检查您的内容，然后确定一个最大宽度，这个宽度仍然允许良好的阅读和导航。有了这个数字，将max-width属性应用于最外层容器（如body元素）。以下示例将body元素的最大宽度声明为 960 像素：

body {
    max-width: 960px;
}

第二阶段是确定其余元素要使用的百分比宽度。默认情况下，任何块级元素都占用其父元素宽度的 100%，因此您只需要计算您想要使用小于父元素全宽度的元素的百分比。如果一个article元素宽度为 1,000 像素，并且一个子div声明了width: 75%，那么这个div宽度为 750 像素。如果屏幕大小调整，使得article元素宽度为 800 像素，那么子div会自动缩小到 600 像素宽。

记住

当使用百分比设置宽度时，请记住 CSS 不是基于视口宽度来计算这个百分比的。相反，它是基于元素父元素的宽度来计算这个百分比的。

要将固定宽度元素转换为百分比，您需要将以下公式应用于每个元素：

element percentage = (element fixed width / parent fixed width) * 100

在本章前面 13.1 节中展示的示例有两个固定宽度组件：

一个宽度设置为 640 像素的article元素。因为父元素（body元素）宽度为 960 像素，所以article元素的百分比宽度值为(640 / 960) * 100 = 66.67%。
一个宽度设置为 320 像素的aside元素。同样，父元素（body元素）宽度为 960 像素，因此aside元素的百分比宽度值为(320 / 960) * 100 = 33.33%。

将固定宽度布局转换为流动布局的第三阶段是将相同的公式应用于布局中的任何其他水平元素，例如边距和填充。如果一个元素声明了padding: 12px，并且其父元素宽度为 960 像素，那么流动边距宽度变为(12 / 960) * 100 = 1.25%。

以下示例展示了如何将之前的示例转换为流动布局。

示例

在线：wdpg.io/13-2-1

此代码展示了将固定宽度布局转换为流动布局的过程。

CSS

body {
 max-width: 960px;    ① 
}
article {
    float: left;
 width: 66.67%;    ② 
 padding: 1.67%;    ④ 
}
aside {
    float: left;
 width: 33.33%;    ③ 
 padding: 1.25%;    ④ 
}

① body元素现在的最大宽度为960px。

② article元素现在的宽度为66.67%。

④ padding属性现在是百分比。

③ aside元素现在的宽度为33.33%。

HTML

<header>
    <h1>Responsive Web Design</h1>
</header>
<main>
    <article>
        <h2>A Brief History</h2>
        <p>Early in the new millennium, etc.</p>        
    </article>
    <aside>
        <h3>Links</h3>
        etc.
    </aside>
</main>
<footer>
    <p>&copy; Logophilia Limited</p>
</footer>

播放

你可以在 Playground 上练习将固定宽度布局转换为流体布局。在线：wdpg.io/13-2-2

在设置了流体布局后，你可以在图 13.4 中看到，纵向模式的平板可以完全显示网页内容。看起来不错！图 13.5 显示智能手机屏幕也可以显示内容，而不需要读者水平滚动。很好。但你也可以清楚地看到，生成的列非常窄，这使阅读变得困难。要解决这个问题，你需要学习另一种响应式设计技术。但在那之前，让我们先谈谈视口单位。

图 13.4 在流体布局中，网页完美地适应了平板屏幕。

图 13.5 流体布局也适合智能手机屏幕，但代价是列太窄。

使用视口单位的流体布局

当处理百分比单位时，重要的是要记住，将百分比宽度分配给一个元素意味着你正在将该元素样式设置为其父元素宽度的百分比。如果父元素宽度为 800 像素，你在子元素上声明width: 75%，则该子元素宽度为 600 像素。浏览器屏幕宽度是 2,000 像素并不重要；该子元素在屏幕上仅占用 600 像素。

如果你想让子元素宽度为屏幕宽度的 75%，而不是其父元素宽度，那么在这种情况下，你需要从百分比转换为视口单位，这些单位类似于百分比单位，适用于整个浏览器视口。你可以使用的四个单位是

vw—视口宽度单位，其中100vw等于当前视口宽度的 100%。如果视口宽度为 1,600 像素，则1vw相当于16px。
vh—视口高度单位，其中100vh等于当前视口高度的 100%。如果视口高度为 2,000 像素，则1vh相当于20px。
vmin—视口最小单位，其中100vmin等于两个视口尺寸中较小的 100%。如果视口宽度为 800 像素，高度为 600 像素，则1vmin相当于6px（因为在这种情况下，视口高度是两个尺寸中较小的一个）。
vmax—视口最大单位，其中100vmax等于两个视口尺寸中较大的 100%。如果视口宽度为 1,200 像素，高度为 1,024 像素，则1vmax相当于 12px（因为视口宽度是两个尺寸中较大的一个）。

假设你想显示一个图像，使其自动占据视口的整个高度。你可以通过将以下规则应用于图像来实现这一点：

.image-full {
    height: 100vh;
    width: auto;
}

我添加了width: auto声明来告诉浏览器根据高度自动计算宽度，这保持了图像的原始宽高比。

播放

你可以在 Playground 上尝试这种全高图像技术。在线：wdpg.io/13-2-4

第 13.3 课：创建弹性布局

涵盖：使用 flexbox 包裹元素

在线：wdpg.io/13-3-0

当屏幕变得太窄，无法有效地并排显示内容时，是时候改变你的布局了。具体来说，你需要你的布局停止使用并排列，并切换到一个更垂直的布局，使每个元素都能占据整个屏幕的宽度。

在下一节中，你会看到 CSS 提供了一种技术，允许你直接访问当前设备的宽度。这个工具非常强大，但对于许多布局来说，它可能有些过度，因为你有方法让元素自动换行并创建所谓的弹性布局。

记住

当没有足够水平的空间来并排显示元素时，元素会自动换行，这种布局被称为弹性布局。

一种可能性是将你的浮动转换为内联块。当你将宽度设置为百分比并添加一个min-width声明以确保你的块始终大于或等于某个最小尺寸时，你的块将在视口没有足够的水平空间来显示块时自动换行。不幸的是，如果你使用了我在第十一章中提到的假列技巧，在特定的宽度下块会换行，但你仍然可以看到假列的一部分，这看起来很不好。内联块只适用于你没有使用假列技巧的情况。

播放

你可以在 Playground 上看到内联块技术的实际应用。在线：wdpg.io/13-3-2

一个更好的解决方案是 flexbox，它提供了flex-wrap属性来激活容器内的换行。它还允许你使用flex-grow来确保你的块使用你想要的比率，并且你可以通过添加flex-basis值并将flex-shrink设置为0来建立最小块宽度。

以下示例使用弹性布局更新了之前的例子。

示例

在线：wdpg.io/13-3-1

这段代码展示了将流动布局转换为弹性布局的过程。

CSS

body {
 display: flex;    ① 
 flex-direction: column;    ① 
 align-items: center;    ① 
}
.container {
    display: flex;     
 flex-direction: column;    ② 
 max-width: 960px;    ② 
}
main {
 display: flex;    ③ 
 flex-wrap: wrap;    ③ 
 flex-grow: 1;    ③ 
}
article {
 flex-grow: 2;    ④ 
 flex-shrink: 0;    ④ 
 flex-basis: 300px;    ④ 
}
aside {
 flex-grow: 1;    ⑤ 
 flex-shrink: 0;    ⑤ 
 flex-basis: 150px;    ⑤ 
}

① body 元素是一个列弹性容器。

② container 元素是一个列弹性容器。

③ main 元素是一个包裹的弹性容器。

④ article 元素可以从 300px 的基础值增长，但不能缩小。

⑤ aside 元素可以从 150px 的基础值增长，但不能缩小。

HTML

<div class="container">
    <header>
        <h1>Responsive Web Design</h1>
    </header>
    <main>
        <article>
            <h2>A Brief History</h2>
            <p>Early in the new millennium, etc.</p>        
        </article>
        <aside>
            <h3>Links</h3>
            etc.
        </aside>
    </main>
    <footer>
        <p>&copy; Logophilia Limited</p>
    </footer>
</div>

在这里，我使用body元素作为列 flex 容器，这使我能够通过使用align-items: center水平居中div。main元素也被设置为 flex 容器，并声明了flex-wrap: wrap。article和aside元素（作为 flex 项目）分别具有flex-grow值为2和1，这是从液体布局中 66.67%和 33.33%的width值的 flex 等效值。在两种情况下，我还为每个元素添加了flex-basis（分别为300px和150px）并将flex-shrink设置为0，这为每个元素创建了一个最小宽度值。

我认为，网络的最大的优势通常被视为一种限制，一种缺陷。网络的本质是灵活的，作为设计师和开发者，我们应该拥抱这种灵活性，制作出通过灵活性对所有用户都适用的页面。——约翰·奥尔斯普

图 13.6 展示了在智能手机屏幕上出现的灵活页面布局。如果你向下滚动，如图 13.7 所示，你会看到aside元素在article元素下换行。

图 13.6 在智能手机屏幕上查看的灵活页面布局的顶部部分

图 13.7 灵活布局的底部部分显示aside元素在article元素下换行。

第 13.4 课：创建自适应布局

涵盖：使用@media查询

在线：wdpg.io/13-4-0

在第 13.3 课中，你学习了如何使用 flexbox 使液体元素在设备视口变得太窄而无法容纳元素的最低宽度时进行换行。这个技术很实用，但并不总是可以依赖，因为可能有些时候你不能使用 flexbox（例如，你需要支持旧版本的 Internet Explorer）。

在另一个但相关的方面，回顾一下图 13.6。看看页面标题（响应式网页设计）几乎适合智能手机视口的宽度吗？如果这个元素再大几像素或者再长几个字母，它就会换行，看起来会很糟糕，如图 13.8 所示。

图 13.8 稍微增加页面标题的大小，设计就会破裂。

这些场景是如何相关的？你可以通过询问浏览器视口宽度的问题来解决潜在的问题：

视口宽度是否小于 450 像素？如果是，从元素中移除浮动，以便它们以默认堆叠布局显示。
视口宽度是否小于 350 像素？如果是，将页面标题的字体大小减少到 24px。
视口宽度是否大于 1,024 像素？如果是，显示aside元素。

你可以通过在 CSS 中定义 媒体查询 来提出这些问题以及许多其他类型的问题。一个 媒体查询 是一个表达式，后面跟着一个包含一个或多个样式规则的代码块。该表达式调查屏幕的某个特性，如其宽度。如果该表达式对当前设备为真，则浏览器应用媒体查询的样式规则；如果表达式为假，则浏览器忽略媒体查询的规则。使用媒体查询的布局通常称为 自适应布局，因为它会根据显示它的屏幕进行自我调整。

记住

使用媒体查询根据屏幕特性（如宽度）调整页面元素和属性的布局称为 自适应布局。

这里是一般语法：

@media (*expression*) { 
*selector* {
 *declarations*
    }
    etc.
}

记住

从技术上讲，@media 规则可以跟一个关键字来指定媒体类型，例如 print 或 tv。默认关键字是 screen，然而，这是你希望在网页上使用的值，所以你可以省略这一点。

*expression* 最常见的是 min-width 或 max-width，后面跟一个冒号和一个值。

如果你想在屏幕宽度不超过指定值的情况下应用样式，请使用 max-width。以下代码告诉浏览器，当屏幕宽度小于或等于 350 像素时，以 24px 的字体大小显示 h1 元素：

@media (max-width: 350px) {
    h1 {
        font-size: 24px;
    }
}

如果你想在屏幕宽度至少与指定值相同的情况下应用样式，请使用 min-width。以下代码在屏幕宽度大于或等于 1,024 像素时，将 display: inline-block 应用于 aside 元素：

@media (min-width: 1024px) {
    aside {
        display: inline-block;
    }
}

学习

你将要编写的绝大多数媒体查询都使用 min-width 或 max-width 在表达式中。但你可以查询其他几个媒体特性，包括高度、分辨率和宽高比。要查看完整列表，请查看 Mozilla 开发者网络页面 developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features。

以下代码更新示例，使用一个媒体查询，在屏幕宽度降至 450 像素或更少时移除 article 和 aside 元素的浮动。

播放

给定一个三列弹性盒布局，编写一个媒体查询，在较小屏幕上首先显示中间列。在线：wdpg.io/13-4-3

为了保险起见，媒体查询还执行以下操作：

它将 article 和 aside 元素的宽度设置为 100%。
它将 h1 元素（即页面标题）的字体大小减少到 24px。
它将 main 元素的背景颜色更改为白色，这有效地关闭了假列效果，因为当 aside 元素未浮动时，你不需要它。

示例

在线：wdpg.io/13-4-1

此代码使用媒体查询从 article 和 aside 元素中移除浮动，并执行一些其他任务，如注释所述。

CSS

h1 {
    float: left;
    font-size: 32px;
}
main {
    background-color: #b4a7d6;
}
article {
    float: left;
    width: 66.67%;
}
aside {
    float: left;
    width: 33.33%;
}
@media (max-width: 450px) {    ① 
    article {
 float: none;    ② 
 width: 100%;    ② 
    }
    aside {
 float: none;    ② 
 width: 100%;    ② 
    }
    h1 {
 font-size: 24px;    ③ 
    }
    main {
 background-color: white;    ④ 
    }
}

① 媒体查询适用于屏幕宽度最多为 450px。

② 从 article 和 aside 元素中移除了浮动。

③ 页面标题缩小到 24px。

④ 将 main 元素的背景颜色更改为白色。

图 13.9 展示了屏幕宽度大于 450 像素时页面布局的外观。然而，如图 13.10 和 13.11 所示，当屏幕宽度为 450 像素或更小时，布局会发生变化。

图 13.9 这是屏幕宽度大于 450 像素时你看到的页面布局。

图 13.10 这是屏幕宽度小于 450 像素时页面布局的顶部部分。

图 13.11 屏幕底部部分确认了已从 article 和 aside 元素中移除了浮动。

播放

给定一个示例布局版本，其中 aside 元素默认隐藏，编写一个媒体查询，当视口宽度至少为 1,024 像素时显示 aside 元素。在线：wdpg.io/13-4-2

关于媒体查询断点的说明

你可能会想设置媒体查询以针对特定的设备宽度，例如 320px 针对 iPhone 5 及更早版本，400px 针对 Galaxy Note，768px 针对 iPad 4 及更早版本，等等。然而，这条路是疯狂的道路。有太多不同宽度的设备，你不可能希望针对它们全部。即使你能够以某种方式做到这一点，你的代码也会在一天结束时过时，因为不断有新宽度的设备被发布。忘掉它吧。

相反，最好让内容决定你在媒体查询中使用的 min-width 和 max-width 值。例如，在桌面屏幕上，你可能确定你的文本行在每行大约有 75 个字符时最易读。如果你在容器元素宽度为 600 像素时能够达到这个行长度，那么将这个元素的 max-width 属性设置为 600px 是有意义的。假设你还确定你的行在每行大约有 50 个字符时仍然可读，并且当容器元素宽度为 400 像素时达到这个行长度。

尝试不同的屏幕宽度，以查看容器宽度何时低于这个 400 像素的阈值。这取决于你的整体页面布局，但假设当屏幕宽度低于 550 像素时发生这种情况，因为你将容器浮动在宽度为 150 像素的侧边栏旁边。当宽度低于这个值时，你的页面可读性会降低，因此设计在 550px 处断裂。这个值成为媒体查询的断点：

@media (max-width: 550px) {
    .container {
        float: none;
        width: 100%;
    }
}

通常，你改变浏览器窗口的宽度，并注意设计断裂的宽度：文本行变得太短或太长，字体大小变得太大，块元素最终出现在奇怪的位置，等等。然后使用这个宽度作为媒体查询的断点。

第 13.5 课：创建移动优先布局

包括：使用 @media 为非移动屏幕

在线：wdpg.io/13-5-0

在第 13.4 节中，你看到了如何使用媒体查询来针对移动屏幕并调整布局功能，如移除浮动。这没问题，但有一种网络设计思想认为，所有 CSS 都应该是累加的，而不是减法的。也就是说，你的 CSS 应该添加或修改属性值，而不是删除它们。为什么？在某种程度上，CSS 就像烹饪；添加盐和其他调味料比移除它们要容易得多。在你的网页设计厨房里，始终最好从最简单的布局开始，然后添加内容。

在几乎每一种可想象的网页场景中，最简单的布局是专为在最小的设备上工作而设计的，这些设备如今意味着智能手机。因此，你的想法是构建你的页面，使其在最小的智能手机屏幕上看起来和工作得很好（通常是 320 像素宽）。然后你才为更大的屏幕添加和修改布局。这种布局被称为 移动优先 布局，它是当今响应式网页设计的核心。

记住

你不一定必须从 320px 这样小的宽度开始。如果你可以访问你的网站分析数据，它们应该告诉你访客使用哪些设备。如果你发现所有或大多数移动用户都在至少 400 像素宽的设备上，你应该从这里开始。

记住

一种从为移动设备设计的结构开始，并在屏幕足够宽时增加复杂性的布局被称为 移动优先布局。

移动优先设计的一个原则是在初始的以移动为中心的布局中只包含对用户页面体验至关重要的页面元素。许多移动用户使用缓慢的连接和有限的数据计划上网，因此作为一名负责任的网页设计师，你的任务是确保这些用户不会得到任何无用的内容。什么算是“无用的”或“非必要的”往往是一个棘手的问题，因为对一个人来说是微不足道的，而对另一个人来说可能是至关重要的。你在这里需要做出一些判断，这也是他们付给你高薪的原因。

移动设备要求软件开发团队只关注应用程序中最重要数据和操作。在 320x480 像素的屏幕上根本无法容纳多余的、不必要的元素。你必须优先考虑。——卢克·沃罗布列夫斯基

为了说明这一点，假设你修改了示例页面，使其包含一个左侧的第二个 aside 元素，你将使用它来显示与响应式网页设计相关的引言。这个细节很好，但不是必需的，尤其是在网页的正常流程中，这个元素会出现在 article 元素之前。如下面的代码所示，添加这个新的 aside 元素并使用 display: none 声明来默认隐藏它。然后使用媒体查询在至少 750 像素宽的屏幕上显示该元素。

示例

在线：wdpg.io/13-5-1

此代码使用媒体查询在至少 750 像素宽的屏幕上显示其他隐藏的 <aside class="quotation"> 元素。

CSS

.quotation {
 display: none;    ① 
}

@media (min-width: 750px) {
    .quotation {
 display: block;    ② 
    }
}

① quotation 类默认是隐藏的。

② 在至少 750px 宽的屏幕上，元素会被显示。

HTML

<header>
    <h1>Responsive Web Design</h1>
</header>
<main>
 <aside class="quotation">    ③ 
 <h3>Quote</h3>    ③ 
 etc.    ③ 
 </aside>    ③ 
    <article>
        <h2>A Brief History</h2>
        <p>Early in the new millennium, etc.</p>        
    </article>
    <aside>
        <h3>Links</h3>
        etc.
    </aside>
</main>
<footer>
    <p>&copy; Logophilia Limited</p>
</footer>

③ 新的 quotation 元素

图 13.12 显示，在智能手机上，布局不包括引用侧边栏，但它会在如图 13.13 所示的平板电脑等更宽的屏幕上出现。

图 13.12 引用侧边栏在窄智能手机屏幕上不会出现。

图 13.13 引用侧边栏在更宽的屏幕上（如平板电脑）会出现。

哪种布局是响应式的？

这是一个很好的问题。答案是，它们全部加起来构成了现代响应式布局的概念：一种使用相对度量、灵活的网格和媒体查询的布局，所有这些都以移动优先的方法呈现。如果你将这些概念融入你的页面，你将走在通往最终目的地的路上：一个完全响应式的网页设计。

记住

使用相对度量单位、灵活的网格、媒体查询和移动优先方法的布局被称为响应式布局。

但你还没有完全到达那里。为了完成这段旅程，你需要知道如何让你的图片和文本响应式。你将在第十四章学习如何做到这一点。

摘要

避免使用固定宽度布局，其中页面元素的大小是通过使用像素等绝对度量来确定的。
使用流体布局，其中水平度量（如宽度、填充和边距）以百分比表示。
如果这样做适合你的设计，使用 flexbox 或内联块来创建一个灵活的布局，允许页面元素在屏幕尺寸变小时进行包裹。
为了创建自适应布局，使用媒体查询调整元素大小、更改布局，并根据屏幕大小隐藏或显示元素。
使用移动优先的方法，其中你的初始页面布局针对智能手机优化，并使用媒体查询根据需要为更大的屏幕添加功能和更改布局。

第十四章使你的图片和排版响应式

响应式设计最重要的特点是 灵活性。一切都必须是灵活的：布局、图片大小、文本块——绝对一切。灵活性给你的网站提供了所需的流动性，使其能够适应任何容器。——尼克·巴比奇

本章涵盖

制作响应式屏幕尺寸的流体图片
根据用户的屏幕尺寸提供不同大小的图片
通过指定响应式字体大小使文本适应屏幕尺寸
通过指定响应式度量使其他页面元素适应屏幕尺寸

在第十三章中，你不仅学习了为什么不应该使用固定宽度布局，还学习了为什么（以及如何）应该使用既灵活又适应的响应式布局。在屏幕尺寸千差万别的今天，让页面布局根据不同的屏幕宽度变化是必不可少的，但这只是响应式设计的部分内容。为了让你的页面真正适应任何设备，你需要对你的页面图片和

使用响应式像素魔法对页面排版进行样式化。你需要根据屏幕宽度对图片进行缩放或缩小，根据屏幕大小提供不同的图片，并使用响应式字体大小。你将在本章学习这些以及其他强大的响应式技术。

制作响应式图片

使图片响应式是网页设计师面临的最大挑战之一。挑战的规模来自于与使图片响应式相关的两个问题：

使固定大小的图片适应具有流体尺寸的容器。宽度为 600 像素的图片可以很好地适应宽度为 800 像素的元素，但如果该元素缩小到 400 像素宽，则会溢出。解决这个问题需要使图片变为流体，以便其大小根据屏幕大小的变化进行调整。
提供适合用户屏幕尺寸的图片版本。向桌面用户提供 2,000 x 1,500 像素的图片是一回事，但向智能手机用户发送相同的图片是浪费上传时间和带宽。

下两个课程将向你展示一些基本方法来克服这些问题。

第 14.1 课：创建流体图片

覆盖内容：为响应式设计样式化 img 元素

在线：

一张图片带有预定的宽度和高度，乍一看，似乎无法克服这些固定尺寸。幸运的是，<img> 标签是页面元素之一。是的，默认情况下，图片会以全宽度和高度显示，就像 div 或其他任何块元素一样。但就像你可以通过使用百分比使块元素变为流体一样，你也可以使图片变为流体。

在处理图片时，你需要稍微小心一些：

在大多数情况下，你不想让图片放大超过其原始大小，因为对于大多数图片来说，这种缩放会导致难看的像素化和锯齿边缘。
如果你改变图片的一个维度，它几乎肯定会看起来是倾斜的，因为它的原始宽高比——图片宽度与高度的比例——已经被改变。因此，你必须成比例地改变宽度和高度以保持图片的原始宽高比。幸运的是，你可以让浏览器为你做部分工作。

为了处理这两个问题，你可以创建一个响应式图片，通过应用以下规则来响应屏幕大小的变化：

img {
    max-width: 100%;
    height: auto;
}

设置 max-width: 100% 允许图片根据其父容器大小的变化而缩小或放大，但同时也指定图片的宽度永远不会超过其原始宽度。设置 height: auto 告诉浏览器通过根据图片当前宽度计算高度来保持图片的原始宽高比。

播放

在某些情况下，你不想让图片的高度超过其原始高度，因此需要在图片上设置 max-height: 100% 和 width: auto。在线：

以下代码展示了示例。

示例

在线：wdpg.io/14-1-1

此代码创建了一个响应式图片，当屏幕大小变化时，图片会相应地缩小或放大，但不会放大超过其原始尺寸。

CSS

img {    ① 
 max-width: 100%;    ① 
 height: auto;    ① 
}

① 使图片流动的规则

HTML

<header>
    <h1>Responsive Web Design</h1>
</header>
<main>
    <aside class="quotation">
        <h3>Quote</h3>
        etc.
    </aside>
    <article>
        <h2>A Brief History</h2>
        <p>Early in the new millennium, etc.</p>        
    </article>
    <aside>
        <h3>Links</h3>
        etc.
 <img src="/images/rwd.tif" alt="Responsive Web Design image">    ② 
    </aside>
</main>
<footer>
    <p>&copy; Logophilia Limited</p>
</footer>

② 添加到 aside 元素中的图片

图 14.1 和 14.2 展示了当其父 aside 元素的宽度变化时，图片大小如何变化。

图 14.1 当其 aside 父元素被赋予智能手机屏幕的全宽时，图片的显示效果

图 14.2 当 aside 元素以较窄的宽度显示时，图片相应地缩小。

第 14.2 课：响应式图片交付

覆盖：sizes 和 srcset 属性

在线：

响应式图片的另一面涉及向用户交付一个适合设备屏幕大小的图片版本。你可能为智能手机屏幕提供图片的小版本，为平板电脑提供中等版本，为桌面电脑提供大版本。在过去，你需要一个脚本来处理这个任务，但在 HTML5 中，你可以通过两个新属性 sizes 和 srcset 在 <img> 标签中完成所有操作。

sizes 属性类似于媒体查询，你使用一个表达式来指定屏幕特性，例如最小或最大高度，然后指定你希望在匹配该配置的屏幕上显示图片的宽度。你可以指定多个表达式-宽度对，用逗号分隔。以下是通用语法：

sizes="(*expression1*) *width1*,
       (*expression2*) *width2*,
       etc.,
*widthN*"

谨慎

当你通过改变浏览器窗口大小来测试 srcset 属性时，你可能会发现浏览器并不总是下载不同大小的图片。尽管浏览器可能会根据 srcset 值检测到应该使用较小的图片，但它可能会选择调整现有图片的大小，因为它已经下载了该图片。

记住

默认图像，即使用src属性指定的图像，是作为不支持srcset属性的旧浏览器的回退图像显示的。良好的移动优先实践是将默认图像设置为你希望提供给移动用户的图像。

注意，如果最后一个项目没有指定表达式，则指定的宽度适用于任何不匹配任何表达式的屏幕。假设你想要图像在屏幕小于或等于 500px 时以 90vw 的宽度显示，在其他所有屏幕上以 50vw 的宽度显示。以下是设置方法：

sizes="(max-width: 500px) 90vw, 50vw"

接下来，向你的<img>标签添加srcset属性，将其设置为以逗号分隔的图像文件位置列表，每个位置后跟图像宽度和字母w。以下是通用语法：

srcset="*location1* *width1w*,
*location2* *width2w*,
        etc.">

此代码为浏览器提供了一组图像大小选择，并根据当前设备的屏幕尺寸和你在sizes属性中指定的首选宽度选择最佳图像。以下是一个示例：

srcset="/images/small.tif 400w,
        /images/medium.tif 800w,
        /images/large.tif 1200w">

以下示例将所有内容组合起来，向你展示如何响应式地提供图像。

示例

在线：wdpg.io/14-2-1

此示例使用<img>标签的sizes和srcset属性，根据浏览器视口大小响应式地提供图像。

HTML

<img 
 src="/images/img-small.tif"    ① 
 sizes="(max-width: 700px) 100vw, 75vw"    ② 
 srcset="/images/img-small.tif 450w,    ③ 
 /images/img-medium.tif 900w,    ③ 
 /images/img-large.tif 1350w">    ③

① 为旧浏览器提供的默认图像

② 显示图像的大小

③ 浏览器可以选择的图像

图 14.3 至图 14.5 展示了浏览器提供的图像如何随着屏幕大小的变化而变化。

图 14.3 宽浏览器视口获取大图像。

图 14.4 平板尺寸视口获取中等图像。

图 14.5 智能手机尺寸视口获取小图像。

使排版响应式

你的目标是要激怒访问你网站的一些人吗？我想不是，但如果你为你的网站排版使用像素，你可能会这样做。像 Google Chrome 和 Mozilla Firefox 这样的网络浏览器允许用户指定默认字体大小，在所有现代浏览器中默认设置为16px，但视力逐渐衰退或视力受损的人经常将其增加到24px、32px甚至更高。如果你为页面正文使用font-size: 16px这样的声明，所有访问者——特别是那些增加了默认字体大小的人——将看到以该大小显示的文本。愤怒的导火索。

记住

要在 Chrome 中进行自己的测试，请通过打开设置、点击自定义字体，然后使用字体大小滑块设置你想要的字体大小。

幸运的是，通过将 font-size 值切换为相对单位，可以轻松避免这种情况。一种可能性是 em 单位，其中 1em 对应浏览器的默认字体大小——或者，更重要的是，用户指定的默认字体大小。如果默认值为 16px，则 1.5em 对应 24px，而 3em 对应 48px。如果默认值为 24px，则 1.5em 将渲染为 36px，而 3em 将渲染为 72px。

那种解决方案看起来似乎是完美的，但在这个响应式汤中有一个继承的飞虫。首先，让我指出，继承意味着对于某些 CSS 属性，如果父元素使用 font-size 属性进行了样式设置，其子元素和后代元素将自动以相同的方式样式化。（参见第十九章了解更多关于这个重要 CSS 概念的信息。）为了看到这个问题，首先考虑以下 HTML 和 CSS，然后回答一个问题：如果默认字体大小是 16px，则 h1 元素的字体大小是多少像素？

HTML:

<body>
    <header>
        <h1>What’s My Font Size?</h1>
    </header
</body>

CSS:

body {
    font-size: 1em;
}
header {
    font-size: 1.5em;
}
h1 {
    font-size: 2em;
}

你的直观猜测可能是，因为 h1 元素声明为 font-size: 2em，它必须以 32px 渲染。唉，情况并非如此，要了解原因，你需要知道 font-size 属性是继承的，这导致了以下序列：

body 元素的字体大小（1em）被设置为 16px。
header 元素从 body 元素继承了字体大小，因此 header 元素的字体大小（1.5em）被设置为 24px。
h1 元素从 header 元素继承了字体大小，因此 h1 元素的字体大小（2em）被设置为 48px。

当使用 em 单位时，这并不是一个破坏性交易；你需要意识到这个事实，并考虑继承的字体大小。

如果你不想做数学运算来成功使用 em 单位，有一个替代方案：rem 单位。rem 是 root em 的缩写，指的是页面根的字体大小，即 html 元素。有两点需要注意：

因为根的字体大小与默认字体大小相同，并且因为 rem 单位以与 em 单位相同的方式缩放，所以 rem 单位是响应式的。
因为 rem 单位始终只从 html 元素继承其字体大小，所以没有继承的陷阱需要担心。声明为 font-size: 2rem 的 h1 元素将始终以默认字体大小的两倍渲染。

这并不是说你应该总是使用 rem 而不是 em。可能存在一些情况，你希望子元素的字体大小相对于其父元素的字体大小，在这种情况下，em 单位是最好的选择。

第 14.3 节：使用响应式字体大小

覆盖内容：使用 rem 单位设置 font-size

在线：

以下代码将示例页面更新为将 font-size 属性的绝对 px 单位替换为相对的 rem 单位。

示例

在线：wdpg.io/14-3-1

此代码将示例页面更新为将 font-size 属性的绝对 px 单位替换为相对的 rem 单位。

CSS

h1 {
 font-size: 2rem;    ① 
}
h2 {
 font-size: 1.5rem;    ① 
}
h3 {
 font-size: 1.25rem;    ① 
}
@media (min-width: 750px) {
    h1 {
 font-size: 2.5rem;    ② 
    }
    h2 {
 font-size: 2rem;    ② 
    }
    h3 {
 font-size: 1.5rem;    ② 
    }
}

① 标题元素设置了移动优先的rem字体大小。

② 标题元素也设置了大屏幕的rem字体大小。

第 14.4 课：使用响应式度量

涵盖：使用rem单位进行度量

在线：

不幸的是，使用绝对单位如px导致的糟糕设计结果并不仅限于字体大小。为了说明我的意思，考虑以下代码，其结果如图 14.6 所示：

HTML:
<header>
    <h1>Responsive Web Design</h1>
</header>
CSS:
header {        
    height: 64px;
}
h1 {
    font-size: 2rem;
}

图 14.6 h1文本在2rem时看起来不错。

看起来不错！但是，当我将我的网络浏览器（Firefox）中的默认字体更改为 30px 时会发生什么？图 14.7 展示了这个悲伤的故事。

图 14.7 当使用较大的默认字体时，元素渲染效果不佳。

记住

这个例子是人为的，因为在实践中，你很少会显式设置元素的高度。相反，总是让内容自然地决定元素的高度更好。

在较大的默认字体大小下，标题比包含它的header元素要大，导致文本整体显得拥挤，并且（更糟糕的是）切断了p和g的下降部分。

为什么会发生这种情况？标题元素的height属性使用的是绝对值64px。无论你使用什么默认字体大小，这个高度都不会移动一个像素。但是，考虑以下修改后的代码和图 14.8 中显示的结果：

HTML:
<header>
    <h1>Responsive Web Design</h1>
</header>
CSS:
header {        
    height: 4rem;
}
h1 {
    font-size: 2rem;
}

图 14.8 现在标题元素的height属性使用相对的rem单位，随着默认字体大小的变化，标题会随着文本一起缩放。

我所做的唯一改变是在header元素上声明height: 4rem。使用相对单位使高度响应式，因此当默认字体值更改时，它会增加（或减少）。

你如何使用相对单位进行度量取决于许多因素，其中最重要的因素之一是你试图实现的设计效果。然而，可以提出一些指导原则：

对于垂直度量，如padding-top、padding-bottom、margin-top和margin-bottom，使用rem单位。
对于横向度量，如width、padding-right、padding-left、margin-right和margin-left，使用百分比。

BEware

因为百分比是相对于父元素而言的，你可能发现使用百分比来设置填充或边距会导致意想不到或奇怪的结果。在这种情况下，你应该切换到rem单位以获得更多控制。

对于你想要对width、max-width和min-width等属性有更多控制的横向度量，使用rem单位。
对于你想要相对于视口高度进行缩放的垂直度量，使用vh单位。
对于你想要相对于视口宽度进行缩放的横向度量，使用vw单位。

示例

在线：wdpg.io/14-4-1

此代码更新示例页面，将所有绝对px度量替换为相对rem或百分比单位。

CSS

.container {
 max-width: 60rem;    ① 
}
header {
 padding: 1rem    ② 
1.67%;    ③ 
}
h1 {
 padding-left: 1.67%;    ③ 
}
.quotation {
 padding-right: 1.67%;    ③ 
}
article {
    flex-basis: 20rem;
    padding-top: 1rem;
    padding-left: 1.67%;
}
p {
    margin-bottom: 1rem;
}
aside {
    flex-basis: 10rem;
    padding: 1rem
 1.67%;
}
div {
    padding-bottom: .5rem;
}
footer {
    padding: 1rem
 1.67%;
}

① 用于更大控制的rem单位

② 所有垂直度量使用的rem单位

③ 所有其他水平度量使用的百分比

响应式网站画廊

Hicks Design (hicksdesign.co.uk) 提供了一种类似画廊的布局，它呈现出干净、整洁的外观，能够完美地适应任何屏幕尺寸。

当 Andersson-Wise 网站(www.anderssonwise.com)从桌面版本缩放到平板电脑和智能手机版本时，它优雅地重新构建了其布局。

波士顿环球报首页(www.bostonglobe.com)能够响应式地从桌面上的三栏布局变为平板电脑上的两栏布局，再到智能手机上的单栏布局。

Authentic Jobs 网站(authenticjobs.com)在智能手机尺寸的屏幕上显示简单的职位列表，并在屏幕尺寸增加时逐步添加更多详细信息。

摘要

通过使用声明max-width: 100%和height: auto来使您的图片流动。
在您的<img>标签中，添加sizes和srcset属性以缩放并传递适合任何屏幕尺寸的图片。
在设置字体大小时，避免使用绝对像素值，而是使用rem单位。
在设置垂直度量（如高度、填充和边距）时，也使用rem单位。

第十五章项目: 创建一个照片画廊

人们喜欢照片。如果你开始发布照片，它们很快就会成为你网站最受欢迎的部分。——布莱恩·贝利

本章涵盖

规划和草图你的照片画廊
为你的页面选择字体
添加页眉和导航链接
添加图像缩略图
添加动态标题和链接到全尺寸图像

与你在第五章中构建的个人主页和第十章中构建的着陆页不同——你现在已经具备足够的知识来创建一个看起来像是专业人士设计和编码的页面。如果在这个网页设计旅程的这个阶段，这对你来说似乎有些难以置信，这一章将证明我是对的。在这里，我将带你通过构建一个功能齐全的照片画廊，包括动态生成的标题、链接到每个缩略图的全尺寸版本以及更多内容。你将利用到目前为止学到的许多工具和技术，包括类选择器、CSS 盒模型、图像（当然）和布局。让我们开始工作吧！

你将构建的内容

这个项目是一个在线画廊，用于展示你的照片。页面将至少包含半打缩略图，这是你图像的缩小版本。想法是，网站访客应该能够点击其中一个缩略图来显示图像的全尺寸版本。每个缩略图还应显示一个简短的标题，描述图像。

表面上看，这个项目很简单。说实话，生成的页面看起来也很简单。它看起来很不错，但给人的感觉是简单。然而，这个网站看起来不复杂，并不意味着它就是这样构建的。正如你很快就会学到的，这个页面在引擎盖下有一些令人惊叹的技术，包括基于 flexbox 的布局、基于视口的尺寸和复杂的定位技术。

准备你的照片

你应该开始这个项目，至少准备一些你的照片以供使用。你将想要使用 JPEG，因为它们在保持良好的照片质量的同时提供了更小的文件大小。你还需要每个图像的两个版本：一个常规尺寸版本和一个缩略图版本。在我的页面布局中，所有缩略图都需要相同的大小。你使用什么大小都无关紧要，但在我的项目中，我将所有缩略图的大小调整为 300 像素宽和 200 像素高。全尺寸版本可以是任何你想要的大小。

小心

你的全尺寸图像理论上可以是任何大小，但请记住，大照片可能重量达到数十兆字节。你不想对这些版本进行过多的压缩，所以请保持大小在合理范围内。在我的项目中，我使用了 2048x1365 像素的图像。

大师

如果你不确定想要使用什么大小的缩略图，可以先使用一张图片，并在整个画廊中重复使用。当你确定了理想的大小后，你可以处理你想要使用的其余照片。

绘制布局草图

正如你在前面的项目中看到的（见第五章和第十章），你的网络项目应该从铅笔和纸开始（或者你最舒适的任何变体）。你正在学习如何设计网页，任何值得称道的作品总是从快速草图开始，以获得对页面尺寸和组件的整体感觉。“快速”是关键词。你不需要创建最终页面的艺术家渲染图。如图图 15.1 所示，你需要布局页面的主要部分，并指出每个部分的近似位置、大小和内容。

图 15.1 显示了具有以下四个部分的页面布局：

包含网站标志和标题的页眉
包含链接到其他画廊页面的导航区域
包含图像缩略图的主要页面部分
包含版权声明和社交媒体网站链接的页面页脚

在处理完这些之后，现在是时候将你的注意力转向你想要用于页面的字体或字体组合。

图 15.1 在深入研究页面 HTML 和 CSS 细节之前，使用铅笔和纸来感受整个页面的布局和内容。

选择字体

这个页面字体很少，所以选择字体不应该占用你太多时间。有三个地方你的字体选择会发挥作用：

标题 —看起来像是手写的样式会很不错。对于我的项目，我将保持简单，并使用默认的cursive字体。对于在 Windows PC 和 Mac 上都有良好覆盖率的字体，你可以选择 Brush Script MT。
导航和页脚 —这里的文本主要由链接组成，所以一个漂亮、干净的无衬线字体是个不错的选择。对于我的项目，我选择了预装在大多数 Windows PC 上的 Calibri 和预装在大多数 Mac 上的 Optima。
缩略图图像标题 —这些标题相对较小，所以我建议使用即使在小型尺寸下也能保持可读性的字体。我将坚持使用 Calibri 和 Optima 来制作标题。

在我的 CSS 中，我将使用以下声明来指定这些字体族：

font-family: cursive;
font-family: Optima, Calibri, sans-serif;

现在将你的注意力转向照片画廊的颜色方案。

选择颜色

这个页面在颜色上很简单，所以你不需要构建一个复杂的颜色方案。事实上，在我的这个项目版本中，我仅使用三种主要颜色：

页眉和页脚背景 —当页眉和页脚颜色相同时，这种设计看起来很平衡。因为主要背景（接下来讨论）应该是相对简单的，以展示缩略图，所以页眉和页脚背景给你一个机会选择一些带有一点活力的颜色来活跃页面。
主要背景 —这个区域占据了页面的大部分空间，用于显示图片缩略图和导航链接。黑色或深灰、棕色或蓝色的深色调最适合这个用途。
文本 —这种颜色需要在页面的三个部分：页眉、主要内容和页脚中都能很好地阅读。假设这些部分使用深色背景，则类似于#eee的浅白色或不太明亮的黄色会很好。

图 15.2 展示了我为项目选择的颜色。

图 15.2 我项目的配色方案

当页面布局草图和你的字体和颜色选择确定后，是时候通过将一切转换为 HTML 和 CSS 代码来使事情更加具体（从虚拟意义上讲）。

构建页面

要构建你的照片画廊，从我在第一章介绍给你的基本代码开始。从那里开始，逐节添加文本、HTML 标签和 CSS 属性。

初始结构

为了开始，从第一章的基本页面结构添加画廊布局。我将使用 HTML5 语义元素：

页面页眉部分使用header元素，它由两个项目组成：一个用于网站标志的img元素和一个用于网站标题的h1元素。
导航部分使用nav元素，它由指向画廊其他页面的链接的无序列表组成。
主要部分使用main元素，它由几个img元素组成，每个元素都指向一张照片的缩略图版本。
页面页脚部分使用footer元素，它包括版权声明和指向几个社交媒体网站的链接。

尝试这个

在线：wdpg.io/projects/photo-gallery/01

这里是构成照片画廊初始 HTML 结构的元素。

网页

HTML

<header>    ① 
 <img src="/images/your-logo-here.tif" alt="My logo">    ① 
 <h1>Page Title</h1>    ① 
</header>    ① 
 <nav>    ② 
 <ul>    ② 
 <li>Gallery 1</li>    ② 
 <li>Gallery 2</li>    ② 
 <li>Gallery 3</li>    ② 
 <li>Gallery 4</li>    ② 
 </ul>    ② 
</nav>    ② 
<main>    ③ 
 <img src="http://placehold.it/300x200" alt="">    ③ 
 <img src="http://placehold.it/300x200" alt="">    ③ 
 <img src="http://placehold.it/300x200" alt="">    ③ 
 <img src="http://placehold.it/300x200" alt="">    ③ 
</main>    ③ 
<footer>    ④ 
 <p>Copyright and social media links</p>    ④ 
</footer>    ④

① 页眉部分

② 导航部分

③ 主要部分（图片缩略图）

④ 页脚部分

记住

初始页面布局还包括一个 CSS 重置，将边距和填充设置为0，并将框大小设置为border-box。

目前这个画廊看起来并不怎么样，但很快你就会解决这个问题。你首先设置页面的整体布局。

整体布局

在第十二章花了那么多时间学习如何使用 flexbox 之后，你可能会很高兴地听到，你将在这里把那些努力用到实处，因为这个项目使用 flexbox 进行所有布局。

通过设置初始 flexbox 容器来开始操作。<body>标签非常适合这个目的，您将使用它作为单列容器，这为您提供了一个垂直主轴。您希望项目与该轴的起始位置对齐（即页面的顶部）。您还希望所有内容在水平方向上居中，并且希望页脚出现在屏幕底部，即使没有足够的内容填充页面的其余部分。以下示例显示了如何设置一切。

尝试此操作

在线：wdpg.io/projects/photo-gallery/02

此示例向您展示如何将body元素配置为整个页面的 flexbox 容器。

CSS

body {
 display: flex;    ① 
 flex-direction: column;    ① 
 justify-content: flex-start;    ① 
 align-items: center;    ① 
 min-height: 100vh;    ② 
 font-family: Optima, Calibri, sans-serif;    ③ 
 background-color: #221900;    ③ 
 color: #ecd078;    ③ 
}

① 设置 flexbox 容器。

② 设置最小高度。

③ 应用字体堆栈以及背景和文字颜色。

记住

Flexbox 现在几乎在所有浏览器中都得到了支持，因此为了使代码简单且不杂乱，这里和 Playground 上的代码没有包含任何供应商前缀。然而，如果您需要支持旧浏览器，则可以使用 Autoprefixer (autoprefixer.github.io)来生成前缀。

我在这里要添加的一个评论是关于min-height属性。通过将此属性声明为100vh，您正在告诉浏览器body元素始终至少与浏览器视口的宽度相同。确保body元素的高度大于或等于视口的高度，以确保即使没有足够的内容垂直填充视口，页脚部分也会出现在屏幕底部。

页眉部分

页眉部分由一个包含两个项目的header元素组成：一个用于网站标志的img元素和一个用于网站标题的h1元素。您还希望页眉具有以下功能：

由于页眉背景与页面背景不同，因此如果页眉扩展到浏览器窗口的宽度，则看起来最佳。为此，在header元素上声明width: 100%。
网站标志和标题应在页眉中水平和垂直居中。将header元素配置为具有水平主轴的 flexbox 容器，并将justify-content和align-items都设置为center。

以下示例显示了用于实现这些目标并样式化页眉其余部分的 HTML 和 CSS。

尝试此操作

在线：wdpg.io/projects/photo-gallery/03

此示例将照片画廊的页眉部分样式化为一个 flexbox 容器，该容器水平和垂直居中网站标志和标题。

网页

CSS

header {
 display: flex;    ① 
 justify-content: center;    ① 
 align-items: center;    ① 
    padding: 1em 0;
 width: 100%;    ② 
    background-color: #542437;
}
h1 {    ③ 
 padding-left: .5em;    ③ 
 font-family: cursive;    ③ 
 font-size: 3em;    ③ 
}

① 页眉是一个 flexbox 容器。

② 页眉使用整个窗口宽度。

③ 网站标题的样式

HTML

<header>
    <img src="/images/ampersand-photography.tif" alt="Ampersand Photography logo">
    <h1>Ampersand Photography</h1>
</header>

导航部分

页面的下一个区域是导航部分，它包含指向其他画廊页面的几个链接。此部分使用nav元素，并包含一个链接的无序列表。以下是你要为此部分实现的目标列表：

链接应在导航部分内水平和垂直居中。将nav元素设置为 flexbox 容器，具有水平主轴，并将justify-content和align-items都设置为center。
链接应显示为不带项目符号的水平项目符号列表。为此，将ul元素配置为 flexbox 容器，并将list-style-type属性设置为none。

以下示例展示了我用以实现这些目标并美化其余导航部分的 HTML 和 CSS 代码。

尝试以下操作

在线：wdpg.io/projects/photo-gallery/04

此示例将照片库的导航部分样式设置为作为显示水平无序列表项的 flexbox 容器。

网页

CSS

nav {
 display: flex;    ① 
 justify-content: center;    ① 
 align-items: center;    ① 
    width: 100%;
    background-color: inherit;}
nav ul {
 display: flex;    ② 
 list-style-type: none;}    ② 
nav li {
 padding: 1em 2.5em;    ③ 
 text-transform: uppercase;}    ③

① nav是一个 flexbox 容器。

② ul是一个 flexbox 容器，并且其项目符号被隐藏。

③ li元素的样式

HTML

<nav>
    <ul>
        <li><a href="gallery1.html">Gallery 1</a></li>
        <li><a href="gallery2.html">Gallery 2</a></li>
        <li><a href="gallery3.html">Gallery 3</a></li>
        <li><a href="gallery4.html">Gallery 4</a></li>
    </ul>
</nav>

你应该立即看到导航链接的两个问题：

链接文字是浏览器用于链接的标准蓝色。默认情况下，链接不会继承父级的文字颜色，因此你需要告诉浏览器为链接使用该颜色。在大多数情况下，最简单的方法是在a元素上声明color: inherit。

精通

你可以明确声明页面的文字颜色，但如果你决定稍后更改文字颜色，你必须在两个地方进行更改：body元素和a元素。当你使用inherit时，a元素会自动获取你在body元素文字颜色中做出的任何更改。

没有任何指示表明当前显示的是哪个画廊页面。为了解决这个问题，为当前页面的导航文本应用特殊样式。我创建了一个名为current-page的类，并使用它来将当前li元素的后景和文字颜色切换。

以下示例展示了修改后的导航链接。

尝试以下操作

在线：wdpg.io/projects/photo-gallery/05

此示例将导航链接的样式设置为使用body元素的文字颜色。它还向当前页面项添加了一个名为current-page的类，以使用反向文字。

网页

CSS

.current-page {    ① 
 padding: .75em;    ① 
 background-color: #ecd078;    ① 
 color: #221900;    ① 
}    ① 
a {
 color: inherit;    ② 
  text-decoration: none;
}
a:hover {    ③ 
 color: #d95b43;    ③ 
 text-decoration: underline;    ③ 
}

① current-page类创建了一个反向文字效果。

② a元素继承了body的文字颜色。

③ 链接的悬停样式。

HTML

<nav>
    <ul>   
        <li><span class="current-page">Gallery 1</span></li>
        <li><a href="gallery2.html">Gallery 2</a></li>
        <li><a href="gallery3.html">Gallery 3</a></li>
        <li><a href="gallery4.html">Gallery 4</a></li>
    </ul>
</nav>

主要部分

照片画廊的真正内容当然是照片本身。画廊的基本思想是显示原始照片的缩略图，并允许访客查看原始照片。最简单的方法是将每个缩略图设置为链接，指向原始照片，就像我在以下示例中所做的那样。请注意，我还将main设置为弹性容器，该容器水平居中缩略图并允许它们换行。

尝试以下方法

在线：wdpg.io/projects/photo-gallery/07

此示例将main元素设置为弹性容器。弹性项是照片缩略图，每个缩略图都链接到其原始照片。

网页

CSS

main {
 display: flex;    ① 
 justify-content: center;    ① 
 flex-wrap: wrap;    ① 
 max-width: 960px;    ② 
    font-family: Optima, Calibri, sans-serif;
}

① main元素是一个弹性容器。

② 设置最大宽度。

HTML

<main>
 <a href="/images/image01.jpg" target="_blank">    ③ 
    <img src="/images/image01-thumbnail.jpg" alt="Thumbnail for image 1">
    </a>
 <a href="/images/image02.jpg" target="_blank">    ③ 
    <img src="/images/image02-thumbnail.jpg" alt="Thumbnail for image 2">
    </a>
 <a href="/images/image03.jpg" target="_blank">    ③ 
    <img src="/images/image03-thumbnail.jpg" alt="Thumbnail for image 3">
    </a>
    etc.
</main>

③ 在新标签页中打开每个链接图片。

页脚部分

记住

在本项目的main元素中，次要轴是垂直的，因此声明align-content: flex-start告诉浏览器将所有缩略图与main元素的顶部对齐。

请注意，您希望footer元素出现在页面底部，即使main元素没有垂直填满浏览器窗口。您需要将main元素的flex-grow属性设置为1以强制其填充空间。然而，该解决方案会在缩略图中创建奇怪的垂直间距。为了解决这个问题，请向main元素添加align-content: flex-start。以下示例展示了如何操作。

尝试以下方法

在线：wdpg.io/projects/photo-gallery/07

此示例配置footer元素为弹性容器，并为main元素添加属性以强制其填充main和footer元素之间的任何空隙。

网页

CSS

main {  
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
 align-content: flex-start;    ① 
 flex-grow: 1;    ① 
    max-width: 960px;
    font-family: Optima, Calibri, sans-serif;
}
footer {
 display: flex;    ② 
 justify-content: center;    ② 
 align-items: center;    ② 
 width: 100%;    ③ 
    padding: 1em 0;
    text-transform: uppercase;
    background-color: #542437;
}
footer p {
    padding: 0 1.5em;
}

① main元素现在填充到footer下方。

② footer元素是一个弹性容器。

③ 页脚使用整个窗口宽度。

HTML

<footer>
    <p>&copy; Ampersand Photography</p>
    <p><a href="#">Facebook</a></p>
    <p><a href="#">Twitter</a></p>
    <p><a href="#">Instagram</a></p>
</footer>

谨慎行事

添加一些技巧

按照现状，您的照片画廊是一个看起来不错且运行良好的页面。这可能就是您所寻找的，如果是这样，您无需继续阅读。然而，如果您认为画廊有点平淡无奇且普通，接下来的几节将向您展示如何为画廊添加一些动态和实用的功能。

使页脚固定

之前，你设置了布局，使得页脚部分即使在主部分内容不足以填满浏览器窗口的情况下也会显示在屏幕底部。当main元素的内容多于浏览器窗口能容纳的内容时，它会将页脚向下推，用户必须滚动才能看到它。如果你更喜欢页脚始终可见怎么办？

你可以实施以下操作：

将footer元素的position属性设置为fixed。
将footer元素的bottom属性设置为0，这告诉浏览器将页脚固定到视口的底部。
给main元素的底部添加一些填充，以确保其内容的最后部分不会被固定的页脚遮挡。将padding-bottom的值设置为与footer元素的高度相同（在这个例子中是3.5em）。

以下示例显示了完成所有这些任务的附加代码。

尝试这个

在线：wdpg.io/projects/photo-gallery/08

此示例将footer元素固定到视口的底部。

网页

CSS

main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-grow: 1;
    max-width: 960px;
 padding-bottom: 3.5em;    ① 
}
footer {
    display: flex;
    justify-content: center;
    align-items: center;
 position: fixed;    ② 
 bottom: 0;    ③ 
    width: 100%;
    text-transform: uppercase;
    background-color: #542437;
}

① main元素的底部填充等于footer的高度。

② 页脚是固定的。

③ 页脚位于视口的底部。

使导航栏粘性

你可能对拥有一个固定的页脚不感兴趣，但将导航栏始终显示在屏幕上是一个常见的布局请求，无论用户滚动多远。然而，在这种情况下，你不能使用之前章节中用于页脚的相同技术。如果你固定了导航栏的位置，你也必须固定头部；否则，你最终会得到一些难看的滚动效果。但固定头部是浪费屏幕空间，所以你需要一个不同的解决方案。

一种可能性是交换header和nav元素的位置。现在nav元素位于屏幕顶部，你可以在nav元素上声明position: fixed和top: 0，并给body元素添加padding-top: 3.5em。

播放

固定nav元素的完整代码可在 Playground 上找到。在线：

那个解决方案很好，但如果（像我一样）你更喜欢nav元素出现在头部下方呢？在这种情况下，你可以转向一个相对较新的 CSS position值，称为sticky。结合特定的top或bottom值，sticky告诉浏览器在元素滚动到指定位置之前正常滚动，然后固定在原地。

为了为你的导航栏设置此功能，你需要做以下事情：

将nav元素的position属性设置为sticky。
将nav元素的top属性设置为0，这告诉浏览器当导航栏滚动到视口顶部时将其固定。
将nav元素的z-index属性设置为正数（例如 10），以确保当其他页面元素滚动时，导航栏始终位于顶部。

谨慎

sticky值正处于成为 CSS 完整成员的早期阶段。当我写这本书时，它被 Google Chrome、Mozilla Firefox、Apple Safari（桌面和 iOS）、Microsoft Edge 以及 Android 的 Chrome 的最新版本所支持，但不支持 Internet Explorer。

记住

要在桌面和 iOS Safari 中使元素粘性，你需要使用position: -webkit-sticky。

以下示例展示了你需要添加的代码来实现这一点。

尝试这个

在线：wdpg.io/projects/photo-gallery/10

网页

CSS

nav {
    display: flex;
    justify-content: center;
    align-items: center;
 position: sticky;    ① 
 top: 0;    ② 
 z-index: 10;    ③ 
    height: 3.5em;
    width: 100%;
    background-color: inherit;
}

① 使nav粘性。

② 当它滚动到顶部时粘性。

③ 确保它始终可见。

添加动态标题

你的照片画廊缺少的是缩略图的标题。添加标题的一个直接方法是将每个缩略图包裹在一个div中，并将该div配置为 flex 容器，flex-direction设置为column。然后你可以添加标题，比如作为一个figcaption元素，它将出现在缩略图下方。以下示例演示了这项技术。

尝试这个

在线：wdpg.io/projects/photo-gallery/11

此示例展示了在每张缩略图下方添加标题的一种方法。

网页

CSS

.image-thumbnail {    ① 
 display: flex;    ① 
 flex-direction: column;    ① 
 align-items: center;    ① 
}    ①

① 一个 flexbox div 包装器包围着每张图片和标题。

HTML

<div class="image-thumbnail">    ① 
    <img src="/images/image01-thumbnail.jpg">
    <figure>
 <figcaption>Ladies gossiping in Montreal</figcaption>    ② 
    </figure>
</div>
<div class="image-thumbnail">
    <img src="/images/image02-thumbnail.jpg">
    <figure>
 <figcaption>To an ant, a flower is a world</figcaption>    ② 
    </figure>
</div>

① 一个 flexbox div 包装器包围着每张图片和标题。

② 标题

该解决方案效果良好，但我想要展示一个更高级的技术，它具有相当大的“哇”效果。在这个技术中，你保留figcaption包装器，但添加image-caption类，并使用p元素扩展它，这些元素可以用于标题和标题本身：

<div class="image-thumbnail">
    <img src="/images/image01-thumbnail.jpg">
 <figcaption class="image-caption">    ① 
 <p class="caption-title">Les Chuchoteuses</p>    ① 
 <p class="caption-text">Sculpture of ladies gossiping in Montreal</p>    ① 
 </div>    ① 
</div>

① 标题和文本包含在这个 figcaption 中。

你的目标是隐藏标题，只有当用户将鼠标悬停在缩略图上时才显示它。在你的 CSS 中，你设置image-thumbnail类使用相对定位，宽度和高度等于缩略图的实际宽度和高度：

.image-thumbnail {
    position: relative;
 width: 300px;    ① 
 height: 200px;    ① 
}

① 将其设置为与缩略图相同的尺寸。

现在既然image-thumbnail已经定位，你就可以在image-caption类上使用绝对定位。这很重要，因为你想要使用与缩略图相同的宽度和高度来样式化这个类，并将其定位在左上角（即top: 0和left: 0），这样当显示它时，它就会覆盖缩略图。以下是这个类的完整 CSS：

.image-caption {
 display: flex;    ① 
 flex-direction: column;    ① 
 justify-content: flex-end;    ① 
 position: absolute;    ② 
 left: 0;    ② 
 top: 0;    ② 
 width: 300px;    ③ 
 height: 200px;    ③ 
 background-color: rgba(32, 32, 32, 0.75);    ④ 
    color: #ecd078;
 opacity: 0;    ⑤ 
}

① 标题是一个 flex 容器。

② 绝对定位在左上角

③ 与缩略图相同的尺寸

④ 深灰色，略微透明的背景

⑤ 默认隐藏

注意，你已经设置了一个具有垂直主轴和项目通过 flex-end 对齐的弹性容器，这样它们就会出现在容器的底部。背景色设置为略带透明的深灰色，这样你仍然能够看到缩略图。最后，标题的 opacity 设置为 0，这意味着它默认是隐藏的。

要显示它，向 image-caption 类添加 hover 伪类，并使用它将 opacity 设置为 1：

.image-caption:hover {
    opacity: 1;
}

图 15.3 展示了一个示例。

图 15.3 将鼠标悬停在缩略图上以查看标题。

播放

本例的完整代码可在 Playground 上找到。在线：

从这里开始

相册的最终版本（我的在图 15.4 中展示）是展示你照片的绝佳展示。（如果你想尽快将你的代码放到网上，请查看附录 A 的详细信息。）

图 15.4 一个功能齐全的相册

即使你已经构建了一个功能齐全的相册（尤其是如果你添加了上一节中的额外功能），你仍然有很多方法可以添加或修改相册。你当然可以添加更多图片，如果你有很多照片要展示，你可以添加更多相册页面。你还可以更改颜色，尝试不同的字体和字体大小，等等。

摘要

准备好你想要展示的图片的缩略图和全尺寸版本。
绘制你想要构建的相册草图。
选择页面标题和文本的字体类型。
选择颜色。
构建初始页面结构：基本的 HTML 标签和应用于 body 元素的全球 CSS 属性。
添加弹性盒布局。
逐个填充和设计每个部分：页眉、导航、主体和页脚。
可选地添加一些技巧，例如固定页脚、粘性导航栏和动态标题。

第四部分：让你的网页熠熠生辉

大约 20 年前，我们中的大多数人开始注意到万维网（我们当时可能会啰嗦地这样称呼它）。在人类历史的长河中，这并不算长，但足以让我们几乎忘记 1995 年左右网络的样子。如果你足够老，当时就已经使用过网络，让我帮你回忆一下：那时网络很单调。那种单调是由于几个原因造成的，包括普遍缺乏色彩、没有样式表，以及只有少数基本的 HTML 标签。当时，大多数网络冲浪者甚至都没有想过页面可以看起来不错。啊，现在我们知道了。现在我们知道页面不仅可以看起来很好，而且可以闪闪发光。

当你完成本部分第四章的内容后，你的网页设计也会同样熠熠生辉，在这里你将学习如何使用一些复杂的 HTML 标签（第十六章），如何应用颜色和渐变（第十七章），掌握一些高级的网页排版技巧（第十八章），以及掌握一些专业级别的 CSS 技术（第十九章）。第二十章通过向你展示如何构建一个闪亮的个人作品集页面，将所有内容整合在一起。

第十六章为网页设计师提供更多 HTML 元素

HTML 只有几十个元素，但我们忙碌的开发者经常忘记使用正确的标签来完成工作。当有更适合的替代品时，添加<div>或<span>真是太容易了。——克雷格·巴克勒

本章内容涵盖

检查一些使用较少但重要的 HTML 元素
链接到网站上的文件
链接到页面上的特定元素
添加特殊字符和注释

你可能已经注意到，在本书早期章节中有关 HTML 的相关活动之后，随后的章节明显带有 CSS 的味道。这并不令人惊讶，因为在你了解一些基本元素，如<div>、<p>和<span>之后，你可以在它们上面挂很多 CSS 的负担，并创建一些看起来很棒的网页。但 HTML 不仅仅是这些基本元素。你在第十一章中看到了一些有用的页面结构元素，但在这个章节中，你将通过从缩写到变量、<a>元素的扩展用途、向页面添加非键盘字符以及添加注释来使代码更易读等方式，进一步扩展你的 HTML 知识。这是一个常规的 HTML 盛宴！

第 16.1 课：你应该了解的其他文本级元素

涵盖：文本级元素

在线：wdpg.io/16-1-0

我在这本书中提到过几次，构建网页代码的 HTML 部分在语义上是很重要的。也就是说，你应该使用能够告诉网页浏览器——当然还有阅读你代码的其他网页设计师和开发者——每个元素在页面上下文中的含义的元素。这在页面的整体布局方面尤其重要；正如你在第十一章中看到的，像<header>、<nav>和<article>这样的标签可以使你的代码更容易理解。这些元素是块级元素，但你也可以使用内联元素并对它们进行语义标记。HTML5 定义了相当多的此类文本级元素，尽管你可能很少使用它们，但你应该知道它们是什么以及它们打算承载的语义负载。

此元素将文本标识为缩写或首字母缩略词。添加title属性来告诉浏览器缩写的完整版本或首字母缩略词的完整扩展。大多数浏览器在将鼠标指针悬停在元素上时，会在title值上显示工具提示。一些浏览器（尤其是谷歌 Chrome 和 Mozilla Firefox）会在文本上添加点划线。

示例

在线：wdpg.io/16-1-1

网页

HTML

<abbr title="fear of missing out">FOMO</abbr>

使用cite元素标记对创意作品的引用文本，例如书籍、文章、论文、诗歌、博客文章、推文、电影、电视剧、戏剧或艺术品。大多数浏览器将以斜体显示引用文本。

示例

在线：wdpg.io/16-1-2

网页

HTML

<q>A fine quotation is a diamond on the finger of a man of wit, and a pebble in the hand of a fool</q>. —<cite>Joseph Roux, Meditations of a Parish Priest</cite>


此元素将文本标识为编程代码。大多数浏览器以等宽字体显示标记的文本。
示例
在线：wdpg.io/16-1-3
网页

HTML
Use the CSS <code>rgb()</code> function.


<dfn>
您可以使用此元素标记术语的初始或定义实例。大多数浏览器以斜体显示文本。
示例
在线：wdpg.io/16-1-4
网页

HTML
A <dfn>header</dfn> is an element that appears at the top of the page.


<kbd>
您可以使用 kbd 元素来指示通过键盘输入的文本（如键入的字符或按下的键，如 Enter 或 Return）或更一般地，指示任何类型的用户输入（如语音命令）。大多数浏览器以等宽字体显示文本。
示例
在线：wdpg.io/16-1-5
网页

HTML
For example, type <kbd>Helvetica</kbd> and then press <kbd>Enter</kbd>.


<mark>
使用 mark 元素突出显示对读者有重要意义的页面文本，类似于您在书中使用荧光笔标记文本段落的方式。大多数浏览器以黄色背景显示文本。
示例
在线：wdpg.io/16-1-6
网页

HTML
Futura is a geometric sans-serif typeface that was <mark>designed by Paul Renner in 1927</mark>.


<pre>
pre 元素在 HTML5 中没有语义用途，但它经常与其他语义元素一起使用，例如 code。显示编程代码和类似文本的一个问题是难以显示结构元素，如缩进，因为网页浏览器会忽略此类空白。然而，当您使用 pre（即预格式化文本）元素标记代码时，网页浏览器会保留所有空白字符，包括多个空格和换行符。浏览器还会以等宽字体显示文本。
示例
在线：wdpg.io/16-1-7
网页

HTML
<pre><code>
function helloWorld() {
 //Greet the reader
 alert('Hello World!');
}</code></pre>


<s>
使用 s 元素标记不准确的文本、过时的文本或以其他方式不正确的文本。为什么不删除文本呢？有时，您可能希望保留不准确的文本以供比较，例如显示更正、更新信息或修订价格。网页浏览器通过使用删除线效果来标记此文本。
示例
在线：wdpg.io/16-1-8
网页

HTML
On sale now for <s>$12.99</s> $9.99.


<samp>
samp 元素允许您将一段文本标记为来自计算机程序或类似系统的示例输出。网页浏览器使用等宽字体显示此文本。
示例
在线：wdpg.io/16-1-9
网页

HTML
The error message said <samp>Comic Sans!? Are you kidding me!?</samp>.


<small>
您可以使用small元素将文本标记为正文的旁白，尤其是与人们通常所说的细印有关的内容：版权或商标声明、免责声明或披露、法律权利或限制、警告或注意事项，或来源归属。网络浏览器通过使用比正文稍小的字体大小来显示此文本。
示例
在线：wdpg.io/16-1-10
网页

HTML
Thank you for reading this essay.<br>
<small>TypeNerdNews is &copy; 2019 Aldus Manutius. All rights reserved.</small>



sub元素将文本标记为下标，这对于需要化学或数学公式的网页很有用。网络浏览器通过使用设置在常规文本基线部分以下的小字体大小来显示此文本。
示例
在线：wdpg.io/16-1-11
网页

HTML
Many illuminated manuscripts are written using iron gall ink, which is iron sulfate (FeSO<sub>4</sub>) added to gallic acid (C<sub>7</sub>H<sub>6</sub>O<sub>5</sub>).



sup元素将文本标记为上标，因此它通常用于数学公式，但许多网络作者也用它来指定脚注标记。网络浏览器通过使用设置在常规文本基线部分以上的小字体大小来显示此文本。
示例
在线：wdpg.io/16-1-12
网页

HTML
The W3C standard cautions us not to use subscripts and superscripts "for typographical presentation for presentation's sake."<sup>[1]</sup>



您可以使用time元素来指示特定的文本片段是日期、时间或两者的组合：
<time datetime="*machine-value*">*human text*</time>


想法是用两种方式表示日期和/或时间：


<time>和</time>标签之间的文本是以人类友好的方式显示日期或时间，例如 2019 年 8 月 23 日下午 1 点。


datetime属性的值是日期和/或时间的机器友好版本，例如 2019-08-23T16:00:00-05:00。要使用的通用语法在图 16.1 中显示。


图 16.1 <time>标签的datetime属性要使用的语法

网络浏览器不会以特殊方式格式化日期/时间。相反，您可以使用time元素来为浏览器和访问您页面的其他基于软件的访客提供有意义的、可读的日期和/或时间。例如，包含页面创建或最后编辑的日期和时间通常很有用。
您可以使用time元素来指示特定的文本片段是日期、时间或两者的组合。
示例
在线：wdpg.io/16-1-13
网页

HTML
This web page was last modified on <time datetime="2019-08-23T09:25:00-05:00">August 23rd, 2019 at 9:25AM</time>.



我无法辨别u元素有任何语义用途。万维网联盟（W3C）标准表示它“代表一个带有未阐述的、但明确呈现的非文本注释的文本范围。”我完全不知道这是什么意思。W3C 不友好地建议可能的使用可能是“将文本标记为拼写错误”，但这似乎很可疑。
u元素真正的问题在于，所有网络浏览器都将文本渲染为下划线，这意味着每个访问你页面的人都会认为文本是一个链接，而且很大一部分访问者会尝试点击它（当什么也没有发生时会感到沮丧）。你可能认为下划线有助于强调文本，但这是<em>标签的作用。简而言之，你没有使用<u>标签的好理由，有很多不使用它的好理由。我之所以在这里提到它，是因为你可能在查看某些（无疑设计得很差的）网页的源代码时遇到它。
示例
在线：wdpg.io/16-1-14
网页

HTML
It's a really bad idea to use the <code>u</code> element because its text <u>looks just like a link</u>.


<var>
var元素允许你标记一个单词或短语作为占位符。这个占位符可以是编程变量、函数参数，或者用来表示一类事物的单词或短语。网络浏览器通过使用斜体来显示这个文本。
示例
在线：wdpg.io/16-1-15
网页

HTML
Here's the syntax to use for the <code>time</code> element:<br> <code>&lt;time datetime="<var>machine-value</var>"&gt;<var>human  text</var>&lt;/time&gt;.</code>


更多关于链接的信息
当我在第二章中向你展示如何使用<a>标签时，你了解到创建链接只是将链接地址设置为<a>标签的href属性值这样一个简单的事情。就这个层面来说，这是真的，但<a>元素还有更多内容，因为你的网页链接可以是以下三种类型中的任何一种：


网站外部的远程链接


网站内部其他网页的本地链接


当前网页其他部分的页面内链接


你在第二章中学习了远程链接，你将在下一节学习页面内链接。但现在，我要谈谈指向你其他网页的本地链接。
链接到本地文件
首先要注意的是，对于本地链接，URL 不需要协议或域名。使用内部链接时，浏览器假定协议是 HTTP（或如果你在网站上使用 HTTP 的安全版本，则是 HTTPS），域名是你的主机服务器的名称。这很简单，但在继续链接课程之前，我想短暂地带你了解在互联网世界中目录是如何工作的。
当你注册一个将托管你的网页的公司时，该公司会在其服务器上为你提供一个自己的目录。如果你只准备几个页面，这个目录应该足够了。然而，如果你正在构建一个更大的网站，你应该考虑如何组织你的文件。为什么？想想你自己的电脑。你不太可能把所有东西都塞在一个目录里。相反，你可能为使用的不同程序有单独的目录，还有其他目录用于你的数据文件。
没有任何理由你不能在你的网站主页上制定一个类似的方案。然而，在这种多目录设置中，如何链接到其他目录中的文件可能会有些棘手。例如，考虑一个有三个目录的网站：
/    ① 
articles/    ② 
journal/    ② 


①  这是主目录。
②  这些是主目录的子目录。
有三种情况需要注意：


在同一目录中引用文件 — 这种情况是最简单的，因为你不需要包含任何目录信息。假设你正在处理的 HTML 文件位于journal目录中，而你想要引用同一目录中名为rant.html的页面。在这种情况下，你只需使用文件名，如下所示：
<a href="rant.html">




从主目录引用子目录中的文件 — 这种情况很常见，因为你的主页（几乎肯定位于主目录）可能包含指向子目录中文件的链接。假设你想要链接到你主页articles子目录中的design.html页面。你的<a>标签如下所示：
<a href="articles/design.html">




从不同子目录引用子目录中的文件 — 这种情况是最复杂的。假设你有一个位于articles子目录中的页面，你想要链接到journal子目录中名为poem.html的页面。这是<a>标签的示例：
<a href="/journal/poem.html">




在上一个例子中，前面的斜杠（/）告诉浏览器首先进入主目录，然后进入journal目录以找到poem.html文件。
第 16.2 课：链接到同一页面
覆盖内容：页面内链接
在线：wdpg.io/16-2-0
当网民点击一个标准链接时，页面会加载，浏览器在窗口中显示页面的顶部部分。然而，你可以设置一种特殊的链接，强制浏览器显示页面的其他部分，例如中间的部分。
你什么时候会使用这样的链接？你的大部分 HTML 页面可能都很短小精悍，访问网页的网民也不会有困难找到他们想要的内容。但对于较长的页面，你可以设置链接到页面的各个部分，这样读者可以直接跳转到某个部分，而不是滚动整个页面。
要创建这种类型的链接，你必须设置一个特殊的标识符，标记你想要链接的位置。要理解页面内链接是如何工作的，想想你如何在阅读一本书时标记一个位置。你可能需要折角页面，贴上便利贴，或者放在两页之间（例如书签）。页面内链接标识符执行相同的功能：它标记网页中的特定位置，你可以使用a元素直接链接到该位置。
要设置一个页面内链接的标识符，你需要在标签中添加一个id属性并为其提供一个值：
<h2 id="best-practices">Best Practices</h2>


分配给id属性的值必须满足以下标准：


它必须在网页中是唯一的。


它必须以字母开头。


其余字符可以是字母、数字（0–9）、连字符（-）、下划线（_）、冒号（:）或点（.）的任意组合。


你如何设置内页链接取决于它是否位于链接所在的同一页或不同页。如果标识符和链接在同一页上，你可以通过使用前面带有哈希符号 (#) 的 id 值来链接到它：
<a href="#best-practices">Go to the Best Practices section</a>


如果标识符定义在单独的网页中，你的链接的 href 值是那个页面的 URL，后面跟着一个哈希符号 (#) 和 id 值：
See my <a href="organization.html#best-practices">primer on best practices</a>


以下示例展示了页面内链接的实际应用。
示例
在线：wdpg.io/16-2-1
此示例展示了一个使用一些页面内链接的页面。
网页

HTML
<h1>Organizing Your Web Page Text</h1>
<h4>Contents:</h4>
<a href="#benefits">Benefits</a><br>    ① 
<a href="#workflow">Workflow</a><br>    ② 
<a href="#best-practices">Best Practices</a>    ③ 
<p>
All great documents have something in common: excellent organization. Content and formatting are important, but their effectiveness is diminished or even nullified if the document has a slipshod organization. However, even a page with only so-so content and negligible formatting can get its point across if it's organized coherently and sensibly.
<h2 id="benefits">Benefits</h2>    ④ 
There are many reasons to organize your web page text, but three are the most important: narrative flow, accessibility, and search engine optimization.
Narrative Flow</h3>
Research has shown &mdash; and poets and storytellers have known for thousands of years &mdash; that humans have an innate hunger for story. We learn better and take in data more effectively when it's organized as a narrative.
<h3>Accessibility</h3>
Visually impaired visitors to your web page will often use special screen readers to read aloud the page contents. These tools are designed to look for and read web page headings so the user can quickly get an overall sense of the page structure.
<h3>Search Engine Optimization</h3>
Most search engines include page headings as part of their algorithms for determining where a page should rank in the results. In general, text that resides higher up in the page hierarchy is given more importance in the search results.
<h2 id="workflow">Workflow</h2>    ⑤ 
<h2 id="best-practices">Best Practices</h2>    ⑥ 


①  收益标题的链接
②  工作流程标题的链接
③  最佳实践标题的链接
④  收益标题的标识符
⑤  工作流程标题的标识符
⑥  最佳实践标题的标识符
播放
设置以下地址的外部链接：www.w3.org/TR/html5/text-level-semantics.html。在同一页面上设置指向名为 the-a-element 的标识符的内页链接。在线：wdpg.io/16-2-4
插入特殊字符
你的 HTML 和 CSS 文件仅由文本组成，但这并不意味着它们只包含你可以用键盘输入的字母、数字和其他符号。如果你的网页文本需要破折号（—）、版权符号（©）或带有重音符号的 e（é），你可以通过使用称为 字符实体 的特殊代码将这些元素添加到你的页面中。这些实体有三种形式：十六进制代码、十进制代码和实体名称。十六进制和十进制代码是数字，而实体名称是更友好的符号，它们描述（尽管通常是隐晦的）你想要显示的字符。例如，你可以通过使用十六进制代码 &#x02122;、十进制代码 &#8482; 或实体名称 &trade; 来显示注册商标符号（™）。
记住
如果你将 <meta charset="utf-8"> 标签包含在页面头部，你就可以直接在代码中输入诸如破折号（—）和版权符号（©）等字符。例如，在 Windows 上，你可以通过按 Alt+0151 来输入破折号，在 macOS 上，可以通过按 Option+Shift+-（连字符）来输入。
注意，所有三个引用都以一个 ampersand (&) 开头，以一个分号 (;) 结尾。在使用字符实体时，不要忘记这两个符号。图 16.2 展示了一些常见的字符实体。
图 16.2 一些 HTML5 字符实体及其代码

使用 HTML5 实体浏览器
HTML5 定义了近 1,500 个字符实体，因此使用字符实体时遇到的最大挫折之一是知道哪些字符可用以及找到所需的字符。我自己也多次经历过这种挫折，因此我决定做些什么。为此，我构建了 HTML5 实体浏览器，它按类别组织字符实体（因此您可以轻松地看到可用内容），并提供搜索功能（因此您可以快速找到任何字符）。以下是它的工作原理：


在Web 设计游乐场中，选择菜单>HTML5 实体浏览器。


使用类别列表选择您要查找的实体类型。
应用程序会过滤实体列表，只显示您选择的类别中的实体，如图图 16.3 所示。
图 16.3 使用 HTML5 实体浏览器，选择一个类别以过滤实体列表，如图所示，或搜索实体。



要搜索实体列表，请使用“搜索实体”文本框输入实体名称或描述的全部或部分。
如果您想查看特定的实体，您可以输入该实体的十六进制或十进制代码。


添加注释
注释是一段文本，尽管它位于您的 HTML 文件中，但会被网页浏览器跳过，因此在页面渲染时不会显示。这种行为可能让您觉得奇怪，但注释有很多很好的用途：


您可以在页面代码的特定位置添加注释，例如添加注释Here’s where the logo goes when it’s finished。


您可以添加描述页面部分的解释性文本。如果您有一个包含页面标题的章节，您可以在章节前添加注释，例如This is the start of the header。


您可以跳过页面中问题部分。如果您有一个工作不正常或尚未设置的链接的章节，您可以将文本和标签转换为注释，以免对浏览器或用户造成问题。


您可以为查看您的 HTML 源代码的人添加版权声明或其他信息。


将任何文本转换为注释，只需将其包围在 HTML 注释标签中。具体来说，您需要在注释前加上<!--，并在其后加上-->，如下所示：
<!--This text is a comment-->


小心
虽然注释文本在浏览器中不显示，但通过查看页面源代码，其他人很容易看到它。因此，不要在注释标签内放置敏感信息。
摘要


如果您要链接到同一目录中的本地文件，请将<a>标签的href属性设置为文件名；否则，您需要将目录名放在文件名之前。


要创建页面内链接，请将id属性添加到链接位置；然后设置<a>标签的href属性为id值，前面加上一个井号（#）。


要指定一个特殊字符，如果可能的话，直接输入该字符，或者使用十进制代码、十六进制代码或实体名称，每个都以一个和号（&）开头，以一个分号（;）结尾。


要在代码中添加注释，将注释文本用<!--和-->包围。


第十七章  为你的网页设计添加色彩

在黑白世界中大胆地成为一抹亮色。——凯特·史密斯

本章涵盖


学习一些颜色基础知识


理解 CSS 如何使用颜色


将颜色应用于元素


添加背景颜色


创建颜色渐变


CSS 提供了你添加颜色到标题、文本、链接和背景所需的所有工具。你将在本章中学习如何使用这些工具，以及如何使用一些特殊的 CSS 工具来构建颜色渐变，这将提高你页面的“哇”效果。
理解颜色
关于在网页设计中理解颜色的好消息是，你不需要了解太多。是的，关于色彩理论已经写出了整本书，但你不需要精通光学物理就能创建出美丽、引人注目的网页。你需要知道的是两件事：如何和谐地搭配颜色以及颜色是如何产生的。对于前者，请参阅本章后面的“选择和谐的色彩”；对于后者，请继续阅读。

在网络上，颜色是免费的。虽然白色背景上的黑色文字没有问题，但使用不同的颜色不仅能为页面增添一些戏剧性，还能为内容创建层次。——埃里克·斯皮克曼

你可以使用两种方法来创建任何颜色。第一种方法利用了这样一个事实：你可以通过混合三种主要颜色（红色、绿色和蓝色）来创建光谱中的任何颜色，因此这种方法有时被称为RGB 方法。画家在调色板上进行这种混合，但你在数字领域，所以你使用数值来混合颜色，为每种颜色提供一个介于 0 到 255（或介于 0 到 100 的百分比）之间的数字。数字越低，颜色越不鲜艳，数字越高，颜色越鲜艳。
精通
对于三种颜色中的每一种，都有 256 个可用的值，你可以在超过 1600 万种颜色中进行选择。
表 17.1 列出了九种常见颜色及其相应的红、绿、蓝值。
表 17.1 九种常见颜色的红、绿、蓝值



名称
红色
绿色
蓝色
颜色




红色
255
0
0



绿色
0
255
0



蓝色
0
0
255



黄色
255
255
0



青色
255
0
255



青色
0
255
255



黑色
0
0
0



灰色
128
128
128



白色
255
255
255




精通
当红色、绿色和蓝色值相等时，你会得到一个灰度颜色。数值越低产生越深的灰色，数值越高产生越浅的灰色。
如表 17.1 所示，当只指定一种颜色（即，值大于 0）时，你得到的是纯色，但当指定两种或更多值时，你得到的是这些颜色的混合。为了帮助您可视化这个混合过程，我在 Web Design Playground 上制作了一个简短的动画。选择菜单> RGB 可视化器（或直接访问wdpg.io/rgbvis），您将看到三个圆圈——一个红色，一个绿色和一个蓝色——慢慢靠近彼此，然后重叠。当重叠发生时，如图 17.1 所示，请注意以下四点：


红色和蓝色的重叠产生洋红色。


红色和绿色的重叠产生黄色。


绿色和蓝色的重叠产生青色。


三种颜色的重叠产生白色。


图 17.1 在 Web Design Playground 上，选择菜单> RGB 可视化器，可以看到三个圆圈聚集在一起，重叠产生这里显示的混合颜色。

创建颜色的第二种方法涉及为三个称为色调、饱和度和亮度的属性提供数值，因此这种技术有时被称为HSL 方法：

色调——这个值（大致等同于术语颜色）衡量的是色轮上的位置（以度为单位），在 0 到 359 之间，如图 17.2 所示。较低的数字表示接近红色端的位置（红色等于 0 度），而较高的数字则穿过光谱的黄色、绿色、蓝色和紫色部分。

图 17.2 色调指的是在色轮上的位置，从 0（红色）开始，经过 120（绿色）和 240（蓝色）。


饱和度——这个值是一个百分比，并衡量给定色调的纯度。饱和度为 100 表示色调是纯色。如图 17.3 所示，较低的数字表示与色调混合的灰色更多；在 0%时，颜色成为灰度的一部分。

图 17.3 饱和度是衡量颜色纯度或灰色混合多少的度量。图 17.2 中的色轮设置为 100%饱和度。饱和度百分比越低，颜色看起来越灰。


亮度——这个值（也称为亮度或光亮度）也是一个百分比，并衡量颜色的明暗程度。如图 17.4 所示，较低的百分比颜色较暗（0 产生黑色），而较高的百分比颜色较浅（100 产生白色）。

图 17.4 亮度衡量颜色的亮度。图 17.3 中的色轮设置为 50%亮度。较高的百分比产生较浅的颜色，而较低的百分比产生较深的颜色。

应该使用哪种方法？答案取决于各种因素。如果你想指定单一颜色，RGB 方法更为直接，但如果你想选择和谐的色彩——例如互补色或类似色——HSL 方法则更为合适。在你做出决定之前，你需要了解你在 CSS 中应用颜色的具体细节。
使用 CSS 添加颜色
在样式表世界以及网页设计中，颜色的重要性不仅体现在 CSS 提供了至少六种定义看似简单的颜色值的方法。每种方法都有其用途，所以你将在接下来的几节中学习它们。
第 17.1 课：使用 rgb() 函数指定红色、绿色和蓝色
涵盖：rgb() 函数
在线：wdpg.io/17-1-0
之前，你了解到你可以通过指定颜色红色、绿色和蓝色成分的值在 0 到 255 之间来定义超过 1600 万种颜色中的任何一种。在 CSS 中实现这一点的其中一种方法就是使用 rgb() 函数，如图 17.5 所示。
图 17.5 要指定颜色的红色、绿色和蓝色成分，可以使用 rgb() 函数。

要使用此函数，将 *red-value* 替换为 0 到 255 之间的数字以指定红色成分；将 *green-value* 替换为 0 到 255 之间的数字以指定绿色成分；将 *blue-value* 替换为 0 到 255 之间的数字以指定蓝色成分。例如，你可以通过使用 128 作为红色，0 作为绿色，128 作为蓝色来生成紫色。以下示例展示了如何使用 CSS 将紫色文本显示在所有的 h1 标题上。
示例
在线：wdpg.io/17-1-1
此示例使用 rgb() 函数将紫色分配给 h1 元素。
网页

CSS
h1 {    ① 
 color: rgb(128, 0, 128);    ② 
}


①  指定 h1 元素进行样式化。
②  使用 rgb() 函数设置颜色属性值。
HTML
<h1>Royalty: A History</h1>


Play
你会如何使用 rgb() 函数将红色应用到元素上？在线：wdpg.io/17-1-2
你也可以使用百分比来指定 rgb() 函数的 *red-value*、*green-value* 和 *blue-value* 参数，其中 100% 表示颜色的完全强度（相当于十进制中的 255 值），而 0% 表示颜色的最低强度（在十进制表示法中相当于 0）。表 17.2 是 表 17.1 的重复，其中十进制值被它们的百分比等价值所替换。
表 17.2 九种常见颜色的红色、绿色和蓝色百分比



名称
红色
绿色
蓝色
颜色




红色
100%
0
0



绿色
0
100%
0



蓝色
0
0
100%



黄色
100%
100%
0



品红色
100%
0
100%



青色
0
100%
100%



黑色
0
0
0



灰色
50%
50%
50%



白色
100%
100%
100%




播放
你会如何使用 rgb() 函数将浅灰色应用到元素上？在线：wdpg.io/17-1-3
这里是紫色 color 定义转换为百分比的示例：
color: rgb(50%, 0, 50%)


第 17.2 节：使用 hsl() 函数指定色调、饱和度和亮度
覆盖内容：hsl() 函数
在线：wdpg.io/17-2-0
如果你心中有一个特定的色调，你可能更喜欢通过指定颜色的色调、饱和度和亮度成分来定义你的 CSS 颜色。要在 CSS 中这样做，请使用 hsl() 函数，如图 图 17.6 所示。
图 17.6 要指定颜色的色调、饱和度和亮度成分，请使用 hsl() 函数。

要使用此函数，将 *hue-value* 替换为介于 0 和 359 之间的数字以指定色调成分；将 *sat-value* 替换为介于 0 和 100 之间的百分比以指定饱和度成分；将 *lum-value* 替换为介于 0 和 100 之间的百分比以指定亮度成分。以紫色 h1 文本示例为例，以下展示了如何使用 CSS 通过 hsl() 函数显示所有 h1 标题的紫色文本。
示例
在线：wdpg.io/17-2-1
此示例使用 hsl() 函数将紫色分配给 h1 元素。
网页

CSS
h1 {    ① 
 color: hsl(300, 100%, 25%);    ② 
}


① 指定要样式的 h1 元素。
② 使用 hsl() 函数设置 color 属性值。
HTML
<h1>Royalty: A History</h1>


播放
你会如何使用 hsl() 函数将蓝色应用到元素上？在线：wdpg.io/17-2-2
播放
你会如何使用 hsl() 函数将白色应用到元素上？在线：wdpg.io/17-2-3
关于透明度的一个快速说明
在大多数情况下，你希望网页上的文本看起来是实心的且易于阅读。然而，有时为了增加页面的视觉吸引力，你会故意牺牲一点可读性，使文本略微透明。这意味着文本后面的任何内容——无论是纯色、图像还是其他文本——都会显示出来。
你可以通过使用 rgb() 和 hsl() 函数的变体来控制文本的不透明度（也称为 透明度）：rgba() 和 hsla()。
你可以使用这些函数，就像 rgb() 和 hsl() 一样，不同之处在于你还指定了一个名为 alpha 通道 的第四个参数。alpha 通道 是一个介于 0.0 和 1.0 之间的数值，其中 1.0 表示文本完全不透明，而 0.0 表示文本完全透明。
简要介绍十六进制数
接下来我要告诉您的下一个 CSS 颜色工具使用的是十六进制数，它使用的是 16 进制而不是常规十进制数使用的 10 进制。如果您了解十六进制数，请随意跳过本节；否则，在继续学习 CSS 颜色之前，您需要短暂但必要的进入十六进制领域。
十六进制值是高效的，因为它们使用单个字符符号来表示从 0 到 15 的所有值。具体来说，它们使用 0 到 9 来表示前十个值，就像在十进制中一样，但它们使用字母 A 到 F 来表示 10 到 15 的数量。图 17.7 展示了 0 到 15 的数量在十进制和十六进制中的等效值。
图 17.7 十六进制使用 0 到 9 与十进制相同，但它使用字母 A 到 F 来表示 10 到 15 的数量。

对于两位数，十进制数有两个部分：左边的十位和右边的个位。数字 10 可以读作“一个十和零个一”，而 36 可以读作“三个十和六个一”。两位十六进制数也有两个部分：左边的十六位和右边的个位。十六进制数 10 可以读作“一个十六和零个一”（使其等同于十进制的 16），而 5C 十六进制可以读作“五个十六和 C（十二）个一”，使其等同于十进制的 92。图 17.8 展示了一些示例。
图 17.8 就像两位十进制数由左边的十位和右边的个位组成一样，两位十六进制数由左边的十六位和右边的个位组成。

第 17.3 节：使用 RGB 十六进制代码
涵盖：RGB 十六进制代码
在线：wdpg.io/17-3-0
而不是使用 rgb() 函数来指定颜色的红色、绿色和蓝色成分，您可以使用 CSS 基于十六进制的方 法，如 图 17.9 所示。
图 17.9 您可以使用代码 #rrggbb 来指定颜色，其中 rr 是红色成分的十六进制值，gg 是绿色成分的十六进制值，而 bb 是蓝色成分的十六进制值。

这些 RGB 十六进制代码始终以井号符号 (#) 开头，后跟红色成分的两个十六进制值，绿色成分的两个十六进制值，以及蓝色成分的两个十六进制值。在每种情况下，允许的十六进制值范围从 00 到 ff。因为这些代码由三个十六进制值组成，所以它们通常被称为 十六进制三元组。表 17.3 列出了用于之前在表 17.1 和 17.2 中显示的九种常见颜色的 RGB 十六进制代码。
表 17.3 九种常见颜色的 RGB 十六进制代码



名称
红色
颜色




红色
#ff000



绿色
#00ff00



蓝色
#0000ff



黄色
#ffff00



品红色
#ff00ff



青色
#00ffff



黑色
#000000



灰色
#808080



白色
#ffffff




以下示例显示了如何使用此方法将紫色应用于 h1 文本。十进制 128 的十六进制等效值是 80，因此对于 color 值，红色部分是十六进制的 80，绿色部分是十六进制的 00，蓝色部分是十六进制的 80。
示例
在线：wdpg.io/17-3-1
此示例使用 #rrggbb 将紫色分配给 h1 元素。
网页

CSS
h1 {    ① 
 color: #800080;    ② 
}


①  指定要样式的 h1 元素。
②  使用 #rrggbb 设置 color 属性值。
HTML
<h1>Royalty: A History</h1>


播放
您会使用什么 RGB 代码将蓝色应用于一个元素？在线：wdpg.io/17-3-2
播放
您会使用什么 RGB 代码将最浅的灰色应用于一个元素？在线：wdpg.io/17-3-3
在某些情况下，您可以使用更短的代码。如果 rr、gg 和 bb 的每个值都使用重复字符——例如 00、66 或 ff——则可以为每种颜色使用重复字符之一。以下两个代码是等效的：
#3366cc
#36c


使用颜色选择器
处理 RGB 代码、HSL 值和十六进制值对计算机来说可能很方便，但对于人类来说，这些数字与特定颜色之间的联系并不直观。颜色关键字更易于理解，但它们代表的颜色种类太少。为了使您更容易查看并最终选择在网页上使用的颜色，网页设计沙盒提供了一个名为颜色选择器的工具。此工具提供了一个颜色调色板控件，允许您选择预设颜色或任何色调、饱和度、亮度和透明度的组合。该工具不仅显示结果颜色，还显示 rgb() 函数（十进制和百分比）、hsl() 函数、RGB 十六进制三元组、颜色关键字（如果适用），以及设置了透明度时的 rgba() 和 hsla() 函数。
下面是如何使用颜色选择器工具：


在网页设计沙盒中，选择菜单 > 颜色选择器（或直接访问 wdpg.io/colorchooser）。


点击颜色控件以显示调色板，如图 图 17.10 所示。


要选择预设颜色，请点击控件左侧的任一色块。


要指定颜色，请使用文本框输入 rgb() 函数、hsl() 函数、RGB 十六进制三元组、颜色关键字、rgba() 函数或 hsla() 函数。


在大色块中，水平拖动设置饱和度，或垂直拖动设置亮度。


使用垂直框设置色调，使用水平框设置透明度。


完成后，点击关闭。


学习
要了解如何使用透明度修改颜色，请参阅沙盒中的“修改透明度”课程。在线：wdpg.io/17-7-0
图 17.10 使用 Web 设计游乐场的颜色选择器工具选择颜色并查看其各种 CSS 代码。

选择和谐的色彩
现在你已经知道了如何将颜色应用到你的页面元素上，但这只是战斗的一半。搭配不当或应用不当的颜色可能会使页面看起来更糟，而不是更好。本节将探讨在页面设计中有效使用颜色的一些基本要点。
首先，由于有如此多的颜色可供选择，人们往往会过度使用，每个页面使用十多种色调。然而，使用过多的颜色可能会让用户感到困惑，甚至导致视觉疲劳。尽量坚持使用最多两种或三种颜色。如果你必须使用更多，尝试使用两种或三种色调的不同色调。
在选择颜色时，考虑一下你的配色方案对你的用户的心理影响。研究表明，“冷色”如蓝色和灰色会唤起可靠性和信任感。使用这些颜色来营造商务外观。对于需要更多活力的页面，可以使用红色、黄色和橙色等“暖色”，以营造节日和愉快的氛围。为了营造安全和舒适的环境，尝试使用棕色和黄色。为了增添环保的感觉，使用绿色和棕色。
最后，你需要思考一下你的颜色是如何相互搭配的。有些颜色天生相冲，当它们一起使用时，会使你的页面看起来很糟糕。幸运的是，每种色调都有一到两种与之搭配得很好的颜色，从而产生令人愉悦的和谐设计，让你的访客眼睛感到舒适。请注意，和谐并不意味着无聊！根据你选择的颜色，结果可以是任何从舒缓到鲜艳的，所以你选择的配色方案反映了你希望你的网站传达的信息。
幸运的是，你不必猜测哪些颜色会起作用。你可以使用以下列表中描述的技巧：


选择互补色。互补色在色轮上彼此相对。在hsl()函数中，互补色是指色调值相差 180 度的颜色。红色——hsl(0, 100%, 50%)——是青色的补色——hsl(180, 100%, 50%)。一般来说，在任何互补色方案中，通常最好将一种颜色用作页面的主色调，另一种颜色用作强调色，尤其是对于你希望用户注意的元素，如订阅或购买按钮以及类似的号召性用语对象。请参阅本章后面的“配色方案画廊”，以查看使用互补色的示例网页。


选择类似色。类似色位于色轮上的相邻位置。在hsl()函数中，类似色是指与主色相差±30 度的色调值。红色—hsl(0, 100%, 50%)—与hsl(30, 100%, 50%)和hsl(330, 100%, 50%)类似。如果你更喜欢更少的对比度（你想要颜色更接近），你可以通过使用相差 15 度的颜色来创建类似色方案。如果你选择对比度更高的方案，通常最好选择一种颜色作为页面主色调，并使用其他两种颜色用于按钮、边框和其他强调。


选择三色相颜色。三色相颜色是位于色轮上等距离的三种颜色。在hsl()函数中，三色相颜色是指色调值相差 120 度的颜色。红色—hsl(0, 100%, 50%)—与hsl(120, 100%, 50%)和hsl(240, 100%, 50%)三色相。三色相颜色通常具有相似的水平活力，因此它们感觉平衡和谐。许多使用三色相方案的网站会选择一种颜色作为页面背景，另一种颜色用于页面内容和导航，第三种颜色用于边框和其他强调。


选择分割互补色。分割互补色方案类似于互补色方案，不同之处在于，你不在色轮上使用相对的色调，而是使用位于相对色调两侧 30 度的两种颜色。红色—hsl(0, 100%, 50%)—与hsl(150, 100%, 50%)和hsl(210, 100%, 50%)分割互补。实施分割互补色方案的一个好规则是使用原始颜色作为页面的主色调，并使用其他两种颜色用于内容、导航和强调。


使用颜色方案计算器
如果你知道你想要用作页面主色调的颜色，计算其余的颜色方案就很简单：


互补色 —增加或减去 180 度。


类似色 —为一种颜色增加 30 度，为另一种颜色减去 30 度。


三色相 —为一种颜色增加 120 度，为另一种颜色减去 120 度。


分割互补色 —将色调增加 180 度；然后为一种颜色减去 30 度，为另一种颜色增加 30 度。


如果你只知道 RGB 代码，数学计算可能会相当令人畏惧。不用担心：我在网页设计游乐场中放置了一个颜色方案计算器。以下是使用方法：


选择菜单 > 颜色方案计算器（或导航到wdpg.io/colorcalc）。


在“颜色方案类型”选项卡上，选择你想要的颜色方案类型：互补色、类似色、三色相或分割互补色。
此外，还有一个单色方案，它生成五种具有相同色调，但饱和度和亮度值不同的颜色。


使用颜色选择器选择你的初始颜色。
你可以点击你想要的颜色，或者使用文本框输入 RGB 十六进制三元组或 rgb() 函数。（你也可以输入颜色关键字或 hsl() 函数。）计算器显示颜色方案，并显示每种颜色的 RGB 代码、rgb() 函数和 hsl() 函数，如图 17.11 所示。
图 17.11 使用 Web 设计游乐场的颜色方案计算器为给定的 RGB 代码生成颜色方案。



颜色方案画廊
该网页使用两种互补颜色来处理大部分的颜色负载，证明你不需要 dozen 种颜色就能创建一个引人注目的设计(www.upstruct.com/work/amandus-film-festival-2015)。

该网站使用类似方案创建了一个五彩斑斓、引人入胜的着陆页(toriseye.quodis.com).

该网站使用其三色色相方案来设置背景和文本(crayola.com)。

一个使用分割互补色相方案（其中最暗的颜色提供背景，最亮颜色提供引人注目的强调色）的网站示例(udoncampus.com)。

应用颜色渐变
到目前为止，你使用的所有颜色都是单一色调——有时是浅色、深色或更透明，确实如此，但仍然是单一色调。然而，通过使用渐变的概念，可以给单个页面元素使用多种颜色。渐变是两种或更多颜色的组合，其中一种颜色逐渐（有时很快）过渡到下一种颜色。当适度使用时，渐变可以成为为网页添加视觉兴趣和活力的有效方式。
在开始编写 CSS 之前，你需要了解一些事情：


渐变是网络浏览器自动创建的图像。


渐变只能作为背景应用，尽管广泛范围的元素支持背景图像。


你可以使用两种类型的渐变：一种 线性渐变 沿着直线从一种颜色过渡到另一种颜色；一种 径向渐变 从一个点向外以椭圆或圆形的形状过渡到另一种颜色。


在接下来的几节课中，你将学习线性渐变和径向渐变的 CSS。
第 17.4 节：创建线性渐变
覆盖内容：linear-gradient 函数
在线：wdpg.io/17-4-0
要指定线性渐变，你需要将 linear-gradient() 函数应用于你正在样式的元素的 background-image 属性。图 17.12 展示了要使用的通用语法。
图 17.12 要定义线性渐变，使用 linear-gradient() 函数指定角度和颜色停止点。

*angle*值可以是 0 到 359 之间的数字，后跟deg单位，或者后跟表示水平方向（left或right）、垂直方向（top或bottom）或对角方向（top left、top right、bottom left或bottom right）的关键字to。颜色值（*color1*、*color2*等）可以是本章前面学到的任何颜色值。百分比指定了颜色停止点，即前一种颜色结束和下一种颜色开始的位置。第一个默认颜色停止点是0%（即从开始处开始），最后一个默认颜色停止点是100%（即到结束处），因此您不需要输入这些值。
以下示例显示了一个使用线性渐变样式的空div元素。
示例
在线：wdpg.io/17-4-1
此示例显示了一个使用从黄色到蓝色过渡的线性渐变样式的div元素。
网页

CSS
div {
 background-color: blue;    ① 
 background-image: linear-gradient(to bottom, yellow, blue);    ② 
 height: 175px;    ③ 
 width: 100%;    ③ 
}


①  为不支持渐变的（罕见）浏览器提供的备用样式
②  从顶部到底部运行的线性渐变，颜色从黄色过渡到蓝色
③  应用于 div 元素的多种样式
HTML
<div></div>    ④ 


④  div 元素
游戏
创建一个从左上角到右下角运行的线性渐变。使用#76a5af作为起始颜色，#073763作为结束颜色。在线：wdpg.io/17-4-2
游戏
创建一个以 60 度角运行的线性渐变。对于第一种颜色，使用色调 191，全饱和度和半亮度；对于第二种颜色，保持相同的色调，但使用四分之一饱和度和 15%亮度。在线：wdpg.io/17-4-3
在示例中注意，我首先设置了背景颜色，然后应用了渐变。添加background-color声明是针对不支持渐变的浏览器的备用方案——主要是 Internet Explorer 9 及更早版本。这些浏览器会渲染背景颜色，但会忽略渐变样式。幸运的是，所有现代浏览器都支持渐变，因此只有越来越少的旧版 Internet Explorer 需要这种备用方案。
游戏
确定与颜色#674ea7相匹配的类似色方案中的两种颜色。创建一个使用这三种颜色并从右下角到左上角运行的线性渐变。在线：wdpg.io/17-4-8
如果您在渐变中使用三种或更多颜色，您需要考虑每种颜色想要停止的位置以及下一种颜色开始的位置。如果您没有指定任何停止位置，浏览器会为您完成这项工作，并假设过渡发生在两侧颜色之间的中间位置。如果您指定了三种颜色，中间颜色的过渡位置是在 50%，位于第一种（0%）和第三种（100%）颜色之间。以下示例显示了一个其中第二种颜色开始得稍早的线性渐变。
示例
在线：wdpg.io/17-4-5
本例展示了使用三种颜色线性渐变进行样式的div元素，其中中间颜色（白色）的过渡比正常情况开始得早（在 25%标记处）。
网页

CSS
div {
 background-color: blue;    ① 
 background-image: linear-gradient(to top right, red, white 25%, blue);    ② 
 height: 175px;    ③ 
 width: 100%;    ③ 
}


①  不支持渐变的（罕见）浏览器的后备样式
②  从左下角到右上角运行，在 25%处从红色过渡到白色，然后过渡到蓝色
③  应用于 div 元素的多种样式
HTML
<div></div>    ④ 


④  div 元素
第 17.5 课：创建径向渐变
涵盖：radial-gradient函数
在线：wdpg.io/17-5-0
要指定径向渐变，你需要在元素的background-image属性上应用radial-gradient()函数。图 17.13 显示了通用语法。
播放
创建一个从左到右运行的五色线性渐变。五种颜色（及其停止点）是#ffff00（0%）；#05c1ff（20%）；#274e13（50%）；#05c1ff（80%）；#ffff00（100%）。在线：wdpg.io/17-4-6
播放
使用线性渐变和 CSS 的background-size属性制作吸引人的重复背景图案。在线：wdpg.io/17-4-7
图 17.13 使用radial-gradient()函数定义径向渐变，指定形状、范围和颜色停止点

*shape*的值可以是circle（默认值，因此可以省略）或ellipse。*extent*的值是一个关键字对，告诉浏览器你希望最后一种颜色停止在元素的哪一侧或角上。可能的值有closest-side、farthest-side、closest-corner和farthest-corner。*position*的值指定形状的起始点；它可以是 x-y 点的集合（例如，45px 100px）或一个关键字对，它将水平位置（left、center或right）与垂直位置（top、center或bottom）结合起来。颜色值和停止点与线性渐变相同。
*extent*的默认值是farthest-corner，而*position*的默认值是center center（可以简写为center）。最简单的径向渐变规则是radial-gradient (*color1*, *color2*)，它创建一个居中的圆形渐变，从*color1*过渡到*color2*，直到元素的远角。
以下示例展示了使用径向渐变进行样式的空div元素。
示例
在线：wdpg.io/17-5-1
本例展示了使用径向渐变从黄色过渡到蓝色进行样式的<div>标签。
网页

CSS
div {
 background-color: yellow;    ① 
 background-image: radial-gradient(ellipse farthest-corner at left top, yellow, blue);    ② 
 height: 200px;    ③ 
 width: 100%;    ③ 
}


①  不支持渐变的（罕见）浏览器的后备样式
②  从左上角到右下角运行，从黄色过渡到蓝色的径向渐变
③  应用于 div 元素的多种样式
HTML
<div></div>    ④ 


④  div 元素
第 17.6 课：渐变与旧浏览器
包括：添加渐变回退颜色
在线：wdpg.io/17-6-0
linear-gradient 和 radial-gradient 属性在所有现代浏览器中都受支持，但并非所有人都在使用现代浏览器。好消息是，所有主流浏览器已经完全支持渐变有一段时间了，因此你不需要供应商前缀。然而，为了安全起见，你应该包含一个回退颜色，这是 background-color 属性的默认值。
播放
创建一个以顶部和左侧各 100 像素为中心的圆形径向渐变。使用颜色 #c27ba0 和 #3c78d8。在线：wdpg.io/17-5-2
播放
径向渐变的关键字 closest-corner 和 farthest-corner 之间有什么区别？我在 Web 设计游乐场设置了一个练习来帮助你找出答案。在线：wdpg.io/17-5-3
列表 17.1 展示了你应该用于线性渐变的跨浏览器代码。
列表 17.1 线性渐变的跨浏览器 CSS
background-color: *color*;    ① 
background-image: linear-gradient(*angle*, *color-stops*);    ② 


①  不支持渐变的浏览器的回退颜色
②  W3C 标准语法
跨浏览器代码以回退颜色开始，以防你的页面被使用不支持渐变的浏览器的用户访问。接下来是 W3C 标准代码，以便支持它的每个浏览器都能实现。以下是一个示例：
background-color: cyan;
background-image: linear-gradient(to top left, red, cyan);


列表 17.2 展示了你应该用于径向渐变的跨浏览器代码。
列表 17.2 径向渐变的跨浏览器 CSS
background-color: *color*;    ① 
background-image: radial-gradient(*shape*, *extent*, *direction*, *color-stops*);    ② 


①  不支持渐变的浏览器的回退颜色
②  W3C 标准语法
与线性渐变一样，这个跨浏览器代码包括一个回退颜色来覆盖旧浏览器，然后是 W3C 标准代码。以下是一个示例：
background-color: #fff;
background-image: radial-gradient(ellipse farthest-corner at center, #fff, #00f);


使用渐变构建工具包
渐变是 CSS 中最吸引眼球的特效之一，但也是由于所有关键字、颜色和停止点而变得相当繁琐的特效。为了使你在自己的页面上实现这一重要功能更加容易，Web 设计游乐场包括一个渐变构建工具包，它允许你使用表单选择渐变的所有元素。当你构建渐变时，你可以看到确切的结果，CSS 编辑器会显示你可以复制并粘贴到项目中的跨浏览器代码。
这是使用渐变构建工具包的方法：


在 Web 设计游乐场中，选择菜单 > 渐变构建工具包（或直接导航到 wdpg.io/kits/gradient）。


选择你想要创建的渐变类型的单选按钮：线性或径向。


选项选项卡中的控件会根据你的选择进行更改。


选择你的线性或径向渐变的选项。


在颜色选项卡中，选择你的颜色和停止点。
渐变构建工具显示渐变，并在 CSS 编辑器中显示跨浏览器规则，如图图 17.14 所示。
图 17.14 使用 Web 设计游乐场的渐变构建工具通过几次鼠标点击构建线性或径向渐变。



要选择预设颜色，点击控制面板左侧的任一色卡。


要指定颜色，使用文本框输入rgb()函数、hsl()函数、RGB 十六进制代码、颜色关键字、rgba()函数或hsla()函数。


在大色块中，水平拖动以设置饱和度，或垂直拖动以设置亮度。


使用垂直框设置色调，使用水平框设置透明度。


完成后，点击关闭。


学习
要了解如何使用透明度修改颜色，请参阅游乐场上的“更改透明度”课程。在线：wdpg.io/17-7-0
摘要


除了你在第四章中学到的颜色关键字外，你有五种方式来指定 CSS 颜色：rgb()函数、hsl()函数、RGB 十六进制代码、rgba()函数和hsla()函数。


要为元素的文本着色，使用color属性。


要为元素的背景着色，使用background-color属性。


要将线性渐变应用于元素的背景，使用linear-gradient()函数；如果您更喜欢径向渐变背景，则使用radial-gradient()函数。


第十八章  使用排版增强页面文本

90%的设计是排版。——杰弗里·泽尔达曼

本章涵盖


设置字体


使用 Google 字体


样式化网页中的文字和段落


你想知道优秀网页设计的秘诀吗？具体来说，你想知道几乎所有最佳网站共有的一个设计元素吗？几乎每个杰出网站共享的隐藏在明显之下的设计秘诀可以总结为仅仅两个词：
排版很重要。
排版——应用于增强文本的可读性、可读性和外观的样式——是网络的秘密酱料，它的魔法尘埃。当你遇到一个有美学吸引力的网站时，很可能这个吸引力的很大一部分来自于网站对字体、文本大小和样式、间距以及其他排版事项的使用。该网站具有文本吸引力。
如果你想在你的网页上获得同样的吸引力，你只需要记住这两个至关重要的词：排版很重要。字体很重要。字体大小和样式很重要。间距、对齐和缩进很重要。幸运的是，正如你在本章中看到的，CSS 提供了一套庞大的排版工具，你可以使用这些工具来美化你的文本。不，你不会像在桌面页面布局程序中那样获得控制权，但 CSS 属性和值足够多，可以向世界展示你关心你的网页文本。
指定字体类型
要将你的排版提升到高速档，你需要超越我在第四章中提到的通用和系统字体，并接受字体堆栈和网页字体的强大概念。
第 18.1 课：使用字体堆栈
涵盖：font-family属性
在线：wdpg.io/18-1-0
你可能还记得在第四章中提到，当你使用font-family属性时，你可以使用多个字体家族，只要你在所谓的字体堆栈中用逗号分隔它们。
为什么你会指定多个字体家族？在少数例外的情况下，你无法确定系统字体是否安装在了用户的设备上。例如，虽然无衬线字体 Helvetica 安装在 100%的 Mac 上，但它只安装在 7%的 Windows PC 上。同样，衬线字体 Cambria 安装在超过 83%的 Windows PC 上，但在 Mac 上只有大约 35%可用。当你指定一个字体堆栈时，浏览器会检查列表中的第一个字体家族，看它是否已安装。如果没有，浏览器会尝试列表中的下一个字体家族，这个过程会一直持续到浏览器找到一个已安装的系统字体。如果没有找到，在字体堆栈的末尾包含一个类似的通用字体家族始终是一个好习惯。例如，如果你的系统字体是衬线字体，那么在堆栈的末尾包含serif通用字体。
除了通用字体外，是否还有其他可以包含在字体堆栈中的稳妥选择？唉，实际上并不多，尽管一些字体至少安装在 90% 的 Mac 和 Windows PC 上。无衬线字体包括 Arial、Arial Black、Tahoma、Trebuchet MS 和 Verdana。衬线字体包括 Georgia 和 Times New Roman。等宽字体是 Courier New。
学习
要获取许多流行系统字体的安装百分比以及每个字体的建议堆栈，请参阅 www.cssfontstack.com 上的 CSS 字体堆栈。
另一种字体堆栈策略是按照以下顺序包含字体家族：


您首选的字体


偏好字体的精确复制品


在 Mac 和 Windows 中几乎通用的类似字体


同一风格的通用字体


下面是一个示例：
font-family: "League Spartan", Futura, Tahoma, sans-serif; 


以下示例创建了两个字体堆栈：一个用于 h3 元素，另一个用于 p 和 li 元素。
示例
在线：wdpg.io/18-1-1
此示例展示了应用于 h3 元素的基础衬线字体堆栈，以及应用于 p 和 li 元素的基础无衬线字体堆栈。
网页

CSS
h3 {    ① 
 font-family: "Lucida Bright", Georgia, serif;    ① 
}    ① 
p, li {    ② 
 font-family: Tahoma, Helvetica, Arial, sans-serif;    ② 
}

①  h3 元素使用基于衬线的字体堆栈。
②  p 和 li 元素使用基于无衬线的字体堆栈。
HTML
<h3>People of Collar</h3>
<p>The adjectives <i>white-collar</i> and <i>blue-collar</i> are familiar to most of us, but here are a few more whimsical variants that you might not have heard of:</p>
<ul>
    <li>Black-and-blue-collar: Football players</li>
    <li>Green-collar: Environmentalists</li>
    <li>Grey-collar: Employees who perform both white- and blue-collar tasks</li>
    <li>Open-collar: People who work at home</li>
    <li>Steel-collar: Robots</li>
</ul>


当您为您的网页设计构建字体堆栈时，以下是一些需要注意的要点：


如果您想尝试不太流行的系统字体，请将其放在堆栈的起始位置。如果您将其放在安装在例如 99% 的设备上的字体之后，不太流行的字体很少会被使用。


如果可能，尽量在堆栈内匹配字体特征。例如，不要在同一堆栈中包含 Arial 这样的窄字体和 Verdana 这样的相对粗字体。


总是以同一风格的通用字体结束字体堆栈。


指定网络字体
依赖于系统字体是提高浏览器默认字体排版的简单方法。但系统字体有两个明显的问题：可用的系统字体数量有限，并且您不能确定特定的系统字体是否安装在使用者的计算机上。后者是一个大问题，因为它意味着您不能确定您的网页将如何显示给每个用户。如果您认为字体排印很重要（您应该这样认为），这种不确定性是一个主要的设计障碍。
幸运的是，您可以通过在页面上实现网络字体来跳过这个障碍。网络字体是托管在网络上并由特殊 CSS 指令 @font-face 引用的字体文件。网络浏览器使用该指令来加载字体文件，从而确保每个用户都能看到相同的字体。
您有两种方式来托管网络字体：


使用第三方托管。


在您的网站上托管字体文件。


下两个课程将提供每个方法的详细信息以及优缺点。
第 18.2 节：使用第三方托管字体
覆盖内容：link元素
在线：wdpg.io/18-2-0
实现网络字体的最简单方法之一是链接到第三方网站托管的字体。有许多字体托管服务可供选择，包括 Fonts.com (www.fonts.com) 和 Adobe Typekit (typekit.com)。在大多数情况下，你可以直接购买字体或支付月费，这让你可以访问到各种各样的字体。然而，大多数新网络设计师使用 Google Fonts (fonts.google.com)，它提供了数百种免费的网络字体。
使用第三方的优点是已经清除了使用网络字体的所有权利。字体是知识产权，因此你需要从创作者那里获得使用许可，尤其是在网站上。字体托管者已经获得了必要的许可证，所以他们的字体没有麻烦和罪恶感。

网络字体服务……处理了大部分的许可和托管工作，让你专注于你最擅长的事情——构建令人惊叹和美丽的网站。——丹·爱登

使用第三方的主要缺点是字体文件位于远程服务器上，因此你的字体有时可能需要额外的时间来加载。你链接的字体越多，加载时间就越慢。然而，大多数大型字体托管服务已经优化了交付机制，所以这种字体延迟通常不是大问题。
指定你想要使用的字体的方法取决于服务，但一般程序通常是这样的：


在字体托管网站上，找到并选择你想要使用的字体。


通过添加额外的字体，如斜体、粗体和可能的粗斜体来定制字体。

谨慎
记住，你添加的字体越多，你的网页加载速度就越慢。只链接到绝对需要的字体。除了常规字体外，大多数网页只需要斜体和粗体。



复制字体托管生成的<link>标签，并将其粘贴到网页的头部部分（即在<head>和</head>标签之间）。
此标签从主机加载一个包含所需字体代码的 CSS 文件。以下是 Google Fonts 为 Lato 字体生成的<link>标签（其中400代表常规字体，400i代表常规斜体，700代表粗体）：
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">



常见问题解答
400 和 700 这样的数字代表什么？ 它们代表字体的粗细，其中 400 代表常规字体，700 代表粗体字体。参见第四章。



将字体添加到你的样式表中。
以下属性告诉网络浏览器使用 Lato 字体家族来显示所有段落文本（如果第三方字体文件无法加载，将添加一个通用字体名称来显示）：
p {
    font-family: Lato, sans-serif;
}




示例
在线：wdpg.io/18-2-1
这个例子展示了两个文本片段。第一个不在<p>标签内，因此使用浏览器的默认字体，而第二个在<p>标签内，因此使用 CSS 部分显示的属性指定的字体家族。
Web Page

CSS
p {    ① 
 font-family: Lato, sans-serif;    ① 
}    ① 

①  p 元素使用 Lato 字体家族。
HTML
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">    ② 
This text just uses the browser's default font.    ③ 
<p>    ④ 
This text resides within an HTML paragraph, so it uses the font specified in the style definition for the p tag.    ④ 
</p>    ④ 


②  告诉浏览器从 Google 下载字体
③  未指定 p 元素，因此使用默认字体。
④  这段文本位于 p 元素内，因此使用 Lato 字体进行格式化。
第 18.3 课：托管您自己的字体
覆盖内容：@font-face规则
在线：wdpg.io/18-3-0
播放
使用 Google Fonts 生成一个定义 Merriweather 字体族常规字体的<link>标签的样式表。设置一个将常规字体应用于所有页面文本并包含一个通用字体名称作为后备的样式。在线：wdpg.io/18-2-2
使用第三方字体托管是摆脱默认字体惯例并让你的页面闪耀有趣字体的最简单方法。然而，一些网页设计师不喜欢将他们页面的外观置于某个远程服务器之上，该服务器可能运行缓慢或根本无法运行。在这种情况下，设计师会选择自己托管字体的方法，其中实际的字体文件位于与网页相同的服务器上。
常见问题解答
本地字体文件是否总是比远程字体文件更快？ 并不一定。许多字体提供商使用非常快速的内容分发网络（CDN），因此延迟通常可能小于本地文件。
不幸的是，您必须为托管自己的字体所固有的速度和可靠性付出代价：复杂性。使用第三方托管字体是一个简单的过程，只需生成并使用一个指向远程样式的<link>标签，而托管自己的字体有两个主要因素会提高复杂性水平。
第一个复杂因素是字体许可。大多数商业字体都附带了防止它们在网络上使用的许可。在您自己托管字体之前，您必须购买一个在网络上使用该字体的许可（假设提供了此类许可），或者您可以寻找允许网络使用的开源字体。
对于后者，这里有一些字体集合可以尝试：


Font Squirrel (www.fontsquirrel.com)


Fontspring (www.fontspring.com)


Fontex (www.fontex.org)


Open Font Library (fontlibrary.org)


小心
字体是知识产权，应如此对待。在您的网站上托管任何字体之前，请确保您有使用该字体进行个人和/或商业用途的许可（根据您网站的性质而定）。
第二个复杂因素是众所周知的字体文件格式混乱。您可能认为您需要上传单个字体文件到您的服务器，但字体艺术的状况并不那么简单。实际上，有三种文件格式：


EOT (Embedded Open Type)—由 Internet Explorer 支持，并且是版本 9 之前 Internet Explorer 支持的唯一字体文件格式。


WOFF (Web Open Font Format)—由 Internet Explorer 9 及更高版本、Mozilla Firefox 3.6 及更高版本、Google Chrome 6 及更高版本支持。一个名为 WOFF 2.0（或 WOFF2）的新版本由 Microsoft Edge 14 及更高版本、Chrome 36 及更高版本、Firefox 39 及更高版本、Opera 23 及更高版本、Safari 12 及更高版本、iOS Safari 10.2 及更高版本以及 Android 62 及更高版本支持。


TTF/OTF (TrueType Font/OpenType Font)—除 Internet Explorer 8 及更早版本外，所有浏览器都支持。


好消息是，您不再需要这些格式中的大多数。EOT 已经过时，因为很少有人还在使用 Internet Explorer 8 或更早版本，而 TTF/OTF 是多余的，因为它们包含在 WOFF 和 WOFF2 格式中。（第四种格式，称为 SVG，现在被认为是过时的。）简而言之，您只需要担心两种字体文件格式：WOFF 和 WOFF2。还不错！
小心
仅使用 WOFF 和 WOFF2 可能意味着您网站的一小部分访客将看不到您的字体，包括运行以下（以及每个版本的早期版本）的用户：Android 4.3、Chrome 4、Firefox 3.5、Internet Explorer 8、iOS 4.3、Opera 10.1 和 Safari 5。如果这种情况是问题，请使用如wdpg.io/18-3-3中所示的完整@font-face语法。
理论上，想法是您下载您的授权字体文件，该文件可能为 TTF 格式，然后您以某种方式使用该文件生成其他格式。实际上，这样做很难，所以大多数人使用 Font Squirrel 提供的一项服务，即 Webfont Generator（www.fontsquirrel.com/tools/webfont-generator），该服务将您的下载字体文件自动创建一个包含其他文件格式的包。
精通
与当前字体文件格式现实相匹配，Webfont Generator 默认只生成 WOFF 和 WOFF2 字体。如果您需要其他字体文件格式，请务必激活专家单选按钮；然后使用复选框选择您想要的格式。
更好的是，Webfont Generator 包包括使用您网站上字体的必要 CSS 代码。此代码使用@font-face规则，其通用语法如下：
@font-face {
    font-family: '*Font Name*';    ①  
    src: url('*font_filename*.woff2') format('woff2'),
         url('*font_filename*.woff') format('woff');
}


①  带有空格的字体名称必须用引号括起来。
记住
为了获得最佳的跨浏览器效果，请设置@font-face规则，使得 WOFF2 字体格式在 WOFF 格式之前出现。Webfont Generator 应该会自动完成这项操作。
要应用@font-face规则，请使用其font-family值作为您想要样式的元素的font-family属性。
示例
在线：wdpg.io/18-3-1
这个例子为 Bree Serif 字体设置了一个 @font-face 规则，并将其应用于 ul 元素。
网页

CSS
@font-face {
 font-family: 'Bree Serif';    ① 
    src: url('/fonts/breeserif.woff2') format('woff2'),
         url('/fonts/breeserif.woff') format('woff');
}
ul {
 font-family: 'Bree Serif';    ① 
}

①  使用字体族名称将字体应用于元素。
HTML
<p>
Prefer to get your word origins on the web? Looking to kill some time at work? Wondering when this incessant questioning will end? Here are some fun websites that'll give your clicking finger a workout:
<p>
<ul>
    <li>Online Etymology Dictionary (www.etymonline.com)</li>
    <li>Oxford English Dictionary (www.oed.com)</li>
    <li>The Phrase Finder (www.phrases.org.uk)</li>
    <li>The Word Detective (www.word-detective.com</li>
    <li>Word Spy (www.wordspy.com)</li>
    <li>World Wide Words (www.worldwidewords.org)</li>
</ul> 


在使用与 @font-face 规则的文件名相关的目录时，以下是一些需要注意的要点：


如果字体文件位于 CSS 文件（或包含 CSS 代码的 HTML 文件）所在的目录中，则不需要目录：
url('breeserif.woff2')




如果字体文件位于存储 CSS（或 HTML）文件的位置的子目录中，请在文件名前加上目录名和一个反斜杠 (/)：
url('fonts/breeserif.woff2')




如果字体文件位于网站根目录的子目录中，请在文件名前加上反斜杠 (/)，目录名，然后再加上一个反斜杠 (/)：
url('/fonts/breeserif.woff2')




处理文本样式
当你选定了字体（或字体族）并且可以用不同的字体大小来格式化它们时，你已经在制作具有排版美感的网页的道路上走得很远了。但要使你的网页在众多网页中脱颖而出，你需要了解一些更多与文本样式相关的 CSS 属性。
第 18.4 课：格式化小写字母
涵盖：font-variant 属性
在线：wdpg.io/18-4-0
使用它
小写字母也常用于使全大写文本（如缩写）与周围文本更好地融合。
当你想让某些页面文本引起注意时，大多数情况下你会转向加粗或斜体来完成这项工作。然而，对于一些稍微不同的事情，尝试使用小写字母。小写字母是一种全大写风格的文本，其中小写字母被转换为略小于正常大写字母的大写等效字母。（原始大写文本保持不变。）
你可以通过使用 font-variant 属性并将其值设置为 small-caps 来将文本格式化为小写字母。
示例
在线：wdpg.io/18-4-1
这个例子使用了设置为 small-caps 的 font-variant 属性来将文本中的名字格式化为小写字母。
网页

CSS
span {    ① 
 font-variant: small-caps;    ① 
}    ① 

①  这个样式将 span 元素格式化为使用小写字母。
HTML
Movable type was invented by <span>Johannes Gutenberg</span> in the mid-fifteenth century. The first printing press in England was set up by  <span>William Caxton</span> in 1876\.    ②  


②  使用小写字母格式化 span 元素内的名字。
第 18.5 课：设置行高
涵盖：line-height 属性
在线：wdpg.io/18-5-0
精通
另一种操纵文本大小写的方法是使用 text-transform 属性。将此属性设置为 lowercase 以将文本转换为小写字母，或设置为 uppercase 以将文本转换为大写。你还可以使用 capitalize 仅将每个单词的第一个字母转换为大写。
使你的网页文本在排版上看起来稳固的最后一大因素是行高，即两行文本基线之间的距离。对于给定的一行文本，基线是诸如 o 和 x 这样的字母似乎坐落在上面的不可见线。
您可以通过使用名为 line-height 的 CSS 属性来设置行高。您可以分配给此属性的值类型在表 18.1 中概述。
表 18.1 可应用于 line-height 属性的值



值
描述




number
输入不带单位的数值。计算出的行高是当前字体大小乘以该数值。


length
输入带有单位的数值，例如 em。


percentage
百分比值。计算出的行高是当前字体大小乘以百分比。


normal
一个关键字，告诉浏览器根据当前字体大小自动设置行高。



行高对于可读文本至关重要，正如您在图 18.1 中所看到的。左侧的文本行高设置为 0.75，导致行距过于接近，难以阅读。右侧的文本行高设置为 2，导致行距过大，阅读不舒适。中间的文本行高设置为 1.2，看起来恰到好处。

字体排印是二维结构，基于经验和想象力，并受规则和可读性的指导。——赫尔曼·察普夫

图 18.1 当行高过小（左侧）或过大（右侧）时，文本难以阅读。

尝试以下操作
在线：wdpg.io/18-5-2
此示例将 p 元素的 line-height 属性设置为 0.9，导致所谓的 紧密行间距。尝试大约 1.2 的 正常行间距 值，以及 1.5 或更高的 宽松行间距 值。
网页

CSS
p {
    font-size: 1.5em;
 line-height: 0.9;    ① 
}

①  调整 p 元素的行高值以创建紧密、正常和宽松的行间距。
HTML
<p>
The name <i>line height</i> is often used synonymously with <i>leading</i> (it's pronounced <i>ledding</i>). This term comes from the movable type profession, where typesetters often use a strip of lead to set the amount of space between two lines of text.
</p>. 


第 18.6 节：使用简写字体属性
覆盖内容：font 属性
在线：wdpg.io/18-6-0
如您在本书中迄今为止所见，CSS 字体排印有六个主要的字体相关组件：字体族、字体大小、加粗、斜体、小写字母和行高。这些组件分别由 CSS 属性 font-family、font-size、font-weight、font-style、font-variant 和 line-height 表示。方便的是，您可以通过使用 font 简写属性一次性应用这些属性中的任何或所有属性，该属性采用如图 18.2 所示的语法。
图 18.2 您可以使用 font 属性同时应用多达六个字体属性。

此语法是您迄今为止所学内容的直接重复，尽管您需要记住以下注意事项：


您可以使用一些或所有这些值，但至少必须提供 *font-size* 和 *font-family* 值，顺序如下。


您可以以任何顺序添加*font-style*、*font-weight*和*font-variant*值，只要它们都在*font-size*值之前即可。


你无疑已经注意到了，并且对语法中的*font-size*``/``*line-height*部分非常好奇。那个斜杠是从传统的印刷排版中借用的，其中作为缩写，人们可能会说文本是“12/18”排版，这意味着它使用 12 磅的字体和 18 磅的行高。


示例
在线:wdpg.io/18-6-1
此示例设置了div、dt和span元素的font属性。
网页

CSS
div {    ① 
 font: bold 1.5em/1.3 Lora;    ② 
}    ① 
dt {    ② 
 font: italic 1.1em/1.25 Lora;    ② 
}    ② 
span {    ③ 
 font: small-caps 1em Lora;    ④ 
}    ③ 

①  div文本是加粗的 Lora 字体，字号为 1.5em，行高为 1.3。
②  dt文本是斜体的 Lora 字体，字号为 1.1em，行高为 1.25。
③  该段文本使用的是小写字母的 Lora 字体，字号为 1em。
HTML
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">    ④ 

<h1>Typography</h1>
<div>A Glossary of Terms</div>
<dl>
<dt>ascender</dt>
<dd>The part of a tall lowercase letter such as <i>b</i> or <i>h</i> that extends above lowercase letters such as <i>a</i> and <i>c</i>.
<dt>baseline</dt>
<dd>The invisible line upon which lowercase characters such as <i>o</i> and <i>w</i> appear to sit.</dd>
<dt>descender</dt>
<dd>The part of a lowercase letter such as <i>g</i> or <i>y</i> that extends below the <span>baseline</span>.
<dt>leading</dt>
<dd>(pronounced <i>ledding</i>) See <span>line height</span>.</dd>
<dt>line height</dt>
<dd>The distance between the <span>baselines</span> of two adjacent lines of text.</dd><dt>x-height</dt>
<dd>The height of a typeface's lowercase <i>x</i>.</dd>
</dl>


④  此元素嵌入来自 Google Fonts 的 Lora 字体。
网页排版画廊
Anchor & Orbit 网站(www.anchorandorbit.com)使用三种字体的组合：P22 Underground 用于标题，Caslon 用于正文文本，Cotoris 用于标志。

Scytale 网站(scytale.pt)使用 Flama Medium 字体作为标题，Adelle Light 字体作为正文文本。

设计师 Kait Bos 的网站(www.kaitbos.com)使用 Capriola 字体进行导航和正文文本，Archer Light Pro 字体用于主要标题。

Rule of Three 文案工作室的网站(rule-of-three.co.uk)使用单一字体 Sorts Mill Goudy，在不同字号中应用。

摘要


使用托管或本地字体文件，而不是依赖系统字体。


选择一种适合您的文本和整体信息的字体。


使用font-variant: small-caps作为强调或突出文本的另一种方式。


通过设置line-height属性，在文本行之间留出适当的空间（但不要太多）。


通过使用font属性作为缩写来节省时间。


第十九章  学习高级 CSS 选择器

HTML 元素使网页设计师能够标记文档的结构，但除了信任和希望之外，你对自己的文本外观没有任何控制权。CSS 改变了这一点。CSS 让设计师成为驾驶员。—— Håkon Wium Lie

本章涵盖


学习强大的 ID 和通用选择器


通过后代、子代和兄弟选择器提升你的样式游戏水平


通过组合两个或更多选择器来定位你的样式


通过理解 CSS 继承、层叠和特定性成为样式大师


表面上，CSS 看起来像是一个简单的话题：你给一些属性赋值，将它们组合成一个规则，然后将这个规则应用到页面元素上。重复几次，哇哦：你的页面就变得美丽了。但 CSS 的表面简单性只是肤浅的。在声明和规则的直接实现之下，隐藏着复杂的洞穴和深不可测的动态深度。本章作为对这个隐藏世界的介绍，这个世界是许多最强大和实用的 CSS 概念的家园。
使用 ID 选择器进行操作
在第七章，我向你介绍了 CSS 选择器，它使你能够指定你想要样式的页面对象：
*selector* {
*property1*: *value1*;
*property2*: *value2*; 
    ...
}


到目前为止，你已经了解到这个 CSS 规则中的*选择器*部分可以是 HTML 标签的名称（一个类型选择器）或 CSS 类的名称（一个类选择器）。CSS 选择器有很多，然而其中许多选择器相当晦涩，但更常见的选择器确实是强大的工具。本章的教程介绍了这些选择器中的五个，从 ID 选择器开始。
学习
我的 WebDev Workshop 包括所有 CSS 选择器的完整概述，以及示例。查看：https://webdev.mcfedries.com/code/selector-reference/。
第 19.1 课：使用 ID 选择器
涵盖：#和*id*选择器
在线：wdpg.io/19-1-0
回到第十六章，你学习了你可以通过给页面中的特定元素添加id属性，然后在链接地址中包含id值来链接到网页中的特定元素。你还可以使用元素的id值来应用 CSS 样式到该元素。要在内部或外部样式表中这样做，你需要在id值前加上一个井号符号（#）来创建选择器：
#*id-value* {
*property1*: *value1*;
*property2*: *value2*; 
    ...
}


记住
与类名一样，你的id值必须以字母开头，可以包含任何组合的字母、数字、连字符（-）和下划线（_）。
小心
同样，像类名一样，id值是区分大小写的。
以下示例展示了 ID 选择器的实际应用。
示例
在线：wdpg.io/19-1-1
此示例给两个<div>标签——section-quote和section-summary——添加了 ID，然后使用相应的 ID 选择器应用规则到每个div元素上。
网页

CSS
#section-quote {    ① 
 color: darkgray;    ① 
 font-size: 1.25em;    ① 
 font-style: italic;    ① 
 text-align: right;    ① 
}    ① 
#section-summary {    ② 
 color: dimgray;    ② 
 font-size: 1.5em;    ② 
 font-weight: bold;    ② 
 text-align: center;    ② 
}    ② 

①  章节引用id的规则
②  章节摘要id的规则
HTML
<h1>
    Metaphors for New Words
</h1>
<div id="section-quote">    ③  
“Because in our brief lives we catch so little of the vastness of history, we tend too much to think of language as being solid as a dictionary, with a granite-like permanence, rather than as the rampant restless sea of metaphor which it is.”<br>–Julian Jaynes
</div>
<div id="section-summary">    ④  
We make metaphors for many things, but when we make many metaphors for one thing, it says that thing is important to us. We make metaphors for new words almost as readily as we make new words.
</div>


③ 将 section-quote id 分配给 div 元素
④ 将 section-summary id 分配给 div 元素
最佳实践：类与 ID
你应该在何时使用 ID 选择器而不是类选择器？问问自己以下问题：


我想要的样式是否只应用于一个且仅有一个元素？
如果是这样，就使用该元素的 ID 选择器。


我想要的样式是否应用于多个元素？
如果是这样，就使用每个这些元素的类选择器。


我想要的样式现在是否只应用于一个元素，但将来可能应用于其他元素？


如果是这样，现在就使用该元素的类选择器。你总是可以在以后需要时将类选择器应用于其他元素。
谨慎
ID 选择器，因为它们只应用于单个元素，使得你的 CSS 代码更难维护和调试。当我在这章后面讨论特定性时，你会明白原因。因此，关于 ID 选择器的真正最佳实践是永远不要使用它们。
网页家谱：父母、后代和兄弟姐妹
在继续学习选择器之前，你需要简要地了解网页的层次结构，这样你就可以学习一些关键概念。图 19.1 展示了一个典型网页的层次结构。
现在遍历这个（颠倒的）树结构：


html 元素是结构的根。


html 元素有两个主要分支：head 和 body。


head 元素有两个分支：title 和 style。


body 元素有三个分支：一个 h1 元素和两个 p 元素。


第一个 p 元素有一个 div 分支。


那个 div 分支有两个 p 分支。


那些第二个 p 分支有一个 section 分支。


section 分支有两个 p 分支。


在这个层次结构的基础上，我可以定义一些有用的术语，以便你理解接下来的 CSS 选择器：


父元素 — 包含一个或多个其他元素的元素。在 图 19.1 中，html 是 head 和 body 元素的父元素，而 div 元素是两个 p 元素的父元素。


曾祖父母 — 包含第二级元素的元素。在 图 19.1 中，html 是（包括）title 和 h1 元素的曾祖父母，而 div 元素是 section 元素的曾祖父母。


图 19.1 典型网页的树结构



祖先 — 包含一个或多个元素级别的元素。在 图 19.1 中，html 是所有其他元素的祖先，而 body 元素是 div 元素及其包含的每个元素的祖先。


子元素 — 被包含在其层次结构中位于其上方一级的元素中的元素。也就是说，该元素在结构中有一个父元素。在 图 19.1 中，title 是 head 的子元素，而 div 是其包含的 p 元素的子元素。


后代 —一个元素包含在位于层次结构中高于它的一个或多个级别的元素中。也就是说，该元素在结构中有一个祖先。在图 19.1 中，title是html的后代，四个p元素都是其包含的div元素的后代。


兄弟 —与另一个元素处于同一级别的元素。在图 19.1 中，body元素的三个子元素——即，h1和两个p元素——都是兄弟。特别是要注意，紧接在另一个兄弟之后的兄弟被称为相邻兄弟。


使用上下文选择器
考虑到上一节中的术语，我现在想谈谈如何使用网页层次结构通过使用三个上下文选择器（之所以这样命名，是因为它们定义了元素在网页中的上下文）来构建一些强大的 CSS 规则。
第 19.2 课：后代选择器
覆盖范围：*x y*选择器
在线：wdpg.io/19-2-0
一个常见的 CSS 场景是将样式规则应用于包含在其他元素（即，是其后代）中的所有元素。为此，使用后代选择器，它用空格分隔祖先元素和后代元素，如下面的语法所示：
*ancestor* *descendant* {    ①    ②  

 `*property1*`: `*value1*`;    ③ 
 `*property2*`: `*value2*`;    ③ 
    ...
}


①  元素的父元素
②  您想要样式的元素
③  您想要应用的样式
记住
在 CSS 术语中，您放置在两个元素之间以形成选择器的字符（例如，在后代选择器中使用的空格）被称为组合器。
精通
是的，空格是一个令人挠头的字符选择，用于定义 CSS 选择器，但最新的 CSS 规范引入了一个显式的后代组合器：双大于号（div >> p而不是div p）。目前还没有浏览器支持这个，但将来都会支持。
您的页面可能有一些p元素在开头，用作页面的摘要，以及相当多的p元素包含正文。假设您想将摘要文本与正文文本样式区分开来，通用的p选择器将不起作用。如果您相反，将所有正文p元素包裹在一个div元素中，您可以使用以下选择器来针对所有p元素：
div p


小心
后代选择器非常强大，因为它针对祖先的每个后代，无论这些后代在层次结构中位于多远。为了避免意外结果，如果您想针对祖先下方的一级后代，您应该使用子选择器（在第 19.3 课中讨论）。
以下示例使用后代选择器来样式化页面的正文。
示例
在线：wdpg.io/19-2-1
此示例使用后代选择器div p来仅针对包含在div元素中的p元素。
网页

CSS
body {    ① 
 color: blue;    ① 
 font-family: Verdana, sans-serif;    ① 
 font-size: 1.2em;    ① 
}    ① 
div p {    ② 
 color: #444;    ② 
 font-family: Georgia, serif;    ② 
 font-size: 0.75em;    ② 
}    ② 


①  应用于所有文本的样式
② 仅应用于是 div 元素后代的 p 元素的样式
HTML
<h2>Weird Word Origins</h2>
<p>Welcome to the always wonderful, sometimes weird, and often downright wacky world of word histories</p>
<div>
    <p>Never thought you’d hear adjectives such as <i>wacky</i> and <i>weird</i> associated with the history of words? Think again, oh soon-to-be-even-wiser-than-you-are-now reader! The study of word origins isn't about memorizing technical terms or resurrecting dead languages or puzzling over parts of speech. Instead, it's all about telling stories.</p>
    <p>The history of a word is a narrative, plain and simple: where the word began, how it changed over time, and how it got where it is today. Delightfully, these narratives are often full of plot twists, turning points, heroes and villains, and surprise endings.</p>
</div>


第 19.3 节：子选择器
涵盖：x > y 选择器
播放
创建一个规则，将绿色和 1.2em 字体大小应用于任何是 <div> 标签后代的 <code> 标签。在线：wdpg.io/19-2-2
在线：wdpg.io/19-3-0
与选择指定元素的每个后代相比，你通常只需要定位其子元素。为此，使用 子选择器，它使用大于号 (>) 将父元素和子元素分开，如下所示：
*parent* > *child* {    ①    ②  

 `*property1*`: `*value1*`;    ③ 
 `*property2*`: `*value2*`;    ③ 
 ...    ③ 
}


① 元素的父元素
② 你想要样式的元素
③ 你想要应用的样式
参考图 19.1，你可以使用以下选择器来设置 div 元素的两个 p 子元素的样式：
div > p


精通
要选择其父元素的第一个子元素，使用 *element*:first-child 伪类。同样，要选择其父元素的最后一个子元素，使用 *element*:last-child 伪类。在线：wdpg.io/19-3-4
精通
另一个强大的子伪类是 :nth-child(``*n*``)，其中 *n* 指定你想要选择的子元素。使用 :nth-child(odd) 选择奇数（第一个、第三个等）子元素，或使用 :nth-child(even) 选择偶数（第二个、第四个等）元素。在线：wdpg.io/19-3-5
以下示例使用子选择器来设置那些是 div 元素子元素的 p 元素的样式。
示例
在线：wdpg.io/19-3-1
本例使用 div > p 子选择器，只为那些是 div 元素直接子元素的 p 元素设置字体大小为 1.25em 和深绿色。
网页

CSS
p {    ① 
 color: darkblue;    ① 
 font-size: 1em;    ① 
 font-weight: bold;    ① 
}    ① 
div > p {    ② 
 font-size: 1.25em;    ② 
 color: darkgreen;    ② 
}    ② 

① 所有 p 文本的样式
② div 元素子元素的 p 元素的样式
HTML
<h1>Contextual Selectors</h1>
<div>
 <p>The Descendant Selector</p>    ③ 
 <p>The Child Selector</p>    ③ 
        <section>
            <p>The First Child Selector</p>
            <p>The Last Child Selector</p>
            <p>The Nth Child Selector</p>
        </section>
 <p>The Sibling Selector</p>    ③ 
</div>

③ 子 p 元素
第 19.4 节：兄弟选择器
涵盖：x ~ y 选择器
播放
给定一个嵌套在另一个编号列表中的编号列表，使用子选择器创建一个规则，将嵌套列表的样式设置为使用小写字母而不是数字。在线：wdpg.io/19-3-2
在线：wdpg.io/19-4-0
而不是选择一个元素的子元素或后代，你可能需要定位其兄弟元素。为此，使用 兄弟选择器，它使用波浪号 (~) 将参考元素和兄弟元素分开，如下所示：
*element* ~ *sibling* {    ①    ②  

 `*property1*`: `*value1*`;    ③ 
 `*property2*`: `*value2*`;    ③ 
 ...    ③ 
}


① 参考元素
② 你想要样式的元素
③ 你想要应用的样式
在 图 19.1 中，你可以使用以下选择器来设置 h1 元素的同级 p 元素的样式：
h1 ~ p


以下示例展示了兄弟选择器的实际应用。
示例
在线：wdpg.io/19-4-1
此示例使用 h1 ~ div 兄弟选择器，只为那些是 h1 元素兄弟的 div 元素设置无衬线字体堆叠和粗体字体重量。
网页

CSS
div {    ① 
 font-family: Georgia, serif;    ① 
 font-weight: normal;    ① 
}    ① 
h1 ~ div {    ② 
 font-family: Verdana, sans-serif;    ② 
 font-weight: bold;    ② 
}    ② 

①  所有 div 文本的样式
②  h1 兄弟元素的样式
HTML
<h1>
    A Smart Vocabulary—Contents
</h1>
<div>    ③ 
    Chapter 1: Names of Things You Didn't Know Had Names
    <div>From the indentation on your upper lip to the indentation on the bottom of a wine bottle.</div>
</div>
<div>    ③ 
    Chapter 2:  Making Word Whoopee
    <div>Codswallop, nincompoop, willy-nilly, and other words that will bring a smile to your face.</div>
</div>


③  兄弟 div 元素
大师
要选择元素的相邻兄弟，将波浪号改为加号：*元素* + *兄弟*（例如 h1 + p）。在线：wdpg.io/19-4-4
通过组合选择器提升事物到一个新的层次
CSS 选择器是有用的工具，因为它们使你能够定位你想要样式的网页区域。通过指定特定的类或元素的后代，你可以获得更多控制页面展示的能力。但如果既需要使用类选择器又需要使用后代选择器，那会怎样？也就是说，如果你想定位的不是被分配了特定类的元素，而是它的后代，那会怎样？表 19.1 展示了结合 CSS 选择器的一些方法。
表 19.1 一些组合选择器的方法



示例
描述




<div class="sidebar alert">
将名为 sidebar 的类和名为 alert 的类同时应用于 div 元素


p.footnote {``*styles*``}
将规则应用于那些被分配了名为 footnote 的类的 p 元素


p.footnote > a {``*styles*``}
将规则应用于那些被分配了名为 footnote 的类的 p 元素的子 a 元素


p.footnote a.external {``*styles*``}
将规则应用于那些被分配了名为 external 的类，并且是那些被分配了名为 footnote 的类的 p 元素的后代 a 元素


#payables-table li:nth-child(even) {``*styles*``}
将规则应用于列表中具有 ID payables-table 的偶数编号 li 元素



当我在谈论组合事物的时候，我应该提到，将单个样式规则应用于两个或更多选择器是完全有效的 CSS。你可以通过用逗号分隔选择器来实现这一点，如下所示：
*selectorA*,
*selectorB* {
*property1*: *value1*;
*property2*: *value2*; 
    ...
}


假设你有一个名为 pullquote 的类，你用它来样式化网站新闻文章中的引用，还有一个名为 sidebar 的类，你用它来样式化网站教程页面中的侧边栏。如果这两个类使用相同的规则，你可以将它们组合起来：
.pullquote,
.sidebar {
    color: #444;
    background-color: #ccc;
}


第 19.5 课：::before 和 ::after 伪元素
覆盖:::before 和 ::after
在线：wdpg.io/19-5-0
在 CSS 中，您可以创建不属于页面层次结构的网页对象，这些对象被称为 伪元素。两个常见的例子是 ::before 和 ::after，您分别用于在指定元素的内容之前和之后插入内容。在 CSS 中，这种内容被称为 生成内容，因为您自己没有输入内容；它是浏览器自动创建的。以下是语法：
*element*::before|after {    ①    ②  

    content: *value*;    ③  
 `*content_styles*`;    ④ 
}


①  网页元素
②  您想要添加内容的位置
③  您想要插入的内容
④  应用于插入内容的可选样式
记住
要插入特殊字符作为自定义内容，请使用字符的十六进制代码，前面加上反斜杠（\）。例如，声明 content: '\0266f'; 指定音乐升号（♯）作为自定义内容。使用 HTML5 实体浏览器 (wdpg.io/charent) 查找字符的十六进制代码。
您偶尔会看到单冒号的变体 :before 和 :after。网站使用这种较旧的语法来为 Internet Explorer 8 提供支持。因为现在该浏览器的全球使用率大约为 1/10 的 1%（并且还在下降），世界已经转向了您在这本书中看到的双冒号标准。
您可以使用以下规则在每段后面自动添加一个段落符号（¶），也称为段落标记：
p::after {
    content: '¶';
}


::before 伪元素最常见的一个用途是将无序列表中的默认项目符号替换为自定义项目符号。以下示例展示了如何实现。
示例
在线：wdpg.io/19-5-1
本例使用 list-style-type 从 ul 元素中移除项目符号，然后使用 li::before 添加一个自定义的符号字符——一个指向的手指（十六进制代码 261e）和一个非断行空格（十六进制 00a0）。
网页

CSS
ul {
 list-style-type: none;    ① 
 margin-left: 0;    ② 
 padding-left: 1em;    ② 
 text-indent: -1em;    ② 
}

li::before {
 content:'\261e\00a0';    ③ 
 color: red;    ④ 
 font-size: 1.1em;    ④ 
}

①  移除默认的项目符号
②  确保项目符号文本正确换行
③  添加一个指向的手指和空格
④  自定义项目符号的样式
HTML
<div>
    Here are some interesting characters to use in place of the standard bullets:
</div>
<ul>
    <li>Circled bullet: &#x029bf;</li>
    <li>Circled white bullet: &#x029be;</li>
    <li>Rightwards arrow with loop: &#x021ac;</li>
    <li>Black star: &#x02605;</li>
    <li>White star: &#x02606;</li>
    <li>Triangle bullet: &#x2023;</li>
</ul>


播放
CSS 提供了 counter-increment 属性，允许您为编号列表设置计数器。如果您将 ol 元素的 list-style-type 属性设置为 none，则可以使用 ol::before 为列表创建自定义数字。在线：wdpg.io/19-5-2
播放
一个 外部 链接是指向不同网站上资源的链接。创建一个 CSS 规则，自动添加一个图标来表示外部链接，就像维基百科所做的那样（见 图 19.2）。在线：wdpg.io/19-5-3
图 19.2 维基百科使用图标标记外部链接。

当我在谈论伪元素时，值得提一下，你可以使用::first-letter伪元素将一个或多个样式应用到文本块的第一个字母上。例如，div::first-letter {font-size: 1.5em; color: red;}将每个div元素的第一个字母样式化为 1.5em 大小和红色。要样式化文本块的整个第一行，请使用::first-line伪元素。
使用通用选择器重置 CSS
通用选择器（*）适用于网页上的每个元素，这似乎是一种奇特的方式来处理样式。毕竟，一组特定的样式在页面上适用于每个元素的情况有多常见？几乎从不。然而，当涉及到CSS 重置——一种移除浏览器默认样式的方法，以便你可以应用自己的样式而不必担心与浏览器的冲突时，通用选择器是有用的。以下是一个基本的 CSS 重置：
* {
    font-size: 100%;
    margin: 0;
    padding: 0;
}


此重置定义了默认的字体大小，并移除了浏览器默认的边距和填充（这两者你都在第九章中学过）。
精通
这里还有一些其他的常见 CSS 重置声明：border: 0;font-family: inherit;font-style: inherit;font-weight: inherit;vertical-align: baseline;
样式：他们编织了一个多么错综复杂的网页
你迄今为止所使用的绝大多数样式声明和规则都独立运作。你用一个字体大小来样式化h1元素，用一个对齐方式来样式化p元素，而网页浏览器独立地应用这两个规则。然而，在现实世界的网页设计中，这种简单性是罕见的。我指的是极其罕见。对于除了最基础的网页之外的所有网页，你的样式几乎肯定会相互混合，有时甚至相互冲突。这是一片混乱，但通过理解三个关键的 CSS 机制：继承、层叠和特定性，你可以恢复一些秩序。
第 19.6 课：理解继承
涵盖：CSS 继承
在线：wdpg.io/19-6-0
在本章前面关于祖先、父代、子代和后代的讨论之后，你可能会惊讶地了解到 CSS 提供了一种方法，可以将特性从一代传递到下一代。这种方法恰当地被称为继承，这意味着对于某些 CSS 属性，如果父元素使用该属性进行了样式化，其子元素和后代元素将自动以相同的方式进行样式化。
在下面的示例中，一个div元素被分配了intro类，该类使用1.1em棕色的文本样式该元素。请注意，div元素的子元素——em、sup和code元素，以及嵌套的div元素——都以相同的方式进行了样式化，因为在每种情况下，它们都是从父div继承了这些样式。
播放
a元素继承了如color之类的样式属性，但你看不到这种继承；浏览器会覆盖继承，以便你的链接与常规页面文本区分开来。你能想出一个方法来强制子a元素的文本使用与父元素相同的颜色吗？在线：wdpg.io/19-6-2
当我说只有某些属性是可继承的时，我的意思是什么？尽管许多 CSS 属性会被子元素继承，但并非所有属性都是。如果你要在前面示例中的父div元素周围应用边框，那么相同的边框样式不会应用到其任何子元素上，因为在一个em或sup元素周围有边框看起来会很奇怪。
示例
在线：wdpg.io/19-6-1
这个示例通过展示父div元素的样式如何传递到子元素，如em、code和嵌套的div，来演示继承。
网页

CSS
.intro {    ① 
 color: saddlebrown;    ① 
 font-size: 1.1em;    ① 
 line-height: 1.4;    ① 
}    ① 

①  intro类的样式
HTML
<div class="intro">    ① 
Why don’t <em>all</em> CSS properties inherit their parent’s styles?<sup>*</sup> Because in some cases it would lead to weird or nonsensical results. For example, if you apply a border around, say, a <code>div</code> element, it would look odd indeed to apply the same border to a child <code>span</code> or <code>strong</code> element. Similarly, applying, say, a <code>p</code> element’s <code>width</code> value to a child <code>em</code> element doesn’t make sense.    ②    ③  
 <div>    ④ 
 <sup>*</sup> See www.w3.org/TR/REC-CSS2/propidx.html    ④ 
 </div>    ④ 
</div>


①  父元素div
②  一个子元素em
③  一个子元素code
④  一个子元素div
第 19.7 课：学习关于层叠
涵盖：CSS 层叠
在线：wdpg.io/19-7-0
学习
互联网名称与数字地址分配机构（W3C）维护了一个完整的 CSS 属性列表。在众多细节中，该列表有助于指定每个属性是否可继承。请参阅www.w3.org/TR/REC-CSS2/propidx.html。
除了样式通过继承从父元素传递到子元素之外，CSS 还定义了样式传播的方式。这种定义被称为层叠，如果继承是样式传播的“是什么”，那么层叠就是“怎么做”。（在继续之前，让我回答你心中无疑的问题：是的，层叠是为什么样式集合被称为层叠样式表。）要了解层叠是如何工作的，请考虑以下代码：
<style>    ① 
 div {    ① 
 color: red;    ① 
 }    ① 
</style>    ① 
<div style="color: blue;">    ② 
    What is the color of this text?
</div>


①  内部样式表
②  内联样式
在这里，一个内部样式表告诉div元素使用红色文本，而一个内联样式将<div>标签的文本颜色设置为蓝色。在<div>和</div>标签之间的文本是什么颜色？也就是说，浏览器将如何解决内部样式表和内联样式之间的冲突？
为了回答这两个问题，你需要知道层叠是如何工作的。首先，你已经知道有三种主要的方式来指定 CSS：内联样式、内部样式表和外部样式表。这些方法共同构成了 W3C 所说的作者样式表（因为它们是由编写网页的人创建的；就是你）。但是，当网页加载时，还会应用两种其他样式表：浏览器的默认样式（称为用户代理样式表），以及浏览器用户的自定义样式（称为用户样式表）。
级联将这些五个样式数据来源组织成以下层次结构：


用户代理样式表


用户样式表


外部样式表


内部样式表


内联样式


记住
一般而言，样式声明离实际元素越近，其权重就越大。
这些来源按重要性（在 CSS 术语中为权重）的升序排列。如果浏览器看到特定的样式规则在两个或多个这些来源中定义，它将通过应用权重最大的来源来解决冲突。对于我之前展示的代码示例，你可以看到内联样式胜过了内部样式表，因此<div>和</div>标签之间的文本将显示为蓝色，如下例所示。
示例
在线：wdpg.io/19-7-1
这个示例演示了 CSS 的级联，其中div元素的内联样式被渲染，因为它比内部样式表中的div类型选择器具有更高的权重。
网页

HTML
<style>    ① 
 div {    ① 
 color: red;    ① 
 }    ① 
</style>    ① 
<div style="color: blue;">    ② 
    What is the color of this text?
</div>

① 内部样式表
② 内联样式
第 19.8 课：介绍特定性
覆盖：CSS 特定性
在线：wdpg.io/19-8-0
主样式
你需要了解的第六个样式来源是：在任意样式声明的末尾添加!important关键字。这个关键字具有最大的 CSS 权重，因此可以覆盖任何其他来源。在线：wdpg.io/19-7-2
你可能想知道当两个样式都来自同一来源且针对同一元素时，CSS 级联会发生什么。考虑以下代码：
<style>
    p.colored-text {
        color: purple;
    }
    .colored-text {
 color: blue;
    }
 div p {    ① 
        color: green;
    }
 p {    ② 
        color: red;
    }
</style>

<div>
    <p class="colored-text">What is the color of this text?</p>
</div> 

① 后代选择器
② 类型选择器
样式表包含四个规则，所有这些规则都针对p元素。第一个规则选择所有使用colored-text类的p元素；第二个规则选择所有使用colored-text类的元素；第三个规则选择div元素的后代p元素；第四个规则选择所有p元素。浏览器将渲染<p>和</p>标签之间的文本颜色是什么？仅凭级联本身无法回答这个问题，因为所有规则都来自内部样式表，因此它们被赋予相同的权重。
为了确定这场 CSS 战斗的胜者，你需要了解一个称为特定性的概念。特定性是 CSS 中最复杂的概念之一，但为了本章节的目的，我可以这样描述它：一个特定的选择器在网页上针对某个特定内容越具体，当浏览器计算应用哪些规则时，它所赋予的权重就越大。你可以通过将以下配方应用于选择器来判断选择器针对内容的特定性：


计算元素（如p或div）和伪元素（如::before）的数量，并为每个分配 1 分。


计算类和伪类（如:hover）的数量，并为每个分配 10 分。


数一下 ID 的数量，并为每个 ID 分配 100 分。


如果选择器是内联样式表的一部分，则分配 1,000 分。


记住
通用选择器（*）不会对特定性分数做出贡献（它值 0 分）。如果你将!important关键字添加到一个声明中，则将特定性分数增加 10,000 分。
谨慎
在本章的早期，我警告过你避免过度使用 ID 选择器，现在，你看到了谨慎处理它的主要原因。此选择器远超过元素、伪元素、类和伪类。
分配的点数表示每个选择器的权重。回到示例，数一下点数：


p.colored-text—此选择器包含一个元素和一个类，总共有 11 分。


.colored-text—此选择器包含一个类，总共有 10 分。


div p—此选择器包含两个元素，总共有 2 分。


p—此选择器包含一个元素，总共有 1 分。


你可以看到p.colored-text选择器得分最高，所以<p>和</p>标签之间的文本被渲染为紫色，如下面的示例所示。
示例
在线:wdpg.io/19-8-1
此示例演示了 CSS 的特定性，其中选择器p.colored-text比其他选择器更具体，因此浏览器将文本渲染为紫色。
网页

HTML
<style>
 p.colored-text {    ① 
        color: purple;
    }
 .colored-text {    ② 
        color: blue;
    }
 div p {    ③ 
        color: green;
    }
 p {    ④ 
        color: red;
    }
</style>
<div>
    <p class="colored-text">What is the color of this text?</p>
</div>

①  特定性 = 11 分
②  特定性 = 10 分
③  特定性 = 2 分
④  特定性 = 1 分

选择器的不同权重通常是你的 CSS 规则没有应用于某些元素的原因，尽管你认为它们应该被应用。为了最小化你花费在查找错误上的时间，你需要了解浏览器如何解释你的代码。而为了理解这一点，你需要对特定性如何工作有一个牢固的理解。—Vitaly Friedman

摘要


ID 选择器将 CSS 规则应用于任何使用指定 ID 值的元素。


要定位一个父元素内包含的所有元素，请使用后代选择器，它是通过空格分隔的父元素和后代元素名称。


要定位一个父元素内包含的所有子元素，请使用子选择器，它通过一个大于号（>）将父元素和子元素名称分隔开来。


要定位某个其他元素的兄弟元素，请使用兄弟选择器，它是两个元素名称通过波浪号（~）分隔。


将::before或::after附加到选择器上，以在元素内容之前或之后插入生成内容。


许多 CSS 属性是从元素的父元素继承的。


继承是通过层叠发生的，它赋予来源更接近元素的声明更高的重要性。按升序排列，这些来源是浏览器默认样式、用户自定义样式、外部样式表、内部样式表和内联样式。


对于来自同一来源的声明，具体性指示浏览器从更具体的选择器中渲染样式。按升序排列，这些选择器包括元素和伪元素、类和伪类、ID、内联样式以及!important关键字。


第二十章  *项目：创建作品集页面

在线作品集是一个伟大的品牌工具，每个求职者都应该拥有。这是候选人区分自己、深入了解他们个性并展示他们才华的绝佳方式。——亚历山德拉·贾内维

本章涵盖


规划和绘制你的作品集页面


为你的页面选择字体和颜色


添加页面文本和图片


添加联系信息


如果你从事创意工作——插画、写作、音乐、美术，甚至是网页设计——那么你欠自己和你的职业生涯一个展示自己的机会，告诉全世界你有多有才华。你该如何做到这一点？社交媒体是当今吹嘘自己的标准方式。这很好，但当你使用他人的平台来吹嘘自己时，你正在放弃对自己展示方式的许多控制权。始终控制自己的信息是更好的选择，而做到这一点最好的方式是建立自己的在线存在。对于创意人士来说，这个在线的立足点应该包括一个展示你最好或最新作品的个人作品集页面。
本章将带你完成构建简单作品集页面的过程。我将专注于你在第四部分学到的许多技术（如页面内链接、排版和颜色），但到最后，你将看到如何构建一个复杂的作品集页面，这将展示你最好的创意。
你将构建的内容
这个项目是一个基本的作品集页面，它指的是一个设计用来展示一些（甚至全部）你的创意作品的页面。它是那些多年来从赞助人到赞助人、从雇主到雇主拖着硬拷贝作品集的饿艺术家在线上的等价物。作品集页面的主要目的是向可能想要购买它或可能想要雇佣你来做你的创意工作的人展示你的创意作品。如果你的创意工作是一个爱好，那么无论如何，你都可以使用你的作品集页面向任何你能说服停下来的人展示你的副项目。
绘制布局草图
你现在已经完成了这本书中的几个项目，所以你知道流程：首先，用笔或铅笔在一张纸上绘制基本布局。这个草图为你提供了一个蓝图，当你开始使用 HTML 标签和 CSS 属性时可以使用。
图 20.1 展示了我将为我的作品集页面使用的示例。这个页面是一种有时被称为 五个盒子 的布局的变体：一个大的盒子用作你的介绍，随后是四个较小的盒子，你可以在其中填充你的作品集图片。
图 20.1 展示了包含以下六个部分的页面布局：


包含标志、页面标题和指向其他页面部分的几个链接的页面标题


对作品集的简要介绍


包含我四个作品示例的作品集


一个介绍我和我的工作的页面部分


一个允许读者联系我的页面部分


带有版权声明和社交媒体链接的页面页脚


你待办事项列表上的第一个任务是选择你想要用于页面的字体或字体组合。
图 20.1 在你开始编写 HTML 和 CSS 之前，快速绘制页面布局和内容的草图。

选择字体
尽管你的作品集本身由图像组成，但你的作品集页面包含相当数量的文本，包括标题和正文——非标题文本的大块，构成了你作品集大部分的文字。由于你的大部分观众将在笔记本电脑、平板电脑和智能手机的屏幕上阅读你的页面，因此提前花点时间选择在这些较小屏幕上可读和易读的字体是很重要的。
你可以访问 Google Fonts (fonts.google.com)，查看一种字体，输入一些文本，然后观察结果以查看其外观如何以及阅读是否容易。但如果你想要更系统化一些，某些标准对于在小屏幕上渲染良好的字体是常见的。以下是在 Google Fonts（或你使用的任何字体提供商）上试听字体时需要寻找的四个方面，每个方面都在图 20.2 中得到了演示：


大计数器 —计数器是字母如 A、R、d 和 g 内部的封闭负空间。大的计数器增强了字符的可读性。


大开口 —开口是字母如 C、S、a 和 e 内部的部分封闭负空间。大的开口也增强了可读性。


中等至大型 x 高度 —x 高度是从基线到小写字母如 x 和 o 的顶部，或者到有升笔（如 d 和 h）或降笔（如 g 和 y）的字母的碗顶的距离。一个合适的 x 高度（比如说，字体大小的一半或更多）通常会导致大的计数器和开口。


低至中等笔画对比度 —极细的笔画在小屏幕上可能会丢失，使得文字难以阅读。寻找那些最细和最粗笔画之间差异最小的字体。


master
注意到字母如 a 和 e 既有计数器也有开口，这意味着较大的计数器意味着较小的开口，反之亦然。为了确保这些常用字符在屏幕上渲染良好，寻找一个 x 高度超过字体大小一半的字体。
你可以用单一字体来构建你的页面，但混合两种字体——一种用于标题，另一种用于正文文本——可以为页面增添活力和对比。我偏爱的使用方式是使用无衬线字体作为标题，有衬线字体作为正文文本，但在我这个项目的版本中，我将反转这些偏好。对于你自己的作品集页面，你可以自由地使用两种有衬线字体或两种无衬线字体。唯一需要考虑的标准是两种字体能够和谐搭配，这意味着它们具有相似的易读性特征：笔画、开口、x 高度和笔画对比。最后，确保你选择的每种字体都包含你需要的字体，这通常至少意味着常规、斜体和粗体字体。
图 20.2 在决定一种即使在小型显示器上也能良好渲染的字体时，寻找较大的笔画、开口、良好的 x 高度和低笔画对比。

Google Fonts 提供了数百种字体，其中数十种即使在最小的屏幕上也能很好地工作。你如何选择？在网站上玩玩当然很有趣，但如果你需要一个起点，表 20.1 列出了六种正文和标题字体搭配，它们工作得很好（以及一个用于标题的替代无衬线字体）。
表 20.1 推荐的 Google Fonts 标题和正文字体搭配



标题
正文
正文（替代）




Playfair Display
Open Sans
Raleway


Merriweather
Fira Sans
Merriweather Sans


Source Serif Pro
Source Sans Pro
Lato


Domine
Roboto
Open Sans


Lora
Varela Round
Lato


Roboto Slab
Roboto
Raleway



对于这个项目的标题，我将使用我最喜欢的文本字体之一：Playfair Display。这是一种非常漂亮的字体，提供了很好的大笔画和慷慨的 x 高度。它具有高笔画对比，但这不应该是我将要使用的较大标题大小的大问题。Playfair Display 有六种字体，因此它适合每一种场合。对于正文文本，我将使用 Open Sans，这是网络上最受欢迎的无衬线字体之一。它是一种坚固的字体，具有大笔画和 x 高度，以及最小的笔画对比。一个不太受欢迎但仍然出色的替代品是 Merriweather Sans，它是 Merriweather 的无衬线伴侣。
要使用 Google Fonts 链接到 Playfair Display 的粗体和粗体斜体字体，以及 Open Sans 的常规、斜体和粗体字体，我将使用以下 <link> 标签：
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,700i|Open+Sans:400,400i,700" rel="stylesheet">


在我的 CSS 中，我将使用以下声明来指定这些字体族：
font-family: "Playfair Display", Georgia, serif;
font-family: "Open Sans", Verdana, sans-serif;


记住
虽然谷歌不太可能无法交付你的链接字体，但在字体显示之前可能会有延迟。为了确保浏览器在等待时不会显示默认的有衬线或无衬线字体，请将系统字体添加到你的堆栈中。Georgia（用于衬线字体）和 Verdana（用于无衬线字体）几乎安装在新电脑上。
在确定了页面布局并选择了字体之后，你的下一个任务是挑选一个配色方案。
选择配色方案
你选择的颜色取决于你想要突出的作品集类型以及你想要传达的整体形象。我将使用一个假设的书籍修复和修复服务的例子。我想使用散发出温暖感的颜色（因为足够喜欢旧书以至于想要修复的人往往都是温暖、温柔的人），以及安全感（因为这些人不想把他们的珍贵书籍交给任何人）。深棕色可以非常有效地设定这两种情感基调。使用 Web 设计游乐场的配色方案计算器（见wdpg.io/colorcalc），我选择了一个基于颜色值#77613c的单色配色方案，如图 20.3 所示。
图 20.3 基于十六进制颜色值#77613c的单色配色方案

在确定了页面布局、选择了字体和颜色之后，现在是时候将这个草图翻译成精确的 HTML 和 CSS 代码了。
构建页面
要构建你的作品集页面，从我在第二章中介绍的基本代码开始，然后逐节添加文本、标签和属性。
初始结构
首先，从第二章的基本页面结构开始，添加作品集布局，使用 HTML5 语义页面布局标签：


页面页眉部分使用header元素，它包括三个项目：一个用于网站标志的img元素，一个使用nav元素并包含指向页面其他项目的链接的无序列表导航区域，以及一个用于页面标题的h1元素。


主要部分使用main元素，它由几个section元素组成，每个元素都是页面不同部分的容器。


页脚部分使用footer元素，它包括版权声明和链接到几个社交媒体网站。


尝试这个
在线：wdpg.io/projects/portfolio-page/01
这里是构成作品集页面初始 HTML 结构的元素。
网页

HTML
<header>    ① 
 <img src="/images/your-logo-here.tif" alt="My logo">    ① 
 <nav>    ① 
 <ul>    ① 
 <li>Portfolio</li>    ① 
 <li>About</li>    ① 
 <li>Contact</li>    ① 
 </ul>    ① 
 <h1>Page Title</h1>    ① 
 </nav>    ① 
</header>    ① 
<main>>    ② 
 <section>>    ② 
 <h1>Portfolio</h1>>    ② 
 <img src="http://placehold.it/150x150" alt="">>    ② 
 <img src="http://placehold.it/150x150" alt="">>    ② 
 <img src="http://placehold.it/150x150" alt="">>    ② 
 <img src="http://placehold.it/150x150" alt="">>    ② 
 </section>>    ② 
 <section>>    ② 
 <h1>About Me</h1>>    ② 
 </section>>    ② 
 <section>>    ② 
 <h1>Contact Me</h1>>    ② 
 </section>>    ② 
</main>    ② 
<footer>    ③ 
 <p>Copyright and social media links</p>    ③ 
</footer>    ③ 

①  页眉部分
②  主要部分
③  页脚部分
记住
初始页面布局还包括一个 CSS 重置，它执行了多项任务，包括将边距和填充设置为 0，以及字体大小设置为 100%。
目前，作品集页面几乎是最简化的页面，但这种情况不会持续太久。我现在将转向构建页面的整体布局。
整体布局
如你所想，一个被称为“五个盒子”的布局显然需要一个基于 flexbox 的结构，这就是你在这里要添加的。你希望内容在浏览器窗口的中间对齐。为了完成这个任务，使用两个主要的 flexbox 容器来构建整体结构：


初始的 flexbox 容器将是body元素。通过使用flex-direction: row和justify-content: center配置此元素，你将创建一个单行容器，其中所有内容都水平居中。


对于内容本身，在body元素内部嵌套一个div元素。这个div是一个 flexbox 容器，具有flex-direction: column和justify-content: flex-start，这为你提供了一个单列容器，内容与容器的顶部对齐。


以下示例展示了如何设置一切。
尝试此操作
在线：wdpg.io/projects/portfolio-page/02
此示例展示了如何配置body元素和嵌套的div作为整个页面的 flexbox 容器。
CSS
body {
 display: flex;    ① 
 flex-direction: row;    ① 
 justify-content: center;    ① 
    min-height: 100vh;
    margin-top: 1rem;
 font-family: "Open Sans", Verdana, sans-serif; >    ② 
 background-color: #cdc9c1; >    ② 
 background-image: radial-gradient(circle farthest-side at center top, hsl(0, 0%, 100%) 0%, #cdc9c1 100%);>    ② 
 color: #362507;    ② 
}
.container {
 display: flex;    ③ 
 flex-direction: column;    ③ 
 justify-content: flex-start;    ③ 
 max-width: 60rem;    ④ 
}


①  设置主要的 flexbox 容器。
②  应用字体堆叠以及背景和文字颜色。
③  设置内容的嵌套 flexbox 容器。
④  为内容设置最大宽度。
HTML
<body>
    <div class="container">
    </div>
</body>


记住
Flexbox 现在几乎得到了所有浏览器的支持，因此为了保持代码的简洁和清晰，这里和 Playground 上的代码没有包含任何供应商前缀。如果你需要支持旧浏览器，请使用 Autoprefixer (autoprefixer.github.io)来生成前缀。
标题部分
标题部分由一个包含三个项目的header元素组成：一个用于页面标志的img元素，一个用于导航链接的nav元素，以及一个用于页面标题的h1元素。我还希望标题具有以下功能：


页面标志应与内容容器的左侧对齐，导航和标题应与内容容器的右侧对齐。


所有标题内容应在标题内垂直居中。


最简单的方法是使用 flexbox，因此将header元素配置为 flexbox 容器，具有水平主轴和align-items设置为center。对于水平对齐，使用div元素将标题分为左侧和右侧部分。
以下示例展示了我所使用的 HTML 和 CSS 代码，以实现这些目标并对剩余的标题布局进行样式设计。
尝试此操作
在线：wdpg.io/projects/portfolio-page/03
此示例添加了标题的 HTML 代码和标题结构的 CSS 代码。
网页

CSS
header {
 display: flex;    ① 
 justify-content: center;    ① 
 align-items: center;    ① 
    padding: .5rem 0;
    width: 100%;
}
.header-left {
 flex: 1 0 33%;    ② 
    text-align: left;
}
.header-right {
 flex: 2 0 67%;    ② 
 display: flex;    ③ 
 flex-wrap: wrap;    ③ 
 justify-content: flex-end;    ③ 
}

①  标题是一个 flexbox 容器。
②  左侧标题占三分之一的宽度；右侧占三分之二。
③  右侧的标题是一个 flexbox 容器。
HTML
<header>
 <div class="header-left">    ④ 
 <img src="/images/portfolio-logo.tif"    ④ 
alt="This Old Book logo">    ④ 
 </div>    ④ 
 <div class="header-right">    ⑤ 
 <nav>    ⑤ 
 <ul>    ⑤ 
 <li><a href="#portfolio" class="btn">Portfolio</a></li>  ⑤ 
 <li><a href="#about" class="btn">About</a></li>    ⑤ 
 <li><a href="#contact" class="btn">Contact</a></li>    ⑤ 
 </ul>    ⑤ 
 </nav>    ⑤ 
 <h1>This Old Book</h1>    ⑤ 
 </div>    ⑤ 
</header>

④  标题的左侧
⑤  标题的右侧
在设置好标题结构之后，你可以着手调整标题元素的样式。标志保持原样即可，但你需要将导航链接转换为合适的按钮，并对页面标题进行样式设计。以下示例展示了我所使用的 HTML 和 CSS 代码。
尝试此操作
在线：wdpg.io/projects/portfolio-page/04
此示例样式化了标题元素。
网页

CSS
h1 {    ① 
 padding-top: 1rem;    ① 
}    ① 
.btn {    ② 
 background-color: #362507;    ② 
 padding: .25rem .75rem;    ② 
 border-radius: .75rem;    ② 
 font-size: 1rem;    ② 
 color: #cdc9c1;    ② 
 text-transform: uppercase;    ② 
}    ② 
nav ul {    ③ 
 display: flex;    ③ 
 list-style-type: none;    ③ 
}    ③ 
nav li {    ③ 
 padding-left: 1rem;    ③ 
}    ③ 
a {    ④ 
 text-decoration: none;    ④ 
}    ④ 
a:hover {    ④ 
 color: #362507;    ④ 
 background-color: #cdc9c1;    ④ 
}    ④ 
h1 {    ⑤ 
 font-size: 4rem;    ⑤ 
 font-weight: bold;    ⑤ 
 font-family: "Playfair Display", Georgia, serif;    ⑤ 
}    ⑤ 

①  h1元素添加了一些填充。
②  此类将导航项转换为合适的按钮。
③  此 CSS 样式用于导航项列表。
④  此 CSS 样式用于链接（常规和悬停状态）。
⑤  此 CSS 样式用于页面标题。
特别需要注意的是btn类，您之前在nav部分的<a>标签中看到过它。每个a元素都是一个项目符号列表项，btn类的目的是将每个li元素（链接文本）的内容转换为合适的按钮。以下是btn类所做的工作：


它添加了背景颜色。


它在文本周围添加了填充。


它使用border-radius属性来使角落圆润。


它设置字体大小和颜色，并将文本转换为大写。


精通
border-radius属性使元素的角落圆润。您可以指定一个测量值（值越高，角落越圆润），或者您可以输入一个百分比（例如，50%的值将边框圆润成圆形）。
章节介绍
章节介绍的作用是通过提供您所做创意工作的快速概述，将读者引入您的页面。它应该有一个标题，也许还有一个副标题，一个简短的段落，以及一个链接到您的联系部分。
在以下示例中，我使用深棕色文本（#362507）、h2标题、h3副标题、一个可点击的按钮以及一个相关的图像来装饰页面介绍，以保持一切整洁有序。为了使一切看起来都很整洁，我设置了一个名为intro的类作为 flexbox 容器。
尝试这个
在线：wdpg.io/projects/portfolio-page/05
此示例向作品集页面添加了介绍。
网页

CSS
.intro {    ① 
 display: flex;    ① 
 align-items: center;    ① 
 margin: 2rem 0;    ① 
 width: 100%;    ① 
 border: 3px solid #77613c;    ① 
 color: #362507;    ① 
 font-size: 1.25rem;    ① 
 background-color: #a99879;    ① 
 background-image: radial-gradient(ellipse closest-corner at center,    ① 
#cdc9c1 0%, #a99879 100%);    ① 
}    ① 
.intro-text {    ② 
 flex: 2 0 67%;    ② 
 padding: 2rem 0 2rem 2rem;    ② 
}    ② 
.intro-text p {    ② 
 margin: 1.5rem 0;    ② 
}    ② 
.intro-image {    ③ 
 flex: 1 0 33%;    ③ 
 padding-right: 2rem;    ③ 
 text-align: right;    ③ 
}    ③ 
h2 {    ④ 
 font-size: 2.5rem;    ④ 
}    ④ 
h3 {    ④ 
 font-size: 2rem;    ④ 
 font-style: italic;    ④ 
}    ④ 
h2, h3 {    ④ 
 font-family: "Playfair Display", Georgia, serif;    ④ 
}    ④ 

①  intro类的 CSS 样式
②  intro-text类的 CSS 样式
③  intro-image类的 CSS 样式
④  标题的 CSS 样式
HTML
<main>
    <section class="intro">
        <div class="intro-text">
            <h2>Book Restoration and Repair</h2>
            <h3>If it’s broke, I’ll fix it</h3>
            <p>Welcome to This Old Book, the online home of book restorer Paul McFedries. I take old books that have seen better days and breath new life into them with careful and respectful repairs and cleaning. Got a precious family Bible that’s a little worse for wear? Have a rare or important book that could use some TLC? Let’s talk.
            </p>
            <div>
                <a href="#contact" class="btn">Contact Me</a>
            </div>
        </div>
        <div class="intro-image">
            <img src="/images/portfolio-intro.tif" alt="Illustration showing several old books">
        </div>
    </section>
</main>


章节集
接下来是页面的真正内容，即您的作品集——一系列展示您作品的图片。在决定展示多少内容时，您有三个选择：


展示您所有的作品。 如果您的作品集很小，这个选项是最佳选择。如果您有一个庞大的作品集，您可以展示它，但可能更好的做法是只展示一部分，然后链接到另一个页面，展示所有内容。


展示您最新的作品。 如果您认为您最新的作品特别出色，或者您的风格最近有所改变，或者您获得了知名客户，这个选项是个不错的选择。


展示您最好的作品。 如果您想真正展示您能做什么，请选择这条路线。


一个典型的作品集通常有一到三行，每行有两到四张图像。你可能会想在作品集之前加上一个标题，也许是一两句话作为引入。作品集本身应该配置为 flexbox 容器，以使一切看起来整洁。以下示例显示了我在我的作品集页面上是如何做到这一点的。
尝试这个
在线：wdpg.io/projects/portfolio-page/06
此示例将作品集添加到页面中。
网页

CSS
.portfolio {
    margin-bottom: 1rem;
}
.portfolio-text p {
    margin: .5rem 0 1.5rem; 
    font-size: 1.25rem;
}
.portfolio-images {    ① 
 display: flex;    ① 
 justify-content: space-between;    ① 
}    ① 
.portfolio-image {
    position: relative;
    cursor: pointer;
    margin-bottom: 1rem;
}

①  作品集图像位于一个 flexbox 容器中。
HTML
<section class="portfolio" id="portfolio">    ② 
 <div class="portfolio-text">    ③ 
        <h2>Some Recent Work</h2>
        <p>Here are some of my recent restoration projects. The images you see below are the “before” versions of each book. To see an “after” version, move your mouse over an image (or tap it).</p>
    </div>
 <div class="portfolio-images">    ④ 
        <div class="portfolio-image">
            <img src="/images/portfolio-book1-before.tif">
            <img class="image-overlay" src="/images/portfolio-book1-after.tif">
        </div>
        <div class="portfolio-image">
            <img src="/images/portfolio-book2-before.tif">
            <img class="image-overlay" src="/images/portfolio-book2-after.tif">
        </div>
        <div class="portfolio-image">
            <img src="/images/portfolio-book3-before.tif">
            <img class="image-overlay" src="/images/portfolio-book3-after.tif">
        </div>
        <div class="portfolio-image">
            <img src="/images/portfolio-book4-before.tif">
            <img class="image-overlay" src="/images/portfolio-book4-after.tif">
        </div>
    </div>
</section>

②  作品集容器是一个具有 portfolio 类和 id 的 portfolio 元素。
③  作品集文本容器是一个具有 portfolio-text 类的 div 元素。
④  作品集图像容器是一个具有 portfolio-images 类的 div 元素。
作品集内容位于一个我分配了 portfolio 类的 section 标签中。注意，我还分配了 id portfolio，这设置了此 section 元素作为之前看到的标题导航链接的目标。
作品集文本位于一个具有 portfolio-text 类的 div 中。它包括一个 h2 标题和一个用于引入句子的 p 元素。
作品集图像位于一个具有 portfolio-images 类的 div 中。它由几个 div 元素（具有 portfolio-image 类）组成。对于大多数作品集，你只需要在每个这些 div 元素中包含一个 img 元素。然而，在我的项目中，我想展示前后图像，后者在用户将鼠标悬停在图像上（或在便携设备上轻触图像）时出现。为了做到这一点，我添加了一个具有 image-overlay 类的第二个 img 元素。以下是该类的 CSS：
使用它
在你的作品集中拥有前后图像的想法对许多创意追求都很有用，包括家具维修、艺术修复、健身训练、发型设计和室内装饰。
.image-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 156px;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.image-overlay:hover {
  opacity: 1;
}


该覆盖层使用与之前图像相同的尺寸，并且相对于 div 元素（具有 portfolio-image 类，它使用相对定位为后续图像设置定位上下文）绝对定位在左上角。覆盖层被赋予 z-index 值为 1 以确保它出现在之前图像之上，并且被赋予 opacity 值为 0 以防止它在页面首次加载时出现。然后 hover 事件将 opacity 值更改为 1 以使图像出现。image-overlay 类中的 transition 属性动画化覆盖层的出现。
关于部分
作品集页面的下一个元素是关于部分，你可以用它以任何你觉得舒服的方式吹嘘自己。你可以谈论你的教育、工作经验、任命、奖项等等。使用任何有效的方法为你的作品集提供说服潜在客户、雇主或赞助商你有他们寻找的创意技能的凭证。
关于部分很简单：一个标题后跟一段自我吹嘘的文本。以下是一个示例。
尝试这个
在线：wdpg.io/projects/portfolio-page/07
此示例将关于部分添加到投资组合页面。
网页

CSS
.about {    ① 
 margin-bottom: 1rem;    ① 
}    ① 
.about-text p {    ① 
 margin: .5rem 0 1.5rem;    ① 
 font-size: 1.25rem;    ① 
}    ① 


① 关于部分的 CSS
HTML
<section class="about" id="about">    ② 
 <div class="about-text">    ③ 
        <h2>About Me</h2>
        <p><b>Paul McFedries</b> is a book conservator, bookbinder, and an expert in the history and conservation of Gothic and Art Deco bookbindings. He is a graduate of the Canadian Bookbinding and Book Arts Guild, and apprenticed with some of the top North American and European book restorers, including Don Palmer, Rose Eldridge, and Betsy Taylor-Newlove. Paul was formerly president of the Gothic Book Workers Guild and is currently executive director of the Historical Art Deco Bookbinding Society. Working with both institutional and private clients, he has restored hundreds of books over the years.
        </p>
    </div>
</section>

② 关于容器是一个具有类和 id about 的章节元素。
③ 关于文本容器是一个具有类 about-text 的 div 元素。
关于内容使用带有about类的section元素。我还分配了 id about，这使该元素成为页眉中关于导航链接的目标。
联系部分
投资组合页面主要部分的最后一个重要元素是联系部分，这是你提供给感兴趣访客一种或多种联系方式的地方。至少，你应该提供一个电子邮件地址，但你几乎总是想包括一个或多个指向你的社交媒体个人资料的链接。
常见问题解答
我能否让人们通过表单联系我？ 表单是一种获取消息的好方法，但对于大多数新网页设计师来说并不理想，因为它需要脚本处理表单数据。然而，网络上的某些服务不仅允许你构建表单，还能为你处理数据。查看 TypeForm (www.typeform.com) 和 Wufoo (www.wufoo.com)。
联系部分很简单：一个标题，一个引言段落，以及你的电子邮件地址和社交媒体链接。以下是一个示例。
尝试这个
在线：wdpg.io/projects/portfolio-page/08
此示例将联系部分添加到投资组合页面。
网页

CSS
.contact {    ① 
 margin-bottom: 1rem;    ① 
}    ① 
.contact-text p {    ① 
 margin: .5rem 0 1.5rem;    ① 
 font-size: 1.25rem;    ① 
}    ① 
.contact-social-links a {    ① 
 margin-right: 1.5em;    ① 
}    ① 

① 联系部分的 CSS
HTML
<section class="contact" id="contact">    ② 
 <div class="contact-text">    ③ 
        <h2>Contact Me</h2>
        <p>If you want to know more about my work, or if you want to discuss a project, please get in touch:</p>
        <p><i>paul at thisoldbook dot com</i></p>
        <p>Alternatively, click an icon below to reach out using your favorite social network:</p>
    </div>
 <div class="contact-social-links">    ④ 
        <a href="#" class="contact-social-link"><img src="/images/facebook-round.tif" alt="Facebook icon"></a>
        <a href="#" class="contact-social-link"><img src="/images/twitter-round.tif" alt="Twitter icon"></a>
        <a href="#" class="contact-social-link"><img src="/images/instagram-round.tif" alt="Instagram icon"></a>
    </div>
</section>

② 联系容器是一个具有类和 id contact 的章节元素。
③ 联系文本容器是一个具有类 contact-text 的 div 元素。
④ 联系社交媒体容器是一个具有类 contact-social-links 的 div 元素。
记住
当你在联系部分添加你的电子邮件地址时，确保不要以纯文本形式显示地址，以免地址被垃圾邮件收集者捕获。相反，以一种欺骗垃圾邮件收集者机器人但仍然对人类来说容易解码的方式混淆地址。
联系内容使用带有contact类的section标签，并将id值设置为contact，这使得该元素可以作为页眉中联系按钮和投资组合介绍中“联系我”按钮的锚点。
页面页脚
投资组合页面的最后一个元素是页脚。正如以下示例所示，我使用了页脚来显示版权声明以及指向网站其他部分的链接。
尝试这个
在线：wdpg.io/projects/portfolio-page/09
此示例将页脚添加到投资组合页面。
网页

CSS
footer {    ① 
 display: flex;    ① 
 padding: 1em 0;    ① 
 border-top: 1px solid #a99879;    ① 
}    ① 
.footer-copyright {
    flex: 1 0 50%;
    text-align: left;
    font-style: italic;
    font-size: 1.25em;
}
.footer-links {
    flex: 1 0 50%;
    text-align: right;
    font-size: 1.25em;
}
.footer-links a {
    color: #362507;
    margin-left: 1em;
}


①  页脚被设置为 flexbox 容器。
HTML
<footer>
 <div class="footer-copyright">    ② 
        Copyright 2019 This Old Book
    </div>
 <div class="footer-links">    ③ 
        <a href="#">Home</a>
        <a href="#">FAQ</a>
        <a href="#">Site Map</a>
        <a href="#">Privacy</a>
    </div>
</footer>

②  页脚版权声明是一个具有 class footer-copyright 的 div 元素。
③  页脚网站链接容器是一个具有 class footer-links 的 div 元素。
页脚内容使用了一个配置为 flexbox 容器的footer元素。版权声明（具有 class footer-copyright）是一个向左对齐的 flexbox 项目，而网站链接（具有 class footer-links）是一个向右对齐的 flexbox 项目。
小心
当添加版权声明时，不要同时添加“版权”一词和版权符号（©），因为这会显得重复。使用其中一个即可，但不要同时使用两个。
从这里开始
资料页的最终版本（我的在图 20.4 中展示）为宣传你的创意作品提供了一个坚实的基础。
图 20.4 一个准备上网的资料页

资料页最大的不足是响应性。在桌面网络浏览器中看起来不错，甚至在某些平板电脑的横屏模式下也如此，但在小屏幕上设计会破裂。我将留给你一个练习，添加媒体查询断点（见第十三章），以帮助页面在小到智能手机的屏幕上看起来都很好。
这是本书的最后一章，但这并不意味着它是你网页设计教育的终结。远非如此。请务必访问 Web 设计游乐场(webdesignplayground.io/)，那里有大量的示例、练习和教程，可以帮助你磨练技能并扩展知识。在那里见！
摘要


绘制你想要构建的页面草图。


选择标题和正文文本的字体系列。


选择一个配色方案。


构建初始页面结构：基本的 HTML 标签和应用于body元素的全球 CSS 属性。


设置你的主要 flexbox 容器。


逐个填充和设计每个部分：页眉、资料介绍、资料本身、关于部分、联系部分，以及页脚。


第 章 从操场到网络：将您的页面上线

当网络这样的创造性媒介如此之有创意时，其限制就是我们的想象力。—蒂姆·伯纳斯-李

本附录涵盖


从网页设计操场下载页面文件


验证 HTML 和 CSS 语法


理解和选择网络托管服务


将页面文件上传到您的网络主机


您在这本书中已经覆盖了很多内容，毫无疑问，您已经用电子版的“唾沫和抛光”来打磨您的网站页面，使其呈现出令人印象深刻的光泽。但在您可以将“制作网站”从待办事项清单中划掉之前，您需要执行几个相关的任务：为您的网站找到一个网络家园，并将您的网站文件移动到那个新家。本附录将帮助您完成这两个任务。首先，您将学习如何在网络上找到一个位置，让朋友、家人，甚至来自遥远角落的陌生人都能看到您的作品。然后，您将学习如何将您的网页从其原生地（网页设计操场或您的硬盘）迁移到新世界（网络）。您将学习如何最好地准备您的页面以进行旅行，选择一种运输方式，并在到达后安顿下来。
从这里到那里：保存您的操场工作
如果您一直在使用网页设计操场进行一些实验，甚至建立了一些沙盒（我在操场项目上使用的名称），下一步就是将您的代码从操场复制到您的计算机。您有两种方法可以做到这一点：复制代码和下载代码。首先，我将向您展示如何从操场复制代码。
复制操场代码
网页设计操场充满了 HTML 和 CSS 代码：它在课程页面中，它在 HTML 编辑器中，它在 CSS 编辑器中。将代码复制到您计算机的一种方法是从这些操场位置之一复制它。当您这样做之后，您可以使用您最喜欢的文本编辑器将代码粘贴到现有文件中。
网页设计操场提供了三种复制代码的方法：

在课程中 —当课程页面提供 HTML 或 CSS 代码片段时，您会在代码下方看到一个“复制到剪贴板”按钮，如图 A.1 所示。点击该按钮将代码复制到您的计算机剪贴板（用于存储最近复制或剪切的数据的内存区域）。

图 A.1 要从操场课程中的 HTML 或 CSS 代码片段中复制代码，请点击“复制到剪贴板”按钮。


在 HTML 编辑器中 —HTML 编辑器包含当前课程的 HTML 代码、您已修改的现有 HTML 代码，或者您添加到沙盒中的自定义 HTML 代码。无论来源如何，您都可以通过点击 HTML 编辑器左上角的面板图标，然后点击“复制到剪贴板”，如图 A.2 所示。这一步会将完整的 HTML 代码复制到您的计算机剪贴板中。

图 A.2 要从 HTML 编辑器复制代码，点击编辑器的菜单图标，然后点击复制到剪贴板。


在 CSS 编辑器中 —CSS 编辑器包含当前课程的 CSS 代码、你已修改的现有 CSS 代码，或者添加到沙盒中的自定义 CSS 代码。要将这些 CSS 代码放入计算机的内存中，请点击 CSS 编辑器左上角的菜单图标，然后点击复制到剪贴板，如图 A.3 所示。此步骤将完整的 CSS 代码复制到计算机的剪贴板中。

图 A.3 要从 CSS 编辑器复制代码，点击编辑器的菜单图标，然后点击复制到剪贴板。

当你运行复制到剪贴板命令后，在文本编辑器中打开你的 HTML 或 CSS 文件，将插入点定位到你想要复制代码出现的位置，然后运行文本编辑器的粘贴剪贴板数据命令。在大多数编辑器中，你通过选择编辑 > 粘贴或按 Ctrl+V（Windows）或 Cmd+V（Mac）来实现。
下载游乐场代码
与复制粘贴 HTML 或 CSS 代码片段相比，你可能更喜欢获取 HTML 和 CSS 编辑器的全部内容。如果你想从特定课程中获取所有代码，或者你创建了一个沙盒并填充了自定义 HTML 和 CSS 代码，这就是你要走的路。
这里是你要遵循的步骤：


在网页设计游乐场中，打开包含你想要代码的课程，或者创建一个包含自定义代码的沙盒。


选择菜单 > 下载代码。
游乐场将代码收集到一个 zip 存档文件中，并告诉你的网络浏览器下载该文件。


定位下载的文件，文件名为 webdesign.zip。


双击 webdesign.zip 存档以打开它。
在出现的文件夹中，你看到两个文件：


index.html—此文件包含一个基本的 HTML 页面结构，其中 HTML 编辑器的内容插入在<body>和</body>标签之间。它还包括在<head>部分中引用styles.css文件的link元素。


styles.css—此文件包含 CSS 编辑器的内容。




将这些文件复制或移动到存储你其余网页文件（如页面图像文件）的文件夹中。


现在你已经将游乐场的代码安全地存储在 Mac 或 PC 上，你差不多准备好将这段代码放到网上。然而，在这样做之前，你需要完成一些额外的任务来使你的文件准备好上传到网络。这个待办事项列表的第一项是在你的计算机上设置网页文件夹。
设置您的文件夹
当你注册一个家庭存储你的网页文件时（参见附录后面的“获取网络主机”），你将获得自己的文件夹来存储服务器上的文件。这个文件夹被称为你的网站根文件夹。你现在需要问自己一个看似简单的问题：我需要在根文件夹内创建一个或多个子文件夹吗？
我在这里使用“显然”这个词，因为并不总是清楚您是否需要子文件夹。检查可能的情况：


包含单个文件的单一网络项目 —最简单的网络项目是由单个 HTML 文件组成。该文件只包含文本、HTML 标签、内联或内部样式表（即在<style>和</style>标签之间）插入的 CSS 样式，以及使用远程引用（即指向其他网站上文件的引用）的媒体（如图像）。在这种情况下，您可以将该文件存储在根文件夹中，并且不需要任何子文件夹。


包含少量文件的单一网络项目 —大多数简单或初级的网络项目只包含几个文件：一个 HTML 文件、一个 CSS 文件和一个或多个图像文件。在这种情况下，使用子文件夹几乎肯定是不必要的，因此您应该将所有文件存储在根文件夹中。


包含大量文件的单一网络项目 —大型项目拥有多个 HTML 文件、几个 CSS 文件以及大量的媒体文件，尤其是图像，这种情况并不罕见。在这种情况下，将所有 HTML 文件放在根文件夹中是可以的，但为了保持整洁，您应该为其他类型的文件（如 CSS、图像等）创建单独的子文件夹。


多个网络项目 —如果您稍微涉足网页设计，您会发现您不能只创建一个项目。多个项目是常态，在这种情况下，您应该通过将每个项目存储在其自己的子文件夹中来保持项目分离。如果某个项目很大，您可能需要创建子子文件夹来存储项目的各种文件类型（CSS、图像、媒体等）。


为什么现在要担心这些？如果您在注册了网络主机后，将您电脑的本地文件夹结构设置为与您远程设置的相匹配，那么您的网页设计生活将变得无比轻松和高效：


首先，指定一个本地文件夹作为您网页文件的存储区域。
该文件夹将是您在网络上主机根文件夹的本地等效文件夹。


如果您将从事多个网络项目，为每个项目设置一个子文件夹。


如果项目足够大，需要为某些文件类型创建子文件夹，请在项目文件夹内创建这些子文件夹。


当您从游乐场下载文件（如前文所述），或者当您创建自己的 HTML、CSS 或图像文件并首次保存时，请确保将它们存储在适当的文件夹中。


完成所有这些后，您的下一个任务是确保您的代码通过验证。
验证您的代码
你在这本书中看到，尽管 HTML 标签和 CSS 属性并不复杂，但它们可能会有些挑剔。如果你忘记了一个闭合标签或大括号，遗漏了一个引号或逗号，或者拼写了一个标签或属性名错误，那么你的网页很可能无法正确渲染。在某些情况下，错误是明显的（例如，页面什么也不显示），但很多时候，错误是微妙的，难以察觉。
无论哪种方式，你都不希望向公众展示一个充满错误的页面，因此除了仔细检查你的 HTML 和 CSS 代码外，你还可以通过将代码提交到可用的验证服务之一来在线获得一些帮助。
验证 HTML
万维网联盟（W3C）托管了一个标记验证服务，可以检查你的 HTML 代码并告诉你是否包含任何错误或警告。以下是使用方法：
记住
另一种运行验证的方法是复制你的 HTML 代码从你的文本编辑器，选择“通过直接输入验证”选项卡，将你的 HTML 代码粘贴到文本框中，然后点击检查。


使用网络浏览器访问 https://validator.w3.org。


点击“通过文件上传验证”选项卡。


点击浏览（Windows）或选择文件（Mac）。
网站会提示你选择要验证的文件。


定位并选择你想要检查的 HTML 文件；然后点击打开。
网站上传文件。


点击检查。
标记验证服务检查 HTML 代码并显示结果。
理想情况下，你会看到“没有错误或警告显示”的消息，如图 A.4 所示。


图 A.4 HTML 验证幸福：没有错误或警告显示。

如果你的 HTML 文件未通过验证，你会看到一个或多个错误或警告消息，如图 A.5 所示。
图 A.5 HTML 验证痛苦：存在错误。

验证 CSS
W3C 还提供 CSS 验证服务，它可以浏览你的 CSS 代码，并提醒你任何错误或警告。以下是使用方法：
记住
另一种 CSS 验证方法是复制你的 CSS 代码从你的文本编辑器，选择“通过直接输入”选项卡，将你的 CSS 代码粘贴到文本框中，然后点击检查。


使用网络浏览器访问 https://jigsaw.w3.org/css-validator。


点击“通过文件上传”选项卡。


点击浏览（Windows）或选择文件（Mac）。
网站会提示你选择要验证的文件。


定位并选择你想要检查的 CSS 文件；然后点击打开。
网站上传文件。


点击检查。
CSS 验证服务检查 CSS 代码并显示结果。
理想情况下，你会看到“未发现错误”的消息，如图 A.6 所示。


图 A.6 CSS 验证喜悦：恭喜！未发现错误。

如果你的 CSS 文件包含无效数据，则该服务会返回一个或多个错误或警告，如图 A.7 所示。
图 A.7 CSS 验证错误：我们发现以下错误。

当你修复了代码中的所有错误后，你的 HTML 和 CSS 文件就准备好进入网络的黄金时期。不过，首先你需要找到一个放置这些文件的地方。简而言之，你需要找到一个网络主机。
获取网络主机
在第一章中，你了解到网页存储在一种称为 web 服务器 的特殊计算机上，它接受并响应对网页及其相关文件的网页浏览器请求。在其他人可以查看你的网络项目之前，你需要将其文件放在网络服务器上。为此，你需要注册一个提供其服务器空间的服务。因为该服务实际上充当了你的文件的主机，所以这样的服务被称为 网络托管提供商，或简称 网络主机。
当你评估一个网络主机时，你应该使用什么标准？答案取决于你想要设置的网站类型，但以下标准是最常见的：


最大带宽 —每月主机将传输到网页浏览器中的数据量上限。在大多数情况下，超出每月最大数据量的数据需要额外付费。一些网络主机提供无限带宽。


总磁盘空间 —你在网络服务器上获得的硬盘存储空间。至少，总磁盘空间通常是几百兆字节，这对于一个简单的网站来说已经足够了。


网站数量 —你可以设置的根文件夹数量。


电子邮件地址数量 —包含在托管服务中的电子邮件地址数量。


域名主机 —网络主机是否也托管你之前从域名注册商那里购买的域名。一些主机销售域名，而另一些则提供形式为 yourdomain.webhostdomain.com 的免费子域名。


FTP 支持 —对文件传输协议的支持，这是你用来将文件传输到网络主机的互联网服务。几乎所有的网络主机都支持 FTP，但一些只提供专有文件传输服务。


通常情况下，网络主机越便宜，你获得这些功能就越少。在你开始寻找网络主机之前，列出这些功能并决定你需要什么以及什么是可以选择的。对于像最大带宽这样的东西，这可能现在很难决定，因为带宽部分取决于你的网站有多受欢迎，但你现在可以尽力为每个功能做出最佳猜测。
当你在寻找网络主机时，你有三种主要选择：


你的互联网服务提供商(ISP) —你用来访问互联网的公司或机构也可能提供网络托管服务。许多 ISP 为简单的个人网站提供免费网络托管，一些组织网络包括你可以使用的网络服务器。在大多数情况下，托管包括带宽和磁盘空间等低端功能。


免费网络托管提供商 —许多服务将免费托管您的网页。但是，您通常对大多数托管功能有相当严重的限制，尤其是带宽和磁盘空间，并且您几乎总是只有一个网站。一些免费网络托管商也会显示广告，尽管现在这种情况越来越少了。


商业网络托管提供商 —如果您想为您的网络存在获得合理的一组功能，您需要向商业网络托管提供商支付费用以租用空间。请注意，我并不是在谈论大笔的钱。像 Bluehost（https://www.bluehost.com）、GoDaddy（https://www.godaddy.com）和 HostGator（http://www.hostgator.com）这样的流行提供商通常每月提供功能齐全的托管服务，价格低于 5 美元。如果您认为您将涉足网页设计，而不仅仅是创建一个基本的家庭页面，那么您绝对应该考虑使用商业网络主机。


当您注册了网络托管商后，通常需要几分钟到几小时的时间才能准备就绪。当您的托管服务准备就绪时，那么就是时候将您的文件上线了。
上传您的文件
当您的 HTML 和 CSS 文件编码并验证后，您的支持文件（如图片）已就绪，您的文件夹已设置，您的网络托管商准备将您的文件提供给等待的世界时，剩下的就是将您的文件从您的计算机发送到网络托管商的服务器——这个过程称为上传。
您上传文件的方式取决于您的网络托管商，但以下三种方法是迄今为止最常用的：


FTP —大多数托管商提供对 FTP 上传的支持。首先，您需要为自己获取一个FTP 客户端，这是一个软件程序，可以连接到您的网络托管商的 FTP 服务器，并提供一个用于基本文件任务（如导航和创建文件夹、上传文件以及删除和重命名文件）的界面。流行的 Windows 客户端有 CuteFTP（https://www.globalscape.com/cuteftp）和 CyberDuck（https://cyberduck.io）。对于 Mac，请尝试 Transmit（https://panic.com/transmit）或 FileZilla（https://filezilla-project.org）。下载软件后，请查看您的网络托管商的支持页面，获取有关如何连接到主机 FTP 服务器的信息。


cPanel —许多网络托管商提供一种名为 cPanel 的管理工具，它提供了一个简单的界面来处理诸如电子邮件和域名管理之类的托管任务。cPanel 还提供了一个文件管理器组件，您可以使用它上传文件并执行其他文件管理任务。


专有 —一些网络托管商提供他们自己的界面来上传和处理文件。请参阅您的主机支持页面以获取说明。


无论哪种方法可用，都将所有网站文件和文件夹上传到您的主机根目录。然后，将您的网站加载到您最喜欢的网络浏览器中，以确保一切正常工作。尝试在几个不同的浏览器和设备上测试您的网站，以确保它对广泛的用户都能正常工作。欢迎来到网络世界！
选择文本编辑器
您可以使用网页设计游乐场来实验和玩转 HTML 和 CSS，但到了认真对待代码的时候，您会想在电脑上编辑它。为此，您需要一个文本编辑器，最好是专为网络编码设计的编辑器。这样的编辑器包含诸如语法高亮（为便于阅读，将某些语法元素着色）、行号、代码补全（当您开始输入时，编辑器会显示一个可能的代码项列表，以完成您的输入）、文本处理（如自动缩进代码块、将制表符转换为空格及其相反、左右移动代码块、删除行尾不必要的空格、隐藏代码块）等功能。
在这里，按字母顺序列出了一些提供所有这些功能（通常还有更多）的编辑器：


Atom —适用于 Windows 和 Mac。免费！https://atom.io


Brackets —适用于 Windows 和 Mac。也免费！http://brackets.io


Coda —适用于 Mac，售价 99 美元，但提供免费试用。www.panic.com/coda


Notepad++—仅适用于 Windows。另一个免费工具。https://notepad-plus-plus.org


Sublime Text —适用于 Windows 和 Mac，售价 80 美元，但提供免费试用。www.sublimeext.com


TextMate —仅适用于 Mac，售价 48.75 欧元（约 57 美元），但提供免费试用。http://macromates.com


摘要


从网页设计游乐场将代码复制粘贴到您的电脑，或者下载 HTML 和 CSS 编辑器的内容。


在您的电脑上设置您的网站文件夹。


使用 W3C 的在线验证服务查找您的 HTML 和 CSS 代码中的错误。


注册一个网络托管服务提供商。


将您的网站文件上传到您的网络主机。

名称	红色	绿色	蓝色
红色	255	0	0
绿色	0	255	0
蓝色	0	0	255
黄色	255	255	0
青色	255	0	255
青色	0	255	255
黑色	0	0	0
灰色	128	128	128
白色	255	255	255

名称	红色	绿色	蓝色
红色	100%	0	0
绿色	0	100%	0
蓝色	0	0	100%
黄色	100%	100%	0
品红色	100%	0	100%
青色	0	100%	100%
黑色	0	0	0
灰色	50%	50%	50%
白色	100%	100%	100%

名称	红色	颜色
红色	`#ff000`
绿色	`#00ff00`
蓝色	`#0000ff`
黄色	`#ffff00`
品红色	`#ff00ff`
青色	`#00ffff`
黑色	`#000000`
灰色	`#808080`
白色	`#ffffff`

值	描述
`number`	输入不带单位的数值。计算出的行高是当前字体大小乘以该数值。
`length`	输入带有单位的数值，例如 `em`。
`percentage`	百分比值。计算出的行高是当前字体大小乘以百分比。
`normal`	一个关键字，告诉浏览器根据当前字体大小自动设置行高。

示例	描述
`<div class="sidebar alert">`	将名为 `sidebar` 的类和名为 `alert` 的类同时应用于 `div` 元素
p.footnote {``styles``}	将规则应用于那些被分配了名为 `footnote` 的类的 `p` 元素
p.footnote > a {``styles``}	将规则应用于那些被分配了名为 `footnote` 的类的 `p` 元素的子 `a` 元素
p.footnote a.external {``styles``}	将规则应用于那些被分配了名为 `external` 的类，并且是那些被分配了名为 `footnote` 的类的 `p` 元素的后代 `a` 元素
#payables-table li:nth-child(even) {``styles``}	将规则应用于列表中具有 ID `payables-table` 的偶数编号 `li` 元素

标题	正文	正文（替代）
Playfair Display	Open Sans	Raleway
Merriweather	Fira Sans	Merriweather Sans
Source Serif Pro	Source Sans Pro	Lato
Domine	Roboto	Open Sans
Lora	Varela Round	Lato
Roboto Slab	Roboto	Raleway