css基础知识复习(8)之css的颜色

色彩斑斓的网页,少了颜色怎么可以。生活中的五颜六色,css一个都不会少。相对于语言来说,css表示同一种颜色的方式就有很多。今天咱们来盘点一下。

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