CSS1-CSS3 <color>颜色知识知多少？ - 魂灵舞

CSS1-CSS3 <color>颜色知识知多少？

非本人原创，原文转载自http://www.zhangxinxu.com/wordpress/2015/07/know-css1-css3-color/

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=4859

一、废话少说，直奔主题

大家有没有发现我最新几篇文章废话少了，是博主记得按时吃药了？

大家想多了，一是升级成奶爸奶孩子，二是公司排山倒海的活，完全就没有吐槽废话的时间和精力，只能有啥说啥。

好了，虽然心中有千万个奔腾的马震，只能压在心中，直奔主题，讲讲CSS1-CSS3 <color>颜色的一些知识，有些你可能知道，有些可能并不知道，一些非常基本的知识我这里就不赘述。

二、color颜色关键字

这里的color颜色关键字指的是诸如red, blue这些货。

CSS level1的时候，那时候只有支持16个基本颜色关键字，诸如black, white这些货，为什么数目这么少呢？我们可以想想当时的显示器水平，不是黑白的已经不错了。

然后，CSS level2的时候，加入了橙色orange, 棕色brown等等颜色关键字。

然后，到了CSS level3的时候，颜色关键字家族进一步壮大，mediumturquoise这样的鬼都出现了。这些扩展的CSS颜色关键字，是有专门的名称的，称之为”X11颜色名“，这里的”X11″不是11区的意思，而是指用来位图显示的X Window System，常见于UNIX-like计算机系统上。

其实呢，这些X11颜色名我5年前，也就是10年的时候就写过文章分享过——“CSS3下的147个颜色名称及对应颜色值”，您可以狠狠地点击这里：CSS3下的147个颜色名称实例页面

不过这篇文章，就像是往海里扔了个宝石，连个回响都没有，现在想想，确实价值不明显，尤其我们的母语是中文，这些长得像王宝强的英文单词，很难记住的。

上面的颜色关键值列表是按英文单词字母排序的，OK，这里再展示个按照CSS水平来排列的，可读性可能会更好一些：

OK，事情还没有结束，我们在使用这些颜色关键名称的时候，可能需要注意下以下一些知识点：

如果浏览器无法识别颜色关键字，则HTML中对颜色关键字的解析和CSS中的不一样。这里有必要好好解释下。
大家应该都知道，传统HTML, 部分属性可以直接支持color属性，例如：
```
<font color="pink">少女色</font>
```
同时，我们也可以通过style属性，书写color声明，例如：
```
<font style="color:pink;">少女色</font>
```
假如说浏览器认识这些颜色，则该神马颜色就实现神马颜色；但是，如果浏览器无法识别这些颜色关键字，则，两种书写的最终表现会有差异。

在HTML中，非识别颜色关键字会使用其他算法然后转换成其他一个完全不同的颜色值；而CSS中则是无视，使用默认颜色值。

例如，我们使用上面最后一个CSS4水平的颜色关键字 – rebeccapurple(IE9-不识别，IE10不确定)做测试，HTML代码如下：
```
<h1 style="color:rebeccapurple;">CSS色和<font color="rebeccapurple">HTML色</font>解析差异测试</h1>
```
结果，IE9浏览器下是这样子：

IE11浏览器下则是：

可以发现，IE11下的颜色是正统的颜色，但是，IE9浏览器下，不认识rebeccapurple关键字，结果，中间HTML属性颜色不是黑色，而是转变成了绿色，还是蛮有意思的。
在CSS中，无法识别的颜色关键字会导致CSS声明无效，被忽略（如上面例子使用了默认的黑色）。
这些颜色关键字，没有哪一个是包含有透明的，都是简单的纯色。
下面这些关键字基友表示的是同一个颜色值：
- darkgray / darkgrey
- darkslategray / darkslategrey
- dimgray / dimgrey
- lightgray / lightgrey
- lightslategray / lightslategrey
- gray / grey
- slategray / slategrey
虽然上面这些颜色关键字来自”X11颜色名”, 但是呢，具体的颜色表现值可能跟X11操作系统有些不一样，这往往跟制造商的硬件有关。

三、transparent关键字

color:transparent用来表示文字的颜色纯透明，transparent关键字可以近似认为是rgba(0,0,0,0)的缩写。

OK，在不久之前，我对color:transparent的兼容性产生了误解，我一直以为IE7+浏览器都是支持的。

原因在于，IE11向下兼容的IE浏览器版本对颜色的解析跟原生的IE7, IE8浏览器是不一样的，会自动继承部门高级浏览器对颜色关键字的解析，比方说上面的rebeccapurple关键字以及这里的transparent关键字。

另外一点就是，background-color:transparent以及border-color:transparent IE7浏览器都是支持的。

虽然看上去师出同门，但是兼容性却不一样，只能遗憾，要是原生IE7也支持color:transparent, 我们可以弄出不少好玩的东西。

四、currentColor关键字

currentColor关键字之前专门写文章介绍过：“currentColor-CSS3超高校级好用CSS关键字”。

IE9及其以上浏览器支持，在CSS3图形绘制的时候，很管用。然而，这里我要讲点其他tips.

首先，CSS中很多属性值默认就是currentColor的表现，我们一般（部分浏览器animation需要）无需画蛇添足，再声明这个关键字。例如，border, text-shadow, box-shadow等。尤其border, 包括IE7在内的浏览器都是如此特性，因为，我们使用图形生成的时候，尽量使用border属性，hover变色只需要控制color值就可以了。例如：

.test {
    color: red;
    border: 2px solid;
}

此时.test元素的边框颜色就是red红色。text-shadow, box-shadow为CSS3属性，其默认阴影颜色也是和文字颜色一样的，例如：

h1 { color: rebeccapurple; box-shadow: 0 0 10px; }

盒阴影默认颜色为文字颜色

另外一个就是Chrome浏览器下currentColor有bug，尤其iOS的Safari浏览器下，currentColorbug则更多，印象比较深的就是伪元素的background: currentColor在hover时候背景色不会跟随color变化。在currentColor的表现上，IE浏览器这回是完胜，各种场景使用都无懈可击。

不过，一些基本的使用场景，各个浏览器都是很正常的，仍不失为一个好的关键字。尤其在实现SVG Sprites效果的时候：

svg {
    fill: currentColor;
}

五、16进制颜色、rgb颜色和hsl颜色

16进制颜色，指的是长得诸如： #000000或#000的颜色，我们在CSS中用得最频繁的就是这种格式的颜色，为什么呢？因为字符数目最少。

rgb颜色实际上和16进制颜色是近亲，只是进制的差异，都归属于rgb颜色。rgb格式从我入行起浏览器就支持了，除了支持数值rgb(255, 0, 51)，还是支持百分比rgb颜色，如：rgb(100%, 0%, 20%).

rgb数值格式只能是整数，不能是小数，否则，包括各IE以及Chrome在内的浏览器都会打酱油。下面是一些支持以及不支持的示意：

/* 下面这些都是同一个 RGB 颜色： */
 #f03
 #F03
 #ff0033
 #FF0033
 rgb(255,0,51)
 rgb(255, 0, 51)
 rgb(255, 0, 51.2) /* 酱油！整数，不能小数 */ 
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
 rgb(100%, 0, 20%) /* 酱油兔！整数和百分比不能在一起搞基 */

hsl颜色，是CSS3才出现的颜色表现格式，因此IE9+浏览器才支持。和rgb分别表示red, green, blue一样，hsl颜色三个字母也有自己的含义，其中，h表示Hue, 是色调的意思，取值懂0~360，大致按照数值红橙黄绿青蓝紫变化的节奏；s表示Saturation, 饱和度的意思，0~100%表示，值越大，饱和度越高，颜色越亮，通常我们评价某设计亮瞎我们的狗眼，就是你这个设计颜色饱和度太高的另一种说法；l表示Lightness，亮度的意思，也是0~100%表示，越亮。100%就是白色，50%则是正常亮度，0%的亮度就是黑色。

在取色器中，hsl颜色非常管用，有助于迅速选取我们想要的颜色值。或者根据现有颜色得到近似色。比方说我们要实现一个hover效果，hover一个色块，然后颜色加深，怎么搞？使用rgb很头疼，而使用hsl则很简单，我们只要把l也就是亮度微调低一点就可以。

16进制颜色、rgb颜色和hsl颜色是可以相互间转化的，具体怎么转呢？可以参见同样5年前的一篇文章：“javascript HEX十六进制与RGB, HSL颜色的相互转换”。

最后，CSS3中的颜色支持Alpha透明通道，于是就有了rgba颜色和hsla颜色，a表示透明度， 0~1, 0表示完全透明，1表示实色无透明。如果使用小数，前面的0可以省略，节约一个字符大小。

rgba(255,0,0,.7)

hsla(240,100%,50%, .7)

六、系统颜色

这是个很有意思的主题，我以前在实际项目中就使用过系统颜色。这是什么鬼呢？

我们都知道，window操作系统，不同的主题，其弹框啊，工具栏之类的颜色都是不一样的，OK，这些不一样的颜色就称之为系统颜色，在web中，我们也是可以使用这些颜色，于是，我们可以实现和系统主题风格类似的web组件皮肤效果。

OK，都有哪些系统颜色关键字呢？

下面是一些整理，注意，这些跟着系统走的，不是所有的系统都支持；而且有些值是跟着浏览器走的，Chrome浏览器可能是淡灰色，IE下可能是白色表现等：

七、结束语

<color>还有很多其他知识点，要么鸡犬不闻，要么耳熟能详，我就不多介绍了。

最后，感谢阅读！

行文仓促，错误难免，欢迎指正，也欢迎提供其他认为不错的相关的知识点，我会补充。

本文大多数内容翻译参考自MDN的color_value

posted on 2016-05-31 11:31 魂灵舞阅读(10706) 评论(0) 编辑收藏举报

刷新页面返回顶部