前端之CSS列表及背景类属性

一、列表类属性：

1.列表符号样式：

list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号样式);

2.使用图片作为列表符号：

list-style-image:url(图片路径);

3.列表符号位置：

list-style-position:outside(默认值，在外边)|inside(在里边);

4.去掉列表符号样式：

list-style:none;

常用写法：  ol,ul{list-style:none;}

二、背景类属性：

1.背景颜色：

background-color:颜色值;

注：颜色值设置方法同字体颜色

2.背景图片：

background-image:url(背景图片路径);

注：网页中常见的两种图片：img标签引入图片和背景图片

a）网页中常进行更换的数据型图片使用img标签插入

b) 用来装饰网页，不需要经常更换的图片使用背景图插入

c) 我们可以在背景图上显示任何的文本，图片

3.背景图平铺属性：

background-repeat:no-repeat(不平铺)|repeat(平铺)|repeat-x(横向平铺)|repeat-y(纵向平铺);

4.背景图位置：

background-position:left|center|right|数值  top|center|bottom|数值;

注：a）第一个值代表水平方向，第二个值代表垂直方向

b)当两个值都为center时，可以省略第二个值

c)当设置为数值时，水平方向向右为正值，向左为负值，垂直方向向下为正值，向上为负值

5.背景属性简写方式：

background:背景色 背景图 背景平铺属性 背景图位置;

eg: background:#f00 url(1.jpg) repeat-x left center;

6.背景图固定：

background-attachment:scroll(默认值)|fixed(固定);

注：当页面出现滚动条时，背景图不跟随滚动条滚动，设置为fixed

7.背景图显示原则：

（a）当容器尺寸等于背景图尺寸时，背景图正好显示在容器中

（b）当容器尺寸大于背景图尺寸时，背景图默认平铺，直至铺满整个容器

（c）当容器尺寸小于背景图尺寸时，背景图只能显示容器范围以内的部分

8.网页中常见的图片格式：

a）jpg:适用于色彩数量比较丰富的图片，像素点越多越清晰

b) gif:支持动画，支持透明

c) png:支持透明