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

十年的盤(pán)山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整盤(pán)山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“盤(pán)山網(wǎng)站設(shè)計(jì)”,“盤(pán)山網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

單純用 HTML 編寫(xiě)項(xiàng)目文檔也是可以的。然而，純 HTML 樣式可能感覺(jué)有點(diǎn)簡(jiǎn)陋。因此，嘗試向 HTML 文檔添加一些簡(jiǎn)單的樣式，為文檔添加一點(diǎn)活力，并使文檔更清晰、更易于閱讀。

定義一個(gè) HTML 文檔

讓我們從一個(gè)純 HTML 文檔開(kāi)始，探索如何向其添加樣式。一個(gè)空的 HTML 文檔在頂部包含 ????? 定義，后面跟著一個(gè) ????? 塊來(lái)定義文檔本身。 在 ????? 元素中，你還需要加上一個(gè)文檔標(biāo)頭，其中包含有關(guān)文檔的元數(shù)據(jù)，例如標(biāo)題。文檔正文的內(nèi)容放在父 ????? 塊內(nèi)的 ???? 塊中。

你可以使用以下 HTML 代碼定義一個(gè)空白頁(yè)面：

在另一篇關(guān)于 ??用 HTML 編寫(xiě)項(xiàng)目文檔??? 的文章中，我將一個(gè)開(kāi)源棋盤(pán)游戲的自述文件從純文本更新為 HTML 文檔，并使用一些基本的 HTML 標(biāo)記，如 ??

??? 和 ??

??? 作為標(biāo)題和副標(biāo)題，??

??? 用于段落，????? 和 ???? 用于粗體和斜體文本。讓我們從那篇文章結(jié)束的地方繼續(xù)講：

  
    
  
  
    
簡(jiǎn)易 Senet

    
游戲玩法

    
游戲會(huì)自動(dòng)為你“投擲”投擲棒，并在屏幕右下角顯示結(jié)果。

    
如果“投擲”結(jié)果為零，你失去本輪機(jī)會(huì)。

    
輪到你的時(shí)候，游戲會(huì)自動(dòng)選擇
    你在棋盤(pán)上的第一塊棋子。 你不一定
    能夠用這個(gè)棋子走棋，所以選擇你的棋子
    移動(dòng)，然后按 Space（或 Enter）移動(dòng)
    它。 你可以通過(guò)幾種不同的方法進(jìn)行選擇：

    

      
向上/向下/向左/向右 to
      朝特定方塊移動(dòng)。

      
加號(hào) (+) 或減號(hào) (-) 使棋子在棋盤(pán)上向“左”或向“右”移動(dòng)。
      請(qǐng)注意，它們會(huì)自動(dòng)遵循棋盤(pán)的“倒過(guò)來(lái)的 S”方向移動(dòng)。

      
Tab在棋盤(pán)上選擇下一個(gè)你想要移動(dòng)的棋子。

    

    
要隨時(shí)退出游戲，請(qǐng)按 Q（大寫(xiě)
    Q）或按 Esc，這樣游戲會(huì)提示你是否想要
    放棄比賽。

    
如果你比對(duì)手更快將所有棋子移出棋盤(pán)，你就贏得了比賽。
    這同時(shí)需要運(yùn)氣和游戲策略！

  

此 HTML 文檔演示了利用 HTML 的技術(shù)寫(xiě)作者經(jīng)常使用的一些塊和內(nèi)聯(lián)元素。塊元素在圍繞文本定義一個(gè)矩形。段落和標(biāo)題就是塊元素，因?yàn)樗鼈儚奈臋n的左邊緣延伸到右邊緣。例如，??

??? 在段落周圍包含一個(gè)不可見(jiàn)的矩形。相比之下，內(nèi)聯(lián)元素的使用則緊跟在它們包圍的文本。如果你在段落中的某些文本上使用 ?????，則只有被 ????? 和 ???? 包圍的文本會(huì)變?yōu)榇煮w。

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


...



定義樣式

由于你剛剛開(kāi)始學(xué)習(xí)樣式表，因此這里先演示一種基本樣式：背景色。我喜歡從背景顏色開(kāi)始，因?yàn)樗兄谘菔緣K和內(nèi)聯(lián)元素。讓我們應(yīng)用一個(gè)有點(diǎn)華麗的樣式表，為所有 ??

?? 段落設(shè)置淺藍(lán)色背景顏色，為 ??

?? 無(wú)序列表設(shè)置淺綠色背景。對(duì)任何粗體文本使用黃色背景，對(duì)任何斜體文本使用粉紅色背景。

你可以在 HTML 文檔的 ??

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

如果在網(wǎng)頁(yè)瀏覽器中查看此 HTML 文檔，你可以看到 ??

??? 和 ??

??? 塊元素如何填充為矩形，而 ????? 和 ???? 內(nèi)聯(lián)元素僅突出顯示粗體和斜體文本。 這種對(duì)比色的使用可能看起來(lái)不太好看，但我想你可以清楚看到塊和內(nèi)聯(lián)元素：

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

應(yīng)用樣式

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

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

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

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

body { font-family: Roboto; }

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

body { font-family: Roboto, Arial; }

所有網(wǎng)絡(luò)瀏覽器都定義了默認(rèn)的襯線和無(wú)襯線字體，你可以使用這些名稱來(lái)引用它們。用戶可以更改他們喜歡用于顯示襯線和無(wú)襯線的字體，因此不太可能對(duì)每個(gè)人都一樣，但在字體列表中使用 ??serif??? 或 ??sans-serif?? 通常是個(gè)好主意。通過(guò)添加該字體，至少用戶可以大致了解你希望 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)題使用完全相同的字體定義。如果你想避免無(wú)謂的打字，可以使用樣式表快捷方式為 H1 和 22 使用相同的樣式定義：

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

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

h1 { text-align: center; }

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

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

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

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

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

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

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

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

  
    
    
  
  
    
簡(jiǎn)易 Senet

    
游戲玩法

    
游戲會(huì)自動(dòng)為你“投擲”投擲棒，并在屏幕右下角顯示結(jié)果。

    
如果“投擲”結(jié)果為零，你失去本輪機(jī)會(huì)。

    
輪到你的時(shí)候，游戲會(huì)自動(dòng)選擇
    你在棋盤(pán)上的第一塊棋子。 你不一定
    能夠用這個(gè)棋子走棋。所以選擇你的棋子
    移動(dòng)，然后按 Space（或 Enter）移動(dòng)
    它。 你可以通過(guò)幾種不同的方法進(jìn)行選擇：

    

      
向上/向下/向左/向右 to
      朝特定方塊移動(dòng)。

      
加號(hào) (+) 或減號(hào) (-) 使棋子在棋盤(pán)上向“左”或向“右”移動(dòng)。
      請(qǐng)注意，它們會(huì)自動(dòng)遵循棋盤(pán)的“倒過(guò)來(lái)的 S”方向移動(dòng)。

      
Tab在棋盤(pán)上選擇下一個(gè)你想要移動(dòng)的棋子。

    

    
要隨時(shí)退出游戲，請(qǐng)按 Q（大寫(xiě)
    Q）或按 Esc，這樣游戲會(huì)提示你是否想要
    放棄比賽。

    
如果你比對(duì)手更快將所有棋子移出棋盤(pán)，你就贏得了比賽。
    這同時(shí)需要運(yùn)氣和游戲策略！

  

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

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

這是在技術(shù)寫(xiě)作中使用樣式的簡(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）


本文標(biāo)題：使用CSS提升你的HTML文檔
瀏覽地址：http://www.dlmjj.cn/article/dhcoeej.html