如何使用CSS布局文本
作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。
介绍
文本在网页上呈现的方式决定了内容的易读性以及读者阅读内容的意愿。 网页排版，排版的艺术，就是控制内容，为读者呈现愉悦高效的阅读体验。
本教程将教您如何使用最有效地布置文本内容的 CSS 属性。 您将使用带有演示内容的 line-height、letter-spacing 和 text-transform 等属性来优化阅读，并通过突出标题来定义内容层次结构。 这些概念和方法将帮助您更好地在您的网站上展示内容。
先决条件
- 了解 CSS 的级联和特异性特性，您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity 获得。
- 类型选择器、组合选择器和选择器组的知识，您可以在 如何选择 HTML 元素以使用 CSS 设置样式 中找到这些知识。
- 在您的本地计算机上保存为
index.html的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。 要开始使用，请查看我们的 如何设置您的 HTML 项目 教程，并按照 如何使用和理解 HTML 元素 获取有关如何在浏览器中查看 HTML 的说明。 如果您是 HTML 新手，请尝试整个 如何用 HTML 构建网站系列。
设置 HTML 和 CSS 文件
在本节中，您将设置您将在整个教程中设置样式的 HTML 内容。 本教程中 HTML 的目的是为样式提供各种元素和情况。 您还将创建 CSS 文件并设置基本样式。
首先，在文本编辑器中打开 index.html 并将以下 HTML 添加到文件中：
索引.html
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
接下来，在 <head> 标签中，您将为该页面的字符集添加一个 meta 标签，为页面标题添加一个 title 元素，一个 meta 标记定义在移动设备上应如何处理页面，以及要加载的 CSS 文件：
索引.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Text Layout</title>
<meta name="viewport" content="width=device-width" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@700&display=swap" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
请注意，CSS 文件包括来自 Google Fonts 和您将在本节后面创建的 styles.css 文件中的几个字体。 如果您想了解有关如何使用 Google 字体的更多信息，请查看 如何在 CSS 中使用字体、大小和颜色设置文本元素的样式。
现在您将设置页面的 <body> 标记中包含的 HTML 内容。 此内容将包含在 <article> 中，其中将包含一个 <h1> 元素、一对 <h2> 和 <h3> 元素，以及几个 <p> 元素贯穿始终。 您将使用来自 Cupcake Ipsum 填充文本生成器的文本内容填充这些标签。 此填充内容将提供为本教程应用视觉样式所需的一切。
将 HTML 应用到您的 index.html，如以下代码块的突出显示部分所示：
索引.html
<!doctype html>
<html>
<head>
...
</head>
<body>
<article>
<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 <strong>I love fruitcake pastry</strong>. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
<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>
<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>
<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>
<h3>Apple pie pudding topping</h3>
<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>
<p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
</article>
</body>
</html>
将所有这些添加内容保存到您的 index.html 文件中，然后在您的网络浏览器中打开该文件。 在编写样式时，将 index.html 文件加载到浏览器中，以检查样式如何应用于内容：
接下来，在与 index.html 相同的目录中创建一个名为 styles.css 的文件，然后在文本编辑器中打开新文件。
您将从 Google 字体加载两个字体系列。 第一种字体将是页面的默认字体，因为它将被页面上的所有内容使用。
创建一个 body 类型选择器并使用字体堆栈 'Public Sans', sans-serif 添加一个 font-family 属性以将其设置为新的默认字体：
样式.css
body {
font-family: 'Public Sans', sans-serif;
}
这会将字体应用于 body 元素。 此示例中的所有内容都将继承该字体，无需单独声明。 字体名称是 Public Sans，它会有一个使用浏览器默认的 sans-serif 字体的备用字体。 字体应始终使用名为 字体堆栈 的逗号分隔列表的备用字体。 如果自定义字体未加载或缺少特殊字符，则备用字体提供可读选项。
接下来，标题元素 h1、h2 和 h3 将获得页面其余部分的特殊字体，称为 Quicksand。 创建由三个标题 h1, h2, h3 组成的组选择器，并应用与 body 和 Quicksand 相同的字体堆栈设置：
样式.css
body {
font-family: 'Public Sans', sans-serif;
}
h1, h2, h3 {
font-family: 'Quicksand', sans-serif;
}
保存对 styles.css 的更改并返回浏览器重新加载 index.html。 现在将加载自定义字体，如下图所示：
对于设置文件的最后一部分，请在文本编辑器中返回 styles.css 文件。 为 h1、h2、h3 和 p 元素创建单一类型选择器，为每个元素定义一个 font-size。 使用rem单位取值，设置h1为2.5rem，h2为1.875rem，h3到 1.5，以及 p 到 1.25rem：
样式.css
...
h1, h2, h3 {
font-family: 'Quicksand', sans-serif;
}
h1 {
font-size: 2.5rem; /* 40px */
}
h2 {
font-size: 1.875rem; /* 30px */
}
h3 {
font-size: 1.5rem; /* 24px */
}
p {
font-size: 1.25rem; /* 20px */
}
代码块包含一个注释，指示每个 rem 值将作为 px 单元返回的内容。 rem 单位让用户可以更好地控制将 font-size 调整到比 px 值允许的更佳比率。 有关这些单位的更多信息，请阅读 如何在 CSS 中使用常用单位。
保存对 styles.css 的更改并返回浏览器重新加载 index.html 文件。 文本字体大小将调整为类似于下图：
在本节中，您在 index.html 中设置 HTML 内容并创建了 styles.css 文件。 您将 Google 字体字体应用于 body 元素上的全局 CSS，特别是 h1、h2 和 h3 元素。 您还可以为页面上的所有文本元素设置 font-size 值。 在下一节中，您将使用 width 属性来创建更具可读性的行长。
使用 width 和 max-width 改进行长
在本节中，您将使用 width 和 max-width 属性为文本设置适当的行长。
网页排版的一个经常被忽视的方面是一行文本的显示长度。 对于需要辅助功能的用户和没有辅助功能的用户来说，一行的长度对阅读文本所需的工作量有很大的影响。 一行文本越长，读者就越有可能难以跟踪文本。 较短的文本行有助于读者浏览和浏览内容。
在文本编辑器中打开 styles.css 并编写 article 类型选择器以应用 90% 的 width 并添加 margin 属性0 auto 的值。 此组合将确保内容设置为屏幕宽度的 90% o，并且 margin 中的 auto 值将内容块保持在页面中间：
样式.css
...
article {
margin: 0 auto;
width: 90%;
}
将这些更改保存到 styles.css 并在浏览器中重新加载 index.html。 文本将居中，但文本行会很长。 请参阅下图了解它在浏览器中的显示方式：
理想的行长在 45 到 75 个字符之间，正如 Clarissa Peterson 在她的 talk on Responsive Typography 中所解释的。 超过 75 个字符，阅读器可能会开始忘记正在阅读的行。 另一方面，短于 45 个字符，阅读者的眼睛会因不断地逐行移动而感到疲劳。
可以使用称为 字符单元 的单位根据字符数设置宽度，在代码中由 ch 表示。 ch 单位由字体中零字符（0）的大小决定。 由于理想的行长在 45–75 个字符之间，您可以在该范围内设置 max-width 值，并且 article 元素在达到该大小后将停止增长。
在文本编辑器中返回 styles.css 文件，在 article 类型选择器中的 width 属性之后，添加 max-width 属性并为其赋值70ch：
样式.css
...
article {
margin: 0 auto;
width: 90%;
max-width: 70ch;
}
这意味着允许元素增长的最大宽度是该空间中使用的字体的 70 个零字符的宽度，这是在 body 元素上设置的字体。
将这些更改保存到您的 styles.css 文件并在浏览器中重新加载 index.html。 您会发现内容位于页面中心，最大宽度约为 70 个字符。 尝试调整浏览器的宽度，以观察 article 容器从 90% 宽度到最大宽度的过渡，如以下动画所示：
注意： CSS Tricks 的 Chris Coyier 创建了一个 方便的书签工具 ，它将突出显示 45 到 75 之间的字符范围，以帮助找到设置内容的最佳宽度。
在本节中，您了解到可访问性和易读性与文本内容的行长有一个共同点。 您将 width 属性与 max-width 属性一起使用，以使用 ch 单位设置将文本长度限制为 45–75 个字符的大小。 在下一节中，您将使用 line-height 属性来设置文本行之间的适当间距。
使用 line-height 属性提高可读性
您将在本节中使用 line-height 属性来扩展和收缩文本行之间的空间。 您可能会发现标题通常在行之间的空间较小，而段落文本往往有更多空间。 此间距的目标是使内容更易于阅读。 类似于文本行的宽度，如果行太靠近，读者可能会被上面或下面的行分散注意力。 另一方面，如果文本相距太远，读者的眼睛可能会厌倦跳过行与行之间的空间，并发现文本更难扫描。
在文本编辑器中打开 styles.css 文件，然后转到 body 选择器。 与 font-family 一样，您将使用 line-height 为整个文档设置行之间的默认距离。 添加 line-height 属性并给出 1.5 的值。 该值是 baselines 之间距离的度量，文本底部所在的行：
样式.css
body {
font-family: 'Public Sans', sans-serif;
line-height: 1.5;
}
...
line-height 的默认值与 normal 的关键字值相关联，它等于字体大小的 1.2。 这意味着如果 font-size 为 16px，则当设置为 normal 时，line-height 约为 19.2px。 这是一个很好的中值； 但是，段落文本通常需要更多空间，而标题有时需要更少空间。
接下来，转到以 h1, h2, h3 为目标的组选择器，并将 line-height 值设置为 1.15。 这将使行与行之间的文本更加紧密，并有助于呈现长标题。 在以下代码块中添加突出显示的行：
样式.css
...
h1, h2, h3 {
font-family: 'Quicksand', sans-serif;
line-height: 1.15;
}
...
将更改保存到 styles.css 并返回浏览器重新加载 index.html。 您会发现内容的长度会随着文本行之间的空间增加而扩大。 有关它在浏览器中的显示方式，请参见下图：
line-height 属性的值可以接受固定的单位值，以及像素 (px) 或 rem，但最好不要留下单位，因为默认行为是将值乘以 font-size。
您在本节中使用了 line-height 属性，以使页面上的内容更清晰易读，便于读者浏览。 在下一节中，您将使用 margin 属性来设置 HTML 中定义的内容类型之间定义的空间量。
使用 margin 属性进行间距
在本节中，您将使用 margin 属性以及相邻的同级选择器在文本元素之间应用不同的垂直间距。 line-height 属性控制元素中的文本行之间，margin 可用于调整内容元素之间的间距。
首先，在文本编辑器中返回 styles.css 并找到 h3 选择器。 在这种情况下，您将向元素添加间距，以便在文本上方留出更多空间，在下方留出更少空间。 这会导致它离上面的内容更远，更接近下面的内容。
添加一个值为 2em 0 0.5em 的 margin 属性。 这将应用相对于 font-size 值的间距，这意味着上边距将是 48px 处 font-size 的两倍，而下边距将是 12px 处 font-size 的一半：
样式.css
...
h3 {
font-size: 1.5rem; /* 24px */
margin: 2em 0 0.5em;
}
...
由于 margin 在元素外部起作用，因此每个元素的 margin 属性将重叠。 这意味着即使底部的 h3 margin 等于 12px，<p> 元素的边距更大，因此定义了 <h3> 之间的空间] 和 <p>。 您可以通过使用相邻的兄弟组合器来解决此问题，该组合器由两个选择器之间的加号 (+) 定义，并将样式应用于序列中的后者。
在文本编辑器的 styles.css 中创建一个新的选择器，使用相邻的兄弟组合作为 h3 + p，然后在选择器块中添加一个值为 [ 的 margin-top 属性X183X]:
样式.css
...
h3 {
font-size: 1.5rem; /* 24px */
margin: 2em 0 0.5em;
}
h3 + p {
margin-top: 0;
}
...
相邻兄弟组合器的工作方式，这意味着当浏览器有一个 <h3> 元素并且紧随其后是一个 <p> 元素时，这些样式仅应用于那个 [X205X ] 元素。 其他 <p> 元素不受影响。
将更改保存到 styles.css 并在浏览器中加载 index.html。 如下图所示，<h3> 元素上方的空间现在要大得多，<h3> 和第一个 <p> 之间的空间更近。
在本节中，您使用 margin 属性在页面元素之间应用不同的间距。 使用相邻的同级选择器，如果 <h3> 元素前面有 <p> 元素，您可以设置将应用更大间距量的条件。 在下一节中，您将使用 text-align 属性来调整文本在一行中的位置。
使用 text-align 进行有效的内容呈现
您现在将使用 text-align 属性来更改文本在一行上的放置位置。 该属性有四个值：left、right、center 和 justify。 此属性的默认值取决于浏览器的语言设置。 对于从左到右阅读的语言，left 是默认值，而从右到左阅读的语言则默认为 right。 center 属性将文本放置在文本行的中心，并在文本行的两侧留下等量的空白区域。 最后，justify 值将单词分散到容器的边缘，在单词之间留下视觉上不一致的空间。
在文本编辑器中打开 styles.css 并找到 h3 类型选择器。 添加一个值为 center 的 text-align 属性，如以下代码块的突出显示部分所示：
样式.css
...
h3 {
font-size: 1.5rem; /* 24px */
margin: 2em 0 0.5em;
text-align: center;
}
...
将更改保存到 styles.css 并在浏览器中重新加载 index.html 文件。 两个 h3 级别标题的内容现在位于各自部分上方的中心。 有关它在浏览器中的显示方式，请参见下图：
最好将 text-align 属性设置为默认值，因为这最适合用户及其设置。 但是，更改对齐值有助于更好地区分某些文本或提供更好的美感。
您在本节中使用 text-align 将文本内容置于其容器中的中心。 您还了解了如何以及何时使用 text-align 属性可用的其他值。 在下一节中，您将使用 text-transform 和 letter-spacing 属性来创建视觉个性，同时仍然保持文本可读性并保持有效的层次结构。
使用 letter-spacing 和 text-transform
接下来，您将使用 text-transform 属性和 letter-spacing 属性来调整标题文本的显示方式。 text-transform 属性控制文本大小写的格式，提供将文本更改为 uppercase、lowercase 或 capitalize 的选项，它将首字母大写每个字。 letter-spacing 属性是每个字符之间的空格值。 这两个属性一起可以创造出一种清晰且突出的美学。
通过在文本编辑器中打开 styles.css 并转到 h1 类型选择器，从 text-transform 属性开始。 由于此标题是整篇文章的标题，因此具有标题大小写格式是有意义的。
添加一个值为 capitalize 的 text-transform 属性。 该值将大写每个单词的第一个字母，无论它是否在 HTML 中大写：
样式.css
...
h1 {
font-size: 2.5rem; /* 40px */
text-transform: capitalize;
}
...
将此添加保存到您的 styles.css 文件中，然后在浏览器中打开 index.html。 标题副本现在将每个单词的第一个字母大写，如下图所示。
接下来，在文本编辑器中返回 styles.css 文件并找到 h3 类型选择器。 这次您将通过添加值为 uppercase 的 text-transform 属性将 h3 样式设置为每个单词中的全部大写字母。 将以下代码块的突出显示行添加到您的 styles.css 文件中：
样式.css
...
h3 {
font-size: 1.5rem; /* 24px */
margin: 2em 0 0.5em;
text-align: center;
text-transform: uppercase;
}
...
进行此更改后，保存 styles.css，然后在浏览器中刷新 index.html。 h3 内容现在将全部大写，无论它是如何在 HTML 中编写的。 有关它在浏览器中的显示方式，请参见下图：
注意： 使用 CSS 将大写样式应用于内容时，会影响屏幕阅读器对内容的解释方式。 例如，使用 macOS 上的 Voice Over，由 CSS 设置为大写的三字母单词将被读取为首字母缩略词而不是单词。 使用这种样式方法时，将 aria-label 属性应用于 HTML 元素以及如何阅读内容会很有帮助。
既然文本都是大写的，从视觉上看，为了设计的美感，文本感觉有点挤在一起。 接下来，使用 letter-spacing 属性在每个字符之间添加 0.125em 间距。 请参阅以下代码块中突出显示的代码：
样式.css
...
h3 {
font-size: 1.5rem; /* 24px */
margin: 2em 0 0.5em;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.125em;
}
...
在 letter-spacing 属性上使用 em 单位允许字符之间的间距与 font-size 成比例。 0.125em 将间距保持在字体高度的八分之一。
保存对 styles.css 的更改并在浏览器中重新加载 index.html 以呈现对 h3 内容的更改。 看看下图中的样子：
在本节中，您使用了 text-transform 属性来更改 <h1> 元素的样式，以将每个单词的首字母大写。 您还使用了 text-transform 和 letter-spacing 属性来更改 <h3> 元素，以使所有大写单词与字符分开。 在上一节中，您将使用 font 属性将多个属性压缩为一个。
使用 font 速记
在最后一节中，您将使用 font 属性将多个属性压缩为一个属性。 font 属性在全局定义多个与文本相关的值时很有用，并放置在级联中的较高级别。 请注意，使用 font 速记将覆盖它包含的各个属性。
首先，在文本编辑器中返回 styles.css 文件并转到 body 选择器。 这里 font-family 和 line-height 属性可以压缩为 font 简写属性。 但是，font 速记要求同时存在 font-size 和 font-family 值。 这意味着除了 line-height 和 font-family 值之外，还添加一个 font-size 值。 请参阅以下代码块的突出显示部分，了解如何写出来：
样式.css
body {
font: 1em/1.5 'Public Sans', sans-serif;
}
...
请注意，在 1em 的 font-size 值和 1.5 的 line-height 值之间有一个正斜杠 (/)。 这是使用 font 速记属性设置 line-height 值的唯一方法，它必须位于 font-size 值之后。 font-size 值设置为 1em，因为这是破坏性最小的值，并且不管文档的值如何，都会继承文档的默认 font-size。 此外，font 属性简写接受 font-stretch、font-style、 font-variant 和 font-weight 属性的值。
请务必在文本编辑器中保存对 styles.css 的更改。 在浏览器中重新加载 index.html 并确认没有视觉变化。 由于速记属性将现有属性组合成单个属性，因此不会更改样式。
在本教程的最后一部分中，您使用了 font 属性将多个属性合并为一个，从而压缩了 CSS 的大小。 此属性虽然非常有用，但必须考虑使用，因为它可能需要重新定义属性，因为它的覆盖范围很广。
结论
可读的文本布局可以标记有效和无效设计之间的区别。 布局文本是在文本行、单词和块之间提供足够空间以以不显眼的方式呈现内容的主观平衡。 处理文本时，糟糕的布局会妨碍读者理解内容。 考虑到这些属性及其用途，您将制作出可读性强的内容。
如果您想阅读更多 CSS 教程，请尝试 如何使用 CSS 设置 HTML 样式系列 中的其他教程。
