4.1 第4天
欢迎进入第4天的课程。在此之前我们主要谈了文字样式设定,现在我们探讨一下要素和图象方面的样式设置。通过学习今天的课程,我们将掌握如何给要素赋予色彩,将图象放在要素后面。如果以前你一直不认为CSS是一种很有用的东西,那么今天将是你大彻大悟的一天。
我们将学习以下CSS属性:
颜色
背景色
背景图象
重复背景
固定背景
背景定位
背景
现在我们回答第3天留下的小问题。
4.2 为你的世界添加色彩
首先,我们谈一下将颜色加到网页要素上。
颜色
颜色属性并不陌生,它的用法很象HTML中使用的参数值。
B { color: #333399 }
根据这项CSS规则,浏览器将网页上所有的加重体字以设定的颜色显示,象这几个字那样。
有3种方法用于设定你所需要的颜色:
颜色名称
CSS所用的颜色名称同我们常用的称呼方式。16种基本色为aqua,
black, blue, fuchsia, gray, green, lime,maroon,
navy, olive, purple, red, silver, teal,
white, and yellow.
但是Netscape和Microsoft的浏览器还认可数百种其它色彩名称,参见
HYPE's
Color Specifier.
16进制(hex)色彩控制
使用16进制数可实现对色彩的更精确的控制,其格式为 #336699。16进制(hex)色彩控制详见Webreference.com。
CSS还支持某些hex值的快捷计数法。比如, #336699可以被称为
#369。浏览器会将其按照16进制格式阐释。
RGB值
对于习惯于RGB计数法的用户,这里将提供一种全新的色彩设定方法。RGB法通常用于图象应用软件例如
Photoshop。利用RGB设定色彩的方法如下:
B { color: rgb(51,204,0) }
RGB的数值范围从0到255,R代表红色,G代表绿色,B代表蓝色。
IE 3不支持RGB格式,但是4.0版本的浏览器都支持。
4.3 背景颜色
在传统的网页设计中,为了在某一要素后面加上背景色,你必须先在要素周围生成表格单元,
然后在表格单元中添加颜色。 利用 CSS添加背景色则相当容易。
背景色
利用CSS在网页要素后面加入固定的背景色及图象。
P.yellow { background-color: #FFFF66 }
The above rule has been
applied to this entire paragraph. You can use any of the values we talked about on the
previous page: color names, hex numbers, or RGB values.
你甚至可以将要素只加到某一个单词后面。
在IE 3 和 Netscape Communicator中,
第一段文字后的背景色延伸的长度不同.在IE 4中颜色会延伸更多一些,在整个段落后面形成一个较大的方块背景。
(注意:IE 3根本不支持背景色属性。但是它支持背景设置,这种快捷属性也能达到同样的效果。详见第6页。)
你还可以给背景色设定透明属性,也就是说,论背景色原来是什么颜色,都会以透明色显。
背景色的确是太棒了,而如果能给背景加上图,不就更棒了吗?你的梦想可以实现!
4.4 背景图象
你可以很轻松地将GIF或JPEG图象加到一个要素后面:
B { background-image: url(background.gif) }该规则将背景图象加到整个段落之后。你可以将GIF图象采用和背景图象通常的设置类似的方法平铺到文字后面。
你还可以将背景图象只添加到两个单词后面。想把图象添加到整个浏览器窗口吗?那么你可以将其添加到
<BODY>标签。
你可以使用URL调用一幅图象,你既可以使用相对UPL,例如
images/bg.gif或完整的URL,例如
//www.webmonkey.com/images/bg.gif.
none参数值将取消对背景图象的任何设置.
当你设定一个背景图象时,最好能指定一种背景色。这样以来,下载背景图象的同时,固定的背景色先出现在屏幕上。而且它将透过背景图象上的透明色区显示出来。例:
CSS makes Webmonkeys gleeful.
你可以看到背景色紫色在GIF图象的透明色区也显示出来。
我们最常用的浏览器中可能会出现以下各种景图象问题:
在本篇所讨论的各种背景属性中,IE 3只支持快捷背景属性,详见第6页。
当使用链接的样式表时,IE 3根本不显示背景图象。
当你仅对段落的某一部分添加背景图象,Communicator
(在两种操作平台上) 和IE 4 (Mac操作平台上)
有时候可能会出问题,也许它根本不显示图象,也许会在添加了背景图象的文字中加入行回车。
如果你同时设定了背景图象和背景色,有时候
Communicator将背景色的显示排在优先的地位。
4.5 控制背景图象
你不仅可以将图象放在要素后面,你还可以精确地控制背景图象的各项设置。你可以决定是否及如何将其平铺,背景图象应该滚动还是保持固定,及将其放在什么位置。朋友,这是真的!
背景重复(background-repeat)
背景图象通常是平铺在背景上的,对吗?错。利用这项CSS属性,你可以控制是否将其平铺。
P { background-repeat: no-repeat; background-image: url(
background.gif) }
上述规则应用于整个段落。我们以前用过的GIF图象出现在文字后面,但由于我们应用了不重复图象(no-repeat)规则,所以该图象不会重复平铺在整个段落后面,它只显示一幅单独的图象。
如果你只想让图象垂直或者水平方向平铺,你以使用repeat-x将其水平平铺,用repaet-y将其垂直平铺。而repeat参数值则将图象从水平和垂直两个方向平铺。
固定背景(background-attachment)
在HTML中,背景图象通常会随页面的滚动而一起滚动。但利用CSS的固定背景(background)属性,你可以建立不滚动的背景图象,页面滚动时,背景图象可以保持固定。
全国职称计算机考试速成过关系列套装:W .. 定价:¥133 优惠价:¥133.0 更多书籍 | |
全国职称计算机考试速成过关系列套装:W .. 定价:¥124 优惠价:¥124.0 更多书籍 |