前端学习 -- 颜色
顏色單位:
在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):变化的元