文字縮排的使用-CSS入門基礎（009）
技術標籤：CSScsscss3javascripthtml5html
今天我們接著分享關於文字樣式的內容。
font-variant屬性：
在CSS中，使用font-variant屬性只有一個作用，就是把文字設定成小型的小寫字母，此屬性只針對英文而言。
語法：
font-variant:normal/small-caps;| font-variant屬性 | |
| 屬性值 | 說明 |
| normal | 預設值，正常效果 |
| small-caps | 小型大寫字母 |
示例程式碼：
<html><head><title>font-variant</title><style type="text/css">#p1 { font-variant:normal;}#p2{font-variant:small-caps;}</style></head><body><pid="p1">font-variant屬性值為normal</p><pid="p2">font-variant屬性值為small-caps</p></body></html>
此屬性在英文國家能夠見到，在中文網頁中極少用到。
text-indent文字縮排：
我們在使用<p>標籤的時候，首行文字是不會縮排的，在HTML中，我們通常使用“ ”空格來做進首行文字，但是這樣冗餘程式碼較多。在css程式碼中，我們可以使用text-indent屬性來定義段落的首行縮排。
語法：
text-indent:畫素值；示例程式碼：
<html><head><title>文字縮排</title><style type="text/css">#p1{font-size:15px;}#p2{font-size:15px;text-indent:30px;}</style></head><body><h3>文字縮排</h3><p id="p1">此行文字沒有縮排。</p><p id="p2">此行文字有縮排。</p></body></html>
在css入門基礎中，建議大家縮排時使用畫素為單位，等到更加深入後，在學習其他的單位。
大家注意觀察，這裡有個小技巧，就是文字縮排一般都是需要縮排兩個字的，那麼我們就可以先設定字元的畫素值，再設定縮排值是字元值的兩倍。這樣就可以達到縮排兩個字的目的。
text-align文字對齊：
文字對齊分為，左對齊，居中對齊，右對齊。
語法：
text-align：屬性值；| text-align屬性取值 | |
| 屬性值 | 說明 |
| left | 預設值，左對齊 |
| center | 居中對齊 |
| right | 右對齊 |
text-align屬性只能針對文字文字和img標籤，對其他標籤無效。
示例程式碼：
<html><head><title>對齊方式</title><style type="text/css">div{width:400px;height:300px;border: 1px solid black;}#p1{text-align:left;}#p2 { text-align:center;}#p3 { text-align:right;}</style></head><body><div><p id="p1">蝦米大王教你學程式設計系列之XXX</p><p id="p2">蝦米大王教你學程式設計系列之XXX</p><p id="p3">蝦米大王教你學程式設計系列之XXX</p></div></body></html>
因為p標籤是塊元素，是獨佔一行的，所以當你設定了文字對齊後，它是按照整個頁面的寬度來計算對齊的位置的，此時我使用div包裹它們，是為了將寬度設定在一個小的範圍內，便於觀察。
line-height行高：
在這裡糾正一個錯誤，就是很多書中，喜歡把line-height稱為行間距，但其實整個叫法不嚴謹，因為行間距應該是指兩行之間的距離，而line-height實際只是代表了行的高度。
語法：
line-height:畫素值；一般在css入門階段，我們都是採用畫素做單位的。
示例程式碼：
<html><head><title>行高line-height</title><styletype="text/css">div{width:400px;height:300px;border: 1px solid black;}#p1{line-height:10px;}#p2 {line-height:20px;}#p3 {line-height:30px;}#p4 {line-height:40px;}#p5 {line-height:50px;}</style></head><body><div><pid="p1">我是第1行</p><p id="p2">我是第2行</p><p id="p3">我是第3行</p><p id="p4">我是第4行</p><p id="p5">我是第5行</p></div></body></html>
從程式碼中，可以觀察到，我給每行的行高，加了一倍，它只是影響了其所在行的行高，並沒有影響上下，所以它只是行高，不是行間距的概念。
下節我們接著分享關於文字樣式的內容。
