CSS顏色設(shè)置的6種方法

102260 閱讀 0 評論 0 點贊

制作好看且豐富多彩的網(wǎng)頁肯定會與顏色打交道，所有的顏色都是有三種顏色按照不同的比例合成產(chǎn)生，這三種顏色就是三原色，三原色是紅（red）、綠（green）、藍(lán)（blue），這三種顏色按不同的比例混合這三種顏色就可以得到其它顏色，通過調(diào)整紅、綠、藍(lán)三種顏色的數(shù)值可以最大限度的控制顏色。

如果你能理解三原色的原理，下面學(xué)習(xí)CSS顏色也會更容易理解。

CSS 中提供了一些屬性（例如 color、background）來設(shè)置 HTML 元素的顏色（例如元素的背景顏色或字體顏色），我們可以通過不同形式的值來指定顏色，如下表所示：

值	描述	實例
顏色名稱	使用顏色名稱來設(shè)置具體的顏色，比如 red、blue、brown、lightseagreen 等，顏色名稱不區(qū)分大小寫	color: red;
十六進(jìn)制碼	使用十六進(jìn)制碼以 #RRGGBB 或 #RGB（比如 #ff0000）的形式設(shè)置具體顏色，"#" 后跟 6 位或 3 位十六進(jìn)制字符（0-9, A-F）	color: #f03;
RGB	通過 rgb() 函數(shù)對 red、green、blue 三原色的強度進(jìn)行控制，從而實現(xiàn)不同的顏色	color: rgb(255,0,51);
RGBA	RGBA 擴(kuò)展了 RGB，在 RGB 的基礎(chǔ)上增加了 alpha 通道來設(shè)置顏色的透明度，需要使用 rgba() 函數(shù)實現(xiàn)	color: rgba(255,0,0,0.1);
HSL	通過 hsl() 函數(shù)對顏色的色調(diào)、飽和度、亮度進(jìn)行調(diào)節(jié)，從而實現(xiàn)不同的顏色	color: hsl(120,100%,25%);
HSLA	HSLA 擴(kuò)展了 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	天藍(lán)	black	黑色	blue	藍(lán)色
fuchsia	品紅	gray	灰色	green	綠色
lime	淺綠	maroon	紫紅色	navy	深藍(lán)
olive	橄欖色	orange	橙色	purple	紫色
red	紅色	silver	淺灰色	teal	藍(lán)綠色
white	白色	yellow	黃色

除了上表中介紹的 17 個顏色外，瀏覽器中還支持很多的顏色名稱，但不同的瀏覽器之間對顏色的解析可能存在差異，所以使用的時候一定要注意。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>dotcpp</title>
    <style>
        h2 {
            color: pink;
        }

    </style>

</head>
<body>
    <h2>俺是一個標(biāo)題</h2>
</body>
</html>

輸出結(jié)果如下：

顏色名稱

2. 十六進(jìn)制碼

用十六進(jìn)制表示，由0~9、a~f組成一個以#后面跟6個十六進(jìn)制數(shù)的顏色單位。這個六位數(shù)可以分為三組，每組兩位，依次表示 red、green、blue 三種顏色的強度，

例如：color: #D1483E;

如果使用的是三對兩位相同的十六進(jìn)制數(shù)，#后6位數(shù)可以簡寫為3位數(shù)。

例如：color: #000; （黑色）；

3. RGB

RGB 是 red、green、blue 的縮寫，它是一種色彩模式，可以通過對 red、green、blue 三種顏色的控制來實現(xiàn)各式各樣的顏色。CSS 中要使用 RGB 模式來設(shè)置顏色需要借助 rgb() 函數(shù)，函數(shù)的語法格式：rgb(red, green, blue)

其中 red、green、blue 分別表示三原色紅、綠、藍(lán)的強度，這三個參數(shù)的取值可以是 0~255 之間的整數(shù)，也可以是 0%~100% 之間百分比數(shù)值。如下例所示：

h1 {
color: rgb(156, 109, 0);
}
p {
color: rgb(0%, 100%, 0%);
}

4. RGBA

RGBA 是 RGB 的擴(kuò)展，在 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 分別表示三原色紅、綠、藍(lán)的強度，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 表示藍(lán)色，如下圖所示；

（2）saturation

參數(shù) saturation 為一個百分比數(shù)值，表示色彩的飽和度，0% 表示灰色，100% 表示全彩。

（3） lightness

參數(shù) lightness 同樣為一個百分比數(shù)值，表示顏色的亮度，0% 是黑色（沒有亮度），50% 為最合適的亮度（既不發(fā)黑也不過亮），100% 是白色（曝光嚴(yán)重）。

6. HSLA

HSLA 是 HSL 的擴(kuò)展，在 HSLA 中增加了對顏色透明度的控制，其余與 HSL 相同。CSS 中使用 HSLA 模式需要借助 hsla() 函數(shù)，函數(shù)的語法格式：hsla(hue, saturation, lightness, alpha)

參數(shù) alpha 是一個 0 ~ 1 之間小數(shù)，用來表示顏色的透明度，0 表示完全透明，而 1 表示完全不透明。

通過不同的方式來為 HTML 元素設(shè)置顏色：

<!DOCTYPE html>
<html>
<head>
    <title>CSS顏色</title>
    <style>
    p {
        font-size: 16px;
        font-weight: bold;
    }
    #rgb {
        color: rgb(255, 0, 0);
    }

    #rgba {
        color: rgba(255, 0, 0, 0.5);
    }

    #hex {
        color: #EE82EE;
    }

    #short {
        color: #E8E;
    }

    #hsl {
        color: hsl(0, 50%, 50%);
    }

    #hsla {
        color: hsla(120,60%,70%,0.3);
    }

    #built {
        color: green;
    }
    </style>
</head>
<body>
    <p id="rgb">
        color: rgb(255, 0, 0);
    </p>
    <p id="rgba">
        color: rgba(255, 0, 0, 0.5);
    </p>
    <p id="hex">
        color: #EE82EE;
    </p>
    <p id="short">
        color: #E8E;
    </p>
    <p id="hsl">
        color: hsl(0, 50%, 50%);
    </p>
    <p id="hsla">
        color: hsla(120,60%,70%,0.3);
    </p>
    <p id="built">
        color: green;
    </p>
</body>
</html>

展示結(jié)果如圖：

HSLA