使用 CSS 提升你的 HTML 文檔

作者：Jim Hall 2023-04-14 19:19:09

使用 CSS 讓你的 HTML 項(xiàng)目更具風(fēng)格。

當(dāng)你編寫文檔時(shí)，無論是為開源項(xiàng)目還是技術(shù)寫作項(xiàng)目，你都應(yīng)該有兩個(gè)目標(biāo)：文檔應(yīng)該寫得好，同時(shí)要易于閱讀。前者通過清晰的寫作技巧和技術(shù)編輯來解決。第二個(gè)目標(biāo)可以通過對(duì) HTML 文檔進(jìn)行一些簡(jiǎn)單的更改來解決。

超文本標(biāo)記語(yǔ)言（HTML）是互聯(lián)網(wǎng)的支柱。自 1994 年“萬維網(wǎng)”問世以來，所有網(wǎng)絡(luò)瀏覽器都使用 HTML 來顯示文檔和網(wǎng)站。幾乎與此同時(shí)，HTML 一直支持樣式表，它是對(duì) HTML 文檔的一種特殊添加，用于定義文本在屏幕上的呈現(xiàn)方式。

單純用 HTML 編寫項(xiàng)目文檔也是可以的。然而，純 HTML 樣式可能感覺有點(diǎn)簡(jiǎn)陋。因此，嘗試向 HTML 文檔添加一些簡(jiǎn)單的樣式，為文檔添加一點(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è)空白頁(yè)面：

<!DOCTYPE html>
<html>
  <head>
    <title>這是一個(gè)新文檔</title>
  </head>
  <body>
  </body>
</html>

在另一篇關(guān)于 ??用 HTML 編寫項(xiàng)目文檔??? 的文章中，我將一個(gè)開源棋盤游戲的自述文件從純文本更新為 HTML 文檔，并使用一些基本的 HTML 標(biāo)記，如 ??<h1>??? 和 ??<h2>??? 作為標(biāo)題和副標(biāo)題，??<p>??? 用于段落，??<b>??? 和 ??<i>?? 用于粗體和斜體文本。讓我們從那篇文章結(jié)束的地方繼續(xù)講：

<!DOCTYPE html>
<html>
  <head>
    <title>簡(jiǎn)易 Senet</title>
  </head>
  <body>
    <h1>簡(jiǎn)易 Senet</h1>
    <h2>游戲玩法</h2>
    <p>游戲會(huì)自動(dòng)為你“投擲”投擲棒，并在屏幕右下角顯示結(jié)果。</p>
    <p>如果“投擲”結(jié)果為零，你失去本輪機(jī)會(huì)。</p>
    <p>輪到你的時(shí)候，游戲會(huì)自動(dòng)選擇
    你在棋盤上的第一塊棋子。 你不一定
    能夠用這個(gè)棋子走棋，所以選擇你的棋子
    移動(dòng)，然后按 <i>Space</i>（或 <i>Enter</i>）移動(dòng)
    它。 你可以通過幾種不同的方法進(jìn)行選擇：</p>
    <ul>
      <li><i>向上</i>/<i>向下</i>/<i>向左</i>/<i>向右</i> to
      朝特定方塊移動(dòng)。</li>
      <li>加號(hào) (<b>+</b>) 或減號(hào) (<b>-</b>) 使棋子在棋盤上向“左”或向“右”移動(dòng)。
      請(qǐng)注意，它們會(huì)自動(dòng)遵循棋盤的“倒過來的 S”方向移動(dòng)。</li>
      <li><em>Tab</em>在棋盤上選擇下一個(gè)你想要移動(dòng)的棋子。</li>
    </ul>
    <p>要隨時(shí)退出游戲，請(qǐng)按 <b>Q</b>（大寫
    Q）或按 <i>Esc</i>，這樣游戲會(huì)提示你是否想要
    放棄比賽。</p>
    <p>如果你比對(duì)手更快將所有棋子移出棋盤，你就贏得了比賽。
    這同時(shí)需要運(yùn)氣和游戲策略！</p>
  </body>
</html>

此 HTML 文檔演示了利用 HTML 的技術(shù)寫作者經(jīng)常使用的一些塊和內(nèi)聯(lián)元素。塊元素在圍繞文本定義一個(gè)矩形。段落和標(biāo)題就是塊元素，因?yàn)樗鼈儚奈臋n的左邊緣延伸到右邊緣。例如，??<p>??? 在段落周圍包含一個(gè)不可見的矩形。相比之下，內(nèi)聯(lián)元素的使用則緊跟在它們包圍的文本。如果你在段落中的某些文本上使用 ??<b>???，則只有被 ??<b>??? 和 ??</b>?? 包圍的文本會(huì)變?yōu)榇煮w。

你可以將直接樣式應(yīng)用于此文檔以更改字體、顏色和其他文本樣式，但修改文檔外觀的更有效方法是將樣式表應(yīng)用于文檔本身。你可以在 ??<head>??? 元素中使用其他元數(shù)據(jù)執(zhí)行此操作。你可以為樣式表引用文件，但在這個(gè)例子中，我使用 ??<style>??? 塊在文檔中定義樣式表。以下是帶有空樣式表的 ??<head>?? ：

<!DOCTYPE html>
<html>
  <head>
    <title>簡(jiǎn)易 Senet</title>
    <style>
    </style>
  </head>
  <body>
    ...
  </body>
</html>

定義樣式

由于你剛剛開始學(xué)習(xí)樣式表，因此這里先演示一種基本樣式：背景色。我喜歡從背景顏色開始，因?yàn)樗兄谘菔緣K和內(nèi)聯(lián)元素。讓我們應(yīng)用一個(gè)有點(diǎn)華麗的樣式表，為所有 ??<p>?? 段落設(shè)置淺藍(lán)色背景顏色，為 ??<ul>?? 無序列表設(shè)置淺綠色背景。對(duì)任何粗體文本使用黃色背景，對(duì)任何斜體文本使用粉紅色背景。

你可以在 HTML 文檔的 ??<style>??? 塊中使用樣式來定義這些樣式。樣式表使用與 HTML 文檔不同的標(biāo)記。樣式語(yǔ)法看起來像 ??element { style; style; style; ... }?? 并使用花括號(hào)將多種文本樣式組合到一個(gè)定義中。

<style>
p { background-color: lightblue; }
ul { background-color: lightgreen; }
b { background-color: yellow; }
i { background-color: pink; }
    </style>

請(qǐng)注意，每個(gè)樣式都以分號(hào)結(jié)尾。

如果在網(wǎng)頁(yè)瀏覽器中查看此 HTML 文檔，你可以看到 ??<p>??? 和 ??<ul>??? 塊元素如何填充為矩形，而 ??<b>??? 和 ??<i>?? 內(nèi)聯(lián)元素僅突出顯示粗體和斜體文本。這種對(duì)比色的使用可能看起來不太好看，但我想你可以清楚看到塊和內(nèi)聯(lián)元素：

辣眼睛！但是這些顏色確實(shí)能幫助我么更好地看出塊和內(nèi)聯(lián)元素的區(qū)別。

辣眼睛！但是這些顏色確實(shí)能幫助我么更好地看出塊和內(nèi)聯(lián)元素的區(qū)別。

應(yīng)用樣式

你可以使用樣式使這個(gè)自述文件更易于閱讀。因?yàn)槟銊倓傞_始學(xué)習(xí)樣式，還是先只用一些簡(jiǎn)單的樣式元素：

??background-color?? 設(shè)置背景顏色
??color?? 設(shè)置文字顏色
??font-family?? 使用不同的文本字體
??margin-top?? 在元素上方添加空間
??margin-bottom?? 在元素下方添加空間
??text-align?? 改變文本的對(duì)齊方式，例如靠左、靠右或居中

讓我們重新開始你的樣式表并將這些新樣式應(yīng)用到文檔中。首先，在文檔中使用更令人愉悅的字體。如果你的 HTML 文檔沒有指定字體，網(wǎng)絡(luò)瀏覽器會(huì)為你選擇一種。根據(jù)瀏覽器的設(shè)置方式，這可能是襯線字體（如我的屏幕截圖中使用的字體）或無襯線字體。襯線字體在每個(gè)字母上添加了一個(gè)小筆畫，這樣在打印時(shí)更容易閱讀。無襯線字體缺少這種額外的筆劃，這使得文本在計(jì)算機(jī)顯示器上顯得更清晰。常見的襯線字體包括 Garamond 或 Times New Roman。流行的無襯線字體包括 Roboto 和 Arial。

例如，要將文檔正文字體設(shè)置為 Roboto，你可以使用以下樣式：

body { font-family: Roboto; }

通過設(shè)置字體，你假設(shè)查看文檔的人也安裝了該字體。有些字體已經(jīng)十分常見，以至于它們被認(rèn)為是事實(shí)上的“網(wǎng)頁(yè)安全”字體。這些字體包括 Arial 等無襯線字體和 Times New Roman 等襯線字體。Roboto 是一種較新的字體，可能還無法隨處可用。因此，網(wǎng)頁(yè)設(shè)計(jì)師通常不會(huì)只列出一種字體，而是設(shè)置一種或多種“備用”字體。你可以通過用逗號(hào)分隔來添加這些替代字體。例如，如果用戶的系統(tǒng)上沒有 Roboto 字體，你可以使用以下樣式定義將 Arial 字體用作文本正文：

body { font-family: Roboto, Arial; }

所有網(wǎng)絡(luò)瀏覽器都定義了默認(rèn)的襯線和無襯線字體，你可以使用這些名稱來引用它們。用戶可以更改他們喜歡用于顯示襯線和無襯線的字體，因此不太可能對(duì)每個(gè)人都一樣，但在字體列表中使用 ??serif??? 或 ??sans-serif?? 通常是個(gè)好主意。通過添加該字體，至少用戶可以大致了解你希望 HTML 文檔的呈現(xiàn)方式：

body { font-family: Roboto, Arial, sans-serif; }

如果字體名稱不止一個(gè)單詞，則你必須在其兩邊加上引號(hào)。HTML 允許你在此處使用單引號(hào)或雙引號(hào)。為標(biāo)題和副標(biāo)題定義一些襯線字體，包括 Times New Roman：

h1 { font-family: "Times New Roman", Garamond, serif; }
h2 { font-family: "Times New Roman", Garamond, serif; }

請(qǐng)注意，H1 標(biāo)題和 H2 副標(biāo)題使用完全相同的字體定義。如果你想避免無謂的打字，可以使用樣式表快捷方式為 H1 和 22 使用相同的樣式定義：

h1, h2 { font-family: "Times New Roman", Garamond, serif; }

在編寫文檔時(shí)，許多技術(shù)作者更喜歡將主標(biāo)題放在頁(yè)面的中央。你可以在塊元素（例如 H1 標(biāo)題）上使用 ??text-align?? 來使標(biāo)題居中：

h1 { text-align: center; }

為了讓粗體和斜體文本更突出，請(qǐng)將它們置于稍微不同的顏色中。對(duì)于某些文檔，我可能會(huì)使用深藍(lán)表示粗體文本，使用深綠表示斜體文本。這些顏色非常接近黑色，但顏色的細(xì)微差別足以吸引讀者的注意力。

b { color: darkblue; }
i { color: darkgreen; }

最后，我更喜歡在我的列表元素周圍添加額外的間距，以使它們更易于閱讀。如果每個(gè)列表項(xiàng)只有幾個(gè)詞，額外的空間可能無關(guān)緊要。但是我的示例文本中的中間項(xiàng)很長(zhǎng)，可以換到第二行。額外的空間有助于讀者更清楚地看到此列表中的每個(gè)項(xiàng)目。你可以使用邊距樣式在塊元素上方和下方添加空間：

li { margin-top: 10px; margin-bottom: 10px; }

這種樣式定義了一個(gè)距離，此處我將其指定為每個(gè)列表元素上方和下方的 10px（十個(gè)像素）。你可以使用多種不同的距離度量。十像素實(shí)際上就是屏幕上十個(gè)像素的空間，無論是臺(tái)式機(jī)顯示器、筆記本電腦顯示屏，還是手機(jī)或平板電腦屏幕。

假設(shè)你真的只是想在列表元素之間添加一個(gè)額外的空行，你也可以使用 ??em??? 來測(cè)量。??em??? 是一個(gè)舊的排版術(shù)語(yǔ)，如果你指的是左右間距，它就是大寫 ??M??? 的寬度，或者對(duì)于垂直間距，就是大寫 ??M?? 的高度。所以你可以改用 1em 來寫邊距樣式：

li { margin-top: 1em; margin-bottom: 1em; }

HTML 文檔中的完整樣式列表如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>簡(jiǎn)易 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>簡(jiǎn)易 Senet</h1>
    <h2>游戲玩法</h2>
    <p>游戲會(huì)自動(dòng)為你“投擲”投擲棒，并在屏幕右下角顯示結(jié)果。</p>
    <p>如果“投擲”結(jié)果為零，你失去本輪機(jī)會(huì)。</p>
    <p>輪到你的時(shí)候，游戲會(huì)自動(dòng)選擇
    你在棋盤上的第一塊棋子。 你不一定
    能夠用這個(gè)棋子走棋。所以選擇你的棋子
    移動(dòng)，然后按 <i>Space</i>（或 <i>Enter</i>）移動(dòng)
    它。 你可以通過幾種不同的方法進(jìn)行選擇：</p>
    <ul>
      <li><i>向上</i>/<i>向下</i>/<i>向左</i>/<i>向右</i> to
      朝特定方塊移動(dòng)。</li>
      <li>加號(hào) (<b>+</b>) 或減號(hào) (<b>-</b>) 使棋子在棋盤上向“左”或向“右”移動(dòng)。
      請(qǐng)注意，它們會(huì)自動(dòng)遵循棋盤的“倒過來的 S”方向移動(dòng)。</li>
      <li><em>Tab</em>在棋盤上選擇下一個(gè)你想要移動(dòng)的棋子。</li>
    </ul>
    <p>要隨時(shí)退出游戲，請(qǐng)按 <b>Q</b>（大寫
    Q）或按 <i>Esc</i>，這樣游戲會(huì)提示你是否想要
    放棄比賽。</p>
    <p>如果你比對(duì)手更快將所有棋子移出棋盤，你就贏得了比賽。
    這同時(shí)需要運(yùn)氣和游戲策略！</p>
  </body>
</html>

在網(wǎng)頁(yè)瀏覽器上查看時(shí)，你會(huì)看到采用無襯線字體的自述文件，標(biāo)題和副標(biāo)題使用襯線字體。頁(yè)面標(biāo)題居中。粗體和斜體文本使用略有不同的顏色來吸引讀者的注意力而不會(huì)分散注意力。最后，列表項(xiàng)周圍有額外的空間，使每個(gè)項(xiàng)目更易于閱讀。

通過添加一些樣式，我們使這個(gè)自述文件更易于閱讀。

通過添加一些樣式，我們使這個(gè)自述文件更易于閱讀。

這是在技術(shù)寫作中使用樣式的簡(jiǎn)單介紹。掌握了基礎(chǔ)知識(shí)后，你可能會(huì)對(duì) ??Mozilla 的 HTML 指南?? 感興趣。它包括一些很棒的初學(xué)者教程，因此你可以學(xué)習(xí)如何創(chuàng)建自己的網(wǎng)頁(yè)。

有關(guān) CSS 樣式的更多信息，我推薦 ??Mozilla 的 CSS 指南??。

（題圖： MJ:web internet traffic design）

責(zé)任編輯：龐桂玉來源： Linux中國(guó)