当您编写文档时，无论是为开源项目还是技术写作项目，您都应该有两个目标：文档应该写得好，并且文档应该易于阅读。第一个目标可以通过清晰的写作技巧和技术编辑来实现。第二个目标可以通过对 HTML 文档进行一些简单的更改来实现。
超文本标记语言（HTML）是互联网的基石。自 1994 年“万维网”诞生以来，每个 Web 浏览器都使用 HTML 来显示文档和网站。几乎从那时起，HTML 就开始支持样式表，这是一种 HTML 文档的特殊附加功能，用于定义文本在屏幕上的显示方式。
您可以使用纯 HTML 编写项目文档，这可以完成工作。但是，纯 HTML 样式可能会让人感觉有些简陋。相反，尝试向 HTML 文档添加一些简单的样式，为文档增添一些活力，并使您的文档更清晰易读。
定义 HTML 文档
让我们从一个纯 HTML 文档开始，探索如何向其添加样式。一个空的 HTML 文档包含
块中。
<!DOCTYPE html>
<html>
<head>
<title>This is a new document</title>
</head>
<body>
</body>
</html>在另一篇关于 使用 HTML 编写项目文档 的文章中，我将一个开源棋盘游戏的 Readme 文件从纯文本更新为 HTML 文档，使用了几个基本的 HTML 标签，例如
<!DOCTYPE html>
<html>
<head>
<title>Simple Senet</title>
</head>
<body>
<h1>Simple Senet</h1>
<h2>How to Play</h2>
<p>The game will automatically "throw" the throwing sticks
for you, and display the results in the lower-right corner
of the screen.</p>
<p>If the "throw" is zero, then you lose your turn.</p>
<p>When it's your turn, the game will automatically select
your first piece on the board. You may or may not be
able to make a move with this piece, so select your piece
to move, and hit <i>Space</i> (or <i>Enter</i>) to move
it. You can select using several different methods:</p>
<ul>
<li><i>Up</i>/<i>down</i>/<i>left</i>/<i>right</i> to
navigate to a specific square.</li>
<li>Plus (<b>+</b>) or minus (<b>-</b>) to navigate "left"
and "right" on the board. Note that this will automatically
follow the "backwards S" shape of the board.</li>
<li><em>Tab</em> to select your next piece on the
board.</li>
</ul>
<p>To quit the game at any time, press <b>Q</b> (uppercase
Q) or hit <i>Esc</i>, and the game will prompt if you want
to forfeit the game.</p>
<p>You win if you move all of your pieces off the board
before your opponent. It takes a combination of luck and
strategy!</p>
</body>
</html>此 HTML 文档演示了技术作者在使用 HTML 编写时常用的一些块级元素和内联元素。块级元素在文本周围定义一个矩形。段落和标题是块级元素的示例，因为它们从文档的左边缘延伸到右边缘。例如，
您可以将直接样式应用于此文档以更改字体、颜色和其他文本样式，但修改文档外观的更有效方法是将样式表应用于文档本身。您可以在
<!DOCTYPE html>
<html>
<head>
<title>Simple Senet</title>
<style>
</style>
</head>
<body>
...
</body>
</html>定义样式
由于您刚刚开始学习样式表，让我们演示一个基本样式：背景颜色。我喜欢从背景颜色开始，因为它有助于演示块级元素和内联元素。让我们应用一个有点俗气的样式表，为所有
您可以使用 HTML 文档的element { style; style; style; ... }，并使用花括号将多个文本样式组合成一个定义。
<style>
p { background-color: lightblue; }
ul { background-color: lightgreen; }
b { background-color: yellow; }
i { background-color: pink; }
</style>请注意，每个样式都以分号结尾。
如果您在 Web 浏览器中查看此 HTML 文档，您可以看到
（Jim Hall，CC BY-SA 4.0）
应用样式
您可以使用样式使此 Readme 文档更易于阅读。您刚刚开始学习样式，您将坚持使用一些简单的样式元素
- background-color 设置背景颜色
- color 设置文本颜色
- font-family 使用不同的文本字体
- margin-top 在元素上方添加空间
- margin-bottom 在元素下方添加空间
- text-align 更改文本的显示方式，例如左对齐、右对齐或居中对齐
让我们从您的样式表重新开始，并将这些新样式应用于您的文档。首先，为您的文档使用更美观的字体。如果您的 HTML 文档未指定字体，则 Web 浏览器会为您选择一种字体。根据浏览器的设置方式，这可能是衬线字体（如我的屏幕截图中使用的字体）或非衬线字体。衬线字体在每个字母上添加了一个小笔画，这使得这些字体在印刷品中更容易阅读。非衬线字体缺少这种额外的笔画，这使得文本在计算机显示器上显得更清晰。常见的衬线字体包括 Garamond 或 Times New Roman。流行的非衬线字体包括 Roboto 和 Arial。
例如，要将文档正文字体设置为 Roboto，请使用以下样式
body { font-family: Roboto; }通过设置字体，您假设查看您文档的人也安装了该字体。某些字体已变得非常常见，以至于被认为是事实上的“Web 安全”字体。其中包括 Arial 等非衬线字体和 Times New Roman 等衬线字体。Roboto 是一种较新的字体，可能并非在所有地方都可用。因此，Web 设计师通常不会只列出一种字体，而是会放置一种或多种“备用”字体。您可以使用逗号分隔这些备用字体来添加它们。例如，如果用户的系统上没有 Roboto 字体，您可以改用 Arial 作为文本正文，方法是使用以下样式定义
body { font-family: Roboto, Arial; }所有 Web 浏览器都定义了一个默认的衬线字体和非衬线字体，您可以使用这些名称来引用它们。用户可以更改他们首选用于衬线字体和非衬线字体的字体，因此对于每个人来说不太可能相同，但在字体列表中使用 serif 或 sans-serif 通常是一个好主意。通过添加该字体，至少用户可以大致了解您希望 HTML 文档的显示方式
body { font-family: Roboto, Arial, sans-serif; }如果您的字体名称超过一个单词，则必须将其用引号引起来。HTML 允许您在此处使用单引号或双引号。为标题和副标题定义一些衬线字体，包括 Times New Roman
h1 { font-family: "Times New Roman", Garamond, serif; }
h2 { font-family: "Times New Roman", Garamond, serif; }请注意，
h1, h2 { font-family: "Times New Roman", Garamond, serif; }在编写文档时，许多技术作者喜欢将主标题居中放在页面上。您可以在块级元素（例如
h1 { text-align: center; }为了帮助粗体和斜体文本突出显示，请将它们放在略微不同的颜色中。对于某些文档，我可能会使用深蓝色表示粗体文本，使用深绿色表示斜体文本。这些颜色非常接近黑色，但只有细微的差别，足以吸引读者的注意力。
b { color: darkblue; }
i { color: darkgreen; }最后，我更喜欢在列表元素周围添加额外的间距，以使它们更易于阅读。如果每个列表项只有几个字，则额外的空间可能无关紧要。但是，我的示例文本中的中间项目非常长，并换行到第二行。额外的空间有助于读者更清楚地看到此列表中的每个项目。您可以使用
li { margin-top: 10px; margin-bottom: 10px; }此样式定义了一个距离，我在此处将其指示为
假设您真的只想在列表元素之间添加一个额外的空行，您也可以使用
li { margin-top: 1em; margin-bottom: 1em; } HTML 文档中的完整样式列表如下所示
<!DOCTYPE html>
<html>
<head>
<title>Simple Senet</title>
<style>
body { font-family: Roboto, Arial, sans-serif; }
h1, h2 { font-family: "Times New Roman", Garamond, serif; }
h1 { text-align: center; }
b { color: darkblue; }
i { color: darkgreen; }
li { margin-top: 1em; margin-bottom: 1em; }
</style>
</head>
<body>
<h1>Simple Senet</h1>
<h2>How to Play</h2>
<p>The game will automatically "throw" the throwing sticks
for you, and display the results in the lower-right corner
of the screen.</p>
<p>If the "throw" is zero, then you lose your turn.</p>
<p>When it's your turn, the game will automatically select
your first piece on the board. You may or may not be
able to make a move with this piece, so select your piece
to move, and hit <i>Space</i> (or <i>Enter</i>) to move
it. You can select using several different methods:</p>
<ul>
<li><i>Up</i>/<i>down</i>/<i>left</i>/<i>right</i> to
navigate to a specific square.</li>
<li>Plus (<b>+</b>) or minus (<b>-</b>) to navigate "left"
and "right" on the board. Note that this will automatically
follow the "backwards S" shape of the board.</li>
<li><em>Tab</em> to select your next piece on the
board.</li>
</ul>
<p>To quit the game at any time, press <b>Q</b> (uppercase
Q) or hit <i>Esc</i>, and the game will prompt if you want
to forfeit the game.</p>
<p>You win if you move all of your pieces off the board
before your opponent. It takes a combination of luck and
strategy!</p>
</body>
</html>在 Web 浏览器上查看时，您会看到您的 Readme 文档采用非衬线字体，标题和副标题采用衬线字体。页面标题居中。粗体和斜体文本使用略微不同的颜色，可以在不分散注意力的情况下引起读者的注意。最后，您的列表项周围有额外的空间，使每个项目更易于阅读。
（Jim Hall，CC BY-SA 4.0）
这只是技术写作中使用样式的简单介绍。掌握了基础知识后，您可能会对 Mozilla 的 HTML 指南 感兴趣。其中包括一些很棒的初学者教程，因此您可以学习如何创建自己的网页。
有关 CSS 样式工作原理的更多信息，我推荐 Mozilla 的 CSS 指南。
评论已关闭。