以下是幾個最常被用到與文字樣式有關的 CSS 屬性。
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
text-transform
word-spacing
direction
direction 屬性是用來設定文字的方向。可能的值為 'ltr' 及 'rtl'。
舉例來說，若 CSS 宣告是，
那以下的 HTML 碼，
就會顯現
若 CSS 宣告是，
那以下的 HTML 碼，
就會顯現
letter-spacing
letter-spacing 屬性是用來設定每一個字母之間的空間。舉例來說，若 CSS 宣告是，
|
p {
letter-spacing:8px;
}
|
那以下的 HTML 碼，
|
<p>8px between letters</p>
|
就會顯現
line-height
line-height 屬性是用來設定每一行之間的空間。舉例來說，若 CSS 宣告是，
那以下的 HTML 碼，
|
<p>第一行和第二行之間<br>相隔 40px。</p>
|
就會顯現
text-align
text-align 屬性是用來設定文字是如何對齊。可能的值包括：
left： 靠左對齊
right： 靠右對齊
center： 向中間對齊
justified： 左右對齊
請看以下的例子：
| CSS 樣式 |
顯現結果 |
|
p {
text-align:left;
}
|
這一段句子，是靠左對齊的例子。
|
|
p {
text-align:right;
}
|
這一段句子，是靠右對齊的例子。
|
|
p {
text-align:center;
}
|
這一段句子，是向中間對齊的例子。
|
|
p {
text-align:justify;
}
|
這一段句子，是左右兩邊都對齊的例子。
|
text-decoration
text-decoration 屬性是用來設定文字上有什麼裝飾。可能的值包括：
underline: 文字下加上一條線。
overline: 文字上加上一條線。
line-through: 文字中間加上一條線劃過去。
blink: 讓文字閃爍。
請看以下的例子：
| CSS 樣式 |
顯現結果 |
|
p {
text-decoration:underline;
}
|
文字下加一條線
|
|
p {
text-decoration:overline;
}
|
文字上加上一條線
|
|
p {
text-decoration:line-through;
}
|
文字中間加上一條線劃過去
|
text-indent
text-indent 屬性是用來設定每一段的第一行前面要留多少空間。
可設定的值包括百分比以及長度。舉例來說，若有以下的 CSS 宣告，
那以下的 HTML 碼，
|
<p>這一段第一行的最前面會留 15px 的空間。之後的行數就沒有留任和空間了。</p>
|
就會顯現，
|
這一段第一行的最前面會留 15px 的空間。之後的行數就沒有留任和空間了。
|
text-transform
text-transform 屬性是用來控制大小寫是如何展現的。可能的值包括：
capitalize： 每一個字的第一個字母都以大寫顯現，其他的字母則不改變。
uppercase： 所有的字母都以大寫顯現。
lowercase： 所有的字母都以小寫顯現。
none： 大小寫不做任何改變。
舉例來說，用以上這幾個值用在 "this is a LAWYER" 這幾個字上，我們回得到以下的結果：
| CSS 樣式 |
顯現結果 |
|
p {
text-transform:capitalize;
}
|
this is a LAWYER
|
|
p {
text-transform:uppercase;
}
|
this is a LAWYER
|
|
p {
text-transform:lowercase;
}
|
this is a LAWYER
|
word-spacing
word-spacing 屬性是用來設定每個字與每個字之間的距離。舉例來說，若 CSS 宣告是，
那以下的 HTML 碼，
|
<p>Words here are separated by 5px.</p>
|
就會顯現，
|
Words here are separated by 5px.
|
|
