首页 > 编程笔记

CSS background-color属性的用法

在 CSS 中，元素的背景颜色使用 background-color 属性来设置，属性值为某种颜色。

例如下面这段代码：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #grade {
        width:300px;
        height:200px;
        background-color:#ccc;
        color:#000;
        line-height:200px;
        text-align:center;
        font-size:20px;
        margin:20px;
    }
    </style>
</head>
<body>
    <div id="grade">设置背景颜色</div>
</body>
</html>

代码中的 color 属性用于设置标题文字的颜色，background-color 属性用于设置标题背景的颜色。

此外，background-color 属性还可以用于设置各种网页元素。上面的实例演示了给一个 div 块设置背景色的方法。注意区分 color 和 background-color 这两个属性，前者设置的是文字颜色，后者设置的是背景颜色。

效果如下图所示：

图 1 设置背景颜色

如果要给整个页面设置背景颜色，则只需要对 <body> 标记设置该属性即可，代码如下：

body{
    background-color:#0FC;
}

注意，在 CSS 中可以使用 3 个字母的颜色表达方式。例如 #0FC 等于 #00FFCC，这种 3 个字母的表达方式仅用在 CSS 中。

CSS background-color属性的用法

推荐阅读