第九章 颜色和背景

第九章 颜色和背景

注意：在html中使用类名时，最好根据信息类型命名，而不是希望得到的视觉效果，
如sub-section而不是dkblue。

1.前景

颜色 color
值：<color> inherit
初始值：用户代理特定的值
继承性：有
计算值：根据指定确定
说明：
（1）颜色的作用之一就是获取用户注意，但太过复杂反而不好。
（2）浏览器默认背景颜色可被用户设置，所以有的颜色可能与浏览器背景颜色重合，所以在设置前景色时，最好设置背景色先。
（3）对边框的影响：如果未设置边框颜色，其将与文本颜色相同。
（4）对表单的影响：select：对于不同浏览器，可能会，也可能不会影响边框的颜色。
                  input：单选框，复选框和按钮都会使用相应的颜色。但前后文字不会，应为没有设置相应颜色。
（5）颜色和继承：理论上讲，可以通过设置body颜色，让所有元素都继承某颜色，但由于继承所得属性没有权重（不同于权重为0），
所以会被浏览器默认颜色覆盖。所以应注意<a> <table> <th> <td> 元素的颜色设置。

2.背景
元素的内容框和内边距都是元素背景的的一部分，且边框绘制在背景之上。
CSS允许纯色作为背景，也允许使用图像创建复杂的背景效果。

背景色 background-color
值：<color> transparent inherit
初始值：transparent
应用于：所有元素
说明：Navigator4.x 只会将背景色应用到文本下，不会延伸到内边距和边框。

背景图像 background-image
值：<uri> none inherit
初始值：none
应用于：所有元素
继承性：无
计算值：绝对uri
说明：
1.背景图片一般应用于body上，但其它所有元素都可使用
2.uri值相对于样式表文件而言，而非html文件，内联样式除外。
3.最好结合背景颜色使用。因为如果背景图片出于某种原因不能正常显示。使用适当的背景颜色至少可以削弱效果衰减。
  此外，如果使用的是PNG图片（GIF和JEPG图片不透明）还可利用背景颜色达到不同的视觉效果。

背景图片重复 background-repeat
值：repeat repeat-x repeat-y no-repeat inherit
初始值：repeat
继承性：无
说明：
1.背景图片的评铺总是从左上角开始，从左到右，从上到下。
2.默认的背景图片重复总是从左上角开始铺满整个元素背景。

背景定位 background-position
值：<length> <percentage> top right bottom left center
初始值：0% 0%
应用于：块级元素和替换元素
继承性：无
百分数：相对于元素和原图像上的相应点
计算值：如果指定了<length>，则为绝对长度偏移，否则为百分数值。
说明：
1.摆放上下文：CSS2和CSS2.1为内边距边界
2.关键字 top right bottom left：一个为水平方向，一个为垂直方向，顺序任意。
不过Netscape6.x规定为先水平，后垂直。
3.百分数：如50%，将背景图像中心与元素中心对齐。且出现顺序必须为先水平，后垂直。
如果只提供一个百分数，则此百分数默认为水平方向的值，垂直方向默认为center。
4.长度值：背景图片产生位移。应用于CSS雪碧图。
5.CSS2.1之前，不能将关键字与其他数值混用。

关联 background-attachment
值：scroll fixed inherit
初始值：scroll
继承性：无
说明：
1.背景图片是否相对于可视区固定（fixed），即滚动不会影响图像在可视区的位置，且图像放置
由可视区的大小决定，不由含该图的元素决定。即缩放页面时，图像大小也随之缩放。
2.scroll：滚动页面时，图像也随之滚动，可能滚动到可视区外。且缩放页面时，如果页面宽度为固定值，
根本不会影响到背景图像的摆放位置。

简写 background
值：[background-color || background-images || background-repeat || background-attachment
|| background-position] inherit
初始值：根据单个属性
应用于：所有元素
继承性：无
百分数：<background-position>允许的值
说明：
1.各个属性值的顺序任意。不过如果使用background-position，且两个方向同时设定时，
这两个值必须放在一起，且先水平，后垂直。
2.这些值没有哪一个是必不可少的，缺省值自动取默认值得。