|
作者：Steve Mulder 欢迎进入第4天的课程。在此之前我们主要谈了文字样式设定，现在我们探讨一下要素和图象方面的样式设置。通过学习今天的课程，我们将掌握如何给要素赋予色彩，将图象放在要素后面。如果以前你一直不认为CSS是一种很有用的东西，那么今天将是你大彻大悟的一天。 我们将学习以下CSS属性：
现在我们回答第3天留下的小问题。 首先，我们谈一下将颜色加到网页要素上。 颜色 颜色属性并不陌生，它的用法很象HTML中使用的参数值。 B { color: #333399 } 根据这项CSS规则，浏览器将网页上所有的加重体字以设定的颜色显示，象这几个字那样。 如果你的浏览器不支持这项CSS属性，请点击这里查看英文原版的显示效果。 有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. 你甚至可以将要素只加到某一个单词后面。 上述两段文字采用背景色CSS属性编成。如果你的浏览器不支持这项属性，请点击这里查看英文原版的显示效果。 在IE 3 和 Netscape Communicator中, 第一段文字后的背景色延伸的长度不同.在IE 4中颜色会延伸更多一些，在整个段落后面形成一个较大的方块背景。 (注意：IE 3根本不支持背景色属性。但是它支持背景设置，这种快捷属性也能达到同样的效果。详见第6页。） 你还可以给背景色设定透明属性，也就是说，不论背景色原来是什么颜色，都会以透明色显示。 背景色的确是太棒了，而如果能给背景加上图象，不就更棒了吗？你的梦想可以实现！ 背景图象 你可以很轻松地将GIF或JPEG图象加到一个要素后面： B { background-image: url(background.gif) } 该规则将背景图象加到整个段落之后。你可以将GIF图象采用和背景图象通常的设置类似的方法平铺到文字后面。 如果你的浏览器不支持这项CSS属性，请点击这里查看英文原版的显示效果。 你还可以将背景图象只添加到两个单词后面。想把图象添加到整个浏览器窗口吗？那么你可以将其添加到 <BODY>标签。 如果你的浏览器不支持这项CSS属性，请点击这里窗口英文原版的显示效果。 你可以使用URL调用一幅图象，你既可以使用相对UPL，例如 images/bg.gif或完整的URL,例如http://www.webmonkey.com/images/bg.gif。 none参数值将取消对背景图象的任何设置。 当你设定一个背景图象时，最好能指定一种背景色。这样以来,下载背景图象的同时,固定的背景色先出现在屏幕上。而且它将透过背景图象上的透明色区显示出来。例： CSS makes Webmonkeys gleeful.你可以看到背景色紫色在GIF图象的透明色区也显示出来。 如果你的浏览器不支持这项CSS属性，请点击这里查看显示效果。 我们最常用的浏览器中可能会出现以下各种背景图象问题：
你不仅可以将图象放在要素后面，你还可以精确地控制背景图象的各项设置。你可以决定是否及如何将其平铺，背景图象应该滚动还是保持固定，及将其放在什么位置。朋友，这是真的！ 背景重复(background-repeat) 背景图象通常是平铺在背景上的，对吗？错。利用这项CSS属性，你可以控制是否将其平铺。 P { background-repeat: no-repeat; background-image: url(/webmonkey/98/15/stuff3a/background.gif) } 上述规则应用于整个段落。我们以前用过的GIF图象出现在文字后面，但由于我们应用了不重复图象（no-repeat)规则，所以该图象不会重复平铺在整个段落后面，它只显示一幅单独的图象。 如果你只想让图象垂直或者水平方向平铺，你可以使用repeat-x将其水平平铺，用repaet-y将其垂直平铺。而repeat参数值则将图象从水平和垂直两个方向平铺。 上述两段文字采用background-repeat属性写出，如果你的浏览器不支持这项CSS属性，请点击这里查看显示效果。 固定背景（background－attachment） 在HTML中，背景图象通常会随页面的滚动而一起滚动。但利用CSS的固定背景（background）属性，你可以建立不滚动的背景图象，页面滚动时，背景图象可以保持固定。 BODY { background-attachment: fixed; background-image: url(/webmonkey/98/15/stuff3a/background.gif) } 这里是一个例子，你可以看到页面滚动时，背景仍保持固定。（注意：Communicator不支持这项属性，IE 可以。） 该属性只用于页面背景，即<BODY>标签内设定的背景图象。 其参数有两种选择：
背景定位(background-position) 你可以设定将背景插在什么位置显示。 P { background-position: center bottom; background-image: url(background.gif) } 当上述CSS规则应用于本段文字时，背景图象将在本段的中下部开始显示并向右平铺。 如果你的浏览器不支持中下CSS属性，请点击这里查看英文原版的显示效果。 如果你看不到上述的显示效果，则说明你所使用的浏览器是Communicator，它不支持背景定位。 设定位置的3种方法：
本段显示了上述规则的执行效果。IE支持这种属性，将GIF图象设置在从左上角起水平70象素，垂直10象素的位置。由于我设置了 background-repeat: repeat-y，GIF图象将在文字后垂直平铺。 如果你的浏览器不支持执行CSS属性，请点击这里查看英文原版的显示效果。
你可以使用我们以前学过的任何一种长度单位，例如pixels,
points, inches, （IE 3不支持长度单位显示这种效果）
当这条CSS规则应用于本段时，背景图象从水平距离段落右端70％，垂直距离段落顶部50％的位置显示。如果你重新调整浏览器窗口的尺寸，使得段落的显示尺寸变化，背景图象的位置也相应发生变化。在本段上不会发生这样的变化，因为本段的尺寸是固定的，不会随着窗口尺寸的调整而变化。 如果你的浏览器不支持这项CSS属性，请点击这里查看英文原版的显示效果。 利用快捷特性可以使你将学过的所有背景属性加到一个CSS规则中。 IE 3中你必须这样应用（如我们以前提过的），你也有可能会在所有浏览器中应用它。 背景（background） 利用背景属性，你可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位。例： P { background: url(background.gif) #CCFFCC repeat-y top right } 本段应用了上述规则。你可以看到背景是浅绿色，背景图象只垂直平铺，第1次平铺的位置在右上角。注意Communicator不支持背景定位属性。 如果你的浏览器不支持这项CSS属性，请点击这里查看英文原版的显示效果。 如果你看不到该段文字描述的效果，则说明你的浏览器不支持这项CSS属性。 使用背景属性时，你无须设定背景的每一项目内容。你可以只设定你所要的背景图象和色彩，或者设定其它组合。 使用快捷特性时也会碰到使用单另的背景属性时遇到的各种浏览器问题。 请点击本页查看例子，并试着自己重新制作出例子中的效果，最好不要看代码。该例子用了两幅图象，你可一从位置1 和位置2 处下载。不要忘了，要使例子正确显示，你必须安装4.0版的浏览器。 小问题：如何让你的公司的标志不论页面滚动还是浏览器窗口尺寸调整都永远显示在浏览器窗口的右下角？在明天的课程前我将告诉你答案。 样式表使得网页设计更加有趣。我们新近掌握的控制背景图象的方法更另我们心动不已。以下是我们今天所学内容的总结：
明天将是样式表课程的最好一天，我们将学习将要素设置在页面的任何位置的方法，及如何将各要素叠放在彼此之上。明天见！
|
