如何在CSS中使用字体、大小和颜色设置文本元素的样式
作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。
介绍
层叠样式表 (CSS) 是一种为两个学科设计的语言：程序员的学科和设计者的学科。 在 Web 上处理文本是该语言广泛可访问性的最明显示例之一。 样式文本使用图形设计界的概念，但调整命名约定以更广泛地实施。
在本教程中，您将了解网页 排版 ，即样式文本的艺术。 与使用印刷机类似，您将列出您的内容，应用视觉风格来帮助传达内容，并调整内容的易读性和重点。 在 Web 上设置文本样式的目的是通过颜色、大小、形状和空间创建视觉层次结构。 这样，标题从子标题中脱颖而出，从段落中脱颖而出。 这些概念有助于使文本对读者更具可读性和可扫描性。
您将从编写 HTML 结构开始本教程，该结构将包含来自 Cupcake Ipsum 的占位符内容。 您将使用不同的标题级别（h1-h6）和内容类型（p、strong 和 em）来应用多个文本相关的 CSS 属性，包括 font-family、font-size 和 color。 您还将从第三方字体托管服务 Google Fonts 加载自定义字体。 本教程的每个步骤都将引入一个新概念或一组属性以应用于内容。 最后，您将拥有一个自定义样式的网页。
先决条件
- 在本地计算机上保存为
index.html的 HTML 文件，您可以从文本编辑器和选择的 Web 浏览器访问该文件。 要开始使用，请查看我们的 如何设置您的 HTML 项目 教程，并按照 如何使用和理解 HTML 元素 获取有关如何在浏览器中查看 HTML 的说明。 如果您是 HTML 新手，请尝试 如何用 HTML 构建网站系列。
设置示例 HTML
在这第一步中，您将设置在本教程的其余部分中将设置样式的 HTML。 本教程中 HTML 的目的是为您提供各种元素和场景来练习样式。
使用文本编辑器打开 index.html 文件，例如 nano、Vim 或 Visual Studio Code。 添加以下样板 HTML 为文件提供必要的基线代码：
索引.html
<!doctype html>
<html>
<head>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
<link /> 元素已经加载到 styles.css 文件中，因此请务必准备好该文件。
接下来，您需要一些内容来设置样式。 创建文本样式时，项目通常在内容准备好之前需要样式。 在平面设计世界中，占位符内容用于此目的。 设计师经常使用拉丁文本作为占位符，称为 Lorem Ipsum。 这个占位符文本有许多现代版本，包括 Cupcake Ipsum。 这将是整个 HTML 中使用的参考副本。
首先，HTML 需要描述 层次结构，内容的明确区分和顺序。 在使用标题标签完成的 HTML 中，从最顶部的标题 <h1> 到最底部的标题 <h6>。 标题的浏览器默认样式仅按大小定义视觉层次结构，<h1> 元素的默认 font-size 明显大于 <h6> 元素的默认值。 在本教程中，您将使用其他设计原则（例如颜色和空间）来为内容提供视觉层次结构。
要创建此分层内容，您将写出各种标题，并用 index.html 中的 <body> 标签内的 Cupcake Ipsum 中的几个词填充每个标题。 您将遵循正确的 HTML 语义，它为浏览器提供准确的含义。
要有正确的 HTML 语义：
- 页面上只有一个
<h1>元素。 这通常是标题。 - 后续的标题级别将只有一个更低、相等或任何更高的级别。 例如，在
<h3>之后的唯一标题级别将是<h4>、另一个<h3>或<h2>，但绝不是<h5>或<h6>。
使用标题语义规则，将以下突出显示的 HTML 添加到 index.html：
索引.html
...
<body>
<h1>Sugar plum chupa chups chocolate bar cupcake donut</h1>
<h2>Tootsie roll oat cake macaroon</h2>
<h2>Jelly beans tiramisu pastry danish donut</h2>
<h3>Lemon drops pastry marshmallow</h3>
<h3>Apple pie pudding topping</h3>
<h4>Gingerbread danish</h4>
<h5>Carrot cake topping lollipop gummi bears</h5>
<h6>Liquorice bonbon candy cotton candy liquorice</h6>
</body>
...
接下来，您需要一些内容来填充每个标题之间的空格。 这些将是由 <p> 元素指定的文本段落，用于保存每个段落。 再次使用 Cupcake Ipsum 生成此内容并将段落放置在整个页面中。
添加以下代码块的突出显示部分。 本教程将在整个代码块中使用这种格式：
索引.html
...
<body>
<h1>Sugar plum chupa chups chocolate bar cupcake donut</h1>
<h2>Tootsie roll oat cake macaroon</h2>
<p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum I love fruitcake pastry. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
<h2>Jelly beans tiramisu pastry danish donut</h2>
<h3>Lemon drops pastry marshmallow</h3>
<p>I love marshmallow candy. Sesame snaps muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
<h3>Apple pie pudding topping</h3>
<p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu soufflé powder caramels I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
<h4>Gingerbread danish</h4>
<p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. Wafer tootsie roll I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
<h5>Carrot cake topping lollipop gummi bears</h5>
<p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
<h6>Liquorice bonbon candy cotton candy liquorice</h6>
<p>Cupcake donut topping chupa chups halvah chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
</body>
...
最后，将 <strong>、<em> 以及这两个元素的组合添加到一起。 这将提供内容中强调的短语示例：
索引.html
...
<h2>Tootsie roll oat cake macaroon</h2>
<p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum <strong>I love fruitcake pastry</strong>. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
<h2>Jelly beans tiramisu pastry danish donut</h2>
<h3>Lemon drops pastry marshmallow</h3>
<p>I love marshmallow candy. <em>Sesame snaps</em> muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
<h3>Apple pie pudding topping</h3>
<p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu <strong>soufflé powder caramels</strong> I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
<h4>Gingerbread danish</h4>
<p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. <strong><em>Wafer tootsie roll</em></strong> I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
<h5>Carrot cake topping lollipop gummi bears</h5>
<p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
<h6>Liquorice bonbon candy cotton candy liquorice</h6>
<p>Cupcake donut topping <em><strong>chupa chups halvah</strong></em> chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
...
现在您已经编写了 HTML，保存 index.html 并在浏览器中打开它以查看使用浏览器默认样式的页面：
所有元素的文本大小不一，默认的 <h5> 和 <h6> 样式小于 <p> 文本。
在此步骤中，您将设置将在本教程的其余部分中设置样式的 HTML 内容。 接下来，您将使用 font-family 属性，了解 字体堆栈，浏览器可以使用的字体列表，并将字体应用于不同的元素。
使用 font-family 属性
接下来，您将使用 font-family CSS 属性并从 Google Fonts 服务加载外部字体文件。 此属性的名称来源于一个排版术语，该术语描述了字体集合和该字体的变体，包括粗体和斜体版本。 一个字体可以有许多这样的变体，但都可以是同一个 font-family 的一部分，这些变体被称为 font-weight 和 font-style 属性。
要开始使用 font-family，了解有关其价值选项的详细信息会很有帮助。 font-family 属性的值是称为字体堆栈的字体列表。 字体堆栈用作后备系统。 考虑以下 font-family 属性值：
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
浏览器首先将确定 Helvetica Neue 是否可供它使用，无论是作为安装在计算机上的字体还是作为网站提供的字体。 如果浏览器没有找到名为 Helvetica Neue 的字体，那么它会在列表中找到 Helvetica，然后再到 Arial。 如果浏览器无法找到任何这些字体，则列表中的最后一个字体 sans-serif 将使用浏览器设置的默认字体作为 sans-serif 样式字体的默认字体。
注意： 字体堆栈不是在找不到字体时提供最佳功能，而是在字体中找不到特定字符时提供最佳功能。 这对于使用多语言支持的实例尤其必要，其中一种字体可能没有涵盖所有语言需求的字符集。 字体堆栈可以包含备用字体，该字体提供特殊字符和与堆栈中的主要字体类似的视觉感觉。
在与 index.html 相同的目录中创建一个名为 styles.css 的文件。 在文本编辑器中打开它并为页面添加默认字体：
样式.css
body {
font-family: "Avenir Next", Calibri, Verdana, sans-serif;
}
在此代码中，您从具有 font–family 属性的 body 类型选择器 开始。 接下来，对于字体堆栈，您从 "Avenir Next" 开始，它将在 iOS 和 macOS 浏览器上可用。 Avenir Next 用引号引起来，因为字体名称是两个单词。 对于 Windows 浏览器，下一个字体是 Calibri。 确保在每个字体声明之间放置一个逗号。 为了提供更通用的字体回退，您可以使用 Verdana，它自 2000 年代初以来已在计算机上广泛使用。 最后，由于所有这些字体都被归类为无衬线字体，因此您将浏览器默认 sans-serif 添加为字体堆栈中的最终字体选项。
保存styles.css，然后在浏览器中打开index.html。 您将找到一种新字体来代替内容的浏览器默认字体。 如果您使用的是 Apple 操作系统，Avenir Next 将在浏览器中呈现。 如果你在 Windows 上，Calibri 将改为渲染。 下图是这个字体堆栈在 MacOS 上的样子：
在本节中，您使用了 font-family 属性来设置网页的默认字体堆栈。 您还设置了一个专门应用于标题文本内容的 font-family 属性。 在下一节中，您将使用 Google 字体服务加载自定义字体文件并在页面上使用它。
使用 Google 字体加载自定义字体
现在您已经使用了 font-family 属性和已经安装在计算机上的字体，是时候从外部服务加载字体了。 这将扩大可用于设置文本样式的字体范围。 在本节中，您将使用 Google 字体服务在网页上加载和使用字体。
浏览器可以加载任何字体，只要为该浏览器提供了适当的字体文件格式。 字体服务（例如 Google Fonts）通过提供加载字体所需的 CSS 和字体文件来减轻定义和托管字体的工作。 还有许多其他服务，例如 Google Fonts，但 Google Fonts 托管版税和开源字体并免费提供服务。
要开始使用，请在浏览器中打开 fonts.google.com。
您可以在 Google 字体中选择许多不同的字体。 本教程将使用两个：Public Sans 和 Quicksand。
在 Google 字体的搜索字段中，搜索 Public Sans。 当字体卡从搜索结果中出现时，会显示字体预览。 单击卡片以转到字体页面：
Public Sans 字体页面将列出该字体的所有变体。 这些被称为 权重 ，范围从 100 到 900。 就本教程而言，找到 Regular (400) 和 Bold (700) 样式，然后按 + 选择此样式 按钮在每个样式旁边变体，以及它们的斜体样式。
选择第一种样式后，选定的系列工具将滑入。 此工具将为您提供使用这些字体所需的 HTML 和 CSS：
选择 <link /> 方法在浏览器中加载字体并复制提供的 HTML。 打开 index.html 并在 <link /> 加载 styles.css 之后将代码添加到 <head> 元素中。 保持 Google 字体打开，因为您将多次返回它：
索引.html
...
<head>
<link href="styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
...
此时，在浏览器中重新加载 index.html 不会有任何视觉变化。 浏览器正在加载字体，但需要将字体添加到字体堆栈才能将字体应用于内容。
返回 Google Fonts 以查找加载 Public Sans 的 CSS 规则。 Google Fonts 提供了一个 Public Sans 字体堆栈和浏览器默认的 sans-serif 字体和 font-family: 'Public Sans', sans-serif;。 由于您已经使用备用字体设置了字体堆栈，因此您需要从 Google Fonts 示例中获取的只是引用 Public Sans 的名称。
使用 styles.css 中现有的字体堆栈，将 Avenir Next 和 Calibri 替换为 Public Sans：
样式.css
body {
font-family: "Public Sans", Verdana, sans-serif;
}
现在已经声明了基本字体堆栈，页面上的所有字体现在都是 Public Sans。
引起对标题更多关注的一种常见设计做法是为标题使用与正文不同的字体。 要将其应用于您自己的 HTML，请返回 Google 字体并搜索“流沙”。 这将是页面上 <h1> 到 <h6> 元素的标题或 display 字体。
找到 Quicksand 后，选择字体卡并将 Semi-bold (600) 和 Bold (700) 字体粗细添加到 Public Sans 旁边的选定字体中。 Google Fonts 将提供一个新 URL 来加载所有选定的字体和变体。 在您的 index.html 文件中为新链接交换之前的 href 值：
索引.html
...
<head>
<link href="styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@600;700&display=swap" rel="stylesheet">" rel="stylesheet">
</head>
...
现在流沙已设置为在浏览器中加载，您需要将其应用于标题标签。 您将通过在 styles.css 文件中添加一个以逗号分隔的 CSS 选择器列表（称为 组选择器）来完成此操作。 在这种情况下，使用带有 Quicksand 的 Google Fonts 提供的字体堆栈，后跟浏览器默认的 sans-serif 字体：
样式.css
...
h1, h2, h3, h4, h5, h6 {
font-family: "Quicksand", sans-serif;
}
保存对 styles.css 的更改并返回浏览器重新加载 index.html。 此时请随意关闭 Google 字体。 当浏览器加载时，您现在会发现显示了两种字体。 Quicksand 现在出现在所有标题上，Public Sans 出现在所有其他内容上，包括粗体和斜体内容。
在本节中，您从 Google 字体服务加载了两种字体，并将这些字体添加到您现有的字体堆栈中。 下一节将介绍使用字体变体来指定何时以及如何将粗体和斜体应用于字体。
使用 font-weight 和 font-style 属性
在本节中，您将使用 font-weight 和 font-style 属性来调整字体的显示方式。 使用这些变体有很多原因，例如强调内容，作为引文风格指南的一部分，以及提供视觉变化。
现在您正在从 Google Fonts 加载自定义字体，您可以开始微调文本的特征。 从 font-weight 属性开始，您可以更改字体显示的粗细。 font-weight 属性有两个常用值：normal 和 bold。 normal 值是浏览器中大多数文本的默认 font-weight。 bold 值是标题和 <strong> 元素的默认 font-weight。 但是对于本教程，您将需要使用数值而不是名称 normal 和 bold 值。
数字 font-weight 值取决于您正在加载的字体。 当您从 Google Fonts 添加 Public Sans 字体时，您选择了 Regular (400) 和 Bold (700) 粗细。 括号中的数字与引用和加载该字体所需的值一致。 此外，400 的 font-weight 值是 normal 的数值等价物，就像 700 是 bold 的数值等价物。 使用 Public Sans 的文本（除了标题之外的所有内容）将自动使用这些权重。
或者，流沙字体选择包括半粗体 (600) 和粗体 (700) 字体粗细。 600 值没有对应的数值，需要使用数值来定义。
您将首先将所有标题的 font-weight 设置为流沙的 600 半粗体变体。 在您的 styles.css 文件中，找到包含所有标题值的组选择器，并将 font-weight: 600; 声明添加到选择器块：
样式.css
...
h1, h2, h3, h4, h5, h6 {
font-family: "Quicksand", sans-serif;
font-weight: 600;
}
完成此更改后，保存 styles.css 并在浏览器中重新加载 index.html。 当它们从流沙的 700 值变为 600 值时，您会看到标题略微变细。
现在您已将所有标题元素设置为使用 Quicksand 600 粗细，还有一些地方可以使用字体的 700 变体。 首先，在您的 styles.css 文件中创建一个 h3 类型选择器，并在选择器块中添加 font-weight: 700;：
样式.css
...
h3 {
font-weight: 700;
}
此更改将导致 h3 突出一点，因为它现在比其他标题更粗。 随着教程的进行，您将对 h3 样式进行其他更改，以使其脱颖而出，但仍保持其层次顺序。
保存对 styles.css 的更改，然后创建一个新的选择器，该选择器以包含在 <em> 和 <strong> 标记中的文本为目标。 就目前为止编写的样式而言，这种文本将获得 Public Sans 的粗斜体变体。 相反，将样式设置为使用流沙字体堆栈。
由于获得粗斜体样式的 HTML 是 <strong><em>...</em></strong> 和 <em><strong>...</strong></em>，因此您需要在 styles.css 文件中创建组合子组选择器，然后应用 [ X168X] 属性，以 "Quicksand", sans-serif 作为值：
样式.css
...
strong em,
em strong {
font-family: "Quicksand", sans-serif;
}
在您的 styles.css 文件中添加此内容后，保存它，然后在浏览器中重新加载 index.html。 粗斜体的文本现在使用的是流沙并且是斜体，即使 Google Fonts 没有提供该字体的斜体版本。 这称为 仿斜体 ，浏览器理解此内容默认应为斜体，但由于未定义斜体变体，而是人为地倾斜文本。
处理文本是否斜体的属性是font-style。 font-style 属性的值选项是 normal 和 italic。 不要使用仿粗体，而是将此选择器的样式更改为没有斜体。 将值为 normal 的 font-style 属性添加到 styles.css 文件中的 strong em, em strong 组选择器：
样式.css
...
strong em,
em strong {
font-family: "Quicksand", sans-serif;
font-style: normal;
}
这会将粗斜体文本的实例更改为仅流沙粗体。
将更改保存到 styles.css 并在浏览器中重新加载 index.html 以查看更改：
您在本节中使用了 font-weight 和 font-style 属性来应用从 Google 字体加载的流沙字体的变体。 接下来，您将使用 font-size 属性来创建更大、更清晰的文本，并且标题之间的层次结构更清晰。
使用 font-size 属性
在本节中，您将使用 font-size 属性为整个页面的内容应用不同的字体大小。 文本的大小是传递信息的一个重要因素。 大小合适的文本更易于阅读，适当大小的标题有助于传达层次结构，以便更轻松地浏览信息。 您将更改在 index.html 中创建的所有元素的 font-size 以创建更具可读性的文档。
首先在 body 元素上设置默认的 font-size。 默认浏览器 font-size 是 16px，但它有助于提高许多字体的易读性，只是稍微大一点。 打开 styles.css 文件并将 font-size: 18px; 添加到 body 元素：
样式.css
body {
font-family: "Public Sans", Verdana, sans-serif;
font-size: 18px;
}
...
在浏览器中打开 index.html 或刷新页面。 body 元素上的 font-size 更改更改了页面上的所有字体，增加了它们的大小。
元素的默认字体大小是基于父元素的相对大小，在本例中为 <body> 元素，使用字体大小的百分比值。 使用公式 (target / base) * 100% 将为您提供一个相对于 <body> 元素上设置的基本字体大小的百分比值。
为了尝试这个公式，您需要将 <h1> 元素的目标 font-size 设置为 45px。 使用该公式，目标大小为 45px，基本大小为 18px，因此公式为 (45 / 18) * 100%，即 250%。 这意味着 <h1> 的预期大小将是基础 font-size 大小的 2.5 倍。
返回给你 styles.css 文件并为 h1 添加一个元素选择器并添加一个 font-size: 250%; 属性和值来设置字体大小：
样式.css
...
h1 {
font-size: 250%;
}
...
现在您已经为 <h1> 元素设置了相对字体大小，将相同的公式应用于其余的标题元素。 对于每个，您可以选择舍入或保留完整的十进制值。 留下评论来解释目标大小甚至公式也很有帮助。
打开您的 styles.css 文件并首先在 h1 font-size 属性之后添加注释来解释渲染大小。 然后对于每个标题应用公式，因此 h2 具有 font-size 等效于 36px，h3 等于 32px，[X132X ] 到 26px，h5 到 22px，最后是 h6 到 18px 的基本尺寸。 <h6> 元素的默认尺寸小于基本尺寸，因此将其设置为 100% 将确保它不会低于基本值：
样式.css
...
h1 {
font-size: 250%; /* 45px */
}
h2 {
font-size: 200%; /* 36px */
}
h3 {
font-size: 177.78%; /* 32px */
}
h4 {
font-size: 162.5%; /* 26px */
}
h5 {
font-size: 122%; /* 22px */
}
h6 {
font-size: 100%; /* 18px */
}
...
返回浏览器并刷新 index.html。 所有标题都将基于 <body> 元素上设置的默认 font-size 相对增加它们的 font-size。 下图显示了此更改将如何在浏览器中呈现：
通过这一步，您使用了 font-size 属性来更改网页上文本的大小。 您使用大小的设计概念为默认浏览器样式之外的内容赋予层次结构。 在下一步中，您将使用 color 属性进一步设计内容。
使用 color 属性区分文本
下一节的重点是 color CSS 属性，使用颜色来区分顺序并为内容添加意义。 颜色是最常见的设计考虑因素之一，尤其是在定义文本的不同含义时。 在本节中，您将使用 命名颜色 来设置文本颜色。 命名颜色是多年来增长的预定义颜色的集合； 它们与其他 Web 颜色值相匹配，例如十六进制颜色代码。 本节将使用 命名颜色列表 ，该列表可在 Wikipedia 页面上的 Web 颜色 上找到。 您可能希望在浏览器中保持打开 Wikipedia Web 颜色页面以供参考。
就像您对 font-size 所做的那样，您将为整个文档设置默认颜色。 这将影响页面上的所有内容，因为 color 是大多数元素的继承值。 记住颜色对比很重要，因为它有助于易读性，尤其是在使所有级别的视觉都可以访问网络时。 由于 background-color 将保持默认白色，因此使用粗体、较暗的颜色是一个很好的指导。 如果你想了解更多关于色彩对比设计的知识，观看这个主题的短视频系列。
要开始使用 color，请在文本编辑器中返回 styles.css 文件。 正如您对 font-size 部分所做的那样，找到 body 选择器并添加 color 属性。 大多数浏览器中文本的默认颜色是黑色。 对于可访问的颜色对比度，在浅色背景上保持底色较暗是很重要的。 使用命名颜色 DarkSlateGray，为了便于阅读，这里只是驼峰式大小写，但如果您愿意，可以全部小写：
样式.css
body {
font-family: "Public Sans", Verdana, sans-serif;
font-size: 18px;
color: DarkSlateGray;
}
...
保存 styles.css 文件并在浏览器中刷新 index.html。 内容的颜色将从黑色变为深蓝绿色：
现在已经设置了基本颜色，您可以开始使用其他颜色来提供更多的视觉层次。 从 styles.css 文件中的 h1 选择器开始，并添加一个值为 Indigo 的 color 属性：
样式.css
...
h1 {
font-size: 250%; /* 45px */
color: Indigo;
}
...
保存 styles.css 文件，返回浏览器并刷新 index.html。 <h1> 文本现在具有深紫色，而不是默认的深蓝绿色：
接下来，您将对其他标题应用颜色。 Quicksand 是一种有趣的圆形字体，您使用的是古怪的 Cupcake Ipsum 示例内容，因此请通过在每个标题上使用不同的颜色来创建明亮而活泼的配色方案。 返回 styles.css 并为每个航向选择器添加一个 color 属性和颜色值。 对于 h2 元素使用 MediumVioletRed，对于 h3 使用 LimeGreen，对于 h4 添加 Chocolate，对于h5 使用 Crimson，最后对于 h6 使用 DeepSky Blue：
样式.css
...
h2 {
font-size: 200%; /* 36px */
color: MediumVioletRed;
}
h3 {
font-size: 177.78%; /* 32px */
color: LimeGreen;
}
h4 {
font-size: 162.5%; /* 26px */
color: Chocolate;
}
h5 {
font-size: 122%; /* 22px */
color: Crimson;
}
h6 {
font-size: 100%; /* 18px */
color: DeepSkyBlue;
}
...
将 color 属性添加到标题后，保存 styles.css 并返回浏览器刷新 index.html。 您的内容现在充满了色彩：
通过 color 属性，您了解了 Web 颜色命名值以及如何使用颜色来提供含义。 您还使用 color 属性通过向网页内容添加彩色调色板来赋予内容个性。
结论
处理文本是为 Web 编写 CSS 的主要部分。 文本不仅通过它所说的内容传达意义，而且还通过它的外观来传达意义。 使用您通过 font-family、font-weight、font-style、font-size 和 color 属性学习的工具，您可以将文本操作为帮助为您的网站提供有意义的上下文。 这些属性不限于本文中介绍的标题：它们可以与任何包含文本的元素一起使用。
如果您想阅读更多 CSS 教程，请查看我们的 CSS 主题页面。
