您的位置:首页 > div css问集 > 【 返回上一页

css color与background-color区别与用处

css colorbackground-color区别与用处,

两者均设置与颜色相关的CSS属性样式

一、功能区别

color设置字体颜色,文本颜色
background-color设置背景颜色

如果设置文字字体颜色我们使用:color
如果设置背景颜色我们选择:background-color

当然background-color可以再简写background直接设置背景颜色
background-color:#000

background:#000
两者CSS功能作用完全相同,只不过一个是被简写了。一般布局推荐使用简写background直接设置背景颜色,从而节约代码。

二、相同处

均设置颜色,跟颜色值表达相同
color:#000 设置字体黑色
background-color:#FFF 设置背景颜色为白色

看出值均为相同RGB颜色值

三、可以同时使用

因为一个设置字体颜色,一个设置对象背景颜色,所以两者可以在一个CSS选择器中同时使用,而且各自功能是互不干扰的。

四、小实例

两者均是设置颜色,而所表达呈现颜色地方不同实例。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两处颜色设置 ThinkCSS</title>
<style>
.box1,.box2{ width:300px; height:200px; float:left}
.box1{ color:#F00; background:#CCC}
.box2{ color:#03F; background:#FFB}
</style>
</head>
<body>
<div class="box1">字体红色 背景灰黑色</div>
<div class="box2">背景淡黄 色 字体蓝色</div>
</body>
</html>

设置两个BOX盒子,宽度高度、同时设置布局靠左,分别设置不同color字体颜色和background-color背景颜色,这里background-color简写使用background设置背景颜色。

color与background-color应用实例
color与background-color应用实例

如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/wenti/1313.shtml

修订日期:2017-03-31 10:05 www.thinkcss.com div css