当你写文档时，无论是为开源项目还是技术写作项目，你都应该有两个目标。文档应该写得很好，而且文档应该容易阅读。第一个目标可以通过清晰的写作技巧和技术编辑来实现。第二个问题可以通过对HTML文档的一些简单修改来解决。
超文本标记语言，或称HTML，是互联网的骨干。自从1994年 "万维网 "诞生以来，每个网络浏览器都使用HTML来显示文件和网站。而且，几乎在同样长的时间里，HTML一直支持样式表，它是对HTML文档的一个特殊补充，定义了文本在屏幕上的显示方式。
你可以用普通的HTML来写项目文件，这样就可以完成工作。然而，普通的HTML样式表可能会让人感觉有点稀松平常。相反，可以尝试在HTML文档中添加一些简单的样式，为文档添加一点活力，使你的文档更清晰，更容易阅读。
定义一个HTML文档
让我们从一个普通的HTML文档开始，探讨如何向它添加样式。一个空的HTML文档在顶部包含<！DOCTYPE html>的定义，然后是一个<html>块来定义文档本身。在<html>元素中，你还需要包括一个文档标题，其中包含关于文档的元数据，如标题。文档正文的内容在父<html>块内的<body>块中。
你可以用这个HTML代码定义一个空白页。
<!DOCTYPE html>
<html>
<head>
<title>This is a new document</title>
</head>
<body>
</body>
</html>
在另一篇关于[用HTML写项目文档]的文章中，我把一个开源棋盘游戏的Readme文件从纯文本更新为HTML文档，使用了一些基本的HTML标签，如<h1>和<h2>表示标题和副标题，<p>表示段落，<b>和<i>表示粗体和斜体。让我们接着那篇文章的话题。
<!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写作的技术作家所使用的几个常见的块状和内联元素。块元素在文本周围定义了一个矩形。段落和标题是块状元素的例子，因为它们从文档的左边缘延伸到右边缘。例如，<p>在一个段落周围有一个无形的矩形。相比之下，内联元素在使用它们的地方跟随文本。如果你在一个段落中的某些文本上使用<b>，只有被<b>和</b>包围的文本才会变成粗体。
你可以直接在这个文档中应用样式，以改变字体、颜色和其他文本样式，但修改文档外观的一个更有效的方法是在文档本身应用一个样式表。你可以在<head>元素中和其他元数据一起做这件事。你可以为样式表引用一个文件，但在这个例子中，使用一个<style>块来定义文档中的样式表。下面是带有空样式表的<head>。
<!DOCTYPE html>
<html>
<head>
<title>Simple Senet</title>
<style>
</style>
</head>
<body>
...
</body>
</html>
定义样式
由于你刚刚开始学习样式表，让我们来演示一个基本样式：背景色。我喜欢从背景色开始，因为它有助于演示块和内联元素。让我们应用一个有点花哨的样式表，为所有<p>段落设置浅蓝色背景，为<ul>无序列表设置浅绿色背景。对任何粗体字使用黄色背景，对任何斜体字使用粉红色背景。
你在我们的HTML文档的<style>块中使用样式定义这些。样式表使用的标记与HTML文档不同。样式的语法看起来像element { style; style; style; ... } ，并使用大括号将几个文本样式组合成一个单一的定义。
<style>
p { background-color: lightblue; }
ul { background-color: lightgreen; }
b { background-color: yellow; }
i { background-color: pink; }
</style>
请注意，每个样式都以分号结尾。
如果你在网络浏览器中查看这个HTML文档，你可以看到<p>和<ul>block元素是如何被填充成矩形的，而<b>和<i>inline元素只突出了粗体和斜体文字。这种对比色的使用可能不好看，但我认为你可以看到块状和内联元素。
应用样式
你可以使用样式来使这个自述文件更容易阅读。你刚刚开始学习样式，你会坚持使用一些简单的样式元素。
- background-color用来设置背景颜色
- color设置文本的颜色
- font-family，使用不同的文字字体
- margin-top，在一个元素上面增加空间
- margin-bottom增加元素下面的空间
- text-align可以改变文本的显示方式，如向左、向右或居中。
让我们从你的样式表开始，把这些新的样式应用到你的文档中。首先，为你的文档使用一种更悦目的字体。如果你的HTML文档没有指定字体，网络浏览器就会为你挑选一个。根据浏览器的设置，这可能是一种有衬线字体，像我截图中使用的字体，或者是一种无衬线字体。有衬线字体在每个字母上都有一个小笔划，这使得这些字体在打印时更容易阅读。无衬线字体没有这种额外的笔划，这使得文本在计算机显示器上看起来更清晰。常见的有衬线字体包括Garamond或Times New Roman。流行的无衬线字体包括Roboto和Arial。
例如，如果要将文件主体字体设置为Roboto，请使用这个样式。
body { font-family: Roboto; }
通过设置一种字体，你假设查看你文档的人也安装了这种字体。有些字体已经变得非常普遍，它们被认为是事实上的 "网络安全 "字体。这些字体包括Arial等无衬线字体和Times New Roman等衬线字体。Roboto是一种较新的字体，可能不是到处都有。因此，网页设计师通常不会只列出一种字体，而是放上一种或多种 "备用 "字体。你可以通过用逗号分隔来添加这些备用字体。例如，如果用户的系统中没有Roboto字体，你可以通过使用这个样式定义来代替使用Arial作为文本主体。
body { font-family: Roboto, Arial; }
所有的网络浏览器都定义了一个默认的有衬线字体和无衬线字体，你可以用这些名称来引用。用户可以改变他们喜欢使用的衬线字体和无衬线字体，所以不可能对每个人都一样，但在字体列表中使用衬线字体或无衬线字体通常是个好主意。通过添加该字体，至少用户可以在一定程度上了解你希望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副标题使用完全相同的字体定义。如果你想避免额外的输入，你可以使用一个样式表快捷方式，为h1和h2使用相同的样式定义。
h1, h2 { font-family: "Times New Roman", Garamond, serif; }
在编写文档时，许多技术作家喜欢将主标题放在页面的中心位置。你可以使用ext-alignon一个块元素，如h1heading，来使标题居中。
h1 { text-align: center; }
为了使粗体和斜体文字更突出，可以把它们放在稍微不同的颜色里。对于某些文件，我可能用深蓝色来表示粗体字，用深绿色来表示斜体字。这些都非常接近于黑色，但又有足够细微的差别，使颜色能够吸引读者的注意力。
b { color: darkblue; }
i { color: darkgreen; }
最后，我喜欢在我的列表元素周围添加额外的间距，以使这些元素更容易阅读。如果每个列表项只有几个字，额外的空间可能并不重要。但在我的例子中，中间的项目相当长，而且包到了第二行。多余的空间可以帮助读者更清楚地看到这个列表中的每个项目。你可以使用arginstyle来增加块元素上下的空间。
li { margin-top: 10px; margin-bottom: 10px; }
这个样式定义了一个距离，我在这里表示为10px（十像素），在每个列表元素的上方和下方。你可以用几种不同的方法来衡量距离。10个像素就是你屏幕上10个像素的空间，不管是桌面显示器、笔记本显示屏，还是手机或平板电脑屏幕。
假设你真的只是想在列表元素之间添加一个额外的空行，你也可以用em来衡量。em是一个古老的排版术语，如果你指的是左右间距，它正好是大写字母M的宽度，或者是垂直间距的大写字母M的高度。所以你可以用1em来代替写页边距样式。
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>
当在网络浏览器上浏览时，你会看到你的Readme文档是无衬线字体，标题和副标题是衬线字体。页面标题居中。粗体和斜体文字使用了一种略微不同的颜色，既能引起读者的注意，又不至于让人分心。最后，你的列表项目周围有额外的空间，使每个项目更容易阅读。
这是对技术写作中使用风格的简单介绍。在掌握了基础知识之后，你可能会对Mozilla的HTML指南感兴趣。这包括一些很好的初学者教程，这样你就可以学习如何创建自己的网页。
