2017-03-31 10:12:30 css中background-color与color区别，分别用法用处，各种功能是什么？background-color如何简写功能不变。
css color与background-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>两处颜色设置 HTML8</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应用实例