第九章 颜色和背景
注意:在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.这些值没有哪一个是必不可少的,缺省值自动取默认值得。
注意:在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.这些值没有哪一个是必不可少的,缺省值自动取默认值得。