2020-9-8 CSS第二天

css第二天（选择器，标签显示模式。）

一：复合选择器
1.后代选择器
2.并集选择器

二：标签显示模式

三：css背景
1.背景位置

四：css三大优点
1.优先级

一：后代选择器：
概念：后代选择器又称为包含选择器
作用：
用来选择元素组的子孙后代
*写法：
外层标签写在前面，内层标签写在后面，中间用空格分割，先写父亲爷爷，再写儿子孙子。
父级 子级{属性：属性值；属性：属性值;}
语法：
.clsaa h3 {color:red;font-size:14px;}
二：交集选择器
条件：
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
语法
h3.class{color:red font-size:25px;}
其中第一个标签为选择器标签，第二个为class选择器，两个选择器之间不能有空格。

三：并集选择器（重点）
应用：
选择器定义的相同样式，就可以用并集选择器，让代码更简洁。
语法：
.clsaa,h3{color:red font-size:25px}
并集选择器用于集体声明， 用逗号隔开，所有选择器都会执行后面的样式，逗号可以理解为 和 的意思。
比如：.one, p , #test{color:#F00;}
表示 .one, p , #test 这三个选择器都会执行红色。

四：链接伪类选择器（重点）
伪类选择器用两个点 比如 :{}

作用：
向某些选择器添加特殊的效果。比如给链接添加特殊效果。

• a:link /未访问的链接/
• a:visited /已访问的链接/
• a:hover /鼠标移动到链接上/
• a:active /选定的链接/
  记忆法：
  love 包包 非常 hao （lvha）

二：标签；
1.标签显示模式（display) (重点）
*什么是标签的显示模式：
标签以什么方式进行显示，比如div自己占一行，比如span一行可以放很多个。
2.作用：
*我们的网页标签很多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。
3.标签的类型（分类）
*HTML标签一般分为块标签和行内标签两种类型，他们也称块元素和行内元素。

4.块级元素（block-level)

1. 比较霸道，自己独占一行
2. 高度、宽度、外边距以及内边距都可以控制
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内块元素。

5.行内元素（inline-level）

1. 相邻行内元素在一行上，一行可以显示多个。
2. 高、宽直接设置是无效的。
3. 默认宽度是他本身内容的宽度。
4. 行内元素只能容纳文本或其他行内元素。

6.行内块元素（inline-block）

1. 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。一行可以显示多个
2. 默认宽度就是它本身内容的宽度。
3. 高度，行高、外边距以及内边距都是可以控制。

7.标签显示模式转换（display）

块转行内：display：inlink；
行内转块：display：block；
块、行内元素转换为行内块：display：inline-block;