css常用屬性之顏色和單位

在css代碼編寫中，估計顏色和單位是必不可少的，然而在css中關於顏色和單位值的寫法有很多種寫法，所以有必要把它弄清楚。

顏色

當初我在初學前端的時候，就會冒出一個疑問“我該如何設定網頁顏色？”，一般常用英文顏色名或者十六進位顏色值來設定顏色，但是css中還有一些其他較為複雜的
寫法。

RGB顏色

電腦通過不同層級的紅、綠、藍來產生新的顏色，這就是常說的RGB顏色。有了這樣一個產生顏色的機制，就可以通過直接給出不同的顏色級來確定顏色，就可以自己去
組合三種顏色的值。

寫法：
h1{color:rgb(100%,100%,100%)} 百分比rgb顏色寫法，數字範圍從0%到100%
h1{color:rgb(0,255,255)} 數字rgb顏色寫法，數字範圍從0到255

注意：兩種寫法的值都會被修剪，百分比會被修剪成0%-100%，即超出100%被修剪成100%，低於0%修剪成0%，數字則會被修剪成0-255，另外，兩者不能混寫，混寫是不會生效的。

十六進位顏色和顏色名設定顏色我們就不再提了

單位

長度單位：一般分為絕對單位和相對單位。絕對單位從誕生之日起其實用的很少，至少我平時在項目上很少用到。所以這裡就跳過了絕對單位的介紹。

相對單位：有三種相對的長度單位，em、ex和px。前兩種分別代表“元素的字型高度”和“字母shezhi‘x’的高度”，他們是普通印刷上的量度，最後一個px代表“像素”，之所以說它是
相對的，是因為它依賴顯示器的解析度。

em：css中，一個“em”就是給定字型的font-size值。唯一例外的就是在設定字型尺寸，這種情況下em的值是相對於父元素的。

如

• body{font-size:20px;}

• p{font-size:1em;}

這時p的字型大小就是20px，而不是預設的16px。

px：按像素值px來設定。如
body{font-size:20px;}
p{font-size:16px;}
p元素中字型的大小就是16px

百分比值：同長度單位比較，百分比就顯得很簡單，就是一個百分比值。例如：
h1{line-height:150%;} 設定所有h1的行高比普通行高大一半。

總之百分比總是通過另外一個值來計算的，這些在後面屬性講解中會一一提到。而且百分比可正可負，對於有些屬性只接受正值，這就另說了。

今天的內容就這麼多，寫的有點亂，希望以後越寫越好吧。

更多css常用屬性之顏色和單位相關文章請關注topic.alibabacloud.com！

