css样式表在像素及图像方面的应用.docxVIP

目录 现在我们探讨一下要 素和图象方面的样式设置。通过学习今天 的课程，我们将掌握如何给要素赋予色彩， 将图象放在要素后面。如果以前你一直不 认为CSS是一种很有用的东西，那么今天将 是你大彻大悟的一天。 我们将学习以下CSS属性： 颜色 背景色 背景图象 重复背景 固定背景 背景定位 背景   HYPERLINK /eschool/zhuanti/css/ CSS为你的世界添加色彩 首先，我们谈一下 HYPERLINK /eschool/zhuanti/css/ CSS将颜色加到网页要素上。 颜色 颜色属性并不陌生，它的用法很象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的浏览器还 认可数百种其它色彩名称，参见  HYPERLINK /%7Egiant/COLOR/1ColorSpecifier.html HYPEs Color Specifier. 16进制（hex）色彩控制 使用16进制数可实现对色彩的更精确 的控制，其格式为 #336699。16进制 （hex）色彩控制详见  HYPERLINK /graphics/color.html W。 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版本的 浏览器都支持。 Css背景颜色 在传统的网页设计中，为了在某一要素后面 加上背景色，你必须先在要素周围生成表格 单元， 然后在表格单元中添加颜色。 利用 CSS添加背景色则相当容易。 背景色 利用 HYPERLINK /eschool/zhuanti/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属性编成。如果你 的浏览器不支持这项属性，请点击 HYPERLINK /eschool/zhuanti/css/day4_3.htm 这里查看英 文原版的显示效果。 在IE 3 和 Netscape Communicator中, 第一段 文字后的背景色延伸的长度不同.在IE 4中颜色 会延伸更多一些，在整个段落后面形成一个较 大的方块背景。 (注意：IE 3根本不支持背景色属性。但是它支 持背景设置，这种快捷属性也能达到同样的效 果。详见第6页。） 你还可以给背景色设定透明属性，也就是说， 不论背景色原来是什么颜色，都会以透明色显 示。 背景色的确是太棒了，而如果能给背景加上图 象，不就更棒了吗？你的梦想可以实现!  HYPERLINK /eschool/zhuanti/css/ CSS背景图象 你可以很轻松地将GIF或JPEG图象加到一个要 素后面： B { background-image: url(background.gif) } 该规则将背景图象加到整个段落之后。你可以 将GIF图象采用和背景图象通常的设置类似的方 法平铺到文字后面。 你还可以将背景图象只添加到两个单词后面。 想把图象添加到整个浏览器窗口吗？那么你 可以将其添加到 BODY标签。 你可以使用URL调用一幅图象，你既可以使用 相对UPL，例如 images/bg.gif或完整的URL, 例如 /images/