文字
分享

语法:

color:<color>

默认值由user agent决定

适用于:所有元素

继承性:有

动画性:是

计算值:指定值

取值:

  • <color>:指定颜色。

说明:

检索或设置对象的文本颜色。无默认值
  • 可以使用Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent来指定color。

  • 注意,用颜色名称指定color可能不被一些浏览器接受。

  • color属性值被间接用来提供一个中间值 currentColor 以供其他接受颜色值的属性使用。

    示例:

    如上代码,没有定义边框的颜色,但定义了color的颜色为red,那么这时red将会作为一个间接值 currentColor 提供给边框颜色属性,所以最终边框色也为red。

  • 对应的脚本特性为color

兼容性:

ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support6.0+2.0+4.0+3.1+15.0+3.2+2.1+18.0+
RGBA, HSL, HSLA,
transparent
6.0-8.0
9.0+

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>color_CSS参考手册_web前端开发参考手册系列</title>

<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, 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">

        <strong>Color Name(用颜色名称表示法)</strong>

        <p>看看我的颜色 {color:green;}</p>

    </li>

    <li class="hex">

        <strong>HEX(十六进制数值表示法)</strong>

        <p>看看我的颜色 {color:#ff0000;}</p>

    </li>

    <li class="rgb">

        <strong>RGB</strong>

        <p>看看我的颜色 {color:rgb(0,0,0);}</p>

    </li>

    <li class="rgba">

        <strong>RGBA</strong> - IE8及以下浏览器不支持这种写法

        <p>看看我的颜色 {color:rgba(0,0,0,.5);}</p>

    </li>

    <li class="hsl">

        <strong>HSL</strong> - IE8及以下浏览器不支持这种写法

        <p>看看我的颜色 {color:hsl(240,50%,50%);}</p>

    </li>

    <li class="hsla">

        <strong>HSLA</strong> - IE8及以下浏览器不支持这种写法

        <p>看看我的颜色 {color:hsla(240,50%,50%,.5);}</p>

    </li>

    <li class="transparent">

        <strong>transparent</strong> - IE8及以下浏览器将文本颜色设置为transparent,文本将显示为黑色

        <p>看看我的颜色 {color:transparent;}</p>

    </li>

</ul>

</body>

</html>

            


运行实例 »

点击 "运行实例" 按钮查看在线实例


上一篇:颜色下一篇:opacity