css中控制外觀元素的屬性有哪些

這篇文章主要介紹css中控制外觀元素的屬性有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

CSS外觀屬性

color:文本顏色

color屬性用于定義文本的顏色，其取值方式有如下3種：

1. 預(yù)定義的顏色值，如red,green,blue等。

2. 十六進(jìn)制，如#FF0000,#FF6600,#29D794等。實(shí)際工作中，十六進(jìn)制是最常見的定義顏色的方式。

3. RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時(shí)也不能省略百分號(hào)，必須寫為0%。

line-height:行間距

line-height屬性用于設(shè)置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px,相對(duì)值em和百分比%，實(shí)際工作中使用最多的是像素px。

一般情況下，行距比字號(hào)大7.8像素左右就可以了。

text-align:水平對(duì)齊方式

text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊，相當(dāng)于html中的align對(duì)齊屬性。其可用屬性值如下：

left:左對(duì)齊（默認(rèn)值）

right:右對(duì)齊

center:居中對(duì)齊

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

text-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值，建議使用em作為設(shè)置單位。

1em就是一個(gè)字的寬度 如果是漢字的段落，1em就是一個(gè)漢字的寬度

p {    line-height: 25px;/*行間距*/
    text-indent: 2em;/*首行縮進(jìn)*/
    }
h4 {    
    text-align: center;/*水平對(duì)齊*/
    }

letter-spacing:字間距

letter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。

word-spacing:單詞間距

word-spacing屬性用于定義英文單詞之間的間距，對(duì)中文字符無效。和letter-spacing一樣，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。

word-spacing和letter-spacing均可對(duì)英文進(jìn)行設(shè)置。不同的是letter-spacing定義的為字母之間的間距，而word-spacing定義的為英文單詞之間的間距。

p {
    letter-spacing: 2px;/*字間距*/
    }
p {
    word-spacing: 5px;/*單詞間距 針對(duì)英文 中文無效*/
    }

word-break:自動(dòng)換行

normal 使用瀏覽器默認(rèn)的換行規(guī)則。

break-all 允許在單詞內(nèi)換行。

keep-all 只能在半角空格或連字符處換行。

顏色半透明（CSS3）

文字顏色到了css3我們可以采取半透明的格式了。

color:rgba(r,g,b,a) a是alpha 透明的意思 取值范圍 0~1之間 color:raba(0,0,0,0.3)

文字陰影（CSS3)

我們可以給文字添加陰影效果 Shadow 影子

text-overflow:水平位置 垂直位置 模糊距離 陰影顏色；

前兩項(xiàng)是必須寫的，后兩項(xiàng)可以選寫。

以上是“css中控制外觀元素的屬性有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！