使用 CSS 提升你的 HTML 文檔
當(dāng)你編寫文檔時(shí)，無論是為開源項(xiàng)目還是技術(shù)寫作項(xiàng)目，你都應(yīng)該有兩個(gè)目標(biāo)：文檔應(yīng)該寫得好，同時(shí)要易于閱讀。前者通過清晰的寫作技巧和技術(shù)編輯來解決。第二個(gè)目標(biāo)可以通過對 HTML 文檔進(jìn)行一些簡單的更改來解決。
超文本標(biāo)記語言（HTML）是互聯(lián)網(wǎng)的支柱。自 1994 年“萬維網(wǎng)”問世以來，所有網(wǎng)絡(luò)瀏覽器都使用 HTML 來顯示文檔和網(wǎng)站。幾乎與此同時(shí)，HTML 一直支持樣式表，它是對 HTML 文檔的一種特殊添加，用于定義文本在屏幕上的呈現(xiàn)方式。
單純用 HTML 編寫項(xiàng)目文檔也是可以的。然而，純 HTML 樣式可能感覺有點(diǎn)簡陋。因此，嘗試向 HTML 文檔添加一些簡單的樣式，為文檔添加一點(diǎn)活力，并使文檔更清晰、更易于閱讀。
定義一個(gè) HTML 文檔
讓我們從一個(gè)純 HTML 文檔開始，探索如何向其添加樣式。一個(gè)空的 HTML 文檔在頂部包含 ??<!DOCTYPE html>??? 定義，后面跟著一個(gè) ??<html>??? 塊來定義文檔本身。 在 ??<html>??? 元素中，你還需要加上一個(gè)文檔標(biāo)頭，其中包含有關(guān)文檔的元數(shù)據(jù)，例如標(biāo)題。文檔正文的內(nèi)容放在父 ??<html>??? 塊內(nèi)的 ??<body>?? 塊中。
你可以使用以下 HTML 代碼定義一個(gè)空白頁面：
在另一篇關(guān)于 ??用 HTML 編寫項(xiàng)目文檔??? 的文章中，我將一個(gè)開源棋盤游戲的自述文件從純文本更新為 HTML 文檔，并使用一些基本的 HTML 標(biāo)記，如 ??<h1>??? 和 ??<h2>??? 作為標(biāo)題和副標(biāo)題，??<p>??? 用于段落，??<b>??? 和 ??<i>?? 用于粗體和斜體文本。讓我們從那篇文章結(jié)束的地方繼續(xù)講：
此 HTML 文檔演示了利用 HTML 的技術(shù)寫作者經(jīng)常使用的一些塊和內(nèi)聯(lián)元素。塊元素在圍繞文本定義一個(gè)矩形。段落和標(biāo)題就是塊元素，因?yàn)樗鼈儚奈臋n的左邊緣延伸到右邊緣。例如，??<p>??? 在段落周圍包含一個(gè)不可見的矩形。相比之下，內(nèi)聯(lián)元素的使用則緊跟在它們包圍的文本。如果你在段落中的某些文本上使用 ??<b>???，則只有被 ??<b>??? 和 ??</b>?? 包圍的文本會變?yōu)榇煮w。
你可以將直接樣式應(yīng)用于此文檔以更改字體、顏色和其他文本樣式，但修改文檔外觀的更有效方法是將樣式表應(yīng)用于文檔本身。你可以在 ??<head>??? 元素中使用其他元數(shù)據(jù)執(zhí)行此操作。你可以為樣式表引用文件，但在這個(gè)例子中，我使用 ??<style>??? 塊在文檔中定義樣式表。以下是帶有空樣式表的 ??<head>?? ：
定義樣式
由于你剛剛開始學(xué)習(xí)樣式表，因此這里先演示一種基本樣式：背景色。我喜歡從背景顏色開始，因?yàn)樗兄谘菔緣K和內(nèi)聯(lián)元素。讓我們應(yīng)用一個(gè)有點(diǎn)華麗的樣式表，為所有 ??<p>?? 段落設(shè)置淺藍(lán)色背景顏色，為 ??<ul>?? 無序列表設(shè)置淺綠色背景。對任何粗體文本使用黃色背景，對任何斜體文本使用粉紅色背景。
你可以在 HTML 文檔的 ??<style>??? 塊中使用樣式來定義這些樣式。樣式表使用與 HTML 文檔不同的標(biāo)記。樣式語法看起來像 ??element { style; style; style; ... }?? 并使用花括號將多種文本樣式組合到一個(gè)定義中。
請注意，每個(gè)樣式都以分號結(jié)尾。
如果在網(wǎng)頁瀏覽器中查看此 HTML 文檔，你可以看到 ??<p>??? 和 ??<ul>??? 塊元素如何填充為矩形，而 ??<b>??? 和 ??<i>?? 內(nèi)聯(lián)元素僅突出顯示粗體和斜體文本。 這種對比色的使用可能看起來不太好看，但我想你可以清楚看到塊和內(nèi)聯(lián)元素：
辣眼睛！但是這些顏色確實(shí)能幫助我么更好地看出塊和內(nèi)聯(lián)元素的區(qū)別。
應(yīng)用樣式
你可以使用樣式使這個(gè)自述文件更易于閱讀。 因?yàn)槟銊倓傞_始學(xué)習(xí)樣式，還是先只用一些簡單的樣式元素：
- ?
?background-color?? 設(shè)置背景顏色 - ?
?color?? 設(shè)置文字顏色 - ?
?font-family?? 使用不同的文本字體 - ?
?margin-top?? 在元素上方添加空間 - ?
?margin-bottom?? 在元素下方添加空間 - ?
?text-align?? 改變文本的對齊方式，例如靠左、靠右或居中
讓我們重新開始你的樣式表并將這些新樣式應(yīng)用到文檔中。首先，在文檔中使用更令人愉悅的字體。如果你的 HTML 文檔沒有指定字體，網(wǎng)絡(luò)瀏覽器會為你選擇一種。根據(jù)瀏覽器的設(shè)置方式，這可能是襯線字體（如我的屏幕截圖中使用的字體）或無襯線字體。襯線字體在每個(gè)字母上添加了一個(gè)小筆畫，這樣在打印時(shí)更容易閱讀。無襯線字體缺少這種額外的筆劃，這使得文本在計(jì)算機(jī)顯示器上顯得更清晰。常見的襯線字體包括 Garamond 或 Times New Roman。 流行的無襯線字體包括 Roboto 和 Arial。
例如，要將文檔正文字體設(shè)置為 Roboto，你可以使用以下樣式：
通過設(shè)置字體，你假設(shè)查看文檔的人也安裝了該字體。有些字體已經(jīng)十分常見，以至于它們被認(rèn)為是事實(shí)上的“網(wǎng)頁安全”字體。 這些字體包括 Arial 等無襯線字體和 Times New Roman 等襯線字體。Roboto 是一種較新的字體，可能還無法隨處可用。因此，網(wǎng)頁設(shè)計(jì)師通常不會只列出一種字體，而是設(shè)置一種或多種“備用”字體。你可以通過用逗號分隔來添加這些替代字體。 例如，如果用戶的系統(tǒng)上沒有 Roboto 字體，你可以使用以下樣式定義將 Arial 字體用作文本正文：
所有網(wǎng)絡(luò)瀏覽器都定義了默認(rèn)的襯線和無襯線字體，你可以使用這些名稱來引用它們。用戶可以更改他們喜歡用于顯示襯線和無襯線的字體，因此不太可能對每個(gè)人都一樣，但在字體列表中使用 ??serif??? 或 ??sans-serif?? 通常是個(gè)好主意。通過添加該字體，至少用戶可以大致了解你希望 HTML 文檔的呈現(xiàn)方式：
如果字體名稱不止一個(gè)單詞，則你必須在其兩邊加上引號。HTML 允許你在此處使用單引號或雙引號。 為標(biāo)題和副標(biāo)題定義一些襯線字體，包括 Times New Roman：
請注意，H1 標(biāo)題和 H2 副標(biāo)題使用完全相同的字體定義。如果你想避免無謂的打字，可以使用樣式表快捷方式為 H1 和 22 使用相同的樣式定義：
在編寫文檔時(shí)，許多技術(shù)作者更喜歡將主標(biāo)題放在頁面的中央。你可以在塊元素（例如 H1 標(biāo)題）上使用 ??text-align?? 來使標(biāo)題居中：
為了讓粗體和斜體文本更突出，請將它們置于稍微不同的顏色中。對于某些文檔，我可能會使用深藍(lán)表示粗體文本，使用深綠表示斜體文本。這些顏色非常接近黑色，但顏色的細(xì)微差別足以吸引讀者的注意力。
最后，我更喜歡在我的列表元素周圍添加額外的間距，以使它們更易于閱讀。如果每個(gè)列表項(xiàng)只有幾個(gè)詞，額外的空間可能無關(guān)緊要。但是我的示例文本中的中間項(xiàng)很長，可以換到第二行。 額外的空間有助于讀者更清楚地看到此列表中的每個(gè)項(xiàng)目。 你可以使用邊距樣式在塊元素上方和下方添加空間：
這種樣式定義了一個(gè)距離，此處我將其指定為每個(gè)列表元素上方和下方的 10px（十個(gè)像素）。 你可以使用多種不同的距離度量。十像素實(shí)際上就是屏幕上十個(gè)像素的空間，無論是臺式機(jī)顯示器、筆記本電腦顯示屏，還是手機(jī)或平板電腦屏幕。
假設(shè)你真的只是想在列表元素之間添加一個(gè)額外的空行，你也可以使用 ??em??? 來測量。??em??? 是一個(gè)舊的排版術(shù)語，如果你指的是左右間距，它就是大寫 ??M??? 的寬度，或者對于垂直間距，就是大寫 ??M?? 的高度。所以你可以改用 1em 來寫邊距樣式：
HTML 文檔中的完整樣式列表如下所示：
在網(wǎng)頁瀏覽器上查看時(shí)，你會看到采用無襯線字體的自述文件，標(biāo)題和副標(biāo)題使用襯線字體。 頁面標(biāo)題居中。粗體和斜體文本使用略有不同的顏色來吸引讀者的注意力而不會分散注意力。 最后，列表項(xiàng)周圍有額外的空間，使每個(gè)項(xiàng)目更易于閱讀。
通過添加一些樣式，我們使這個(gè)自述文件更易于閱讀。
這是在技術(shù)寫作中使用樣式的簡單介紹。掌握了基礎(chǔ)知識后，你可能會對 ??Mozilla 的 HTML 指南?? 感興趣。它包括一些很棒的初學(xué)者教程，因此你可以學(xué)習(xí)如何創(chuàng)建自己的網(wǎng)頁。
有關(guān) CSS 樣式的更多信息，我推薦 ??Mozilla 的 CSS 指南??。
（題圖： MJ:web internet traffic design）
