HTML&CSS基础-颜色的单位表示方法
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.HTML源代码
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>颜色的单位表示方法</title> <style type="text/css">
/**
* 颜色单位:
* 在CSS可以直接使用颜色的单词来表示不同的颜色，如:
* 红色:red
* 蓝色:blue
* 绿色:green
* 黄色:yellow
* 深粉红色:deeppink
* ......
*
* 也可以使用RGB值来表示不同的颜色:
* 所谓的RGB值指的是通过Red，Green，Blue三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色。
* 语法:
* rgb(红色的浓度，绿色的浓度，蓝色的浓度);
* 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有。
* 浓度也可以采用一个百分数来表述，需要一个0%-100%之间的数字，使用百分数最终也会转换为0-255这之间的数，0%表示0，100%表示255.
*
* 也可以使用十六进制的rgb值来表示颜色:
* 原理和上边的RGB原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色，每一组表示一个颜色:
* 第一组表示红色的浓度，范围00-ff
* 第二组表示绿色的浓度，范围00-ff
* 第三组表示蓝色的浓度，范围00-ff
*
* 语法:
* #红色绿色蓝色
* 00表示没有，相当于rgb中的0
* ff表示最大，相当于rgb中的255
* 红色:
* #ff0000,像这样两位两位重复的颜色可以简写为f00
* 绿色:
* #00ff00,像这样两位两位重复的颜色可以简写为0f0
* 蓝色:
* #0000ff，像这样两位两位重复的颜色可以简写为00f
*
* 注意:
* 上面可以简写是因为两位两位重复的颜色，类似于"aabbcd"这样的就没法简写，因为最后一组并不重复哟~
*/ .hello {
width: 200px;
height: 200px;
background-color: rgb(172, 30, 1);
} .world {
width: 200px;
height: 200px;
background-color: rgb(100%, 100%, 50%);
} .good{
width: 200px;
height: 200px;
background-color: #abc;
}
</style>
</head> <body> <div class="hello"></div>
<div class="world"></div>
<div class="good"></div>
</body> </html>
二.浏览器打开以上代码渲染结果
