018_CSS颜色

1. 颜色由红色、绿色、蓝色混合而成。

2. CSS颜色

2.1. 可以用以下方法来规定CSS中的颜色:

 2.1.1. 十六进制色

 2.1.2. RGB颜色

 2.1.3. RGBA颜色

 2.1.4. HSL颜色

 2.1.5. HSLA颜色

 2.1.6. 预定义/跨浏览器颜色名

2.2. 最常用的颜色单位

3. rgb颜色

3.1. 所有浏览器都支持rgb颜色值。

3.2. rgb颜色值是这样规定的: rgb(red, green, blue)。每个参数(red、green以及blue)定义颜色的强度, 可以是介于0与255之间的整数, 或者是百分比值(从0%到100%)。

3.2. rgb(0,0,255)值显示为蓝色, 这是因为blue参数被设置为最高值(255), 而其他被设置为0。

3.3. 同样地, 这两个是相同的颜色值: rgb(0,0,255)和rgb(0%,0%,100%)。

3.4. 实例

p {
    background-color: rgb(255,0,0);
}

4. rgba颜色

4.1. rgba颜色值是rgb颜色值的扩展, 带有一个alpha通道, 它规定了对象的不透明度。

4.2. rgba颜色值是这样规定的: rgba(red,green,blue,alpha)。alpha参数是介于0.0(完全透明, 就不显示了)与1.0(完全不透明)的数字。

4.3. 实例

p {
    background-color: rgba(255,0,0,0.5);
}

5. 十六进制颜色

5.1. 所有浏览器都支持十六进制颜色值。请尽可能的使用十六进制颜色值。

5.2. 十六进制颜色是这样规定的: #RRGGBB, 其中的RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于0与FF之间。

5.3. 下面列出了几个重要的颜色:

5.4. 实例

p {
    background-color: #0000ff;
}

6. hsl颜色

6.1. hsl指的是hue(色调)、saturation(饱和度)、lightness(亮度), 表示颜色柱面坐标表示法。

6.2. hsl颜色值是这样规定的: hsl(hue, saturation, lightness)。

6.3. hue(色调)是色盘上从0到360的度数。0是红色, 120是绿色, 240是蓝色。

6.4. saturation(饱和度)可以描述为颜色的强度, 是一个百分比值。100％是纯色, 没有灰色阴影; 50％是50％灰色, 但是您仍然可以看到颜色; 0％是完全灰色, 您无法再看到颜色。

6.5. lightness(亮度)颜色的明暗度可以描述为要赋予颜色多少光, 也是百分比。其中0％表示不亮(黑色); 50％表示50％亮(既不暗也不亮); 100％表示全明(白)。

6.6. 实例

p {
    background-color: hsl(120,65%,75%);
}

7. hsla颜色

7.1. hsla颜色值是hsl颜色值的扩展, 带有一个alpha通道, 它规定了对象的不透明度。

7.2. hsla颜色值是这样规定的: hsla(hue, saturation, lightness, alpha), 其中的alpha参数定义不透明度。alpha参数是介于0.0(完全透明)与1.0(完全不透明)的数字。

7.3. 实例

p {
    background-color: hsla(120,65%,75%,0.3);
}

8. CSS颜色名

8.1. 所有浏览器都支持的颜色名。

8.2. html和CSS颜色规范中定义了140多种颜色名(其中16种标准颜色)。

8.3. 16种标准颜色是: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

8.4. 以颜色名排序: