表示一个颜色居然有这么多种方式

书接上文，上回书咱们讲了 CSS 中的前景色和背景色。说白了，所谓的前景色就是给字体设置颜色，不过人家就叫前景色，咱也是没啥办法。背景色相对来说是比较简单的，但是要注意 background-color 属性的默认值是 transparent 表示透明。

知道了怎么设置前景色和背景色了，可是咱们一直都是在用代表某个颜色的英文单词来设置颜色的。这时候，你可能会问了，除了这种方式之外，还有没有其他方式同样可以设置颜色呢？

接下来，咱们就来说一说可以设置颜色值的类型。

颜色值的类型

其实呢，CSS 发展到 CSS3 版本，能用来表示颜色值的方式肯定不能只有英文单词这么简单的方式了。目前，基本上可以分成 3 种，咱们也可以称为设置颜色值的 3 种类型：

• 色彩关键字
• RGB 色彩模式
• HSL 色彩模式

看着这些名字是不是觉得挺专业的？！其实吧，怎么说呢，名字这种东西就是个代号，方便人家记忆的。所以，千万别被名字所迷惑了。

好了，闲话少叙，书归正传。咱们接下来就一个一个的来介绍每一种的使用方式吧。

色彩关键字

先来说说这个所谓的色彩关键字，简单来说，这个就是咱们说的用英文单词来表示某个具体的颜色值，只不过人家给了个相对专业的说法而已。

这个用来表示颜色值的英文单词是不区分大小的，也就是说，你大写小写什么的都是可以的。但是，咱们一般都是使用小写这种形式，比如 red 就表示红色、blue 就表示蓝色等等。当然了，咱现在说的都是比较简单的色彩关键字。

不仅如此，CSS 从 CSS1 版本发展到 CSS3 版本，这个色彩关键字数量的变化还是比较大的：

• CSS1 版本时只有 16 个基本颜色，一般称为 HTML 的基本颜色。
• CSS2 版本时增加了 orange 这种颜色。
• CSS3 版本时增加的颜色数量比较多，具体的你可以参考 MDN 网站有关色彩关键字的文章

这里有一点你可能需要注意一下，除了 CSS1 版本时的 16 个 HTML 基本颜色之外，其他所有颜色都是需要通过特定的计算程序进行转换的。换句话讲，这些颜色在不同的浏览器中显示出来的效果很可能是不一样的。这也是咱们在实际工作中一般很少使用色彩关键字这种方式来设置颜色值的原因。当然了，你平时自己写点小案例什么还是无妨的。

在这些色彩关键字里面，有一个是比较特殊的，就是咱们之前说的 background-color 属性的默认值 transparent，它表示一个完全透明的颜色。

还有就是 transparent 在 CSS2 版本时并不是一个真实的颜色，到了 CSS3 版本时才重新被定义成了一个真实的颜色。当然了，这些你稍微了解一下就行，毕竟并不影响咱们使用不是？！

RGB 模式

说完了色彩关键字之后，咱们再来看看 RGB 模式是怎么样的。RGB 其实是一个缩写，全称是 Red-Green-Blue，表示的是红-绿-蓝。RGB 一般被叫做三原色，可是这个三原色有很多种呢，可不一定是红绿蓝这三个颜色。所以说呢，咱们现在 CSS 里面用的是原来工业上的一种颜色标准。

当然了，这些你了解一下就行&#