一、选择器进阶

目标：能够理解 复合选择器 的规则，并使用 复合选择器 在HTML中选择元素
学习路径：

	1.复合选择器
	2.并集选择器
	3.交集选择器
	4.hover伪类选择器
	5.Emmet语法

1.复合选择器

1.1 后代选择器：空格

• 作用：根据HTML标签的嵌套关系，选择父元素 后代中 满足条件的元素
• 选择器语法：选择器1 选择器2 { css }
• 结果：
  • 在选择器1所找到标签的后代（儿子、孙子、重孙子...）中，找到满足选择器2的标签，设置样式
• 注意点：
  1. 后代包括：儿子、孙子、重孙子...
  2. 后代选择器中，选择器与选择器之间通过 空格 隔开

1.2 子代选择器：>

• 作用：根据HTML标签的嵌套关系，选择父元素 子代中 满足条件的元素
• 选择器语法：选择器1 > 选择器2 { css }
• 结果：
  • 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
• 注意点：
  1. 子代只包括：儿子
  2. 子代选择器中，选择器与选择器之间通过 > 隔开

2.并集选择器

• 作用：同时选择多组标签，设置相同的样式
• 选择器语法：选择器1,选择器2 { css }
• 结果：
  • 找到 选择器1 和 选择器2 选中的标签，设置样式
• 注意点：
  1. 并集选择器中的每组选择器之间通过,分隔
  2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器
  3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

3.交集选择器

• 作用：遇到不能单用任何一个选择器设置样式的情况，用多个选择器的交集设置样式。假如有标签选择器p，该p标签又有类名class为box
• 选择器语法：p.box
• 结果：
  • 找到 即是选择器p 又是 选择器2 的标签，设置样式
• 注意点：
  • 交集选择器中如果是标签选择器和类选择器，二者直接连着写，中间不加任何符号

4.hover伪类选择器

• 作用：选中鼠标 悬停 在元素上的 状态，设置样式
• 选择器语法：选择器:hover { css }
• 注意点：伪类选择器选中的元素的 某种状态

5.Emmet语法

• 作用：通过简写语法，快速生成代码
• 语法：类似于选择器的写法

二、背景相关属性

目标：能够使用 背景相关属性 装饰元素的背景样式
学习路径：

	1.背景颜色
	2.背景图片
	3.背景平铺
	4.背景位置
	5.背景相关属性连写

1.背景颜色

• 属性名：background-color（bgc）
• 属性值：颜色取值【关键字、rgb表示法、rgba表示法、十六进制…】
• 注意点：
  • 背景颜色默认值是透明：rgba(0,0,0,0)、transparent
  • 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2.背景图片

• 属性名：background-image（bgi）
• 属性值：background-image:url('图片的路径')
• 注意点：
  • 背景图片中url中可以省略引号
  • 背景图片默认是在水平和垂直方向平铺的
  • 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3.背景平铺

• 属性名：background-repeat（bgr）
• 属性值：

4.背景位置

• 属性名：background-position（bgp）
• 属性值：background-position:水平方向位置 垂直方向位置；
  
• 注意点：方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个表示垂直

5.背景相关属性连写

• 属性名：background（bg）
• 属性值：单个属性值的合写，取值之间用空格隔开
• 书写顺序：推荐【background:color image repeat position】
• 省略问题：
  • 可以按照需求省略
  • 特殊情况：在PC端，如果盒子大小和背景图片大小一样，此时可以直接写bakground:url()
• 注意点：
  • 如果需要设置单独的样式和连写
    1. 要么把单独的样式写在连写的下面
    2. 要么把单独的样式写在连写的里面

6.img标签和背景图片的区别

• 需求：需要在网页中展示一张图片的效果
  • 方法一：直接写上img标签即可
    • img标签是一个标签，不设置宽高默认会以原尺寸显示
  • 方法二：div标签+背景图片
    • 需要设置div的宽高，因为背景图片只是装饰的css样式，不能撑开div标签
  • 注意点：img标签用于一些比较重要的图片，一般是商品图海报等；不太重要的图用div+背景图，一般用来装饰网页

三、元素显示模式

目标：能够认识三种常见的 元素显示模式，并通过代码实现不同 元素显示模式 的转换
学习路径：

	1.块级元素
	2.行内元素
	3.行内块元素
	4.元素显示模式转换

1.块级元素

• 显示特点：
  1. 独占一行（一行只能显示一个）
  2. 宽度默认是父元素的宽度，高度默认由内容撑开
  3. 可以设置宽高
• 代表标签：
  • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

2.行内元素

• 显示特点：
  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高
• 代表标签：
  • a、span、b、u、i、s、strong、ins、em、del......

3.行内块元素

• 显示特点：
  1. 一行可以显示多个
  2. 可以设置宽高
• 代表标签：
  • input、textarea、button、select......
  • 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4.元素显示模式转换

• 目的：改变元素默认的显示特点，让元素符合布局要求
• 语法：

5.拓展：HTML嵌套规范注意点

• 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等…
  • 但是：p标签中不要嵌套div、p、h等块级元素
• a标签内部可以嵌套任意内容
  • 但是：a标签不能嵌套a标签

四、CSS特性

目标：能够认识CSS的 继承 和 层叠 特性
学习路径：

	1.继承性
	2.层叠性

1.继承性

1.1 继承性的介绍

• 特性：子元素有默认继承父元素样式的特点（子承父业）
• 可以继承的常见属性（文字控制属性都可以继承,非文字控制属性都不继承）
  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-align
  4. line-height
  5. ......
• 注意点：
  • 可以通过调试工具判断样式是否可以继承
• 提醒：继承失效的特殊情况：
  • 如果元素有浏览器默认样式，此时继承性依然存在，但是仍按照自己默认的样式生效
    1. a标签的color会继承失效
    2. h系列标签的font-size会继承失效

2.层叠性的介绍

• 特性：
  1. 给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上
  2. 给同一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效
• 注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果