color

CSS3

previous page next page

color

版本：CSS1
继承性：有

语法：

color：<color>

取值：

<color>：: 指定颜色。

说明：

检索或设置对象的文本颜色。无默认值

可以使用Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent来指定color。
注意，用颜色名称指定color可能不被一些浏览器接受。
对应的脚本特性为color。

兼容性：

= 支持
= 不支持
= 部分支持
= 实验性质

支持版本\类型
版本	6.0-8.0 ^#1	4.0	5.1	13.0	11.50
版本	9.0	4.0	5.1	13.0	11.50

IE8及更早浏览器不支持color的RGBA, HSL, HSLA及transparent值。

示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>

<title>color_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com">
<meta name="copyright" content="www.doyoe.com">
<style>
.colorname p{color:green;}
.hex p{color:#ff0000;}
.rgb p{color:rgb(0,0,0);}
.rgba p{color:rgba(0,0,0,.5);}
.hsl p{color:hsl(240,50%,50%);}
.hsla p{color:hsla(240,50%,50%,.5);}
.transparent p{color:transparent;}
</style>
</head>
<body>
<ul class="test">
	<li class="colorname">
		Color Name(用颜色名称表示法)
		看看我的颜色　{color:green;}
	</li>
	<li class="hex">
		HEX(十六进制数值表示法)
		看看我的颜色　{color:#ff0000;}
	</li>
	<li class="rgb">
		RGB
		看看我的颜色　{color:rgb(0,0,0);}
	</li>
	<li class="rgba">
		RGBA - IE8及以下浏览器不支持这种写法
		看看我的颜色　{color:rgba(0,0,0,.5);}
	</li>
	<li class="hsl">
		HSL - IE8及以下浏览器不支持这种写法
		看看我的颜色　{color:hsl(240,50%,50%);}
	</li>
	<li class="hsla">
		HSLA - IE8及以下浏览器不支持这种写法
		看看我的颜色　{color:hsla(240,50%,50%,.5);}
	</li>
	<li class="transparent">
		transparent - IE8及以下浏览器将文本颜色设置为transparent，文本将显示为黑色
		看看我的颜色　{color:transparent;}
	</li>
</ul>
</body>
</html>

previous page start next page