最近评论
正在载入评论列表...
4.2 文档背景色设置background-color
在文档格式化模型中，每一个元素都有各自的“容器”，原始的HTML工具对于容器背景颜色的定义功能非常有限。例如，HTML只能通过“bgcolor”属性对<body>、<td>单元格等进行背景颜色设置。而利用CSS样式表可以对所有元素设置背景色。
属性值：颜色值 | transparent | 继承值
初始值：transparent
作用于：所有元素
是否继承：否
百分比值：不适用
计算值：指定的计算值
一个恰当的背景色配置可以让网页文档变得更为漂亮和易于阅读。例如，对于一篇比较长的文本而言，深色背景和浅色文字的设置是更为人性化的，这是因为当读者长时间注视计算机屏幕的时候，白色背景会刺激人的眼睛，使视觉产生疲劳，而深色背景可以避免这种情况的发生，保护读者的视力。
示例4.2演示了对一篇文档设置深色背景和浅色文字的做法，演示效果如图4.3所示。
示例4.2
<html>
<head>
<title>CSS Demo</title>
<style>
body { background-color: navy;
color: white; }
</style>
</head>
<body>
<p>一个恰当的背景色配置可以让网页文档变得更为漂亮和易于阅读。例如，对于一篇比较长的文本而言，使用深色背景和浅色文字可以令文章显得更为人性化，这是因为当读者长时间注视计算机屏幕的时候，白色背景会刺激人的眼睛，使视觉产生疲劳，而深色背景可以避免这种情况的发生，保护读者的视力。</p>
</body>
</html>
在设置背景和文字颜色的时候必须做到颜色有对比区分，否则会得到适得其反的效果。
在Dreamweaver 8中，定义文本背景色的做法如图4.4所示。
background-color属性可以定义所有元素的背景色，这样就可以做到HTML本身所无法达到的要求，示例4.3演示了在一个文档上，对多个元素设置背景色的做法，效果如图4.5所示。
图4.3 深色背景配以浅色文本 图4.4 在Dreamweaver 8中设定文本背景色的做法
示例4.3
<html>
<head>
<title>CSS Demo</title>
<style>
body { background-color: silver; }
table { background-color: black; }
.highlight { background-color: yellow; }
</style>
</head>
<body>
<table>
<tr><td>111</td><td class="highlight">222</td><td>333</td></tr>
</table>
</body>
</html>
图4.5 在一个文档中对多个元素设置背景色
background-color属性值的初始值为“transparent”，即“透明”，也就是说，除非通过人为设定来改变这个值，否则默认元素都没有背景色，即显示上级元素的背景色。
图书导读
