HTML/CSS学习汇总（3）

CSS：颜色

CSS中的颜色分为foreground color 和 background color。

foreground color 指的是元素显示的颜色。
background color 指的是元素的背景颜色。

它们的写法为：

h1
{
color: red;
background-color: blue;
}
标题的字体颜色为红色，背景颜色为蓝色。

有确定名称的颜色一共有147种，而RGB（Red,Green,Blue）颜色提供了16,777,216种可能。因为每种三原色都有256个值（0~255），将它们混合就可以得到1600多万种颜色。

RGB颜色的用法为：
h1
{
color: rgb(235,150,100);
background-color: rgb(140,233,40);
}

另外一种方法是用十六进制来设置颜色，它由一个#号和三组两位十六进制数组成，每组数字代表一种颜色，它同样提供了16777216种可能，用法为：
h1
{
color: #09AA34;
}
09代表红色，AA代表蓝色，34代表绿色。

用十六进制设置颜色时，若每组数字都重复，则可以简写成：
h1 {
color: #FFFFFF;
color: #FFF; /* 颜色同上*/
}

h2 {
color: #AA33BB;
color: #A3B; /* 颜色同上 */
}

目前CSS的版本有CSS和CSS3。CSS3中为设置颜色提供了一种新的方式——HSL（Hue,Saturation,Lightness）

Hue（色彩）是颜色的术语，它的值在0-360之间。
Saturation为饱和度，指颜色中灰色的百分比，值在0%-100%之间。
Lightness为亮度，指颜色中白色的百分比，值在0%-100%之间。

用法为：
h1 {
color: hsl(182, 20%, 50%);
}

用RGB和HSL的方式设置颜色，可以使用一种十六进制所不具有的特性——Opacity（透明度）。它的值可以是0-1。用法为：
h1 {
color: rgba(123, 88, 9, 0.5);
}
h1 {
color: hsla(239, 45%, 22%, 0.4);
}

目前，有些旧的浏览器暂不支持一些CSS3的功能，例如HSL和Opacity。因此，为了使网页可以适应所有浏览器，通常会这样设置颜色：
h1 {
color: rgb(22, 34, 88);
color: rgba(22, 34, 88, 0.4);
}
浏览器会优先选择后者，若不支持rgba，则选择前者。