層疊樣式表/字型和文字

字型屬性

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

下面將詳細介紹這些屬性。

font-family

W3C 規範 CSS1 CSS2.1

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

font-family 屬性的值是按優先順序順序排列的字型列表，用逗號分隔。網頁瀏覽器將嘗試使用列表中的第一個字型。如果第一個字型不可用（或如果也指定了 font-variant，則不可用適當的變體），網頁瀏覽器將嘗試使用第二個字型，依此類推，直至列表中的最後一個字型。如果列表中的字型都無法匹配，網頁瀏覽器將使用預設字型。這可能是使用者選擇的字型。

在下面的示例中，網頁瀏覽器將嘗試使用 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 時，小寫字母將顯示為縮小的 uppercase 字母。uppercase 字母和其他字元保持不變。下面顯示了這些值的效用。

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>

示例渲染

該 文字 大小 改變 很多。

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

在 Internet Explorer 中使用 em

如果您在使用 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 元素都匹配選擇器，因此文字的大小每次都會減半。最裡面的分割槽中的文字是使用者預設字型大小的 ¹/₁₆。您可能很難閱讀示例渲染，除非您顯著增加預設字型大小。

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>

示例渲染

該分割槽包含

另一個包含

另一個分割槽，依此類推

直到文字變得很小。

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

表格和表單的問題

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

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

line-height

W3C 規範 CSS1 CSS2.1

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

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

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 中可用。

單個屬性的組合

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

• 無，一個或多個 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
}

關鍵字

關鍵字值引用 web 瀏覽器用於選單等專案系統字型。關鍵字值是

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

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

letter-spacing

如果將此設定為除 normal 以外的任何值，則 web 瀏覽器可能只在對齊文字時調整字間距。

word-spacing

如果將此設定為除 normal 以外的任何值，則 web 瀏覽器必須嘗試在對齊文字時遵守指定的 value。

letter-spacing

W3C 規範 CSS1 CSS2.1

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

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 屬性用於增加或減少單詞之間的間距。web 瀏覽器不需要支援減少單詞間距，或者可能只允許有限的減少。

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 元素的，父 p 元素的顏色設定為黑色。

text-indent

W3C 規範 CSS1 CSS2.1

text-indent 屬性指定塊級元素第一行的縮排。使用 margin-left、margin-right、padding-left 或 padding-right 來縮排整個塊。縮排可能是負的，但 web 瀏覽器不需要支援負縮排，或者可能限制負縮排的大小。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

不做任何操作。

大寫

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

小寫

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

首字母大寫

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

text-transform 的確切效果取決於元素的語言。語言的確定方式取決於正在設定樣式的文件。HTML 文件使用 lang 屬性指定元素的語言。語言會被子元素繼承，除非使用 lang 屬性來更改語言。XML 文件以相同的方式使用 xml:lang。XHTML 1.0 文件可以使用 HTML 的 lang 屬性或 XML 的 xml: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。

垂直對齊

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.

文字陰影

文字陰影是 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!

立體影像

您可以使用 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 作為超連結或背景顏色。

此文字具有兩個畫素的紅-青色分離。

此文字具有四個畫素的紅-青色分離。

此文字具有六個畫素的紅-青色分離。

您需要戴上紅-青色 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" 顯示。