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