前端学习 -- 颜色
生活随笔
收集整理的這篇文章主要介紹了
前端学习 -- 颜色
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
顏色單位：
在CSS可以直接使用顏色的單詞來表示不同的顏色
- 紅色：red
- 藍色：blue
- 綠色：green
也可以使用RGB值來表示不同的顏色
- 所謂的RGB值指的是通過Red Green Blue三元色，通過這三種顏色的不同的濃度，來表示出不同的顏色。
例子：rgb(紅色的濃度,綠色的濃度,藍色的濃度);
?顏色的濃度需要一個0-255之間的值，255表示最大，0表示沒有
? 濃度也可以采用一個百分數來設置，需要一個0% - 100%之間的數字
使用百分數最終也會轉換為0-255之間的數
0%表示0
100%表示255
也可以使用十六進制的rgb值來表示顏色，原理和上邊RGB原理一樣，只不過使用十六進制數來代替，使用三組兩位的十六進制數組來表示一個顏色。
每組表示一個顏色 ,第一組表示紅色的濃度，范圍00-ff
第二組表示綠色的濃度，范圍是00-ff
第三組表示藍色的濃度，范圍00-ff
語法：#紅色綠色藍色
十六進制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff
00表示沒有，相當于rgb中的0
ff表示最大，相當于rgb中255
紅色：
#ff0000
像這種兩位兩位重復的顏色，可以簡寫
比如：#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>結果：
?
總結
以上是生活随笔為你收集整理的前端学习 -- 颜色的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 12_02_Linux软件管理之二rpm
- 下一篇： HTML5学习笔记简明版（9）：变化的元