css常用屬性之顏色和單位

高洛峰
發布: 2017-03-04 16:49:29
原創
1837 人瀏覽過

在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常用屬性之顏色和單位相關文章請關注PHP中文網!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!