一、背景属性
1、背景属性用来设置页面元素的背景样式。
2、常见背景属性
属性 | 描述 |
background-color | 用来设置页面的背景色，取值如red,#ff0000 |
background-image | 用来设置页面的背景图片，图片路径可以是绝对路径或相对路径，如：background-image: url("../image/arrow-right.gif"); |
background-position | 背景开始位置，包括水平方向(X轴)和垂直方向(Y轴)的设置。X轴取值：left、center、right或像素值或百分比。Y轴取值：top、center、bottom或像素值或百分比。 |
background-repeat | 背景填充方式，取值repeat-x(填充X轴)、repeat-y(填充Y轴)、no-repeat(不填充)。 |
background | 合写方式，如background: #fff url("bg.png") left top no-repeat; |
3、绝对路径和相对路径：
绝对路径：绝对路径就是你的主页上的文件或目录在硬盘上真正的路径。
相对路径：相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法。
3.1 相对路径使用的特殊符号
"./"：代表目前所在的目录。"../":代表上一层目录。以"/"开头：代表根目录。
举例说明相对路径的用法：假设跟目录下面有web和image两个文件夹，web下有page1.html和page2文件夹，page2文件夹下有page2.html和page2image.jpg。image文件夹下面有image.jpg。
a、文件在当前目录page2.html访问page2image.jpg<img src="./page2image.jpg">或者<img src="page2image.jpg">b、文件在上一层目录page1.html访问image下的image.jpg<img src="../image/image.jpg">page2.html访问image下的image.jpg<img src="../../image/image.jpg">c、文件在下一层目录page1.html访问page2文件夹下的page2image.jpg<img src="./page2/page2image.jpg" >或者<img src="page2/page2image.jpg" >d、根目录表示法，任何页面访问image下的image.jpg<img src="/image/image.jpg">
3.2 常使用且需要注意的地方
a、css中的图片路径。写css里的图片路径，url是图片针对样式文件的位置。例如：同一目录下面存在index.html、image文件夹、css文件夹，css文件夹里面有style.css文件，image文件夹里面有image.jpg图片，index.html引用style.css文件，style.css文件引用image里面的image.jpg图片：background-image:url(../image/image.jpg)b、js中图片地址均相对于调用JS的页面的相对位置。document.getElementById("IMG1").style.backgroundImage= "url(../Images/login.jpg)";
3.3、优缺点及使用的地方1、绝对路径的优点 A、如果有人抄袭你的网站内容，里面的链接还会指向你的网站，有些抄袭的人比较懒，根本不会去改内容。其实也不局限于被抄袭，如果有人将你的网页保存到本地电脑中，里面的链接、图片、css、以及js仍然会连接到你的网站。 B、如果网页位置改变，里面的链接还是指向正确的URL。2、绝对路径的缺点： A、在编码编写时不方便使用绝对路径，因为链接应该指向真正的域名而不是开发站点。相对路径的优缺点和绝对路径几乎相反。3、相对路径的优点： A、容易移动内容，可以整个目录移动。 B、测试方法比较灵活，本机测试时比较方便。4、相对路径的缺点： A、部分内容页面换了位置时，链接容易失效。 B、容易被人大面积采集抄袭。
示例：
css代码：
@chartset "utf-8";div,ul,li,a,h3{ margin: 0; padding: 0;}#nav{ width: 240;/*设置DIV的宽度*/ background-color: #D7D7D7;/*设置DIV的背景颜色*/}#nav h3{ font-size: 18px; color: #fff; line-height: 50px;/*设置行高*/ background-color: red;/*设置背景色*/ background-image: url(../image/arrow-down.gif);/*设置背景图片*/ background-repeat: no-repeat; /*图片不平铺*/ background-position: right center; /*水平垂直居中对齐*/}#nav ul li a{ margin: 0 4px;/*设置字体间距*/ font-size: 14px;/*设置字体大小*/ color: #000;/*设置字体颜色*/ text-decoration: none;/*设置超链接不显示下划线*/ }#nav ul li{ background-image: url(../image/arrow-right.gif);/*设置背景图片*/ background-repeat: no-repeat; /*图片不平铺*/ background-position: right center; /*水平垂直居中对齐*/ line-height: 30px;/*设置行高*/} html代码：
全部商品分类
二、列表属性
属性 | 描述 | 举例 |
list-style-image | 将列表设置为列表标志 | list-style-image:url('./arrow.gif'); |
list-style-type | 设置列表项标志的类型：disc(实心圆) circle(空心圆) square(正方形) | list-style-type：circle |
list-style | 以上属性的合并简写，或none去掉默认属性设置 | list-style:square url('/i/arrow.gif'); |
三、超链接伪类
a:link{ color: red;} /*未访问的连接*/
a:visited{ color: blue;}/*已访问的连接*/a:hover{ color: green;}/*当鼠标悬停在连接上*/a:active{ color: yellow;}/*被选择的连接*/示例：
css代码：
#nav a:link{ color: red;} /*未访问的连接*/#nav a:visited{ color: blue;}/*已访问的连接*/#nav a:hover{ color: green;}/*当鼠标悬停在连接上*/#nav a:active{ color: yellow;}/*被选择的连接*/#nav a{ text-decoration: none;/*设置超链接不显示下划线*/ } #nav p{ line-height: 30px;/*设置行高*/ } html
超链接伪类
效果：
四、鼠标形状控制
cursor属性，其值如下图所示：
综合示例
html;
背景属性综合练习
css:
#nav{ width: 300px; background-color: white;}#nav h3{ font-size: 18px; background-color: #0f7cbf; font-weight: bold; line-height: 35px; color: white; margin: 0px; padding-left: 5px;}#nav h4{ font-size: 14px; font-weight: bold; line-height: 30px; background-color: #e4f1fa; color: #0f7cbf; margin: 0px; padding-left: 10px;}#nav h4 a{ text-decoration: none;}#nav p{ padding-left: 15px;}#nav p a{ margin: 0 5px; text-decoration: none; font-size: 12px; line-height: 20px; color: #666666;}#nav p a:hover{ color: #F60;text-decoration: underline;}#nav h4 a:hover{ text-decoration: underline;}