背景（background）
1.背景颜色
background-color: 颜色值一般背景元素默认的值是 transparent（透明）
2.背景图片
background-image: url()
常见于
装饰性图片（logo）
或者
超大图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是一个背景</title>
<style>
body {
background-image: url(../images/王者背景.jpg);
background-position: center 40px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
精灵图（sprities）也是一种应用场景。
精灵图：为了有效减少服务器接收和发送次数，提高页面加载速度，将网页中的小背景图片整合到一张大的图片上，这样服务器只需要请求一次。
如王者荣耀官网将图片放在一张上。
Tips:
针对背景图片使用。
移动背景图片位置（background-position），将图片向上移动y轴坐标为负，向左移动x轴坐 标为负。
3.背景平铺
backgound-repeat: repeat/no-repeat/repeat-x/repeat-y默认下背景均为平铺。
页面元素可以添加背景颜色和背景图片，但背景图片会压住背景颜色。
4.背景图片位置
background-posotion: x y;x和y可以为x轴y轴的坐标也可以是方位名词（left right等）
使用方位名词时，两个值前后顺序无关（一个是top,bottom；一个是left,right）；
如果只使用一个方位名词，另一个参数方位一定居中；
如果是精确单位（值）x坐标是到左侧的距离，y坐标是到右侧的距离；只指定一个数值的话，这个数值一定是x的坐标，另一个为居中对齐。
背景图片位置也可以使用混合单位
，即方位名词与精确单位一起使用。
background-position: 20px center;
5.背景固定
background-attachment: scroll（默认为滚动） / fixed;background-attachment属性设置图像是否固定或者随页面其余部分滚动。
后期可以使用做视差滚动效果；
6.背景复合写法
可以将背景属性合并简写在同一个属性background里；
一般书写习惯：
background: 颜色 图片地址 平铺 图像滚动 位置；
但并不强制一定按以上顺序进行书写；
CSS三大特性
1.层叠性（后来居上，直接覆盖）
给相同选择器设置相同的样式，此时样式会进行覆盖。
层叠性遵循就近原则（样式离结构近的先进行）
样式不冲突的话不会层叠；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
div {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.继承性
子标签会继承父元素中某些样式（主要与文字相关样式，如：text- ;font- ;）
可以降低代码复杂度；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>hello</p>
</div>
</body>
</html>
行高的继承性：
body { font:12px/1.5}如果子元素未设置行高，则为当前文字大小的1.5倍；
未设置文字大小，则继承父元素文字大小与行高；
3.优先级
当一个元素指定多个选择器，选择器相同则执行层叠性；
选择器不同，则按权重；
| ！important | 权重最高 |
| 行内样式（style） | 1，0，0，0 |
| ID选择器 | 0，1，0，0 |
| 类/伪类选择器 | 0，0，1，0 |
| 元素选择器 | 0，0，0，1 |
| 通配符选择器 | 0，0，0，0 |
Tips:
权重有叠加，不存在进位；
继承的权重为0，如果元素未直接选中，不论父元素权重多高，子元素权重为0；