CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS 颜色值

有几种方法可以在CSS中定义颜色值。

颜色关键字

彩色关键字是不区分大小写的标识符,该标识符表示特定的颜色,例如red,green,blue,yellow,black等。

  h1 {
   color: red;
  }
  p {
   background-color: yellow;
  }
测试看看

警告:对颜色关键字的支持因浏览器而异,因此,为了安全起见,最好使用十六进制或功能符号。

查看颜色关键字的完整列表

透明颜色关键字

transparent关键字表示完全透明的颜色。

该关键字可以视为透明黑色的简写形式rgba(0,0,0,0),也是它的计算值。

  h1 {
   color: transparent;
  }
  p {
   background-color: transparent;
  }
测试看看

注意: CSS 2.1仅允许两个属性,background-colorborder-color接受transparent关键字。但是,CSS3扩展了颜色值以包括transparent关键字,以允许其与接受颜色值的所有属性一起使用。

RGB颜色值

RGB(红绿蓝)颜色模型是在CSS中定义颜色值的最常用方法。可以使用RGB模型以两种方式定义颜色:

十六进制表示法

十六进制表示法的RGB值#由紧随其后的三个或六个十六进制字符(0-9,af)的字符组成。

当使用六位符号(#rrggbb)时,第一对(rr)代表红色值,第二对(gg)代表绿色值,最后一对(bb)代表蓝色值。

  h1 {
   color: #f80;
  }
  p {
   background-color: #ff8800;
  }
测试看看

提示:三位十六进制表示法(#rgb)可以通过复制数字而不是加零来转换为六位形式(#rrggbb)。 例如:#03f可以扩展为#0033ff,但是两个值表示相同的颜色。

函数表示法

函数表示法中的RGB值指定为:rgb(red, green, blue)。其中,每个参数(red,green和blue)定义颜色的强度,可以是一个整数值(从0到255)或一个百分比值(从0%到100%)。

整数值255对应100%,十六进制表示法中的f或ff:例如,rgb(0,255,255) = rgb(0%,100%,100%) = #0ff,所有值表示相同的颜色,即aqua。数值周围允许有空白。

  h1 {
   color: rgb(0,255,255);
  }
  p {
   background-color: rgb(0%,100%,100%);
  }
测试看看

值0或0%表示不存在特定颜色值,而值255、100%和f或ff表示该颜色值完全存在。

注意:超出有效范围(0-255或0%-100%)的值将被自动裁剪或更改为设备支持的范围内。

查看有关CSS3颜色的教程,以了解新的功能符号(例如)rgba(),hsl()以及hsla()用于定义颜色值的信息。