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，则选择前者。