CSS 語法 05:文字 text

文字(text, letter)

• line-height (行高)

每一行之間的間距

p {
line-height: 50px;
}
<p>兩行之間<br>間距為50px</p>

以上將顯示為:

兩行之間

間距為50px

 

• letter-spacing

letter-spacing 為「每個字母」之間的相隔空間

<p style="letter-spacing:9px;">The spacing between letters</p>

以上將顯示為:

The spacing between letters
字和字之間的距離

 

• word-spacing

word-spacing 為詞 (word) 和詞 (word) 之間的距離

<p style="word-spacing:15px;">The spacing between letters</p>

以上將顯示為:

The spacing between words
在中文 則是 空白鍵 產生的空間大小

• text-align

文字對齊哪一邊,如齊左、齊右、齊中和分散對齊。

 

  • 齊左
p {
text-align:left;
}
<p>齊左,靠左對齊</p>

齊左,靠左對齊

 

  • 齊右
p {
text-align:right;
}
<p>齊右,靠右對齊</p>

齊右,靠右對齊

 

  • 置中
p {
text-align:cneter;
}
<p>置中,對齊中間</p>

置中,對齊中間

 

  • 分散對齊
p {
text-align:justify;
}
<p>分散對其就是齊頭齊尾的意思,比較常用在英文的場合。目的是讓整段文字看起來比較整齊,但是有人認為因為字距會受到微調,因而降低易讀性。A long long time ago. I can still remember how. That music used to make me smile. And I knew if I had my chance. That I could make those people dance. And maybe they'd be happy for a while. But February made me shiver. With every paper I'd deliver. Bad news on the doorstep. I couldn't take one more step. I can't remember if I cried. When I read about his widowed bride. Something touched me deep inside. The day the music died.So...-Don McLean-American Pie</p>

分散對其就是齊頭齊尾的意思,比較常用在英文的場合。目的是讓整段文字看起來比較整齊,但是有人認為因為字距會受到微調,因而降低易讀性。A long long time ago. I can still remember how. That music used to make me smile. And I knew if I had my chance. That I could make those people dance. And maybe they’d be happy for a while. But February made me shiver. With every paper I’d deliver. Bad news on the doorstep. I couldn’t take one more step. I can’t remember if I cried. When I read about his widowed bride. Something touched me deep inside. The day the music died.So…-Don McLean-American Pie

 

• text-direction

text-direction 和 text-align 的差別,可以解釋為 text-direction 是文字排列的方向,text-align 是文字對齊的方式。
text-direction 在中文環境不常使用,因為目前在顯示器上面的文字方向已經習慣為由左至右。
另外有些人可能會發現,text-direction 和 text-align 呈現出來的結果似乎一樣。

text-direction 的值有 「ltr」(由左至右) 和「rtl」(由右至左)

<div style="direction: rtl; background: #F2F2F2; width:300px;">
<div style="display: inline-block;">A</div>
<div style="display: inline-block;">B</div>
<div style="display: inline-block;">C</div>
</div>

以上將顯示為:

A
B
C
<div style="direction: ltr; background: #F2F2F2; width:300px;">
<div style="display: inline-block;">A</div>
<div style="display: inline-block;">B</div>
<div style="display: inline-block;">C</div>
</div>

以上將顯示為:

A
B
C

• text-decoration

p {
text-decoration:underline;
}

文字下方加底線,有人認為會和連結產生識別上的混淆

p {
text-decoration:text-decoration:overline;
}

文字上方加一條線,這個有點令人困惑

p {
text-decoration:text-decoration:line-through;
}

一條線畫過文字,跟刪除線一樣

p {
text-decoration:text-decoration:line-through overline underline;
}

三條線,順便示範可以一次給三個值,用空格隔開

 

• text-indent

text-indent 用來控制每一個段落的開頭要留多少空間,有點像在中文我們正式寫作文時,每一段起頭都要留兩個字的空間。

他的值可以宣告為數值或百分比。

p {
text-indent:30px;
}

以上 CSS 在 <p> 標籤裡將顯示為:

這一段的開頭要留30px的空間
第二行將不會留。

p {
text-indent:10%;
}

這一段的開頭要留整個寬度 10% 的空間
第二行將不會留。

 

• text-transform

text-transform 用來控制大小寫,它的值有:

p {
text-transform: capitalize;
}
單字的第一個字母
強制大寫
This is an apple.
p {
text-transform: uppercase;
}
所有字母
強制大寫
This is an apple.
p {
text-transform: lowercase;
}
所有字母
強制小寫
This is an apple.
p {
text-transform: none;
}
所有字母維持
原樣不改變
This is an apple.

 

Daco

DacoNote 網站工友,有燈泡壞掉請找我。

您可能也會喜歡…