css 文本屬性詳細總結

CSS 文本屬性可定義文本的外觀。

通過文本屬性，您可以改變文本的顔色、字元間距，對齊文本，裝飾文本，對文本進行縮進，等等。

1，text-align 橫向排列，也就是水準對齊

它會影響一個元素中的文本行互相之間的對齊方式 屬性值有：left（預設），center，right

p{

text-align:right

}

您可能會認為 text-align:center 與 <CENTER> 元素的作用一樣，但實際上二者大不相同。

<CENTER> 不僅影響文本，還會把整個元素居中。text-align 不會控制元素的對齊，而隻影響内部内容。元素本身不會從一段移到另一端，隻是其中的文本受影響。

2,line-height 文本行高

1，%基于字型大小的百分比行高 ，也就是說與字型的大小有關

2，數值 來設定固定值

<code>p{</code>

<code>text-align:left;</code>

<code>font-size:20px;</code>

<code>line-height:50%;  基于字型大小的1/2 行高</code>

<code>}</code>

3,text-indent 首行縮進

% 父元素的百分比

px 固定值 ，預設為0

inherit 繼承

<code>div {</code>

<code>width:300px;</code>

<code>height:300px;</code>

<code>text-indent:50%;  基于div容器的縮進50%（1/2）</code>

4,letter-spacing 字元間距

定義文本中兩個字元之間距離

1，預設關鍵字是 normal 也就是相當于 letter-spacing：0；

2，length設定具體值（可以為負）

3，inherit

<code>h1 {</code>

<code>letter-spacing: -0.5em</code>

<code>h4 {</code>

<code>letter-spacing: 20px</code>

5，word-spacing 單詞間距 

定義英文單詞之間的間距

1，normal 标準

2，px設定固定值

3.inherit

<code>word-spacing: -0.5em</code>

<code>word-spacing: 20px</code>

6，direction 文本方向 ，定義文本書寫方向

1，ltr從左到右  left to right

2，rtl從右到左

3，inherit繼承

<code>/*text-align:left;</code>

<code>text-indent:50%;*/  基于div容器的縮進50%（1/2）</code>

<code>direction:rtl;   定義文本從右開始寫</code>

7，text-transform文本大小寫

text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：

none

uppercase

lowercase

capitalize

預設值 none 對文本不做任何改動，将使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 将文本轉換為全大寫和全小寫字元。最後，capitalize 隻對每個單詞的首字母大寫。

作為一個屬性，text-transform 可能無關緊要，不過如果您突然決定把所有 h1 元素變為大寫，這個屬性就很有用。不必單獨地修改所有 h1 元素的内容，隻需使用 text-transform 為你完成這個修改：

h1 {

text-transform: uppercase;

      本文轉自crazy_charles 51CTO部落格，原文連結：http://blog.51cto.com/douya/1840865，如需轉載請自行聯系原作者