第五課：文本

安排和添加文本樣式是網頁設計很重要的一個部分。這一課將學習如何利用CSS添加文本布局。下面是幾個將要描述的特性：

text-indent
text-align
text-decoration
letter-spacing
text-transform

文本縮進[text-indent]

特性text-indent能讓段落的第一行縮進，給文本段落增加一個漂亮的開始。下面這個30px的實例適用于所有標記為<p>的文本段落：

p {
text-indent: 30px;
}

文本對齊[text-align]

CSS的特性text-align相當于HTML舊版本的對齊排列。文本可以對齊左側，右側或中央。除此之外，調整值會拉伸每條線，讓左右兩側邊緣都是直的。這種布局可以在報紙和雜志上看到。

下面這個文本實例中，標題<th>被安排在右側，而表單數據<td>被放在中間。此外，正常的文本段落是可調節的。

th {
text-align: right;
}

td {
text-align: center;
}

p {
text-align: justify;
}

字母間隙[letter-spacing]

文本字符之間的空間可以用letter-spacing定義。這一特性的值能用想要的寬度描述。例如，如果想讓文本段落中的字符空間保持3px，標題字符間隔6px，可以用下面的代碼：

h1 {
text-decoration: underline;
}

h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}

文本轉換[text-transform]

特性text-transform控制文本的大小寫顯示。無論HTML代碼讓原來的文字看起來怎樣，都可以選擇大寫或小寫字母。以文字“headline”為例，顯示給用戶的結果可以是“HEADLINE”或“Headline”。下面是text-transform的四個值：

capitalize：大寫每個單詞的第一個字母。例如，”john doe” 的”John Doe”。
uppercase：將所有字母轉換為大寫。例如，”john doe” 的”JOHN DOE”。
lowercase：將所有字母轉換為小寫。例如。 “JOHN DOE” 的”john doe”。
none：No transformations – 文字依照HTML代碼顯示。

作為一個實例，我們將使用名稱列表。所有名稱都用<li>標記。假設我們想讓名稱大寫字母，并且標題顯示為大寫字母。注意觀察這個實例的HTML代碼，你會看到文本實際上是小寫。

h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}

概述

在前三課，你已經學習了許多CSS特性，但CSS知識還有很多。下一課我們將學習鏈接。