css第3课颜色与背景..docVIP

第3课：颜色与背景 本课，你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。本课将对下列CSS属性进行讲解： color background-color background-image background-repeat background-attachment background-position background 前景色：‘color’属性 CSS属性color用于指定元素的前景色。 例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是H4元素，那么可以用下面的代码来实现把H4元素的前景色设为红色。 以下是代码片段：[]H4 {color: #ff0000;} 查看示例 颜色值可以用十六进制表示（比如上例中的#ff0000），也可以用颜色名称（比如“red”）或RGB值（比如rgb(255,0,0)）表示。 ‘background-color’属性 CSS属性background-color用于指定元素的背景色。 因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body元素应用background-color属性就行了。 你也可以为其他包含标题或文本的元素单独应用背景色。在下例中，我们为body和H4元素分别应用了不同的背景色。 以下是代码片段：[]body {?background-color: #FFCC66;} H4 {?color: #990000;?background-color: #FC9804;} 查看示例 注意：我们为H4元素应用了两个CSS属性，它们之间以分号（“;”）分隔。 背景图像[background-image] CSS属性background-image用于设置背景图像。 在下面的示例中，我们使用了一张蝴蝶的图像作为背景。你可以将该图片下载下来（方法为：鼠标右击该图片，然后选择“图片另存为”），以便在自己的计算机上使用。当然，你也可以选用其他你觉得满意的图片。 如果要把这个蝴蝶的图片作为网页的背景图像，只要在body元素上应用background-image属性、然后给出蝴蝶图片的存放位置就行了。 以下是代码片段：[]body {background-color: #FFCC66;background-image: url(butterfly.gif);}H4 {color: #990000;background-color: #FC9804;} 查看示例 注意我们指定图片存放位置的方式：url(butterfly.gif)。这表明图片文件和样式表存放在同一目录下。你也可以引用存放在其他目录的图片，只需给出存放路径即可（比如url(../images/butterfly.gif)）；此外，你甚至可以通过给出图片的地址来引用因特网（Internet）上的图片（比如url(/Article/UploadFiles/200906/20090601090536596.gif)）。 平铺背景图像[background-repeat] 你有没有发现在上例中那个蝴蝶图片在横向和纵向都被平铺了？CSS属性background-repeat就是用于控制平铺的。 下表概括了background-repeat的四种不同取值。 值 描述 示例 background-repeat:repeat-x 图像横向平铺 查看示例 background-repeat:repeat-y 图像纵向平铺 查看示例 background-repeat:repeat 图像横向和纵向都平铺 查看示例 background-repeat:no-repeat 图像不平铺 查看示例 例如，为了避免平铺背景图像，代码应该这样： 以下是代码片段：[]body {?background-color: #FFCC66;?background-image: url(butterfly.gif);?background-repeat: no-repeat;} H4 {?color: #990000;?background-color: #FC9804;} 查看示例 固定背景图像[background-attachment] CSS属性background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。 一个固定的背景图像不会随着用户滚动页面而发生滚动（它是固定在屏幕上的），而一个非固定的背景图像会随着页面的滚动而滚动。 下表概括了background-attachment的两种不同取值。你可以点击示例察看二