通过CSS可以非常准确地设计网页的样式和排版。运用CSS来设计网站有一个秘密武器,那就是背景属性。通过背景属性可以给网页的任何元素添加图像和颜色。

它可以打开一个工具箱,用来定义链接,定义列表,还有其它许多功能。与HTML不同,HTML是自动地将背景图像水平居中--有时会突然形成难看的样式--而利用CSS,设计者可以精确地把握背景图像的设置和排版。比如,你可以决定让一个图像只闪现一次,或者垂直居中,甚至即使用户不断地翻看页面,也可以让图像一直停留在屏幕上。
背景中的背景
背景属性包括4个不同的属性。虽然解释起来比较麻烦,但是我还是想与大家一起分享:
body {
background-image: url(images/watermark .gif);
background-repeat: no-repeat;
background-position: center top;
background-color: #FFCC00;
}
URL 背景图像属性提示浏览者通过文件路径(images/ )去找包含图表的文件(比如watermark.gif)。这是在背景上设置图像的必备属性。
这点与HTML不同,图像文件路径的CSS代码没有引号。尽管可以使用,但是如果加了引号,Mac中的Internet Explorer 5是无法找到图像的。
Tiling 背景重复属性可以设置图像。如果你只想让图表显示一次,可以使用背景重复属性:no-repeat(只显示单个背景图片)。如果你想要图表处于垂直位置-这样可以给页面添加一个有趣的工具条-你需要运用repeat-y(背景图片纵向重复连续显示)。如果你想要图表处于横向位置,你应该使用repeat-x(背景图片横向重复连续显示)。如果你没有使用背景属性,那么图像就会垂直居中。
Position 背景位置属性可以用来设置图像出现在网页中的位置。这个属性包含2个功能。第一个功能可以控制水平位置:左,中,右。另一个功能可以控制纵向位置:上,中,下。利用CSS还可以在指定位置设置像素值。比如,你想给在图表的左边设置20象素,在页面的顶部设置100象素,那么你只要在背景位置属性里输入:20px 100px.就可以了。
Color 背景颜色属性可以给网页或者其它部分(比如文章段落,工具条或者标语)添加颜色。
Taking a Shortcut(小窍门) 你经常会把这些属性一起来使用,那样就要输入很多文字。幸运的是,有一个小窍门可以把这4个属性合并到一个属性里。比如,你可以重写前面的例子:
body {background: #FFCC00 url(images/ watermark.gif) center top no-repeat}
当你使用这个小窍门的时候,要注意把握这些属性的次序。他们是这样排列的:颜色,图像路径,横向设置,纵向设置和tiling 选项。
自定义列表
有一个有趣的方法,使用背景属性来改变传HTML的外观。早已经厌烦了千篇一律的黑色圆形和方形标记了吧?干嘛不甩掉那些枯燥的标记,去创建属于你自己的标记列表呢?
先从重新定义ul(或者无序表单,标签)开始。在CSS文档里输入:
ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
这样你可以得到一个干净的表单。然后你可以添加标记。(如果你没有参考资料,你可以在这里找到很多免费的标记图像。比如,在与CSS文件相同的目录中,有一张mybullet.gif的图片。
在HTML,表单上的每个项目都被标记为li 标签。如果想要改变外观,就在表单上添加以下内容:
li { background: url(mybullet.gif) left center no-repeat }
现在,无论li标签什么时候出现,浏览者都会把图像设置到列表项目的左端。如果想要标记的位置更精确,你可以通过设置象素来设置。
这样,每个表单项目的文本会直接出现在标记旁。如果想留一点空隙的话,就在项目li的左边添加一些内容。比如,表单的宽度设为10象素,那么内容填充设置为15象素比较合适。如果表单项目设置地太过紧密,那么增加顶部或者底部的margin就可以了。最后应该是这样的:
li {
background: url(mybullet.gif) left center no-repeat;
padding-left: 15px;
margin-bottom: 10px;
}

核对表单项目
使用HTML可以改变被点击链接的颜色。而使用CSS,你可以做的更多。比如,你想要通过一个明显的标志来显示哪些页面已经阅读。当然,你可以改变被点击链接的颜色,但是如果需要的是一个明显的提示,为什么不试试复选标记呢?通过CSS背景属性,你就能够看到(哪些页面已经阅读)。

有一个小秘诀, CSS专业术语叫做CSS伪类。在链接方面有4个伪类。分别为:a:link, a:visited, a:hover, 和a:active。分别代表链接的不同状态。在这个例子中,我们选择a:visited,因为它适用于被点击的链接。开始修饰链接吧:
a {
text-decoration: none;
color: #333;
padding-right: 13px;
}
这一步可以去掉链接的下划线(那些看上去比较混乱的)。设置链接的颜色,在链接的右侧添加一些内容。(来适应复选标记表单)。
接下来,给被点击的链接创建一个新规则:
a:visited { background: url(checkmark .gif) right center no-repeat }
这样,复选标记就会出现在链接的右侧。你也可以地在链接左侧添加一些间隔,这样就可以从左侧切换到右侧。
发挥创造力
现在你能够给HTML的任何元素添加背景图像啦――段落,标题,或者div标签里的项目。快点利用这些方法去创造一个拥有多重图像的丰富页面吧,会很容易哦。