通过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标签里的项目。快点利用这些方法去创造一个拥有多重图像的丰富页面吧，会很容易哦。