列表样式（list-style）
列表标记项类型（list-style-type）
可选值：
- disc： 实心圆 无序列表默认值
- decimal： 阿拉伯数字 有序列表默认值
- none：不使用项目符号
- circle：空心圆
- square：实心方块
不能和list-style-image同时生效
列表标记项图像（list-style-image）
可选值：
- none 无 默认值
- url("路径")； 指定图片
不能和list-style-type同时生效
列表标记项位置（list-style-position）
可选值：
- outsize ：外部 默认值
- inside ：内部
复合属性
list-style：涵盖列表样式的三个属性，其中前两个属性不能同时生效
背景样式
背景颜色（background-color）
表示背景颜色
可用关键字、十六进制、rgb()、rgba()表示法表示
padding区域有背景颜色
背景图片（background-image）
格式：background-image ：url（"路径"）；用来设置背景图片
图片路径要写到url（）圆括号中，路径既可以是http://开头的绝对路径，也可以是相对路径
如果样式表是外链的，那么从书写CSS的地方出发到图片的路径而不是从html出发
什么时候插入图片内容，什么时候插入背景图片
若图片从网页中去掉后，网页本身仍有意义，不受太大影响，该图片就可做为背景图片。其作用主要是 页面和盒子的装裱
如果图片从网页中去掉，网页观感完全改变，则说明图片具有意义，那么该图片做内容图片处理，例如淘宝上的商品图，时常需要更换
背景平铺（background-repeat）
用来设置背景的重复模式
如果背景图片小于元素大小，则背景图片会自动在元素中平铺将元素铺满
如果背景的图片大于元素，将会一个部分背景无法完全显示
如果背景图片和元素一样大，则会直接正常显示
**background-repeat：**可选值
- repeat 默认值 背景沿X轴、Y轴方向重复
- repeat-x 背景沿X轴方向重复
- repeat-y 背景沿Y轴方向重复
- no-repeat 背景图片不重复
浏览器的坐标系
以左上角的点为原点
水平向右为x正
垂直向下为y正
背景颜色、背景图片延伸到border下方，border会遮挡一部分背景
如果背景图片设置不重复，边框将不会遮挡背景图片
背景颜色和背景图片同时出现，背景图片会遮挡背景颜色
背景大小（background-size）
用来设置背景图片的尺寸
我们选择的图片不可能都是正好符合盒子的大小
background-size：值1 值2；
第一个值代表宽度，第二个值代表高度，如果只写第一个，第二个默认为auto
值可以是像素单位，也可以是百分比单位
- contain：图片比例不变，保持图片的完整显示
- cover：保证图片覆盖元素的每一个像素，同时不会变形；如果在一个高而窄的元素，像素高度会被填满，图片两边会被裁切；在一个较宽的元素中，元素的宽度会被填满，图片上下两边会被裁切
背景位置（background-position）
通过使用关键字来调整图片的位置
在X轴上，用left、center、right方位
在Y轴上，用top、center、bottom方位
顺序一般是先X轴，再Y轴
使用方向词必须同时指定两个值，只写一个值默认第二个值为center
通过偏移量来制定背景图片位置
background-position：x y；水平方向偏移量 垂直方向偏移量
单位：
- 像素
- 百分比 盒子宽度-图片宽度=100%
背景原点（background-origin）了解即可
规定了在图片不平铺时，背景图片左上角顶点的初始位置
background-origin 背景图片的基点
可选值：
- padding-box 默认值 背景图片从内边距左上角开始
- content-box 背景图片相对于内容区的左上角开始
- border-box 背景图片相对于边框左上角开始
背景裁切（background-clip）了解即可
设置背景出现的范围
可选值：
- border-box 默认值 背景会出现在边框的下方
- padding-box 背景不会出现在边框，只会在内容区和内边距去出现
- content-box 背景只会在内容区出现
溢出（overflow）
如果子元素大小超过了父元素，则子元素会从父元素溢出，使用overflow属性设置父元素如何处理溢出的子元素
可选值：
- visible 默认值 子元素从父元素中溢出，在父元素外部的位置显示
- hidden 溢出内容将会被裁剪不显示
- scroll 生成两个滚动条来查看完整内容
- auto 根据需要生成滚动条
背景附着（background-attachment）了解即可
决定背景是在视口中固定还是随着包含它的区块滚动
可选值：
- scroll 默认值 背景图片相对于元素本身固定，背景本身不移动，里面的内容（如文字）移动
- local 背景图片相对于元素中的内容固定
- fixed 背景相对于视口固定，即使一个元素拥有滚动机制，背景也不会随着元素内容滚动
background复合属性
background背景相关的简写属性，所有背景相关的样式都可以通过修改样式设置并且该样式没有顺序要求，也没有哪个属性是必须写的
注意：
background-position必须写在background-size前，且必须用/隔开
background-origin要写在background-clip前面
推荐写法：
background ：image repeat position/size color；
background-origin：content-box；
background-clip ：content-box；
background-attachment ：scroll；
多重背景
CSS3中支持一个元素设置多个背景图片，因此每个背景属性也具有相应的多值语法，多个值用逗号分隔开
position和size严格按照书写顺序书写
多重背景按声明的先后顺序上下堆叠
最先声明的在最上面，最后声明的在最下面
背景颜色设置在最后一张背景图片后面
所有小属性想要设置都写在background复合属性后面才能生效
注意：
如果属性值没有完全设置，其他没有完全设置的单一属性会按照默认加载
如果想去层叠符合属性的一部分，其他属性保持不变，最好使用单一属性进行层叠
推荐写法
center/contain
center/cover
雪碧图（CSS-sprite）
- 将**多个小图标合并制作在一张图片上，使用background-position属性单独显示其中一个，**这样的技术叫做CSS精灵技术，也叫CSS雪碧图
- CSS雪碧图可以减少HTTP请求数，加快网页显示速度 缺点：不方便测量，后期改动麻烦
显示雪碧图的条件：
- 测量图标大小，根据测量结果，创建一个宽和高的容器（利用网站）
- background-image引入图片
- background-position：-xpx -xpx；
- F12控制台即可进行调试
渐变色（background-image）
定义：一般是指在两个及以上颜色之间呈现一种平滑的过度效果，该效果为矢量效果，不会因为页面的放大二出现模糊的情况。CSS3中定义了两种渐变类型，一种为线性渐变，一种为径向渐变，还有一种目前应用不广但很有前途的角向渐变
渐变：可理解为一种渐变图片，可控制大小
线性渐变
颜色沿着一条直线发生变化
background-image ：linear-gradient（颜色1 百分数，颜色2 百分数，……）；
百分数表示所写的颜色的开始位置（可省略），也可写像素
颜色默认从上到下，先写的在上面
可在第一个参数控制方向
- to bottom 默认向下
- to top 从下向上
- to left 从右向左
- to right 从左向右
- to right bottom 从左上角到右上角
- to right top 从左下角到右上角
- to left top 从右下角到左上角
- to left bottom 从右上角到左下角
- 也可使用角度值进行调整，顺时针方向，以盒子正中心为原点旋转x轴
格式：background-image ：linear-gradient（to 方向可使用两个值/ 角度值，颜色1 百分数，颜色2 百分数，……）；
径向渐变
变化方向从一个点出发，向四周扩散
格式：background-image ：radial-gradient（颜色1 百分数，颜色2 百分数，……）；
默认方向从中心向外扩散，先写的颜色在中间，厚鞋垫颜色在外围
重复渐变
background-image ：repeating-linear-gradient（颜色1 百分数，颜色2 百分数，……）；
background-image ：repeating-radial-gradient（颜色1 百分数，颜色2 百分数，……）；
伪类
- :link 表示普通的链接(没访问过的链接)
- :visited 表示访问过的链接，浏览器通过历史记录来判断一个链接是否被访问过，由于涉及用户隐私问题,所以visited只能设置字体颜色
- :hover 伪类表示鼠标移入的状态
- :active 伪类表示鼠标点击状态
注意：
除了a标签,其他标签也可以使用active和hover
IE6不支持除超链接以外的伪类
设置伪类的顺序: a:link->a:visited->a:hover->a:active
鼠标样式（cursor）
- cursor ：pointer； 小手掌
- cursor ：move； 表示对象可以移动
- cursor ：wait； 表示正在加载
- cursor ：help；表示需要帮助
- cursor ：url（图片路径），pointer；自定义鼠标样式
- 此时图片一般使用.cut和.ani为后缀；如果使用.png或.gif的，大小最好不能超过32*32
