颜色
CSS 的颜色值有三种定义方法:
- 颜色名称
- RGB
- 16进制编码
例如,下面的 5 中方式都表示红色:
red
rgb(255, 0, 0)
rgb(100%, 0%, 0%)
#ff0000
#f00
CSS 内置了一些颜色名称,比如 aqua
,black
,blue
,fuchsia
,gray
,green
,lime
,maroon
,navy
,olive
,purpule
,red
,silver
,teal
,white
,yellow
以及 transparent
。
注意,除了
white
和black
,其他颜色在网站设计中并不常用,每个一个设计精美的网站一般会定义自己的颜色组合。
RGB 有三个取值范围为 [0, 255] 的值,其中 0 表示最小值,255 表示最大值。这三个值也可以用百分比来表示。
16进制编码是一个用 16 进制表示的数值。它以 #
开头,支持六位和三位:
- 三位值有等价的六位值,例如
#ff0000
等于#f00
,#cc9966
等于#c96
- 三位值更简洁一些,三个数值分别代表 RGB
- 六位精度更高,比如
#fc3846
就无法用三位值来表达
CSS3 还支持 HSL 颜色,后面高阶教程中会详细讲解
颜色和背景色
颜色有两种,color
和 background-color
。
例如,一个黄底蓝字的 <h1>
标题:
h1 {
color: yellow;
background-color: blue;
}
这个颜色可能有些刺眼,我们可以用 16 进制色值稍作调整:
body {
font-size: 14px;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}
color
和 background-color
可作用于大部分 HTML 元素,如果作用于 body
之上,会修改页面内的所有颜色。