css文字屬性詳細總結

技術小胖子發表於2017-11-09
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，數值 來設定固定值

1
2
3
4
5
p{
text-align:left;
font-size:20px;
line-height:50%;  基於字型大小的1/2 行高
}


3,text-indent 首行縮排

% 父元素的百分比

px 固定值 ，預設為0

inherit 繼承

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
h1 {
letter-spacing: -0.5em
}
h4 {
letter-spacing: 20px
}


5，word-spacing 單詞間距 

定義英文單詞之間的間距

1，normal 標準

2，px設定固定值

3.inherit

1
2
3
4
5
6
h1 {
word-spacing: -0.5em
}
h4 {
word-spacing: 20px
}

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

1，ltr從左到右  left to right

2，rtl從右到左

3，inherit繼承

1
2
3
4
5
6
7
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 可能無關緊要，不過如果您突然決定把所有 h1 元素變為大寫，這個屬性就很有用。不必單獨地修改所有 h1 元素的內容，只需使用 text-transform 為你完成這個修改：

h1 {

text-transform: uppercase;

}

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


相關文章