CSS课后笔记：背景类&列表类属性

背景类：

一、背景颜色 background-color

二、背景图片 background-image：url（）

1、背景图片在页面中的平铺效果 background-repeat：

取值：repeat/repeat-x/repeat-y/no-repeat

默认平铺/水平平铺/垂直平铺/不平铺

2、背景图片在页面中的位置background-position：

取值：水平位置&垂直位置

浏览器的坐标系0点位置在左上角，水平(x轴)向右为正方向，垂直(y轴)向下为正方向。

词表示位置 水平方向：left/right/center 垂直方向：top/bottom/center

若一个方向取值为center，则该方向的“center”单词可以省略。还可以直接用数值表示。

三、大背景图片在页面中的对其方式

图片宽度需为1920px，这是由主流显示器所决定的。

图片的有效位置：用于书写文本的位置。

1. 大背景图片的有效位置位于整个图片的左侧：牺牲图片的右侧，让图片左侧固定不动。background-position：left top

2. 大背景图片的有效位置位于整个图片的右侧：牺牲图片的左侧，让图片右侧固定不动。background-position：right top

3. 大背景图片的有效位置位于整个图片的中部：牺牲图片的两侧，让图片中部固定不动。background-position：top

四、图片精灵Sprite

通常设计人员会把小图标都放入同一张png图片中。

Sprite技术的优点：减少http请求的次数。多个图片文件的大小总和一定大于一个同内容图片的大小。

五、背景图片附件操作

Background-attachment：scroll/fixed 默认值/固定 固定后背景图片不会随着滚动条滚动。

列表类：

list-style-type：disc/circle/..设置有序列表/无序列表左侧的项目符号或编号类型。

list-style-image：url()设置列表左侧的项目符号或编号为图片。

list-style-position：inside/outside 相对于周围列表项 缩进/突出。设置列表项的位置。

list-style-type属性和list-style-image属性都需要作用在<ul>标记对上；list-style-position属性需要作用在<li>标记对上。