CSS第二天

CSS第二天

选择器进阶：

选择器注意点：

后代选择器中：选择器与选择器之前通过 空格 隔开

子代只包括：儿子

并集选择器：每组选择器可以是基础选择器或复合选择器，每组选择器通常一行写一个，提高代码的可读性

交集选择器：如果有标签选择器，标签选择器必须写在最前面

hover伪类：鼠标悬停在元素上的状态，设置样式

Emmet语法：通过简写语法，快速生成代码

HTML篇：

CSS篇：

网页端，后面我会添加，暂时放个空链接：点击进入

背景相关属性：

1️⃣背景颜色：background-color（bgc）

颜色默认值是透明，rgba(0,0,0,0) 、transparent

2️⃣背景图片：background-image（bgi）

url中可以省略引号，图片默认水平和垂直方向平铺，类似于背景颜色，不能撑开盒子

3️⃣背景平铺：background-repeat（bgr）

4️⃣背景位置：background-position（bgp）

①方位名词：

1. 水平方向：left center right

2. 垂直方向：top center bottom

②数字+px(坐标)：

x轴——水平向右

y轴——垂直向下

方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

5️⃣背景相关属性的连写形式：background（bg）

推荐：background：color image repeat position

元素显示模式：

①块级元素：display：block

1. 独占一行（一行只能显示一个）
2. 可以设置宽度和高度
3. 默认宽度是父元素的宽度，默认高度是内容高度
4. 注意：p和h里不能放块元素
5. 代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

②行内元素：display：inline

1. 一行显示多个
2. 默认宽度/高度是内容的高度和宽度
3. 不能设置高度和宽度
4. 注意：a元素不能包含a元素，a链接可以放任何块级元素
5. 代表标签：a、span 、b、u、i、s、strong、ins、em、del……

③行内块元素：display：inline-block

1. 一行显示多个
2. 可以设置宽度/高度，高度/宽度是内容的宽度/高度
3. 代表标签：input、textarea、button、select……
4. 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
5. 默认有一个间隙，那个间隙是写代码换行的那个间隙，你把代码排成一排，就没有间隙了

注意点：

p标签不要嵌套div、p、h等块级元素

a标签可嵌套任意元素，但a标签不能嵌套a

CSS 三大特性：

1️⃣继承性:

子元素有默认继承父元素样式的特点（子承父业）

可通过调试工具判断样式是否可继承

可以继承的常见属性：color、font-style、font-weight、font-size、font-family、. text-indent、text-align、line-height…

2️⃣层叠性：

给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上

给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

3️⃣优先级：

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

!important写在属性值的后面，分号的前面！!important不能提升继承的优先级，只要是继承优先级最低！实际开发中不建议使用 !important 。

4️⃣权重叠加计算：

（行内样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数）（0,0,0,0)

权重叠加计算公式：（每一级之间不存在进位）

本节单词有：

1. hover
2. repeat
3. background
4. position
5. top
6. bottom
7. display
8. block
9. inline
10. inline-block