透過CSS提供的幾個屬性，可以非常輕鬆有效地定義各種文字樣式，例如顏色、對齊方式、間距、裝飾、轉換等。
常用的文字屬性有：text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing等。 這些屬性使您可以精確控制characters, words, spaces 的視覺外觀，等等。
方便我們更詳細地了解如何為元素設定這些文字屬性。
1.text-align文字對齊方式
text-align 屬性用來設定元素中文字的水平對齊方式，屬性的可選值如下：
舉例：
<!DOCTYPEhtml><html><head><style>p{border:1pxsolidblack;/*為了能更直覺的體現出文字的對齊方式，這裡給p標籤設定一個邊框*/}.text1{text-align: left;}.text2{text-align :right;}.text3{text-align:center;}</style></head><body><pclass=text1>左對齊</p><pclass=text2>右對齊</p><pclass= text3>居中對齊</p></body></html>展示的結果如圖：
2. text-decoration
text-decoration 屬性用於設定或刪除文字的裝飾，最常用的做法就是使用text-decoration 屬性來刪除<a>標籤的預設底線。當然了，使用text-decoration 屬性也可以在需要的地方為元素中的文字添加一些裝飾，達到突出顯示的效果。
text-decoration 屬性的可選值如下：
舉例：
<!DOCTYPEhtml><html><head><metacharset=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-de coration:none;}p.underover{text-decoration:underlineoverline;}</style></head><body><h1class=under>底線</h1><pclass=lin e>刪除線</p><pclass=blink>閃爍效果，但瀏覽器不會顯示</p><h1class=over>下劃線</h1><p>這是一個<aclass=nonehref=#>鏈接</a>，預設情況下連結是有下劃線的，這邊我們移除它。 </p><pclass=underover>上劃線與底線</p></body></html>展示的結果如圖：
3.text-transform
text-transform 屬性用來控製文本中英文字母的大小寫，透過該屬性您可以在不修改原文的基礎上，將文本中的英文統一更改為小寫字母、大寫字母或首字母大寫的形式。
4.text-indent
text-indent 屬性用來為元素中的文字新增首行縮排的效果，屬性的可選值如下：
5.line-height行高
此屬性會影響行框的佈局。在應用到一個區塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與font-size 的計算值之差（行間距）分為兩半，分別加到一個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。
舉例：
<!DOCTYPEhtml><html><head><style>p.small{line-height:0.8;}p.big{line-height:200%;}</style></head><body><p>這是預設的標準行高<br>這是預設的標準行高<br>這是預設的標準行高<br></p><pclas s=small>使用數字定義一個較小的行高<br>使用數字定義一個較小的行高<br>使用數字定義一個較小的行高<br></p><pclass=big>使用百分比的形式定義一個較大的行高<br>使用百分比的形式定義一個較大的行高<br>使用百分比的形式定義一個較大的行高<br></p></body>< /html>展示的結果如圖：
6.letter-spacing
文字與文字間的間距，值可以負數，預設值normal，所有瀏覽器都支援letter-spacing 屬性。
舉例：
<!DOCTYPEhtml><html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gbk2312/><title>css的letter-spacing屬性</title><style>*{margin:0; padding:0 ;}body{width:1000px;margin:200pxauto;}p{font-size:18px;}.p01{letter-spacing:2px;}.p02{letter-spacing:10px}</style></head>< body><pclass=p01>css文字間距測試文字！ </p><pclass=p02>css文字間距測試文字！ </p></body></html>展示的結果如圖：
7.word-spacing
word-spacing 屬性用來設定單字與單字之間的間距，但對中文無效，屬性的可選值如下：
8.text-shadow文本陰影
text-shadow 為文字加上陰影。可以為文字與decoration 添加多個陰影，陰影值之間用逗號隔開。每個陰影值由元素在X 和Y 方向的偏移量、模糊半徑和顏色值組成。
9.vertical-align
vertical-align 屬性設定元素的垂直對齊方式。
css中的vertical-align 屬性只能用於行內元素和置換元素（例如映像和表單輸入框） ，此屬性不繼承。
首先我們先看一張圖，文字的頂線、中線、基線，基線是字母x的下緣
提到了基線、底線、頂線、中線等概念，它們到底指什麼呢？
（1）頂線：中文漢字的上邊；
（2）中線：貫穿小寫英文字母x 中間的線；
（3）基線：小寫英文字母x 的下邊緣；
（4）底線：中文漢字的下邊緣；
（5）內容區：指底線與頂線包裹的區域；
（6）行高：包含內容區與以內容區為基礎對稱拓展的空白區域，我們稱之為行高，也可以認為是相鄰文本行基線間的距離；
（7）行距：指相鄰文字行間上一個文字行底線和下一文本行頂線之間的距離；
（8）行內框：是一個瀏覽器渲染模型中的概念，無法顯示出來，但是它又確實存在，它的高度與行高相同；
（9）行框：同儕內框類似的概念，行框是指本行的一個虛擬的矩形框，也是瀏覽器渲染模式中的一個概念。行框高度等於本行內所有元素中行內框最大的值（以行高值最大的行內框為基準，其他行內框採用自己的對齊方式向基準對齊，最終計算行框的高度）。
10.white-space處理空白符
下面的表格總結了white-space 屬性的行為：
11.direction文字方向