【Web前端基礎知識】css表示顏色的方法
在製作頁面的時候我們經常需要設定字型顏色或者背景顏色,豐富多彩的顏色能夠讓頁面呈現更好的效果,在網站中用到顏色的地方也很多,文字顏色,背景顏色,邊框顏色等都需要用到。
在css中表示顏色的方法主要有以下幾種。
1. 關鍵字顏色
屬性值是顏色的名稱。
例如:
- div{
- color:red;
- }
效果:
2. 十六進位制
十六進位制表示顏色的原理是利用光的三原色:紅色,綠色,藍色。利用這三種顏色就能組合出很多顏色,比如紅色光和綠色光就可以組合成黃色,三種顏色的光可以組成白色,沒有光的時候就是黑色。
下圖為光色三原色:
十六進位制顏色是由#加六位的十六進位制表示的,範圍是00到ff,前兩位表示紅色,中間兩位表示綠色,最後兩位表示藍色。
例如:
#ff0000表示紅色,這個色值包含最大數量的紅色,但是沒有綠色和藍色,所以是紅色。
#00ff00表示綠色,這個色值包含最大數量的綠色,但是沒有紅色和藍色,所以是綠色。
#0000ff表示藍色,這個色值包含最大數量的藍色,但是沒有紅色和藍色,所以是藍色。
#000000表示黑色,這個色值沒有顏色,表示沒有光,所以是黑色。
#ffffff表示白色,這個色值包含最大數量的紅色綠色和藍色,組合到一起是白色。
十六進位制的00到ff,是十進位制的0到255,因此每種顏色都有256種取值,能夠組合出來的顏色就是:256*256*256=16777216,這麼多種色值足夠可以讓我們的頁面變的豐富多彩。
這裡的三原色為什麼是紅色、綠色、藍色,而和我們學美術的時候的紅色、黃色、藍色不一樣呢?因為學美術的時候用的是顏料的三原色,顏料的三原色利用的是光的反射原理。
3. RGB
RGB表示顏色的方式原理和十六進位制是一樣的,是利用光的三原色:紅色,綠色,藍色。
R表示red,紅色。
G表示green,綠色。
B表示blue,藍色。
取值從0到255,也可以是百分數。
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%)表示藍色,
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)效果區別:
後面如果有圖片的話效果會更明顯,效果圖:
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)的效果區別:
後面如果有圖片的話效果會更明顯,效果圖:
以上是關於 【Web前端基礎知識】css表示顏色的方法的介紹內容,小編在這裡為大家申請了一套價值 299元的Web的系列課程,只需要 點選申請就可以免費領取,現在報名的話還有免費的一個月試學期,感興趣的小夥伴快來領取吧~
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31543790/viewspace-2688305/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS顏色表示CSS
- 【Web前端基礎知識】CSS的定位機制之定位Web前端CSS
- Web前端基礎知識整理Web前端
- 前端-html和css基礎知識前端HTMLCSS
- 前端基礎知識複習之CSS前端CSS
- 好程式設計師web前端分享CSS3顏色值HSLA表示方式程式設計師Web前端CSSS3
- 好程式設計師web前端分享CSS基礎知識之position程式設計師Web前端CSS
- 關於web中的顏色表示方法,你知道多少?Web
- 前端開發基礎知識整理–css篇前端CSS
- css顏色單位表示法CSS
- CSS基礎知識CSS
- 前端基礎知識前端
- 好程式設計師web前端教程分享web前端基礎知識程式設計師Web前端
- CSS 基礎知識 初識CSS
- 前端基礎知識之html和css全解前端HTMLCSS
- 好程式設計師web前端培訓分享CSS基礎知識學習程式設計師Web前端CSS
- 前端-JavaScript基礎知識前端JavaScript
- Html前端網頁顏色的四種表示HTML前端網頁
- 前端基礎之前端知識引入前端
- 零基礎該如何學習Web前端知識?Web前端
- 正規表示式基礎知識
- 好程式設計師web前端教程分享web前端入門基礎知識程式設計師Web前端
- web前端 改變SVG圖的顏色Web前端SVG
- CSS基礎知識簡介CSS
- css 入門基礎知識CSS
- Web測試基礎-Html基礎知識WebHTML
- 好程式設計師前端教程CSS基礎知識點程式設計師前端CSS
- Web前端開發精品課HTML CSS JavaScript基礎教程JavaScript部分知識點總結Web前端HTMLCSSJavaScript
- 【Web前端基礎知識】如何使用Canvas繪製圓形Web前端Canvas
- Web前端之HTML+CSS的知識總結Web前端HTMLCSS
- 正規表示式(一) 基礎知識
- CSS基礎知識點總結CSS
- CSS基礎知識總結(4)CSS
- css顏色CSS
- JavaScript基礎知識(Date 的方法)JavaScript
- python之 前端HTML/CSS基礎知識學習筆記Python前端HTMLCSS筆記
- python之前端HTML/CSS基礎知識學習筆記Python前端HTMLCSS筆記
- 好程式設計師web前端分享CSS學習:HSLA顏色模式程式設計師Web前端CSS模式