CSS 背景与列表

CSS 背景样式

- background-color    设置元素的背景颜色

- background-image   把图像设置为背景

- background-position   设置背景图像的起始位置

- background-attachment   背景图像是否固定或者随着页面的其余部分滚动

- background-repeat     设置背景图片是否重复以及如何重复

- background                 简写属性，作用是将背景属性设置在一个声明中

CSS列表样式

+ list-style-type    设置列表项标志的类型

+ list-style-image    将图像设置为列表项标志

+ list-style-position     设置列表中列表项标志的位置

+ list-style       简写属性，将列表属性设置在一个声明中

(1) 设置元素的背景颜色

background-color: 颜色|transparent

transparent是全透明黑色

	<style type="text/css">
			div{background-color: pink;
				width: 300px;
				padding: 10px;/*内边框*/
				margin: 10px;/*外边框*/
				border: 20px solid;/*边框*/
			}
	</style>

（2）设置元素的背景图片

 background-image:url | none

元素的背景占据了元素的全部尺寸，包括内边距与边框，不包括外边距

默认地，背景图像位于元素的左上角，并在水平与垂直方向上重复

			div.pic2{
				width: 500px;
				height: 500px;
				background-image: url("1.jpg");
			}

当背景图片和背景颜色都设置时，背景图片会覆盖背景颜色。

（3）背景图片重复

background-repeat: repeat | no-repeat | repeat-x | repeat-y

			div.pic2{
				width: 500px;
				height: 500px;
				background-image: url("1.jpg");
				background-repeat: no-repeat;
				border: 1px solid #ff0000;/*边框为1px，实线，颜色为红色*/
			}

（4）背景图片的显示方式

background-attachment: scroll | fixed

scroll：默认值，背景图片随滚动条滚动

fixed: 当页面的其余部分滚动时，背景图片不会移动

（5）背景图片定位

设置元素的背景图片的起始位置

background-position: 百分比 | 值 | top | right | bottom | left | center

			div.pic2{
				width: 800px;
				height: 800px;
				background-image: url("1.jpg");
				background-repeat: no-repeat;
				border: 1px solid #ff0000;/*边框为1px，实线，颜色为红色*/
				/*background-attachment: fixed;*/
				background-position: 10% 10%;
			}

（6）背景缩写

----------------------------------------------------------------------------------------------------

CSS 列表样式

（1）设置列表项的标记样式类型

list-style-type: 关键字 | none

	<style type="text/css">
		ul li{list-style-type: circle;}
		ol li{list-style-type: upper-roman;}
	</style>

（2） 列表项标记

使用图片设置列表项的标记

list-style-image: url | none

（3）列表项标记位置

设置列表项标记的位置

list-style-position: inside | outside

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐

outside：默认值，列表项目录标记放置在文本以外，且环绕文本不根据标记对齐

（4）列表样式缩写

list-style: xxx ;