【CSS學習】--- 文本樣式
一、前言
CSS文本屬性可以定義文本的外觀。通過文本屬性，可以定義文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。
CSS常用的文本屬性目錄：
| text-align | 文本對齊屬性 |
| text-indent | 首行縮進屬性 |
| line-height | 行高屬性 |
| word-spacing | 單詞間隔屬性 |
| letter-spacing | 字符間隔屬性 |
| text-decoration | 文本裝飾屬性 |
| text-transform | 大小寫轉換屬性 |
下面我們開始逐步學習CSS中的文本樣式。
二、文本對齊：text-align
text-align 屬性只適用於塊級元素和單元格元素，使用後塊級標簽裏的內聯元素會整體進行移動，而子塊級元素或子單元格則會繼承父元素的text-align屬性。
屬性值：
小栗子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style type="text/css"> table,tdtext-align示例{border: solid #FF6699 1px} table{width: 500px;} span{background: #FF33CC;} .center{text-align: center;} </style> </head> <body> <table> <tr class="center"> <td colspan="2"> <img src="http://h5ip.cn/PUQa"width="300px" height="100px"> </td> </tr> <tr> <td class="center"><span>趙麗穎</span></td> <td><span class="center;">趙小刀</span></td> </tr> </table> </body> </html>
三、首行縮進：text-indent
text-indent屬性只適用於塊級元素和單元格元素，該屬性規定文本塊中首行文本的縮進。允許使用負值。如果使用負值，那麽首行會被縮進到左邊，產生一種“懸掛縮進”的效果。
使用後塊級標簽裏的內聯元素會整體進行縮進，而子塊級元素或子單元格則會繼承父元素的text-indent屬性。
屬性值：
em 定義基於父元素字體倍數倍數的縮進
栗子：
<div style="width: 100px; border: solid black 1px; margin-left: 50px; text-indent: -2em;"> 測試text-align為負值 </div> <div style="width: 100px; border: solid black 1px; margin-left: 50px; text-indent: -2em;"> <img src="http://h5ip.cn/ybPo" width="50px" height="60px"> </div> <div style="width: 100px; border: solid black 1px; margin-left: 50px;"> <span style="text-indent: -2em">內聯元素設置text-indent無效</span> </div>text-indent示例
四、行高：line-height
line-height 屬性只適用於塊級元素和單元格元素，該屬性設置行間的距離（行高），它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
當屬性值為數字時，行高就是當前字體的高度和該數字的乘積，後代元素也將繼承該數字而不是行高值。
屬性值：
栗子：
<div style="width: 250px; border: solid black 1px; line-height: 40px;"> line-height對塊級元素有效 </div> <span style="border: solid red 1px; line-height: 30px;">line-height對內聯元素無效</span>line-height示例
五、字間隔：word-spacing
word-spacing 屬性增加或減少單詞（字）間的空白（即字間隔）。默認值normal與其設置值為0是一樣的。應當註意的是，該屬性的值是用於增加或減少字間隔的值，而不是定義間隔值為該屬性值。
CSS 把“字（word）”定義為任何非空白字符組成的串，並由某種空白字符包圍。
屬性值：
舉栗子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> </head> <body> <p style="word-spacing: 20px;">It‘s a sentence。我們的間隔沒增加哦！ 又 增 加 了 哦。</p> </body> </html>只改變字之間的間隔
六、字符間隔：letter-spacing
letter-spacing 屬性用於增加或減少字符間的空白（字符間距），與 word-spacing 的區別在於，letter-spacing 修改的是字符或字母或漢字或"空白"之間的間隔。其中"空白"不是編輯器中的空格，而是瀏覽器中合並空白字符之後的"空白"。
默認值normal相當於值為0。
屬性值：
栗子：
<span>今天很美好</span><br> <span>今 天 很 美 好</span><br> <span style="letter-spacing: 10px;">今天很美好</span><br> <span style="letter-spacing: 10px;">今 天 很 美 好</span><br> <span style="letter-spacing: 10px;">今 天 很 美 好</span>letter-spcing示例
七、文本裝飾：text-decoration
text-decoration屬性用於為文本添加裝飾效果。子元素會繼承並在自己的text-decoration屬性上添加父元素的ext-decoration屬性值。
屬性值：
栗子：
<div style="text-decoration: underline;"> 父元素 <div style="text-decoration: overline; line-height: 50px;"> <span style="text-decoration: none;">子元素</span> </div> </div>text-decoration繼承示例
八、大小寫轉換：text-transform
text-transform 屬性用於控制文本的大小寫。如果值為 capitalize，則要對某些字母大寫，但是並沒有明確定義如何確定哪些字母要大寫，這取決於用戶代理如何識別出各個“詞”。
不同的用戶代理可能會用不同的方法來確定單詞從哪裏開始，相應地確定哪些字母要大寫。例如，文本 "w3-school" 可以用兩種方式顯示："W3-school" 和 "W3-School"。CSS 並沒有規定哪一種是正確的，所以這兩種都是可以的。
屬性值：
栗子：
<span style="text-transform: lowercase;">HTML</span><br> <span style="text-transform: uppercase;">hello</span><br> <span style="text-transform: capitalize;">today is fine</span>test-transform示例
九、最後
參考學習W3School，如有錯誤或不足請留言指出，十分感謝！
【CSS學習】--- 文本樣式