文字(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>
以上將顯示為：
<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>
以上將顯示為：
• 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. |