CSS入门教程——颜色

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​​ 之上，会修改页面内的所有颜色。