CSS1-CSS3

【20160616第一章 引言 心得】

本文部分知识摘自张鑫旭的文章，对原作者表示感谢，链接 CSS1-CSS3 颜色知识知多少？

读了《CSS揭秘》在里面看到rebeccapurple这个颜色，没见过，于是问度娘，搜到的第一篇就是张鑫旭的文章，读后，觉得这篇文章对css颜色表述的很全面，很容易理解，也解决了我对rebeccapurple的疑问，原来这是CSS4新增的一个颜色名称，但IE11及以上才支持。

原文：
在HTML中，非识别颜色关键字会使用其他算法然后转换成其他一个完全不同的颜色值；而CSS中则是无视，使用默认颜色值。
例如，我们使用上面最后一个CSS4水平的颜色关键字 – rebeccapurple
(IE9-不识别，IE10不确定)做测试，HTML代码如下：

CSS色和HTML色解析差异测试

结果，IE9浏览器下是这样子：

IE9浏览器下截图

IE11浏览器下则是：

CSS色和HTML色差异IE11截图

可以发现，IE11下的颜色是正统的颜色，但是，IE9浏览器下，不认识rebeccapurple
关键字，结果，中间HTML属性颜色不是黑色，而是转变成了绿色，还是蛮有意思的。

• 另外，无意中看到这篇文章中有《CSS揭秘》提到的HSLA颜色，原文如下：

五、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)