首页
设计制作 > CSS/HTML > 文章内容

5日精通CSS层叠样式表（第4日）

2016-10-8编辑:sunny

4.1 第4天
欢迎进入第4天的课程。在此之前我们主要谈了文字样式设定，现在我们探讨一下要素和图象方面的样式设置。通过学习今天的课程，我们将掌握如何给要素赋予色彩，将图象放在要素后面。如果以前你一直不认为CSS是一种很有用的东西，那么今天将是你大彻大悟的一天。
我们将学习以下CSS属性：
颜色
背景色
背景图象
重复背景
固定背景
背景定位
背景
现在我们回答第3天留下的小问题。


4.2 为你的世界添加色彩
首先，我们谈一下将颜色加到网页要素上。
颜色
颜色属性并不陌生，它的用法很象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版本的浏览器都支持。


4.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.
你甚至可以将要素只加到某一个单词后面。
在IE 3 和 Netscape Communicator中,
第一段文字后的背景色延伸的长度不同.在IE 4中颜色会延伸更多一些，在整个段落后面形成一个较大的方块背景。
(注意：IE 3根本不支持背景色属性。但是它支持背景设置，这种快捷属性也能达到同样的效果。详见第6页。）
你还可以给背景色设定透明属性，也就是说，论背景色原来是什么颜色，都会以透明色显。
背景色的确是太棒了，而如果能给背景加上图，不就更棒了吗？你的梦想可以实现！


4.4 背景图象
你可以很轻松地将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将背景色的显示排在优先的地位。


4.5 控制背景图象
你不仅可以将图象放在要素后面，你还可以精确地控制背景图象的各项设置。你可以决定是否及如何将其平铺，背景图象应该滚动还是保持固定，及将其放在什么位置。朋友，这是真的！
背景重复(background-repeat)
背景图象通常是平铺在背景上的，对吗？错。利用这项CSS属性，你可以控制是否将其平铺。
P { background-repeat: no-repeat; background-image: url(
background.gif) }
上述规则应用于整个段落。我们以前用过的GIF图象出现在文字后面，但由于我们应用了不重复图象（no-repeat)规则，所以该图象不会重复平铺在整个段落后面，它只显示一幅单独的图象。
如果你只想让图象垂直或者水平方向平铺，你以使用repeat-x将其水平平铺，用repaet-y将其垂直平铺。而repeat参数值则将图象从水平和垂直两个方向平铺。
固定背景（background－attachment）
在HTML中，背景图象通常会随页面的滚动而一起滚动。但利用CSS的固定背景（background）属性，你可以建立不滚动的背景图象，页面滚动时，背景图象可以保持固定。
BODY { background-attachment: fixed; background-image: url(
15/stuff3a/background.gif) }
这里是一个例子，你可以看到页面滚动时，背景仍保持固定。（注意：Communicator不支持这项属性，IE可以。）
该属性只用于页面背景，即<BODY>标签内设定的背景图象。
其参数有两种选择：
scroll指背景图象随文字内容一起滚动，即通常所见的方式。
fixed指文字滚动时，背景图象保持固定。
背景定位(background-position)
你可以设定将背景插在什么位置显示。
P { background-position: center bottom; background-image:
url (background.gif) }
当上述CSS规则应用于本段文字时，背景图象将在本段的中下部开始显示并向右平铺。
如果你看不到上述的显示效果，则说明你所使用的浏览器是Communicator，它不支持背景定位。
设定位置的3种方法：
关键字参数（Keyword values）
关键字设定方法简便易用：
top将背景图象同前景要素的顶部对齐。
bottom将其同前景要素的底部对齐。
left将其同左边对齐。
right将其同右边对齐。
center将其水平居中（如果使用在另一关键字前面）或垂直居中（如果用在另一关键字后面）。
长度参数
长度参数可以使用你对背景图象的位置作出更精确的控制。你可以设定水平和垂直定位起点，例：
P { background-position: 70px 10px; background-repeat:
repeat-y; background-image: url
(background.gif) }
本段显示了上述规则的执行效果。IE支持这种属性，将GIF图象设置在从左上角起水平70象素，垂直10象素的位置。由于我设置了
background-repeat: repeat-y，GIF图象将在文字后垂直平铺。
你可以使用我们以前学过的任何一种长度单位，例如pixels,
points, inches, ems等。
（IE 3不支持长度单位显示这种效果）
比例值（Percentage values）
你还可以使用比例值设定背景图象的位置，例：
P { background-position: 75% 50%; background-image: url
(background.gif) }
当这条CSS规则应用于本段时，背景图象从水平距离段落右端70％，垂直距离段落顶部50％的位置显示。如果你重新调整浏览器窗口的尺寸，使得段落的显示尺寸变化，背景图象的位置也相应发生变化。在本段上不会发生这样的变化，因为本段的尺寸是固定的，不会随着窗口尺寸的调整而变化。


4.6 快捷特性
利用快捷特性可以使你将学过的所有背景属性加到一个CSS规则中。
IE 3中你必须这样应用（如我们以前提过的），你也有可能会在所有浏览器中应用它。
背景（background）
利用背景属性，你可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位。例：
P { background: url(background.gif) #CCFFCC repeat-y top
right }
本段应用了上述规则。你可以看到背景是浅绿色，背景图象只垂直平铺，第1次平铺的位置在右上角。注意Communicator不支持背景定位属性。
如果你看不到该段文字描述的效果，则说明你的浏览器不支持这项CSS属性。
使用背景属性时，你无须设定背景的每一项目内容。你可以只设定你所要的背景图象和色彩，或者设定其它组合。
使用快捷特性时也会碰到使用单另的背景属性时遇到的各种浏览器问题。


4.7 第4天的练习
请点击本页查看例子，并试着自己重新制作出例子中的效果，最好不要看代码。该例子用了两幅图象，你可以从位置1.和位置2
处下载。不要忘了，要使例子正确显示，你必须安装4.0版的浏览器。
小问题：如何让你的公司的标志不论页面滚还是浏览器窗口尺寸调整都永远显示在浏器窗口的右下角？在明天的课程前我将告你答案。


4.8 复习
样式表使得网页设计更加有趣。我们新近掌握的控制背景图象的方法更另我们心动不已。
以下是我们今天所学内容的总结：
color设定要素的前景颜色。
background-color设定要素后面固定的颜色。
background-image是将GIF和JPEG图象插入到文字和其它要素后面的方法。
background-repeat可以控制是否将背景图象平铺。
background-attachment控制是否将背景图象固定在屏幕显示上，不随文字的滚动而滚动。
background-position用于精确控制背景图象相对于要素的显示位置。
background是设定所有有关背景设置的属性的快捷方式。
明天将是样式表课程的最好一天，我们将学习将要素设置在页面的任何位置的方法，及如何将各要素叠放在彼此之上。明天见！

5日精通CSS层叠样式表（第2日）

热点推荐

登录注册
触屏版电脑版网站地图