層疊樣式表/字型和文字

字型屬性

• font-family — 設定字型。
• font-style — 設定文字的樣式，常見的值是 normal 和 italic。
• font-variant — 修改文字，例如小寫字母。
• font-weight — 設定文字的粗細，值如 bold 和 normal。
• font-size — 設定字型大小。
• line-height — 設定相鄰文字行基線之間的間距。

以下將詳細介紹每個屬性。

font-family

W3C 規範 CSS1 CSS2.1

以下是 CSS 字型匹配的簡化描述。有關確切的描述，請參閱 CSS1 字型匹配 或 CSS2.1 字型匹配 規範。

font-family 屬性的值是一個逗號分隔的字型列表，按優先順序排序。網頁瀏覽器將嘗試使用列表中的第一個字型。如果第一個字型不可用，它將嘗試使用第二個字型，以此類推。如果所有字型均不匹配，網頁瀏覽器將使用預設字型。這可能是使用者選擇的字型。

在下面的示例中，網頁瀏覽器將嘗試使用 Verdana。如果 Verdana 未安裝（或不可用，如果還指定了 font-variant），網頁瀏覽器將嘗試使用 Helvetica。如果 Helvetica 不可用，它將嘗試使用 Arial。

p { font-family: Verdana, Helvetica, Arial, sans-serif }

由於沒有一組標準字型在所有網頁瀏覽器和作業系統中可用，因此可能所有命名的字型都不會匹配。定義了五個通用字體系列，以允許這種情況。網頁瀏覽器將用最接近的可用字型替換通用字型。五個通用系列是：serif、sans-serif、monospace、cursive 和 fantasy。

應始終以通用字體系列結束字體系列列表。否則，您可能會以使用者預設的襯線字型結束，而您想要的是無襯線字型。通用字型始終保證匹配，因此在通用字型之後指定備用字型毫無意義。在字體範圍有限的系統中，可能有兩個或多個通用字型對映到同一個字型。您可以透過檢視下面的示例，檢視您的網頁瀏覽器對通用字型使用的字型。有五個不同的字型嗎？

serif sans-serif monospace cursive fantasy

網頁設計師面臨的一個持續問題是，他們無法準確地指定所需的字型，因為他們不知道使用者安裝了哪些字型。解決方法是在字體系列列表中指定每個可能的客戶端系統的或多或少等效的字型。有許多有用的參考可以幫助確定這種等效性（例如，這裡）。

例如，要使用在 Windows 中稱為 Impact 的字型，使用以下宣告。

font-family: Impact, Charcoal, sans-serif

其中“Impact”是 Windows 名稱，“Charcoal”是 MacOS 名稱，“sans-serif”是針對沒有這兩種字型的系統的通用回退。

font-style

W3C 規範 CSS1 CSS2.1

CSS1 和 CSS2.1 為此屬性定義了三個值：normal、italic 和 oblique。此屬性的初始值為 normal。許多字體系列沒有定義單獨的斜體字型版本，在這種情況下，當 font-style 設定為 italic 時，將使用斜體版本。

CSS 規則

#para1 {
  font-style:normal
}

#para2 {
  font-style:oblique
}

#para3 {
  font-style:italic
}

示例 HTML

    <p id="para1">This sentence should be in an upright version of the font.</p>
    <p id="para2">This sentence should be in an oblique version of the font.</p>
    <p id="para3">This sentence should be in an italic version of the font.
      Is it different to the oblique version?
    </p>

示例呈現

此句子應使用字型的直立版本。

此句子應使用字型的傾斜版本。

此句子應使用字型的斜體版本。它與傾斜版本不同嗎？

font-variant

W3C 規範 CSS1 CSS2.1

CSS1 和 CSS2.1 為此屬性定義了兩個值：normal 和 small-caps。此屬性的初始值為 normal。當應用 small-caps 時，小寫字母將顯示為縮小的大寫字母。大寫字母和其他字元保持不變。以下顯示了這些值的實際效果。

CSS 規則

#para1 {
  font-variant:normal
}

#para2 {
  font-variant:small-caps
}

示例 HTML

    <p id="para1">This sentence shows the effect of setting the
      Cascading Style Sheets property <code>font-variant</code>.
      Other characters: 1 2 3 % !
    </p>
    <p id="para2">This sentence shows the effect of setting the
      Cascading Style Sheets property <code>font-variant</code>.
      Other characters: 1 2 3 % !
    </p>

示例呈現

此句子顯示了設定層疊樣式表屬性 font-variant 的效果。其他字元：1 2 3 % !

此句子顯示了設定層疊樣式表屬性 font-variant 的效果。其他字元：1 2 3 % !

font-weight

W3C 規範 CSS1 CSS2.1

font-weight 屬性設定字型的深淺。CSS 目前定義了從最淺的 100 到最深的 900 的九個深淺級別。不同級別的數量取決於 font-family。一些系列可能定義了所有九個級別，而大多數系列只定義一個或兩個級別。值 normal 等同於 400，bold 等同於 700。

下面的列表顯示了當前系列的不同權重

• 100
• 200
• 300
• 400 或 normal
• 500
• 600
• 700 或 bold
• 800
• 900

font-weight 的最後兩個可能值是 lighter 和 bolder。當使用這些值時，網頁瀏覽器將嘗試從當前系列中選擇比父元素字型更淺或更深的字型。

由於大多數字體系列只有一個或兩個權重，因此通常只使用 normal 和 bold 值。

例如，要使 strong 元素為紅色而不是大多數網頁瀏覽器使用的粗體，請應用以下規則。

strong {
  font-weight:normal; /* remove the bold defined by the web browser */
  color:red
}

作為另一個示例，您可以將所有超連結設定為粗體。

a {
  font-weight:bold
}

示例 HTML

    <p><strong>Note:</strong> in this text
       <a href="glossary#hyperlink">hyperlinks</a> are in boldface.
    </p>

示例呈現

注意： 在此文字中，超連結 為粗體。

font-size

W3C 規範 CSS1 CSS2.1

在閱讀本節之前，請確保您知道如何在用於測試網頁的所有瀏覽器中更改預設字型大小。

請確保您瞭解螢幕畫素和 CSS 畫素之間的區別。請參閱 CSS 長度和單位。

字型大小是網頁設計中比較棘手的一個領域。網頁瀏覽者最常抱怨的是很多網頁的字型大小太小。（參見 Jakob Nielsen 的 2005 年網頁設計十大錯誤。）客戶購買網站時經常會要求將字型縮小，以便在頁面上塞入更多資訊。更糟糕的是，大多數使用者沒有學習如何更改網頁瀏覽器使用的預設字型大小。（如果您曾經教授過關於如何使用網頁瀏覽器的課程，更改字型大小和顏色是您能教的最重要的事情之一。）另一個問題是，網頁設計師往往比較年輕，視力也比較好。只是因為您喜歡閱讀佔預設字型大小 60% 的文字，並不意味著您的目標受眾也能閱讀這種大小的文字。

有些使用者會更改預設字型大小，網頁應該尊重他們的選擇。理想情況下，頁面上所有重要的資訊都應該至少與使用者的預設字型大小一樣大。重要資訊包括出版日期、網站隱私政策連結等。小字號應該保留給不重要的文字，例如頁面是有效 HTML、符合 WCAG Double-AA 等的宣告，以及通常以較小尺寸呈現的效果，例如上標。

以 CSS 畫素 (px) 或絕對單位 (pt、pc、mm、cm 和 in) 為單位的長度不尊重使用者的偏好。事實上，使用這些單位會阻止使用者輕鬆更改字型大小，如果他們發現字型太小或太大。例如，在 Windows 版 Internet Explorer 中，如果使用者想要更改以這些單位表示的字型的尺寸，他們必須從“工具”選單中選擇“Internet 選項...”，然後單擊“常規”選項卡上的“輔助功能...”按鈕，並選中“忽略網頁上指定的字型大小”複選框。這並不方便使用者。

尊重使用者偏好的值是 em 或 ex 中的長度、百分比和關鍵字值。有七個“絕對”關鍵字值根據使用者的預設字型大小縮放字型，以及兩個“相對”關鍵字值根據父元素縮放字型。“絕對”關鍵字是

• xx-small
• x-small
• small - IE/win v6 怪癖模式 和 IE/win v5 中使用者的預設字型大小，無論渲染模式如何。
• medium - 標準模式 中使用者的預設字型大小。
• large
• x-large
• xx-large

這兩個相對關鍵字是 smaller 和 larger。

大多數網頁設計師更喜歡使用 em。以 em、ex 和百分比為單位的字型大小相對於父元素的字型大小進行計算。1em 等於 100%。以下示例對此進行了演示。

#span1 {
  font-size:0.5em;
  color:red
}

#span2 {
  font-size:5em;
  color:green
}

#span3 {
  font-size:0.4em;
  color:magenta
}

示例 HTML

    <p>The <span id="span1">text <span id="span2">size 
      <span id="span3">changes </span></span></span>a lot.</p>

示例呈現

The text size changes a lot.

由於 0.5 乘以 5 乘以 0.4 等於 1，因此最後一個 span 中的文字應該與父段落中的文字大小相同。

在 Internet Explorer 中使用 ems

如果您在使用 Internet Explorer 檢視的頁面中使用 em 作為 font-size，則需要注意 Internet Explorer 的一個怪癖。在 Windows PC 上，將下面給出的兩個檔案儲存在同一個目錄中，然後使用 Internet Explorer 檢視 IE_font_size_bug.htm。（此示例已在 IE/win v5.0、v5.5 和 v6.0 中測試。）

IE_font_size_bug.css

p {
  font-size:1em
}

IE_font_size_bug.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>IE font size bug</title>
    <link rel="stylesheet" type="text/css" href="IE_font_size_bug.css">
  </head>
  <body>
    <p>Internet Explorer has a little problem with ems.</p>
  </body>
</html>

將預設字型大小設定為中號、小號和最小號。（如果您在工具欄上沒有“大小”按鈕，請使用“檢視”選單的“文字大小”子選單。）文字的高度顯示在下表中。

預設字型大小	大寫字母的高度	em 的高度
中號	11 個螢幕畫素	16 個螢幕畫素
小號	9 個螢幕畫素	13 個螢幕畫素
最小號	6 個螢幕畫素	12 個螢幕畫素

在六個畫素高的情況下，字母會變成頁面上模糊的斑點，實際上無法閱讀。

有一個簡單的解決方法。像這樣在 IE_font_size_bug.css 中新增一個額外的規則

body {
  font-size:100% /* Keeps IE happy when the user sets the default size to 'smallest'. */
}

p {
  font-size:1em
}

理論上，將 font-size 設定為 100% 不應該改變任何東西。但是，如果您使用新的樣式表檢視頁面，您會發現“最小號”文字的大小發生了變化。

預設字型大小	大寫字母的高度	em 的高度
中號	11 個螢幕畫素	16 個螢幕畫素
小號	9 個螢幕畫素	13 個螢幕畫素
最小號	9 個螢幕畫素	12 個螢幕畫素

如果您視力良好和/或擁有大型顯示器，九個畫素高的字母是相當可讀的。

始終將 body 的 font-size 設定為百分比以處理此怪癖是一個好主意。最好還留下一條註釋來解釋為什麼存在字型大小宣告，這樣當其他人接管您的樣式表時就不會刪除明顯多餘的規則。

巢狀問題

當您使用型別選擇器設定 font-size 屬性時，您可能會遇到使用 em 或百分比的問題。在下面的示例中，每個巢狀的 div 元素都匹配選擇器，因此文字的大小每次都減半。最裡面的 division 中的文字是使用者預設字型大小的 ¹/₁₆。您可能很難閱讀示例渲染，除非您顯著增大預設字型大小。

CSS 規則

body {
  font-size:100% /* Keeps IE happy when the user sets the default size to 'smallest'. */
}

div {
  font-size:0.5em;
  border:1px dotted green;
  padding:1em
}

示例 HTML

    <div>
      This division contains
      <div>
        another division that contains
        <div>
          another division and so on
          <div>
            until the text is tiny.
          </div>
        </div>
      </div>
    </div>

示例呈現

This division contains

another division that contains

another division and so on

until the text is tiny.

此問題經常出現在列表中，在列表中，設定 li 元素的 font-size 很誘人。當將來有人新增子列表時，子列表的文字將過小或過大，具體取決於縮放因子。解決方案是使用 ID 選擇器來定位巢狀組的最外層元素，例如巢狀列表的最外層 ul 元素。

表格和表單問題

如果您使用表格或表單，您可能會發現需要使用以下規則才能使這些元素中的文字根據使用者的偏好正確縮放

table, input, select {
  font-size:100%
}

line-height

W3C 規範 CSS1 CSS2.1

line-height 屬性定義相鄰行文字的基線之間的最小距離。如果需要，該距離可能會增加以適應影像等。在線上。它表示為字型高度和行間距之間的比率。字型的高度定義為基線和大寫字母頂部的距離。有些字母可能具有向下延伸到基線以下的降部。在某些字型中，也可能存在升部，高於大寫字母的頂部。

在下面的示例中，每行後面的綠色條帶從基線向上延伸到字型高度。第一行顯示大寫字母。第二行顯示帶有降部的 lowercase 字母。第三行顯示帶有重音符號的大寫字母。

A B C

p q y

É Ñ Ô

line-height 可以簡單地用一個數字、一個長度或一個百分比來表示。如果它用一個簡單數字或一個百分比表示，則用它乘以字型高度來確定行之間的空間。以下示例演示了該段落使用 line-height 的四個不同值時的外觀。示例中的字型被放大，以便更輕鬆地檢視行間距。

#para1 {
  line-height: 1
}

#para2 {
  line-height: 1.2em
}

#para3 {
  line-height: 160%
}

#para4 {
  line-height: 2
}

line-height = 1 或 100% 或 1em

line-height 可以簡單地用一個數字、一個長度或一個百分比來表示。如果它用一個簡單數字或一個百分比表示，則用它乘以字型高度來確定行之間的空間。以下示例演示了 line-height 的四個不同值。示例中的字型被放大，以便更輕鬆地檢視行間距。

line-height = 1.2 或 120% 或 1.2em

line-height 可以簡單地用一個數字、一個長度或一個百分比來表示。如果它用一個簡單數字或一個百分比表示，則用它乘以字型高度來確定行之間的空間。以下示例演示了 line-height 的四個不同值。示例中的字型被放大，以便更輕鬆地檢視行間距。

line-height = 1.6 或 160% 或 1.6em

line-height 可以簡單地用一個數字、一個長度或一個百分比來表示。如果它用一個簡單數字或一個百分比表示，則用它乘以字型高度來確定行之間的空間。以下示例演示了 line-height 的四個不同值。示例中的字型被放大，以便更輕鬆地檢視行間距。

line-height = 2 或 200% 或 2em

line-height 可以簡單地用一個數字、一個長度或一個百分比來表示。如果它用一個簡單數字或一個百分比表示，則用它乘以字型高度來確定行之間的空間。以下示例演示了 line-height 的四個不同值。示例中的字型被放大，以便更輕鬆地檢視行間距。

仔細觀察 line-height 為 1 的示例中的降部。您可能會注意到至少有一個點，降部觸及了下一行的字母。大多數網頁瀏覽器預設的 line-height 為 1.2。許多網頁設計師認為 line-height 為 1.6 更易讀，尤其是當字型大小比較小時。

速記屬性

W3C 規範 CSS1 CSS2.1

font 速記屬性可用於在一個宣告中設定五個單獨的字型屬性和 line-height 屬性。font 有兩種方法可以設定單獨的屬性，透過指定單獨屬性的組合或透過給出選擇預定義的單個值集的單個關鍵字。第二個選項僅在 CSS2.1 中可用。

單獨屬性的組合

組合單個屬性的語法有點複雜。屬性按以下順序給出

• none、一個或多個 font-style、font-variant 和 font-weight，以任何順序排列；
• 可選地後跟 font-size；
• 如果 font-size 存在，它可以後跟斜槓，/，後跟 line-height；
• 接著是font-family，這是必須存在的。

包含所有元件的示例是

p {
  font: bold italic small-caps 150%/1.4 Arial, Helvetica, sans-serif
}

注意，150%表示字型大小是父元素字型大小的1.5倍。然後，/1.4將行高設定為當前元素字型大小的1.4倍。還要注意，字體系列是用逗號分隔的字體系列列表，按優先順序排序。

如果省略了某些屬性，則它們將設定為其初始值。例如，

p {
  font: monospace
}

等同於

p {
  font-family: monospace;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  font-size:medium;
  line-height:normal
}

關鍵字

關鍵字值是指網頁瀏覽器為選單等專案使用的系統字型。關鍵字值是

caption ; 用於按鈕、下拉列表等的字型。

icon ; 用於標記圖示的字型。

menu ; 下拉選單使用的字型。

message-box ; 對話方塊使用的字型。

small-caption ; 用於標記小型控制元件的字型。

status-bar ; 狀態列中使用的字型。

關鍵字值將所有單個屬性設定為與相應的系統字型匹配。然後可以透過其他宣告來覆蓋單個屬性。

示例

ul {
  font:menu; /* Set lists to use a system font. */
  font-style:italic /* Override an individual property. */
}

文字間距

text-align

W3C 規範 CSS1 CSS2.1

此屬性用於對齊文字塊。四個可能的值是left、right、center 和justify。這些值在下面演示。

CSS 規則

div {
  width:50% /* Make the column narrower so the alignment is more noticeable. */
}

p {
  border: 1px solid red;
  padding: 1em;
}

#para1 {
  text-align: left;
}

#para2 {
  text-align: right;
}

#para3 {
  text-align: center;
}

#para4 {
  text-align: justify;
}

示例 HTML

    <div>
      <p id="para1">Web designers and web surfers are divided over the relative merits of left versus
        full justification of text. Many state a preference for left justified text despite the
        fact that most print media is fully justified.
      </p>
      <p id="para2">Web designers and web surfers are divided over the relative merits of left versus
        full justification of text. Many state a preference for left justified text despite the
        fact that most print media is fully justified.
      </p>
      <p id="para3">Web designers and web surfers are divided over the relative merits of left versus
        full justification of text. Many state a preference for left justified text despite the
        fact that most print media is fully justified.
      </p>
      <p id="para4">Web designers and web surfers are divided over the relative merits of left versus
        full justification of text. Many state a preference for left justified text despite the
        fact that most print media is fully justified.
      </p>
    </div>

示例呈現

網頁設計師和網頁瀏覽者對左對齊和完全對齊文字的相對優點存在分歧。許多人表示他們更喜歡左對齊文字，儘管大多數印刷媒體是完全對齊的。

網頁設計師和網頁瀏覽者對左對齊和完全對齊文字的相對優點存在分歧。許多人表示他們更喜歡左對齊文字，儘管大多數印刷媒體是完全對齊的。

網頁設計師和網頁瀏覽者對左對齊和完全對齊文字的相對優點存在分歧。許多人表示他們更喜歡左對齊文字，儘管大多數印刷媒體是完全對齊的。

網頁設計師和網頁瀏覽者對左對齊和完全對齊文字的相對優點存在分歧。許多人表示他們更喜歡左對齊文字，儘管大多數印刷媒體是完全對齊的。

此屬性與以下其他屬性互動

white-space

如果當white-space 為pre 或pre-line時，text-align 的值為justify，則網頁瀏覽器必須將text-align 視為left（這是英語的正常情況）或right（如果當前文字方向是從右到左）。

letter-spacing

如果將其設定為除normal 之外的任何值，則網頁瀏覽器可能僅在對齊文字時調整字間距。

word-spacing

如果將其設定為除normal 之外的任何值，則網頁瀏覽器必須嘗試在對齊文字時尊重指定的值。

letter-spacing

W3C 規範 CSS1 CSS2.1

letter-spacing 屬性用於增加或減少字母之間的間距。網頁瀏覽器不需要支援減少字母間距，或者可能只允許有限的減少。

normal 值可用於從元素中刪除繼承的值。如果該值設定為除normal 之外的任何值，則使用text-align 對齊文字時，字母之間的間距不能更改。如果您不希望字母間距因對齊而改變，但也不希望新增任何額外的空間，可以將letter-spacing 設定為零。

CSS 規則

.increase {
  letter-spacing:0.5em
}

.decrease {
  letter-spacing:-0.05em
}

示例 HTML

    <p class="increase">Letter spacing.</p>
    <p>Letter spacing.</p>
    <p class="decrease">Letter spacing.</p>

示例呈現

字母間距。

字母間距。

字母間距。

word-spacing

W3C 規範 CSS1 CSS2.1

word-spacing 屬性用於增加或減少單詞之間的間距。網頁瀏覽器不需要支援減少單詞間距，或者可能只允許有限的減少。

normal 值可用於從元素中刪除繼承的值。

CSS 規則

.increase {
  word-spacing:1em
}

.decrease {
  word-spacing:-0.2em
}

示例 HTML

    <p class="increase">The word spacing can be altered.</p>
    <p>The word spacing can be altered.</p>
    <p class="decrease">The word spacing can be altered.</p>

示例呈現

單詞間距可以更改。

單詞間距可以更改。

單詞間距可以更改。

其他文字屬性

text-decoration

W3C 規範 CSS1 CSS2.1

text-decoration 可以設定為none 或underline、overline、line-through 和blink 的任意組合。許多網頁設計師認為使用blink 是不好的做法。對超連結以外的任何內容使用下劃線也被認為是不好的做法。請將下面第二個和第三個示例作為不應執行的操作的示例。

如果您使用line-through 來表示刪除的文字，請考慮使用語義元素，如 (X)HTML 的del 元素，而不是或與該屬性一起使用。

text-decoration 最常見的用法是更改超連結的外觀，以便從主內容中的連結中刪除下劃線，同時保留導航選單中的下劃線，反之亦然。

CSS 規則

a {
  text-decoration:none
}

li a {
  text-decoration:underline
}

示例 HTML

    <p>The next chapter is rather boring so all but the most enthusiastic readers
       should skip to <a href="Chapter7.htm">the interesting bit</a>.
    </p>
    <ul>
      <li><a href="Chapter4.htm">Previous</a></li>
      <li><a href="Contents.htm">Contents</a></li>
      <li><a href="Chapter6.htm">Next</a></li>
    </ul>

示例呈現

下一章相當無聊，所以除了最熱心的讀者以外，其他人應該跳到有趣的部分。

• 上一步
• 目錄
• 下一步

使用所有四個值的示例。blink 不被某些瀏覽器支援，因此您可能會免受這種效果的影響。

CSS 規則

#overDone {
  text-decoration:underline overline line-through blink
}

示例 HTML

    <p id="overDone">Can you actually read this?</p>

示例呈現

你真的能讀懂這個嗎？

應用於元素的任何text-decoration 都將繪製在其所有內容之上，包括任何子元素，而不管在這些元素上設定的text-decoration 值如何。對子元素指定的任何其他裝飾也將與父元素的裝飾一起應用。

CSS 規則

.notImportant {
  text-decoration:line-through;
  color:black
}

em {
  text-decoration:none
}

strong {
  text-decoration:underline;
  color:red
}

示例 HTML

    <p class="notImportant">Most of the text in this sentence is not <em>important</em>.</p>
    <p class="notImportant">The last bit of text in this sentence is
      <strong>very important</strong>.
    </p>

示例呈現

本句中的大部分文字並不重要。

本句中的最後一段文字非常重要。

請注意，第二段中的下劃線是紅色的，這是分配給下劃線的strong 元素的顏色。但是，strong 元素上的刪除線是黑色的，因為它屬於父p 元素，父元素的顏色設定為黑色。

text-indent

W3C 規範 CSS1 CSS2.1

text-indent 屬性指定塊級元素第一行的縮排。使用margin-left、margin-right、padding-left 或padding-right 來縮排整個塊。縮排可以為負數，但網頁瀏覽器不需要支援負縮排，或者可能限制負縮排的大小。text-indent 屬性是繼承的。在下面的示例中，text-indent 應用於包含段落的div 元素，而不是直接應用於段落本身。

請注意，縮排僅在塊級元素的開頭應用。由內聯元素引起的換行符不會在塊中導致任何額外的縮進出現。

CSS 規則

p {
  width:50%;       /* Narrow the column so that there are more
                    * lines of text in the example. */
  margin-left:4em /* Apply a margin to the left of all paragraphs
                    * so there is room for the undent example. */
  margin-top:0.5em /* Separate the two halves of the example slightly. */
}

.indented {
  text-indent:2em;
  border:1px solid red /* Put a border around the first half of the example. */
}

.undented {
  text-indent:-2em;
  border:1px solid blue /* Put a border around the second half of the example. */
}

示例 HTML

    <div class="indented">
      <p>This paragraph should have an indent similar to that found in novels.
        However there will still be a vertical gap between the paragraphs because that
        is controlled by the <code>margin</code> property. If you want to recreate a novel-like
        appearance you will need to set both properties.
      </p>
      <p>This paragraph has a line break in it, created with the <code>br</code> element.
        Since this doesn't start a new block level element there is no indent or undent after
        the line break.<br> The line break was immediately before this sentence. You may need
        to adjust the width of your browser window to make the line break obvious.
      </p>
    </div>
    <div class="undented">
      <p>This paragraph should have an undent. This is a more unusual style but it can be useful.
        It is most often used with lists to emphasis the start of a list item either instead of 
        or in conjunction with a bullet.
      </p>
      <p>This paragraph has a line break in it, created with the <code>br</code> element.
        Since this doesn't start a new block level element there is no indent or undent after
        the line break.<br> The line break was immediately before this sentence. You may need
        to adjust the width of your browser window to make the line break obvious.
      </p>
    </div>

示例呈現

本段應該有類似於小說中的縮排。但是，段落之間仍然會有垂直間隙，因為這是由margin 屬性控制的。如果您想重新建立類似小說的外觀，則需要設定這兩個屬性。

本段中有一個換行符，由br 元素建立。由於這不會開始新的塊級元素，因此換行符後沒有縮排或縮排。
換行符在該句之前。您可能需要調整瀏覽器的視窗寬度才能使換行符明顯。

本段應該有縮排。這是一種更不尋常的樣式，但它可能很有用。它最常與列表一起使用，以強調列表項的開頭，而不是或與專案符號一起使用。

本段中有一個換行符，由br 元素建立。由於這不會開始新的塊級元素，因此換行符後沒有縮排或縮排。
換行符在該句之前。您可能需要調整瀏覽器的視窗寬度才能使換行符明顯。

text-transform

W3C 規範 CSS1 CSS2.1

text-transform 屬性有四個值

none

不做任何改變。

uppercase

將所有小寫字母轉換為大寫字母。其他字元保持不變。

lowercase

將所有大寫字母轉換為小寫字母。其他字元保持不變。

capitalize

將每個單詞的第一個字母轉換為大寫字母。其他字元保持不變。特別是單詞中其他地方的大寫字母將保持大寫。

text-transform 的確切效果取決於元素的語言。語言的確定方式取決於要設定樣式的文件。HTML 文件使用 lang 屬性來指定元素的語言。除非使用 lang 屬性來更改語言，否則子元素將繼承語言。

請注意，將轉換後的文字複製到剪貼簿可能會因瀏覽器而異。Firefox 將文字複製到剪貼簿，就像它沒有轉換一樣，而 Chrome 將其複製到剪貼簿，就像它顯示的那樣。

CSS 規則

#para1 {
  text-transform:uppercase
}

#para2 {
  text-transform:lowercase
}

#para3 {
  text-transform:capitalize
}

#para4 {
  text-transform:none
}

示例 HTML

    <p id="para1">this TEXT is NOT iN aNy PaRtIcULaR CaSe.</p>
    <p id="para2">this TEXT is NOT iN aNy PaRtIcULaR CaSe.</p>
    <p id="para3">this TEXT is NOT iN aNy PaRtIcULaR CaSe.</p>
    <p id="para4">this TEXT is NOT iN aNy PaRtIcULaR CaSe.</p>

示例呈現

this TEXT is NOT iN aNy PaRtIcULaR CaSe.

this TEXT is NOT iN aNy PaRtIcULaR CaSe.

this TEXT is NOT iN aNy PaRtIcULaR CaSe.

this TEXT is NOT iN aNy PaRtIcULaR CaSe.

將 text-transform 設定為 uppercase 與將 font-variant 設定為 small-caps 的效果進行比較。

CSS 規則

.uppercase {
  text-transform:uppercase
}

.small-caps {
  font-variant:small-caps
}

示例 HTML

    <p>Compare <span class="uppercase">uppercase</span>
      to <span class="small-caps">small-caps</span>.
    </p>

示例呈現

比較 uppercase 與 small-caps.

vertical-align

W3C 規範 CSS1 CSS2.1

vertical-align 屬性僅適用於其 display 值為 inline 或 table-cell 的元素。vertical-align 的行為對於 table-cell 來說有很大不同，在 層疊樣式表/表格 部分進行了描述。

不要做什麼

使用 vertical-align 時最常見的錯誤是將其應用於塊級元素，然後想知道為什麼它不起作用。以下示例顯示了問題所在。CSS 規則

div#outer {
  width:100px;
  height:100px;
  background-color:#00f;
  text-align:center
}

div#inner {
  width:50px;
  height:50px;
  background-color:#f00;
  margin:auto;
  vertical-align:middle /* This is ignored because this is a block level element. */
}

示例 HTML

    <div id="outer">
      <div id="inner">?</div>
    </div>

示例呈現

?

如您所見，紅色的內部劃分與藍色劃分的頂部牢固地對齊。

正確用法

vertical-align 的正確用法是調整文字行中文字部分和嵌入內容的相對位置。要了解 vertical-align，您需要了解CSS 行框。以下示例顯示了兩個塊級元素，段落。每個塊級段落包含一個內聯元素，span。對內聯元素應用邊框和背景，以便行框可見。

CSS 規則

p {
  width:20em; /* Narrow the paragraphs to ensure that the second paragraph wraps. */
  font-size:120%;
  line-height:2; /* Increase the line height to make the gaps between lines clearer. */
  border:3px solid red;
  padding:2px;
  background-color:#fcc
}

span {
  background-color:#ddd
  border:3px dashed #060
}

示例 HTML

    <p><span>This is a short paragraph.</span></p>
    <p><span>This is a much longer paragraph. The text in the paragraph wraps on to
      more than one line. The CSS rendering engine has to split the text into a number
      of line boxes, one for each line of text.</span>
    </p>

這是一個簡短的段落。

這是一個更長的段落。段落中的文字換行到多行。CSS 渲染引擎必須將文字拆分為多個行框，每個文字行一個。

vertical-align 屬性調整內聯元素相對於同一行框中其他專案的對齊方式。下一個示例說明了如何使用它來建立上標和下標。

CSS 規則

p {
  font-size:150% /* Enlarge the example so it is easier to see. */
}

span {
  font-size:60% /* Superscripts and subscripts are usualy shrunk by about 60%. */
}

.super {
  vertical-align:super
}

.sub {
  vertical-align:sub
}

示例 HTML

    <p>Text <span>shrunk</span>.</p>
    <p>Text <span class="super">superscript</span>.</p>
    <p>Text <span class="sub">subscript</span>.</p>

示例呈現

Text shrunk.

Text superscript.

Text subscript.

vertical-align 的完整值集為

• baseline
• superscript
• subscript
• middle
• text-top
• text-bottom
• top
• bottom

CSS2.1

CSS2.1 還允許 vertical-align 的值為長度或百分比。

white-space

W3C 規範 CSS1 CSS2.1

white-space 屬性控制空白字元（普通空格、製表符、換頁符和換行符，但不包括不間斷空格或其他特殊空格）的處理方式。在沒有 CSS 的情況下，HTML 和 XML 文件的渲染方式是將空白字元序列替換為單個空白字元。文字塊進行斷字，以使文字適合於包含塊的寬度。例如，以下示例 HTML 中的兩個段落將以相同的方式渲染。

    <p>A run of whitespace is normally replaced by a single whitespace character,
       e.g. a run of tabs might be replaced by a one normal space.
    </p>
    <p>A   run   
of whitespace is normally replaced by a single whitespace character,
       e.g. a run of tabs might 
be 
replaced 
by a one normal space.
    </p>

示例呈現

空白字元序列通常被替換為單個空白字元，例如，製表符序列可能會被替換為一個普通空格。

white-space 屬性有五個值。normal 值指定文字應按 HTML 或 XML 文件的通常方式處理。下表顯示了其他值與正常渲染的比較方式。

值	替換空白字元序列	換行以適應容器	在原始碼中的換行符處開始新行
normal	替換	換行	否
pre	保留	溢位	是
nowrap	替換	溢位	否
pre-wrap CSS2.1	保留	換行	是
pre-line CSS2.1	替換	換行	是

CSS2.1 中新增的兩個值，pre-wrap 和 pre-line，目前還沒有得到廣泛的支援。

適用於 Windows 的 Internet Explorer 5.0 和 5.5 版本不支援 pre。IE/win v6.0 僅在 標準模式 下支援 pre。

HTML pre 元素的行為就像應用了以下 CSS 規則一樣。

pre {
  white-space:pre;
  font-family:monospace
}

以下示例比較了 normal 和 nowrap。

CSS 規則

p {
  width:15em; /* Make the paragraph narrower so wrapping is more obvious. */
  border:1px solid black; /* Highlight the boundary of the paragraph so overflow is more obvious. */
  background:#cfc
}

#para1 {
  white-space:normal
}

#para2 {
  white-space:nowrap
}

示例 HTML

    <p id="para1">This first sentence.
      The second sentence.
      The third sentence.
    </p>
    <p id="para2">This first sentence.
      The second sentence.
      The third sentence.
    </p>

This first sentence. The second sentence. The third sentence.

This first sentence. The second sentence. The third sentence.

text-shadow

文字陰影是 CSS3 中的新效果。它的引數與 box-shadow 相同，並支援多個陰影。

• text-shadow: x-offset y-offset blur/diffusion color [, repeat for multiple];

p {
   text-shadow: 4px 4px 4px black;
   font-size: x-large;
}

Text with Shadow! Bold! Italic! Underline! Strike!

p {
   text-shadow: 2px 2px 1px black;
   font-size: x-large;
}

Text with Sharp Shadow! Bold! Italic! Underline! Strike!

現在讓我們嘗試多個陰影，請注意，您必須繼續移動陰影以防止它們全部繪製在同一位置（除非這就是您想要的 ;) )

p {
   text-shadow: 2px 2px 2px red, 4px 4px 2px blue, 6px 6px 2px green;
   font-size: x-large;
}

Text with Many Shadows! Bold! Italic! Underline! Strike!

anaglyphs

您可以使用 text-shadow 生成三維（立體）紅-青色 立體影像文字。

.anaglyph1 { color: rgba(0,0,0,0); text-shadow: -1px 0px 0px red, 1px 0px 0px aqua; }
.anaglyph2 { color: rgba(0,0,0,0); text-shadow: -2px 0px 0px red, 2px 0px 0px aqua; }
.anaglyph3 { color: rgba(0,0,0,0); text-shadow: -3px 0px 0px red, 3px 0px 0px aqua; }

"color: rgba(0,0,0,0)" 使未陰影的文字透明，以便只有紅色 (red) 和青色 (aqua) 陰影可見。請注意，青色陰影在 CSS 中被稱為“aqua”。左右偏移的畫素數是三維深度的量，或者文字看起來浮動在螢幕上多遠。您只需要少量的畫素。還要知道，使用紅-青色立體影像文字，您將無法為超連結或背景色使用 red 或 aqua。

This text has two pixels of red-cyan separation.

This text has four pixels of red-cyan separation.

This text has six pixels of red-cyan separation.

您需要戴上紅-青色 3D 眼鏡才能看到 3D 文字。由於大多數網站訪問者不會戴著 3D 眼鏡，請確保非立體影像版本的文字可訪問。

網路字型

網頁字型是 CSS2 的一項功能，允許設定規則以在網頁中嵌入字型，使設計人員不再需要依賴大多數作業系統自帶的字型子集。此功能支援的字型格式包括 TrueType (.ttf) 和 OpenType (.otf)。目前，只有 WebKit 瀏覽器 (Safari、Shiira、Chrome 等) 支援網頁字型。Internet Explorer 只支援 嵌入式 OpenType (.eot) 格式的網頁字型，其他瀏覽器都沒有使用這種格式。

CSS 示例

@font-face {
   font-family: WikiFont;
   src: url('wikifont.otf');
}

@font-face {
   font-family: WikiFont;
   font-weight: bold;
   src: url('wikifont-bold.otf');
}

@font-face {
   font-family: WikiFont;
   font-style: italic;
   src: url('wikifont-italic.otf');
}

現在，要使用該字型，我們只需照常操作即可

h1, h2, h3, h4, h5, h6 {
   font-family: WikiFont;
}

然後，支援該功能的瀏覽器中，該文件中的所有標題將顯示為我們的示例“WikiFont”。