css 文本屬性詳細總結

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

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

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

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

p{

text-align:right

}

text-align:center 與 <CENTER>

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

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

2,line-height 文本行高

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

2，數值 來設置固定值

p{
text-align:left;
font-size:20px;
line-height:50%;  基于字體大小的1/2 行高
}

3,text-indent 首行縮進

% 父元素的百分比

px 固定值 ，默認為0

inherit 繼承

div {
width:300px;
height:300px;
}

p{
text-align:left;
font-size:20px;
line-height:50%;  基于字體大小的1/2 行高
text-indent:50%;  基于div容器的縮進50%（1/2）
}

4,letter-spacing 字符間距

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

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

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

3，inherit

h2 {
letter-spacing: -0.5em
}
h5 {
letter-spacing: 20px
}

5，word-spacing 單詞間距 

定義英文單詞之間的間距

1，normal 標準

2，px設置固定值

3.inherit

h2 {
word-spacing: -0.5em
}
h5 {
word-spacing: 20px
}

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

1，ltr從左到右  left to right

2，rtl從右到左

3，inherit繼承

p{
/*text-align:left;
font-size:20px;
line-height:50%;  基于字體大小的1/2 行高
text-indent:50%;*/  基于div容器的縮進50%（1/2）
direction:rtl;   定義文本從右開始寫
}

7，text-transform文本大小寫

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

• none

• uppercase

• lowercase

• capitalize

默認值 none 對文本不做任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉換為全大寫和全小寫字符。最后，capitalize 只對每個單詞的首字母大寫。

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

h2 {

text-transform: uppercase;

}