前端学习 -- 颜色
顏色單位：
在CSS可以直接使用顏色的單詞來(lái)表示不同的顏色
- 紅色：red
- 藍(lán)色：blue
- 綠色：green
也可以使用RGB值來(lái)表示不同的顏色
- 所謂的RGB值指的是通過(guò)Red Green Blue三元色，通過(guò)這三種顏色的不同的濃度，來(lái)表示出不同的顏色。
例子：rgb(紅色的濃度,綠色的濃度,藍(lán)色的濃度);
?顏色的濃度需要一個(gè)0-255之間的值，255表示最大，0表示沒(méi)有
? 濃度也可以采用一個(gè)百分?jǐn)?shù)來(lái)設(shè)置，需要一個(gè)0% - 100%之間的數(shù)字
使用百分?jǐn)?shù)最終也會(huì)轉(zhuǎn)換為0-255之間的數(shù)
0%表示0
100%表示255
也可以使用十六進(jìn)制的rgb值來(lái)表示顏色，原理和上邊RGB原理一樣，只不過(guò)使用十六進(jìn)制數(shù)來(lái)代替，使用三組兩位的十六進(jìn)制數(shù)組來(lái)表示一個(gè)顏色。
每組表示一個(gè)顏色 ,第一組表示紅色的濃度，范圍00-ff
第二組表示綠色的濃度，范圍是00-ff
第三組表示藍(lán)色的濃度，范圍00-ff
語(yǔ)法：#紅色綠色藍(lán)色
十六進(jìn)制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff
00表示沒(méi)有，相當(dāng)于rgb中的0
ff表示最大，相當(dāng)于rgb中255
紅色：
#ff0000
像這種兩位兩位重復(fù)的顏色，可以簡(jiǎn)寫
比如：#ff0000 可以寫成 #f00
#abc #aabbcc
示例：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">.box{background-color: rgb(100%,50%,50%);width: 100px;height: 100px;}.box1{background-color: #084098;width: 100px;height: 100px;}.box2{background-color: #00ff00;width: 100px;height: 100px;}.box3{background-color: #0f0;width: 100px;height: 100px;}</style></head><body><div class="box"></div><br /><div class="box1"></div><br /><div class="box2"></div><br /><div class="box3"></div></body> </html>結(jié)果：
?
總結(jié)
以上是生活随笔為你收集整理的前端学习 -- 颜色的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 12_02_Linux软件管理之二rpm
- 下一篇： HTML5学习笔记简明版（9）：变化的元