通過CSS提供的幾個屬性，可以非常輕松有效地定義各種文本樣式，例如顏色、對齊方式、間距、裝飾、轉(zhuǎn)換等。
常用的文字屬性有：text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing等。 這些屬性使您可以精確控制 characters, words, spaces 的視覺外觀，等等。
方便我們更詳細(xì)地了解如何為元素設(shè)置這些文本屬性。
| 屬性 | 描述 |
| text-align | 設(shè)置文本的水平對齊方式； |
| text-decoration | 設(shè)置文本的裝飾； |
| text-transform | 設(shè)置文本中英文的大小寫轉(zhuǎn)換方式； |
| text-indent | 設(shè)置文本的縮進(jìn)方式； |
| line-height | 設(shè)置行高； |
| letter-spacing | 設(shè)置字符間距； |
| word-spacing | 設(shè)置單詞與單詞之間的間距（對中文無效）； |
| text-shadow | 設(shè)置文本陰影； |
| vertical-align | 設(shè)置文本的垂直對齊方式； |
| white-space | 設(shè)置文本中空白的處理方式； |
| direction | 設(shè)置文本方向。 |
1. text-align文本對齊方式
text-align 屬性用來設(shè)置元素中文本的水平對齊方式，屬性的可選值如下：
| 值 | 描述 |
| left | 默認(rèn)值，左對齊 |
| right | 右對齊 |
| center | 居中對齊 |
| justify | 兩端對齊 |
| inherit | 從父元素繼承 text-align 屬性的值 |
舉例：
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid black; /*為了能更直觀的體現(xiàn)出文本的對齊方式，這里給p標(biāo)簽設(shè)置一個邊框*/
}
.text1 {
text-align: left;
}
.text2 {
text-align: right;
}
.text3 {
text-align: center;
}
</style>
</head>
<body>
<p class="text1">左對齊</p>
<p class="text2">右對齊</p>
<p class="text3">居中對齊</p>
</body>
</html>展示的結(jié)果如圖：
2. text-decoration
text-decoration 屬性用于設(shè)置或刪除文本的裝飾，最常用的做法就是使用 text-decoration 屬性來刪除<a>標(biāo)簽的默認(rèn)下劃線。當(dāng)然了，使用 text-decoration 屬性也可以在需要的地方為元素中的文本添加一些裝飾，達(dá)到突出顯示的效果。
text-decoration 屬性的可選值如下：
| 值 | 描述 |
| none | 默認(rèn)值，標(biāo)準(zhǔn)文本，沒有額外裝飾，可以用來刪除已有的文本裝飾 |
| underline | 在文本下方添加一條下滑線 |
| overline | 在文本上方添加一條上滑線 |
| line-through | 在文本的中間定義一條橫向貫穿文本的線（類似于刪除線） |
| blink | 定義閃爍的文本（目前主流瀏覽器不再支持） |
| inherit | 從父元素繼承 text-decoration 屬性的值 |
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-decoration</title>
<style>
h1.under {
text-decoration: underline;
}
h1.over {
text-decoration: overline;
}
p.line {
text-decoration: line-through;
}
p.blink {
text-decoration: blink;
}
a.none {
text-decoration: none;
}
p.underover {
text-decoration: underline overline;
}
</style>
</head>
<body>
<h1 class="under">下劃線</h1>
<p class="line">刪除線</p>
<p class="blink">閃爍效果，但瀏覽器不會顯示</p>
<h1 class="over">下劃線</h1>
<p>這是一個 <a class="none" href="#">鏈接</a>，默認(rèn)情況下鏈接是有下劃線的，這邊我們移除它。</p>
<p class="underover">上劃線與下劃線</p>
</body>
</html>展示的結(jié)果如圖：
3. text-transform
text-transform 屬性用來控制文本中英文字母的大小寫，通過該屬性您可以在不修改原文的基礎(chǔ)上，將文本中的英文統(tǒng)一更改為小寫字母、大寫字母或者首字母大寫的形式。
| 值 | 描述 |
| none | 默認(rèn)。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本。 |
| capitalize | 文本中的每個單詞以大寫字母開頭。 |
| uppercase | 定義僅有大寫字母。 |
| lowercase | 定義無大寫字母，僅有小寫字母。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承text-transform屬性的值。 |
4. text-indent
text-indent 屬性用來為元素中的文本添加首行縮進(jìn)的效果，屬性的可選值如下：
| 值 | 描述 |
| length | 以固定的值加單位的形式（例如 2em）定義縮進(jìn)距離，默認(rèn)值為 0 |
| % | 以基于父元素寬度的百分比來定義縮進(jìn)距離 |
| inherit | 從父元素繼承 text-indent 屬性的值 |
5. line-height行高
該屬性會影響行框的布局。在應(yīng)用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（行間距）分為兩半，分別加到一個文本行內(nèi)容的頂部和底部?？梢园@些內(nèi)容的最小框就是行框。
| 值 | 描述 |
| normal | 默認(rèn)值，使用默認(rèn)的行高，不對行高進(jìn)行額外設(shè)置 |
| number | 以具體的數(shù)字設(shè)置行高，這個數(shù)字會與當(dāng)前的字體大小相乘，并將得到的值設(shè)置為行高 |
| length | 以數(shù)字加單位的形式設(shè)置固定的行高 |
| % | 以百分比的形式設(shè)置基于當(dāng)前字體尺寸百分比的行高 |
| inherit | 從父元素繼承 line-height 屬性的值 |
舉例：
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.8;
}
p.big {
line-height: 200%;
}
</style>
</head>
<body>
<p>
這是默認(rèn)的標(biāo)準(zhǔn)行高<br>
這是默認(rèn)的標(biāo)準(zhǔn)行高<br>
這是默認(rèn)的標(biāo)準(zhǔn)行高<br>
</p>
<p class="small">
使用數(shù)字定義一個較小的行高<br>
使用數(shù)字定義一個較小的行高<br>
使用數(shù)字定義一個較小的行高<br>
</p>
<p class="big">
使用百分比的形式定義一個較大的行高<br>
使用百分比的形式定義一個較大的行高<br>
使用百分比的形式定義一個較大的行高<br>
</p>
</body>
</html>展示的結(jié)果如圖：
6. letter-spacing
文字與文字間的間距，值可以負(fù)數(shù)，默認(rèn)值normal，所有瀏覽器都支持 letter-spacing 屬性。
| 值 | 描述 |
| normal | 默認(rèn)值，表示字符之間沒有額外的間距 |
| length | 以數(shù)值加單位的形式設(shè)置字符之間的固定間距（允許使用負(fù)值） |
| inherit | 從父元素繼承 letter-spacing 屬性的值 |
舉例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>css的letter-spacing屬性</title>
<style>
*{margin:0;padding:0;}
body{width:1000px;margin:200px auto;}
p{font-size:18px;}
.p01{ letter-spacing:2px;}
.p02{ letter-spacing:10px}
</style>
</head>
<body>
<p class="p01">css文字間距測試文字！</p>
<p class="p02">css文字間距測試文字！</p>
</body>
</html>展示的結(jié)果如圖：
7. word-spacing
word-spacing 屬性用來設(shè)置單詞與單詞之間的間距，但對中文無效，屬性的可選值如下：
| 值 | 描述 |
| normal | 默認(rèn)值，表示單詞與單詞之間沒有額外的間距 |
| length | 以數(shù)值加單位的形式設(shè)置單詞與單詞之間的固定間距（允許使用負(fù)值） |
| inherit | 從父元素繼承 word-spacing 屬性的值 |
8. text-shadow文本陰影
text-shadow 為文字添加陰影?？梢詾槲淖峙c decoration 添加多個陰影，陰影值之間用逗號隔開。每個陰影值由元素在 X 和 Y 方向的偏移量、模糊半徑和顏色值組成。
9. vertical-align
vertical-align 屬性設(shè)置元素的垂直對齊方式。
css中的vertical-align 屬性只能用于 行內(nèi)元素 和 置換元素（例如 圖像和表單輸入框） ，此屬性不繼承。
首先我們先看一張圖，文字的頂線、中線、基線，基線是字母x的下邊緣
提到了基線、底線、頂線、中線等概念，它們到底指什么呢？
（1）頂線：中文漢字的上邊沿；
（2）中線：貫穿小寫英文字母 x 中間的線；
（3）基線：小寫英文字母 x 的下邊沿；
（4）底線：中文漢字的下邊沿；
（5）內(nèi)容區(qū)：指底線與頂線包裹的區(qū)域；
（6）行高：包括內(nèi)容區(qū)與以內(nèi)容區(qū)為基礎(chǔ)對稱拓展的空白區(qū)域，我們稱之為行高，也可以認(rèn)為是相鄰文本行基線間的距離；
（7）行距：指相鄰文本行間上一個文本行底線和下一文本行頂線之間的距離；
（8）行內(nèi)框：是一個瀏覽器渲染模型中的概念，無法顯示出來，但是它又確實存在，它的高度與行高相同；
（9）行框：同行內(nèi)框類似的概念，行框是指本行的一個虛擬的矩形框，也是瀏覽器渲染模式中的一個概念。行框高度等于本行內(nèi)所有元素中行內(nèi)框最大的值（以行高值最大的行內(nèi)框為基準(zhǔn)，其他行內(nèi)框采用自己的對齊方式向基準(zhǔn)對齊，最終計算行框的高度）。
10. white-space處理空白符
| 值 | 描述 |
| normal | 默認(rèn)?？瞻讜粸g覽器忽略。 |
| pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。 |
| nowrap | 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 標(biāo)簽為止。 |
| pre-wrap | 保留空白符序列，但是正常地進(jìn)行換行。 |
| pre-line | 合并空白符序列，但是保留換行符。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。 |
下面的表格總結(jié)了 white-space 屬性的行為：
| 值 | 空白符 | 換行符 | 自動換行 |
| pre-line | 合并 | 保留 | 允許 |
| normal | 合并 | 忽略 | 允許 |
| nowrap | 合并 | 忽略 | 不允許 |
| pre | 保留 | 保留 | 不允許 |
| pre-wrap | 保留 | 保留 | 允許 |
11. direction文本方向
| 值 | 描述 |
| ltr | 默認(rèn)值，文本按從左到右的方向輸出 |
| rtl | 文本按從右到左的方向輸出 |
| inherit | 從父元素繼承 direction 屬性的值 |
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點擊了解：
一點編程也不會寫的：零基礎(chǔ)C語言學(xué)練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進(jìn)階課程
從零到寫出一個爬蟲的Python編程課程
只會語法寫不出代碼？手把手帶你寫100個編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競賽課入門課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程