1、可以用background-image属性给任何元素添加背景图像。如果同时设的也有背景颜色，那么它是置于背景颜色之上的。背景图像跟背景颜色一样，只出现在内容区和补白之下，没有延伸到边框之外的边界。

background-image:url(images/background.gif); background-image属性被设置成URL，可以是相对路径或完整的URL（http://...）.注意URL没有加引号

还有两个属性也能影响背景图像：background-position和background-repeat.

默认的背景图像是重复的。还好background-repeat属性有no -repeat值。浏览器默认的背景图像的位置是元素的左上方（和属性值设为top left效果一样）。

background-position属性用来设置图像的位置，可以用像素、百分数或top，left，right，bottom，center这些关键字定义。

background-repeat属性用来控制这种平铺效果，默认的格式是repeat，意为把图像设置为在水平和垂直方向上都重复。属性值no-repeat表示图像只显示一次，不重复；repeat-x表示图像只在水平方向上重复；

repeat-y表示图像只在垂直方向上重复；inherit表示继承父元素的值。

2、边框样式（border-style）一共有8种，有实线、虚线、凸出线、凹进线等；边框宽度（border-width）属性用来控制边框宽度。可以用关键词（thin、medium、thick，但是浏览器对它们的默认大小不一定总是相同）或像素来定义宽度；边框颜色；也可只定义边框的一侧，如上边框：border-top-color/border-top-style/border-top-width。

怎么让边框看起来像锯齿呢？其实有个小窍门：用虚线边框（dashed），把它设置为白色（跟页面的背景颜色匹配，假设页面背景是白色）。

3、class和id

一般当你想应用一种样式到多个元素的时候就用类。相反，如果你需要应用样式的只是一个元素并且页面上只有一个，就用id。严格来说，id属性是命名唯一的元素的。

（1）p.specials{ color:red; } 这条规则只选择specials类中的段落。 .specials{ color:red; } 这条规则选择specials类中的所有元素。

（2）#footer{ color:red; } 这条规则选择id为“footer”的任意元素。 p#footer{ color:red; } 这条规则选择一个id为“footer”的

元素。

类和id之间的唯一不同是id选择符只跟一个页面中的一个元素匹配。

4、使用多样式表

在XHTML中你可以定义多个样式表（用多个link标签）。样式表链接文件的顺序很重要！一个样式表会覆盖在它之前链接的样式表中的样式。这些样式表从上到下排列，最下面的样式表优先权最高。

元素有一个叫做media的属性，可以用来定义你的样式文件所需要的设备类型。例如属性值为screen适用于电脑屏幕，print适用于打印机类的媒体，handled适用于移动设备和移动电话等。如果没有提供媒体种类，样式文件就应该适用于所有设备。并不是所有的浏览器都支持media属性。