CSS中常用的5种颜色单位
css中有丰富多彩的颜色，如何让计算机能知道我们想要的是哪种颜色呢？可以通过以下的颜色单位。
1:在CSS可以直接使用颜色的单词来表示不同的颜色
红色：red 蓝色：blue 绿色：green 黄色：yellow
注意： 这种用的比较少 不好描述，难记
2:使用RGB值来表示不同的颜色
- 所谓的RGB值指的是通过Red Green Blue三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色
- 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);
- 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
- 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字
使用百分数最终也会转换为0-255之间的数
0%表示0
100%表示255
-语法：RGB(红色，绿色，蓝色)
-注意：比较常用，计算机可以很好的识别
3:RGBA
-语法：RGB(红色，绿色，蓝色，透明度)，a:透明度（0-1） 1不透明，0透明
4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样
十六进制： 0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff
00表示没有，相当于rgb中的0
-ff表示最大，相当于rgb中255
只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
每组表示一个颜色
第一组表示红色的浓度，范围00-ff
第二组表示绿色的浓度，范围是00-ff
第三组表示蓝色的浓度，范围00-ff
-语法：#红色绿色蓝色
红色：#ff0000
像这种两位两位重复的颜色，可以简写
比如：#ff0000 可以写成 #f00，#abc #aabbcc
常用的十六进制颜色：#f00 红色， #f60 橘色， #ccc 灰， #0f0 绿色， #000黑色， #fff 白色
5:HSL值 HSLA值
H 色相 （0-360）hue
S 饱和度 saturation 颜色浓度0%-100%
L 亮度 lightness 颜色亮度0%-100%
A 透明度 alpha
以下为代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
/*background-color: rgb(161,187,215);*/
/* background-color: rgb(255,255,255);
background-color: rgb(0,0,0); */
/*background-color: rgb(100%,50%,50%);*/
/*background-color: #00f;*/
/*background-color: #abc;*/ /*#aabbcc*/
background-color: #0f0;
/* background-color: hsl(10, 100%,50%); */
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>