CSS 文字

CSS 文字屬性允許你非常輕鬆地定義多種文字樣式，如顏色、對齊、間距、裝飾、變換等。

使用 CSS 格式化文字

CSS 有幾個用於定義文字樣式的屬性。這些屬性使你可以精確控制字元 、空格 、單詞 、段落等的視覺外觀。

你可以設定元素的以下文字屬性：

文字顏色

文字顏色由 CSS color 屬性定義。

h1 {
    color: #ff0000;
}
p {
    color: green;
}

注意： 雖然，文字的顏色看起來像是 CSS 文字的一部分，但它實際上是 CSS 中的獨立屬性。

文字對齊

text-align 屬性用於設定文字的水平對齊方式。

此屬性可能的值有： left ， right ， center ， justify 和 inherit。

h1 {
    text-align: center;
}
p {
    text-align: justify;
}

注意： 當 text-align 設定為 justify 時，每條線都被拉伸，以使每條線具有相等的寬度，左右邊距是直的。

文字裝飾

text-decoration 屬性用於設定或刪除文字中的裝飾。

此屬性的可能值有： none 、 underline 、 overline 、 line-through 、 blink 和 inherit。你應該避免使用非連結的下劃線文字，因為它可能會使訪問者感到困惑。

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

警告： 大多數瀏覽器不支援 CSS text-decoration 屬性的 blink 值。你應該避免這個值。

刪除連結預設下劃線

text-decoration 屬性通常用於從超連結中刪除預設下劃線。完全刪除下劃線可能會使訪問者感到困惑。除非你提供一些其他的視覺提示，以使其脫穎而出，同時造型連結。

例如，你可以使用點來為你的連結加下劃線而不是實線。

a {
    text-decoration: none;
    border-bottom: 1px dotted;
}

注意： 建立 HTML 連結時 ，樣式表中內建的瀏覽器會自動為其新增下劃線，以便讀者可以看到哪些文字是可點選的。

文字轉換

text-transform 屬性用於設定文字的大小寫。

它可用於將元素的文字內容設定為大寫或小寫字母，或大寫每個單詞的第一個字母。text-transform 屬性可能的值有： none 、 capitalize 、 uppercase 、 lowercase 和 inherit。

p.up {
    text-transform: uppercase;
}
p.cap {
    text-transform: capitalize;
}
p.low {
    text-transform: lowercase;
}

文字縮排

text-indent 屬性用於設定元素第一行文字的縮排。 text-indent 屬性的可能值包括： percentage （%），length （指定縮排空間）或 inherit。

以下示例演示如何縮排段落的第一行。

p {
    text-indent: 100px;
}

注意： 文字是從左側還是從右側縮排取決於元素內部的文字方向，由 CSS direction 屬性定義。

單詞間距

word-spacing 用於設定單詞之間間距的屬性。

• 字間距可能受文字對齊的影響。檢視 text-align 屬性。
• 保留空格時，所有空格字元都受字間距的影響。請參閱 CSS white-space 屬性。

word-spacing 屬性的可能值包括： length （指定要在單詞之間插入的空間） normal 和 inherit。

p.one {
    word-spacing: 20px;
}
p.two {
    word-spacing: 20px;
    text-align: justify;
}
p.three {
    word-spacing: 20px;
    white-space: pre;
}

字母間距

letter-spacing 屬性用於設定文字字元之間的額外間距。

此屬性的可能值包括： length （指定除了預設的字元間空間之外在字元之間插入的額外空間）， normal 以及 inherit。

h1 {
    letter-spacing: -3px;
}
p {
    letter-spacing: 10px;
}

線高

line-height 屬性定義一行文字的高度（也稱為行距）。

此屬性可能的值是： 百分比 （%）、 長度 、 數量 、 normal 和 inherit。

p {
    line-height: 1.2;
}

當值為數字時，通過將元素的字型大小乘以數字來計算行高。而百分比值則相對於元素的字型大小。

注意： 不允許使用此屬性的負值。此屬性也是字型速記屬性的組成部分。

如果 line-height 屬性的值大於 font-size 元素的值，則該差異（稱為 “前導”）被減半（稱為 “半前導”）並均勻分佈在 in-line 框的頂部和底部。

p {
    font-size: 14px;
    line-height: 20px;
    background-color: #f0e68c;
}

要了解有關文字樣式的更多資訊，請參閱與字型和文字對齊相關的屬性。