精通CSS层叠样式表3
2008-03-09 11:30:43 来源：WEB开发网核心提示：学习以下CSS属性： 颜色 背景色 背景图象 重复背景 固定背景 背景定位 背景 为你的世界添加色彩首先，我们谈一下将颜色加到网页要素上，精通CSS层叠样式表3， 颜色 颜色属性并不陌生，它的用法很象HTML中使用的参数值，你以使用repeat-x将其水平平铺，用repaet-y将其垂直平铺， B { col
学习以下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的浏览器还认可数百种其它色彩名称，参见
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版本的浏览器都支持。
背景颜色
在传统的网页设计中，为了在某一要素后面加上背景色，你必须先在要素周围生成表格单元，然后在表格单元中添加颜色。 利用 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页。）
你还可以给背景色设定透明属性，也就是说，论背景色原来是什么颜色，都会以透明色显。
背景色的确是太棒了，而如果能给背景加上图，不就更棒了吗？你的梦想可以实现！
背景图象
你可以很轻松地将GIF或JPEG图象加到一个要素后面：
B { background-image: url(background.gif) }该规则将背景图象加到整个段落之后。你可以将GIF图象采用和背景图象通常的设置类似的方法平铺到文字后面。
你还可以将背景图象只添加到两个单词后面。想把图象添加到整个浏览器窗口吗？那么你可以将其添加到 <BODY>标签。
你可以使用URL调用一幅图象，你既可以使用相对UPL，例如 images/bg.gif或完整的URL,例如
http://www.webmonkey.com/images/bg.gif.
none参数值将取消对背景图象的任何设置.
当你设定一个背景图象时，最好能指定一种背景色。这样以来,下载背景图象的同时,固定的背景色先出现在屏幕上。而且它将透过背景图象上的透明色区显示出来。例：
CSS makes Webmonkeys gleeful.
你可以看到背景色紫色在GIF图象的透明色区也显示出来。
我们最常用的浏览器中可能会出现以下各种景图象问题：
在本篇所讨论的各种背景属性中，IE 3只支持快捷背景属性，详见第6页。
当使用链接的样式表时，IE 3根本不显示背景图象。
当你仅对段落的某一部分添加背景图象，Communicator (在两种操作平台上) 和IE 4 (Mac操作平台上) 有时候可能会出问题，也许它根本不显示图象，也许会在添加了背景图象的文字中加入行回车。
如果你同时设定了背景图象和背景色，有时候 Communicator将背景色的显示排在优先的地位。
控制背景图象
你不仅可以将图象放在要素后面，你还可以精确地控制背景图象的各项设置。你可以决定是否及如何将其平铺，背景图象应该滚动还是保持固定，及将其放在什么位置。朋友，这是真的！
背景重复(background-repeat)
背景图象通常是平铺在背景上的，对吗？错。利用这项CSS属性，你可以控制是否将其平铺。
P { background-repeat: no-repeat; background-image: url(
background.gif) }
上述规则应用于整个段落。我们以前用过的GIF图象出现在文字后面，但由于我们应用了不重复图象（no-repeat)规则，所以该图象不会重复平铺在整个段落后面，它只显示一幅单独的图象。
如果你只想让图象垂直或者水平方向平铺，你以使用repeat-x将其水平平铺，用repaet-y将其垂直平铺。而repeat参数值则将图象从水平和垂直两个方向平铺。
颜色
背景色
背景图象
重复背景
固定背景
背景定位
背景
为你的世界添加色彩
首先，我们谈一下将颜色加到网页要素上。
颜色
颜色属性并不陌生，它的用法很象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版本的浏览器都支持。
背景颜色
在传统的网页设计中，为了在某一要素后面加上背景色，你必须先在要素周围生成表格单元，然后在表格单元中添加颜色。 利用 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页。）
你还可以给背景色设定透明属性，也就是说，论背景色原来是什么颜色，都会以透明色显。
背景色的确是太棒了，而如果能给背景加上图，不就更棒了吗？你的梦想可以实现！
背景图象
你可以很轻松地将GIF或JPEG图象加到一个要素后面：
B { background-image: url(background.gif) }该规则将背景图象加到整个段落之后。你可以将GIF图象采用和背景图象通常的设置类似的方法平铺到文字后面。
你还可以将背景图象只添加到两个单词后面。想把图象添加到整个浏览器窗口吗？那么你可以将其添加到 <BODY>标签。
你可以使用URL调用一幅图象，你既可以使用相对UPL，例如 images/bg.gif或完整的URL,例如
http://www.webmonkey.com/images/bg.gif.
none参数值将取消对背景图象的任何设置.
当你设定一个背景图象时，最好能指定一种背景色。这样以来,下载背景图象的同时,固定的背景色先出现在屏幕上。而且它将透过背景图象上的透明色区显示出来。例：
CSS makes Webmonkeys gleeful.
你可以看到背景色紫色在GIF图象的透明色区也显示出来。
我们最常用的浏览器中可能会出现以下各种景图象问题：
在本篇所讨论的各种背景属性中，IE 3只支持快捷背景属性，详见第6页。
当使用链接的样式表时，IE 3根本不显示背景图象。
当你仅对段落的某一部分添加背景图象，Communicator (在两种操作平台上) 和IE 4 (Mac操作平台上) 有时候可能会出问题，也许它根本不显示图象，也许会在添加了背景图象的文字中加入行回车。
如果你同时设定了背景图象和背景色，有时候 Communicator将背景色的显示排在优先的地位。
控制背景图象
你不仅可以将图象放在要素后面，你还可以精确地控制背景图象的各项设置。你可以决定是否及如何将其平铺，背景图象应该滚动还是保持固定，及将其放在什么位置。朋友，这是真的！
背景重复(background-repeat)
背景图象通常是平铺在背景上的，对吗？错。利用这项CSS属性，你可以控制是否将其平铺。
P { background-repeat: no-repeat; background-image: url(
background.gif) }
上述规则应用于整个段落。我们以前用过的GIF图象出现在文字后面，但由于我们应用了不重复图象（no-repeat)规则，所以该图象不会重复平铺在整个段落后面，它只显示一幅单独的图象。
如果你只想让图象垂直或者水平方向平铺，你以使用repeat-x将其水平平铺，用repaet-y将其垂直平铺。而repeat参数值则将图象从水平和垂直两个方向平铺。
9 7 3 12 4 8 :
中查找“精通CSS层叠样式表3”更多相关内容
中查找“精通CSS层叠样式表3”更多相关内容更多精彩
赞助商链接
