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