色彩斑斓的网页,少了颜色怎么可以。生活中的五颜六色,css一个都不会少。相对于语言来说,css表示同一种颜色的方式就有很多。今天咱们来盘点一下。
- 直接用英文关键词来表示。
这个就不详细说了,比如你想要一个红色的字体,那么直接像下面这样表示就是了。看到了吧,多学习英文还是很有用的。至少在这儿css就难不住你。哈哈哈。1
2
3div{
color: red;
} - 十六进制颜色表示法
个人表示这是我在写css的过程中用到的最多的方法之一。
十六进制颜色的表示方法如:#e74478
,“#” 加后面六位十六进制的值。这个颜色一共有256个。
十六进制与rgb相对应。每两位表示rgb中的一位。比如红色red,在rgb中是(255, 0, 0), 那么它对应的十六进制则是 #ff0000 。它们两个正好可以互相转换。
所以当你知道一个颜色的rgb值或者十六进制值时,进行求出另一个只需要转换一下即可。 - Rgb颜色表示方法。
上面咱们已经提到过rgb了现在详细讲一下。rgb就是所谓的三原色,红绿蓝,它们三个在一起,能够配出所有的颜色来,同时在计算机中,rgb三个值单独都在0-255之间。它的表示方法如下:上面的示例中,139表示红,90表示绿,43表示蓝。有兴趣的同学可以把它转换成16进制的颜色代码。1
color:rgb(139,90,43)
- Hsl颜色表示法
这种表示方法并不常用,一方面是不直观,另一方 main也是支持不好,一些老旧的浏览器不支持这种方法。
那么什么是hsl表示方法呢?
Hsl就是指色调,饱和度,明亮度。h是色调,在0-360之间,表示一个色轮的角度。s是饱和度,在0-100%之间。l是明亮度,也在0-100%之间。 - 透明度的表示方法
对于一个颜色的透明度,基于rgb和hsl,出现了对应的rgba和hsla两种表示方法。它们两个的括号中都会有四个值,前三个代表颜色,第四个代表透明度,取值范围在0-1之间,0表示完全透明,1表示完全不透明。如下十六进制法没法在直接搞透明度,于是css有一个专门的属性来帮它实现透明,这个属性就是opcity,它的取值范围也在0到1之间。1
2
3div{
color: rgba(139.40,43,0.6);
}