新聞中心

成都創(chuàng)新互聯(lián)服務(wù)項目包括巴宜網(wǎng)站建設(shè)、巴宜網(wǎng)站制作、巴宜網(wǎng)頁制作以及巴宜網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,巴宜網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到巴宜省份的部分城市,未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
CSS 中提供了一些屬性(例如 color、background)來設(shè)置 HTML 元素的顏色(例如元素的背景顏色或字體顏色),我們可以通過不同形式的值來指定顏色,如下表所示:
| 值 | 描述 | 實例 |
|---|---|---|
| 顏色名稱 | 使用顏色名稱來設(shè)置具體的顏色,比如 red、blue、brown、lightseagreen 等,顏色名稱不區(qū)分大小寫 | color: red; |
| 十六進制碼 | 使用十六進制碼以 #RRGGBB 或 #RGB(比如 #ff0000)的形式設(shè)置具體顏色,"#" 后跟 6 位或 3 位十六進制字符(0-9, A-F) | color: #f03; |
| RGB | 通過 rgb() 函數(shù)對 red、green、blue 三原色的強度進行控制,從而實現(xiàn)不同的顏色 | color: rgb(255,0,51); |
| RGBA | RGBA 擴展了 RGB,在 RGB 的基礎(chǔ)上增加了 alpha 通道來設(shè)置顏色的透明度,需要使用 rgba() 函數(shù)實現(xiàn) | color: rgba(255,0,0,0.1); |
| HSL | 通過 hsl() 函數(shù)對顏色的色調(diào)、飽和度、亮度進行調(diào)節(jié),從而實現(xiàn)不同的顏色 | color: hsl(120,100%,25%); |
| HSLA | HSLA 擴展了 HSL,在 HSL 的基礎(chǔ)上增加了 alpha 通道來設(shè)置顏色的透明度,需要使用 hsla() 函數(shù)實現(xiàn) | color: hsla(240,100%,50%,0.5); |
1. 顏色名稱
使用顏色名稱來設(shè)置顏色是最簡單的方法。CSS 中定義了一些表示顏色的關(guān)鍵字,如下表中所示,使用這些關(guān)鍵字可以輕松的為元素設(shè)置顏色。
| 顏色名 | 顏色 | 顏色名 | 顏色 |
|---|---|---|---|
| aqua | 天藍 | black | 黑色 |
| blue | 藍色 | fuchsia | 品紅 |
| gray | 灰色 | green | 綠色 |
| lime | 淺綠 | maroon | 紫紅色 |
| navy | 深藍 | olive | 橄欖色 |
| orange | 橙色 | purple | 紫色 |
| red | 紅色 | silver | 淺灰色 |
| teal | 藍綠色 | white | 白色 |
| yellow | 黃色 |
除了上表中介紹的 17 個顏色外,瀏覽器中還支持很多的顏色名稱,但不同的瀏覽器之間對顏色的解析可能存在差異,為了安全起見,不建議您在 CSS 中使用顏色名稱來指定顏色。
2. 十六進制碼
十六進制碼是指通過一個以
# 開頭的 6 位十六進制數(shù)(0~9,a~f)表示顏色的方式,這個六位數(shù)可以分為三組,每組兩位,依次表示 red、green、blue 三種顏色的強度,例如:
h1 {
color: #ffa500;
}
p {
color: #00ff00;
}
您可以使用 PhotoShop、Fireworks 等制圖軟件來獲取顏色的十六進制碼,如下圖所示:
圖:獲取顏色的十六進制碼
提示:在使用十六進制碼表示顏色時,如果每組的兩個十六進制數(shù)是相同的,例如 #00ff00、#ffffff、#aabbcc,則可以將它們簡寫為 #0f0、#fff、#abc。
3. RGB
RGB 是 red、green、blue 的縮寫,它是一種色彩模式,可以通過對 red、green、blue 三種顏色的控制來實現(xiàn)各式各樣的顏色。CSS 中要使用 RGB 模式來設(shè)置顏色需要借助 rgb() 函數(shù),函數(shù)的語法格式如下:
rgb(red, green, blue)
其中 red、green、blue 分別表示三原色紅、綠、藍的強度,這三個參數(shù)的取值可以是 0~255 之間的整數(shù),也可以是 0%~100% 之間百分比數(shù)值。如下例所示:
h1 {
color: rgb(255, 165, 0);
}
p {
color: rgb(0%, 100%, 0%);
}
4. RGBA
RGBA 是 RGB 的擴展,在 RGB 的基礎(chǔ)上又增加了對 Alpha 通道的控制,Alpha 通道可以設(shè)置顏色的透明度。
您需要借助 rgba() 函數(shù)來使用 RGBA 模式,該函數(shù)需要接收四個參數(shù),除了 red、green、blue 三種顏色的強度外,還需要一個 0~1 之間的小數(shù)來表示顏色的透明度,其中 0 表示完全透明,1 表示完全不透明。rgba() 函數(shù)的語法格式如下:
rgba(red, green, blue, alpha);
其中 red、green、blue 分別表示三原色紅、綠、藍的強度,alpha 表示顏色的透明度,例如:
h1 {
color: rgba(255, 0, 0, 0.5);
}
p {
color: rgba(0, 255, 0, 1);
}
5. HSL
HSL 是 Hue(色調(diào))、Saturation(飽和度)、Lightness(亮度)的縮寫,它同樣也是一種色彩模式,可以通過對色調(diào)、飽和度、亮度三個屬性的調(diào)節(jié)來實現(xiàn)不同顏色的。CSS 中使用 HSL 模式需要借助 hsl() 函數(shù),函數(shù)的語法格式如下:
hsl(hue, saturation, lightness)
語法說明如下:
1) hue
參數(shù) hue 表示顏色在色盤上的度數(shù)(從 0 到 360),0 或 360 表示紅色,120 表示綠色,240 表示藍色,如下圖所示;
圖:hue參數(shù)說明
2) saturation
參數(shù) saturation 為一個百分比數(shù)值,表示色彩的飽和度,0% 表示灰色,100% 表示全彩。
圖:saturation 參數(shù)說明
3) lightness
參數(shù) lightness 同樣為一個百分比數(shù)值,表示顏色的亮度,0% 是黑色(沒有亮度),50% 為最合適的亮度(既不發(fā)黑也不過亮),100% 是白色(曝光嚴重)。
圖:lightness 參數(shù)說明
6. HSLA
HSLA 是 HSL 的擴展,在 HSLA 中增加了對顏色透明度的控制,其余與 HSL 相同。CSS 中使用 HSLA 模式需要借助 hsla() 函數(shù),函數(shù)的語法格式如下:
hsla(hue, saturation, lightness, alpha)
參數(shù) alpha 是一個 0 ~ 1 之間小數(shù),用來表示顏色的透明度,0 表示完全透明,而 1 表示完全不透明。
【示例】通過不同的方式來為 HTML 元素設(shè)置顏色:
CSS顏色
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: #EE82EE;
color: #E8E;
color: hsl(0, 50%, 50%);
color: hsla(0, 50%, 50%, 0.5);
color: green;
運行結(jié)果如下圖所示:
圖:CSS 中顏色的設(shè)置
新聞標題:CSS顏色設(shè)置(6種方法)
轉(zhuǎn)載來于:http://www.dlmjj.cn/article/dhgcosp.html


咨詢
建站咨詢
