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