9.1 CSS中指定颜色的方法
颜色在Web设计和开发中扮演着重要角色。在CSS中有几种方法可以指定颜色，这些方法让开发者能够创建出吸引人的直观界面。下面我们总结一下CSS中指定颜色的不同方式，包括颜色模型、透明度、渐变和颜色操作的标准函数等。
CSS中指定颜色的方法：
- 命名颜色
- 十六进制颜色
- RGB和RGBA
- HSL和HSLA
- 渐变
- 透明度
9.2 RGB颜色模型
RGB (Red Green Blue)模型通过混合红、绿、蓝三色来定义颜色。每种颜色的值范围是0到255。
重要!
一个字节可以包含256个值：从0到255。0是最小值，255是最大值。
语法：
CSS
color: rgb(255, 0, 0); /* 红色 */
color: rgb(0, 255, 0); /* 绿色 */
color: rgb(0, 0, 255); /* 蓝色 */
示例：
CSS
body {
background-color: rgb(240, 248, 255); /* 背景颜色：aliceblue */
}
9.3 HEX颜色模型
HEX (Hexadecimal)用十六进制值表示颜色。每个值(RR, GG, BB)范围从00到FF。
重要!
一个字节可以包含256个值：从0到255。但若用十六进制表示，范围为0到FF。
语法：
CSS
color: #ff0000; /* 红色 */
color: #00ff00; /* 绿色 */
color: #0000ff; /* 蓝色 */
示例：
CSS
h1 {
color: #4CAF50; /* 绿色 */
}
9.4 HSL颜色模型
HSL (Hue, Saturation, Lightness)用色相、饱和度和亮度来表示颜色。色相(Hue)以度数计量(0-360)，饱和度(Saturation)和亮度(Lightness)以百分比计量(0%-100%)。
语法：
CSS
color: hsl(0, 100%, 50%); /* 红色 */
color: hsl(120, 100%, 50%); /* 绿色 */
color: hsl(240, 100%, 50%); /* 蓝色 */
示例：
CSS
p {
color: hsl(210, 100%, 50%); /* 蓝色 */
}
9.5 透明度: RGBA和HSLA
为了增加颜色的透明度，可以使用RGBA和HSLA模型。这些模型中增加了第四个参数——阿尔法通道(Alpha)，其定义了从0（完全透明）到1（完全不透明）的透明度级别。
1. RGBA (Red, Green, Blue, Alpha):
语法：
CSS
color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
color: rgba(0, 255, 0, 0.3); /* 半透明绿色 */
color: rgba(0, 0, 255, 0.7); /* 半透明蓝色 */
示例：
CSS
div {
background-color: rgba(255, 99, 71, 0.6); /* 半透明色: tomato */
}
2. HSLA (Hue, Saturation, Lightness, Alpha):
语法：
CSS
color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
color: hsla(120, 100%, 50%, 0.3); /* 半透明绿色 */
color: hsla(240, 100%, 50%, 0.7); /* 半透明蓝色 */
示例：
CSS
span {
color: hsla(210, 100%, 50%, 0.8); /* 半透明蓝色 */
}
GO TO FULL VERSION