css 文本屬性詳細(xì)總結(jié)

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

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

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

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

p{

text-align:right

}

text-align:center 與 <CENTER>

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

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

2,line-height 文本行高

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

2，數(shù)值 來設(shè)置固定值

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

3,text-indent 首行縮進(jìn)

% 父元素的百分比

px 固定值 ，默認(rèn)為0

inherit 繼承

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

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

4,letter-spacing 字符間距

定義文本中兩個(gè)字符之間距離

1，默認(rèn)關(guān)鍵字是 normal 也就是相當(dāng)于 letter-spacing：0；

2，length設(shè)置具體值（可以為負(fù)）

3，inherit

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

5，word-spacing 單詞間距 

定義英文單詞之間的間距

1，normal 標(biāo)準(zhǔn)

2，px設(shè)置固定值

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容器的縮進(jìn)50%（1/2）
direction:rtl;   定義文本從右開始寫
}

7，text-transform文本大小寫

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

• none

• uppercase

• lowercase

• capitalize

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

作為一個(gè)屬性，text-transform 可能無關(guān)緊要，不過如果您突然決定把所有 h2 元素變?yōu)榇髮?，這個(gè)屬性就很有用。不必單獨(dú)地修改所有 h2 元素的內(nèi)容，只需使用 text-transform 為你完成這個(gè)修改：

h2 {

text-transform: uppercase;

}