颜色

CSS 的颜色值有三种定义方法:

  • 颜色名称
  • RGB
  • 16进制编码

例如,下面的 5 中方式都表示红色:

  • red
  • rgb(255, 0, 0)
  • rgb(100%, 0%, 0%)
  • #ff0000
  • #f00

CSS 内置了一些颜色名称,比如 aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpuleredsilvertealwhiteyellow 以及 transparent

注意,除了 whiteblack,其他颜色在网站设计中并不常用,每个一个设计精美的网站一般会定义自己的颜色组合。

RGB 有三个取值范围为 [0, 255] 的值,其中 0 表示最小值,255 表示最大值。这三个值也可以用百分比来表示。

16进制编码是一个用 16 进制表示的数值。它以 # 开头,支持六位和三位:

  • 三位值有等价的六位值,例如 #ff0000 等于 #f00#cc9966 等于 #c96
  • 三位值更简洁一些,三个数值分别代表 RGB
  • 六位精度更高,比如 #fc3846 就无法用三位值来表达

CSS3 还支持 HSL 颜色,后面高阶教程中会详细讲解

颜色和背景色

颜色有两种,colorbackground-color

例如,一个黄底蓝字的 <h1> 标题:

h1 {
    color: yellow;
    background-color: blue;
}

这个颜色可能有些刺眼,我们可以用 16 进制色值稍作调整:

body {
    font-size: 14px;
    color: navy;
}

h1 {
    color: #ffc;
    background-color: #009;
}

colorbackground-color 可作用于大部分 HTML 元素,如果作用于 body 之上,会修改页面内的所有颜色。

更新时间: