3.CSS进阶
一、选择器进阶
目标：能够理解复合选择器的规则，并使用复合选择器在HTML中选择元素
（一）复合选择器
1.后代选择器：空格
（1）作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
（2）选择器语法：选择器1 选择器2{css}
（3）结果：在选择器1所找到标签的后代（儿子、孙子、重孙子...）中，找到满足选择器2的标签，设置样式
（4）注意点：后代包括：儿子、孙子、重孙子
后代选择器中，选择器与选择器之间通过空格隔开
这是一个p标签
这是div的儿子p
2.子代选择器：>
（1）作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
（2）选择器语法：选择器1>选择器2{css}
（3）结果：在选择器1所找到标签子代（儿子）中，找到满足选择器2的标签，设置样式
（4）注意点：
子代只包括儿子
子代选择器中，选择器与选择器之间通过>隔开
3.并集选择器：,
（1）作用：同时选择多组标签，设置相同的样式
（2）选择器语法：选择器1，选择器2{css}
（3）结果：找到选择器1和选择器2选中的标签，设置样式
（4）注意点：
<1>并集选择器中的每组选择器之间通过，分隔
<2>并集选择器中的每组选择器可以是基础选择器或者复合选择器
<3>并集选择器中的每组选择器通常一行写一个，提高代码的可读性
ppp
div
span
h1
h2
4、交集选择器
（1）作用：选中页面中同时满足多个选择器的标签
（2）选择器的语法：选择器1选择器2{css}
（3）结果：（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
（4）注意点：
<1>交集选择器中的选择器之间是紧挨的，没有东西分隔
<2>交集选择器中如果有标签选择器，标签选择器必须写在最前面
5、hover伪类选择器
（1）作用：选中鼠标悬停在元素上的状态，设置样式
（2）选择器语法：选择器：hover{css}
（3）注意点：伪类选择器选中的元素的某种状态
这是超链接
div
6、emmet语法
（1）作用：通过简写语法，快速生成代码
（2）语法：类似于刚刚学习的选择器的写法
| 记忆 | 示例 | 效果 |
|---|---|---|
| 标签名 | div | |
| 类选择器 | .red | |
| id选择器 | #one | |
| 交集选择器 | p.red#one |
|
| 子代选择器 | ul>li |
|
| 内部文本 | ul>li{我是li的内容} |
|
| 创建多个 | ul>li*3 |
|
- 111
- 111
- 111
- 1
- 2
- 3
二、背景相关属性
目标：能够使用背景相关属性装饰元素的背景样式
1、背景颜色
（1）属性名：background-color(bgc)
（2）属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制
（3）注意点：
<1>背景颜色默认值是透明：rgba(0,0,0,0)、transparent
<2>背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般的布局中会习惯先给盒子设置背景颜色
2、背景图片
（1）属性名：background-image（bgi）
（2）属性值：background-image:url('图片的路径')；
（3）注意点：
<1>背景图片中url中可以省略引号
<2>背景图片默认是在水平和垂直方向平铺的
<3>背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
background-image: url(../../cat.jpg);
3、背景平铺
（1）属性名：background-repeat(bgr)
（2）属性值：
| 取值 | 效果 |
|---|---|
| repeat | （默认值）水平和垂直方向平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿这水平方向（x轴）平铺 |
| repeat-y | 沿着垂直方向（y轴）平铺 |
运行结果：
4、背景位置
（1）属性名：background-position(bgp)
（2）属性值：background-position:水平方向位置 垂直方向位置；
属性值：
<1>方向名词（最多只能表示9个位置）：
水平方向：left、center、right
垂直方向：top、center、bottom
<2>数字+px(坐标)：
坐标系：
a.原点（0，0）盒子的左上角
b.x轴：水平向右
c.y轴：垂直向下
操作：将图片左上角与坐标点重合即可
正数：向右向下移动；负数：向左向上移动
背景色和背景图只显示在盒子里面
（3）注意点：方向名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
文字
运行结果：
5、背景相关属性的连写形式
（1）属性名：background(bg)
（2）属性值：单个属性值的合写，取值之间以空格隔开
（3）书写顺序：推荐：background:color image repeat position（可以交换顺序）
背景图位置如果是英文单词可以颠倒顺序
背景图位置如果是数值 不要颠倒顺序
（4）省略问题：
a.可以按照需求省略
b.特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：ur()
（5）注意点：
如果需要设置单独的样式和连写
<1>要么把单独的样式写在连写的下面
<2>要么把单独的样式写在连写的里面
6、（拓展）img标签和背景图片的区别
需求：需要在网页中展示一张图片的效果
方法一：直接写img标签即可（重要的、产品类的）
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二：div标签+背景图片（装饰性的，让网页变漂亮）
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
三、元素显示模式
目标：能够认识三种常见的元素显示模式，并通过代码实现不同元素显示模式的转换
1、块级元素
（1）显示特点：
a.独占一行（一行只能显示一个）
b.宽度默认是父元素的宽度，高度默认由内容撑开
c.可以设置宽高
（2）代表标签：div、h系列、ul、li、dl、dt、dd、form、header、nav、footer......
111
222
2、行内元素
（1）显示特点：
a.一行可以显示多个
b.宽度和高度默认由内容撑开
c.不可以设置宽高
（2）代表标签：a、span、b、u、i、s、strong、ins、em、del......
span
span
运行结果：
3、行内块元素
（1）显示特点：
a.一行可以显示多个
b.可以设置宽高
（2）代表标签
- input、textarea、buttom、select......
- 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline