一、RGB值和十六进制值
CSS颜色编号码分为两种:RGB值和十六进制值。RGB值指的是红、绿、蓝三个颜色通道的取值,取值范围从0到255。例如,红色为rgb(255,0,0);绿色为rgb(0,255,0)。而十六进制值则是用16进制数对颜色进行编码,每个颜色通道占2个十六进制位,取值范围为00到FF。例如,红色为#FF0000;绿色为#00FF00。
/* CSS中设置颜色 */ color: rgb(255,0,0); background-color: #00FF00;
使用RGB值或十六进制值设置颜色时,需要使用color属性或background-color属性。
二、CSS3中的颜色属性
CSS3中新增了很多的颜色属性,下面介绍其中的一些。
1. RGBA和HSLA
RGBA和HSLA是RGB值和HSL值的半透明版本。它们的格式分别为:rgba(red, green, blue, alpha)和hsla(hue, saturation, lightness, alpha)。其中,alpha表示透明度,范围为0到1,0表示完全透明,1表示完全不透明。
/* 设置颜色的透明度 */ color: rgba(255,0,0,0.5);
2. 颜色名字
除了用RGB值或十六进制值设置颜色以外,还可以使用颜色的名字来设置。例如,红色可以用red来表示。
/* 使用颜色名字设置颜色 */ color: red;
3. currentColor
currentColor表示当前元素所使用的颜色。例如,如果color属性被设置为red,那么border-color属性设置为currentColor将会继承red的颜色值。
/* 继承元素的颜色 */ color: red; border-color: currentColor;
三、CSS4中的颜色属性
CSS4中又新增了一些有趣的颜色属性,下面介绍其中的一些。
1. rebeccapurple
rebeccapurple是CSS4中新增的一种颜色名字,表示紫色。它是为了纪念Web标准先驱Rebecca Murphey而创建的。
/* 使用rebeccapurple设置颜色 */ color: rebeccapurple;
2. gray()
gray()函数可以用来快速设置一种灰色,它的参数表示灰度值,范围为0到100。例如,gray(50%)表示50%灰度的灰色。
/* 快速设置灰色 */ color: gray(50%);
3. color-mod()
color-mod()函数可以对颜色进行操作,包括调整亮度、对比度、透明度等。
/* 修改颜色的透明度 */ color: color-mod(red alpha(0.5));
四、总结
CSS颜色编号码包括RGB值和十六进制值,CSS3中新增了RGBA、HSLA等颜色属性,CSS4中又新增了rebeccapurple、gray()和color-mod()等颜色属性,这些属性可以让我们更加方便地设置颜色,并且对于颜色的处理也更加灵活。