這篇文章主要講解了“css表示顏色的方法有哪些”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“css表示顏色的方法有哪些”吧!
成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元遂平做網(wǎng)站,已為上家服務(wù),為遂平各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108在制作頁面的時候我們經(jīng)常需要設(shè)置字體顏色或者背景顏色,豐富多彩的顏色能夠讓頁面呈現(xiàn)更好的效果,在網(wǎng)站中用到顏色的地方也很多,文字顏色,背景顏色,邊框顏色等都需要用到。
在css中表示顏色的方法主要有以下幾種。
1. 關(guān)鍵字顏色
屬性值是顏色的名稱。
例如:
div{
color:red;
}
效果:
2. 十六進(jìn)制
十六進(jìn)制表示顏色的原理是利用光的三原色:紅色,綠色,藍(lán)色。利用這三種顏色就能組合出很多顏色,比如紅色光和綠色光就可以組合成黃色,三種顏色的光可以組成白色,沒有光的時候就是黑色。
下圖為光色三原色:
十六進(jìn)制顏色是由#加六位的十六進(jìn)制表示的,范圍是00到ff,前兩位表示紅色,中間兩位表示綠色,最后兩位表示藍(lán)色。
例如:
#ff0000表示紅色,這個色值包含大數(shù)量的紅色,但是沒有綠色和藍(lán)色,所以是紅色。
#00ff00表示綠色,這個色值包含大數(shù)量的綠色,但是沒有紅色和藍(lán)色,所以是綠色。
#0000ff表示藍(lán)色,這個色值包含大數(shù)量的藍(lán)色,但是沒有紅色和藍(lán)色,所以是藍(lán)色。
#000000表示黑色,這個色值沒有顏色,表示沒有光,所以是黑色。
#ffffff表示白色,這個色值包含大數(shù)量的紅色綠色和藍(lán)色,組合到一起是白色。
十六進(jìn)制的00到ff,是十進(jìn)制的0到255,因此每種顏色都有256種取值,能夠組合出來的顏色就是:256*256*256=16777216,這么多種色值足夠可以讓我們的頁面變的豐富多彩。
這里的三原色為什么是紅色、綠色、藍(lán)色,而和我們學(xué)美術(shù)的時候的紅色、黃色、藍(lán)色不一樣呢?因?yàn)閷W(xué)美術(shù)的時候用的是顏料的三原色,顏料的三原色利用的是光的反射原理。
3. RGB
RGB表示顏色的方式原理和十六進(jìn)制是一樣的,是利用光的三原色:紅色,綠色,藍(lán)色。
R表示red,紅色。
G表示green,綠色。
B表示blue,藍(lán)色。
取值從0到255,也可以是百分?jǐn)?shù)。
rgb(red, green, blue)
例如:
rgb(255,0,0)或者rgb(100%,0,0)表示紅色,
rgb(0,255,0)或者rgb(0,100%,0)表示綠色,
rgb(0,0,255)或者rgb(0,0,100%)表示藍(lán)色,
rgb(0,0,0)或者rgb(0,,0,0)表示黑色,
rgb(255,255,255)或者rgb(100%100%,100%)表示白色,
4. HSL
HSL表示顏色的方法是通過色相,飽和度和亮度表示的。其中H是Hue色相,S是Saturation飽和度,L是Lightness亮度。
下圖為HSL顏色模式:
H:色相。就是顏色名稱。取值為是0到360。
S:飽和度。是色彩的純度,取值是0%到100%。
L:亮度。取值為是0%到100%。
hsl(hue, saturation, lightness)
例如:
div{
width: 100px;
height: 100px;
background: hsl(100, 80%, 50%);
}
效果圖:
5. RGBA
RGBA顏色表示形式只是比RGB多了一個A。A表示Alpha透明度。取值是0到1.
rgba(red, green, blue, alpha)
例如:
div{
width: 100px;
height: 100px;
background: rgba(255, 0, 0, 0.5);
}
效果圖:
后面如果有圖片的話效果會更明顯,效果圖:
rgb(255, 0, 0)和 rgba(255, 0, 0, 0.5)效果區(qū)別:
后面如果有圖片的話效果會更明顯,效果圖:
6. HSLA
HSLA顏色表示形式只是比HSL多了一個A。A表示Alpha透明度。取值是0到1.
hsla(hue, saturation, lightness, alpha)
例如:
div{
width: 100px;
height: 100px;
background:hsla(100, 80%, 50%,0.8);
}
效果圖:
后面如果有圖片的話效果會更明顯,效果圖:
hsl(100, 80%, 50%)和hsla(100, 80%, 50%,0.5)的效果區(qū)別:
后面如果有圖片的話效果會更明顯,效果圖:
感謝各位的閱讀,以上就是“css表示顏色的方法有哪些”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對css表示顏色的方法有哪些這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
網(wǎng)站題目:css表示顏色的方法有哪些-創(chuàng)新互聯(lián)
網(wǎng)頁地址:http://muchs.cn/article32/cdchsc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、定制開發(fā)、服務(wù)器托管、靜態(tài)網(wǎng)站、建站公司、用戶體驗(yàn)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容