CSS背景与列表
背景样式
- background-color 设置元素的背景颜色
- background-image 将图像设置为背景
- background-position 设置背景图像的起始位置
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动
- background-repeat 设置背景图像是否重复以及如何重复
- background 简写属性，作用时将背景属性设置在一个声明中
背景颜色
设置元素的背景颜色
background-color：颜色|transparent
说明：
- transparent是全透明黑色（black）的速记法，类似rgba（0，0，0，0）这样的值 ---透明色（不希望设置颜色，但也不想用户对于浏览器自己的设置影响到自己本来的设置）
- 颜色值（颜色名|RGB|16进制）（最常用，各大浏览器兼容性最好）
- 背景区包括内容，内边距（padding）和边框、不包含外边距（margin），外填充内容不包含在背景当中
- 边框默认颜色与文本字体颜色相同
- border为边框，不设置边框样式是不会有边框显示的（solid，dashed）
background-color应用及对比：
背景图片
设置元素的背景图片
background-image：URL|none
说明：
- url地址可以是相对地址也可以是绝对地址
- 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
- 默认的，背景图像位于元素的左上角，并在水平和垂直方向上重复
- 当背景颜色与背景图片同时设置时，背景图片将覆盖背景颜色，同时设置是为了方式图片出现差错，而导致页面没有任何样式
代码应用：
代码实现结果：
设置背景图片重复问题
设置元素的背景图片的重复方式：
background-repeat：repeat|no-repeat|repeat-x|repeat-y
代码：
重复：
y重复：
背景图片显示方式
设置元素的背景图片的显示方式
background-attachment：scroll|fixed
说明：
scroll：默认值，背景图片随滚动条滚动
fixed：当页面的其余部分滚动时，背景图片不会移动
背景图片定位
设置元素的背景图片的起始位置
background-position：百分比 | 值 | top | right | bottom | left | center
| 值 | 说明 | 注意 |
|---|---|---|
| 长度值（x，y） | 第一个值水平位置，第二个值垂直位置，左上角（0，0） | 只写一个参数的话，第二个默认为居中 |
| 百分比（x%，y%） | 第一个值水平位置的百分比，第二个值垂直位置的百分比 | 只写一个参数的话，第二个默认为居中 |
| top | 顶部显示，相当于垂直方向为0 | 只写一个参数的话，第二个默认为居中 |
| right | 右边显示，相当于水平方向为100% | 只写一个参数的话，c第二个值默认为居中 |
| left | 左边显示，相当于水平方向为0 | 只写一个参数的话，c第二个值默认为居中 |
| bottom | 底部显示，相当于垂直方向100% | 只写一个参数的话，c第二个值默认为居中 |
| center | 居中显示，相当于水平方向50%，垂直方向50% | 水平垂直方向都居中 |
简单样例：
实现结果：
背景缩写
background：[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
说明： 各值之间用空格分割，不分先后顺序
列表样式
- list-style-type 设置列表项标志的类型
- list-style-image 将图像设置为列表项标志
- list-style-position 设置列表中列表项标志的位置
- list-style 简写属性，用于把所有列表的属性设置于一个声明中
列表项标记
设置列表项的标记样式类型
list-style-type：关键字|none
列表项标记：
尝试一下：
实现结果：
将列表项改为图片：
list-style-image：url（地址）
尝试一下：
实现结果：
列表项标记位置
设置列表项标记的位置
list-style-position：inside | outside
说明：
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐
代码尝试：（outside inside对比）
对比结果：
列表样式缩写
list-style：list-style-type list-style-position list-style-image
说明：
- 值之间用空格分隔
- 顺序不固定
- list-style-image会覆盖list-style-type
缩写代码：
哒哒哒~背景与列表学习告一段落
