web前端-CSS进阶

一、选择器进阶

目标:能够理解复合选择器的规则，并使用复合选择器在HTML中选择元素

1.1 复合选择器

1.1.1后代选择器:空格

➢作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素

➢选择器语法: 选择器1选择器2 { css }

➢结果:

在选择器1所找到标签的后代(儿子、孙子、重孙子...中，找到满足选择器2的标签，设置样式

➢注意点:

1. 后代包括:儿子、孙子、重孙....

2.后代选择器中， 选择器与选择器之前通过空格隔开

1.1.2子代选择器: >

➢作用:根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素

➢选择器语法: 选择器1 >选择器2{ css }

➢结果:

在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式

➢注意点:

1. 子代只包括:儿子

2. 子代选择器中，选择器与选择器之前通过>隔开

1.2并集选择器:

➢作用: 同时选择多组标签，设置相同的样式

➢选择器语法: 选择器1，选择器2 { css }

➢结果:

          找到选择器1和选择器2选中的标签，设置样式

➢注意点:

1.并集选择器中的每组选择器之间通过 ,分隔

2.并 集选择器中的每组选择器可以是基础选择器或者复合选择器

3.并集选择器中的每组选择器通常一行写一个,提高代码的可读性

1.3 交集选择器（紧挨着）

➢作用:选中页面中同时满足多个选择器的标签

➢选择器语法: 选择器1选择器2 { css }

➢结果:

(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签,设置样式

➢注意点:

1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔

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

1.4 hover伪类选择器

➢作用: 选中鼠标悬停在元素上的状态，设置样式

➢选择器语法: 选择器:hover { css }

➢注意点:

1.伪类选择器选中的元素的某种状态

1.5 Emmet语法

➢作用: 通过简写语法，快速生成代码

➢语法:类似于刚刚学习的选择器的写法

二、背景相关属性

2.1背景颜色

➢属性名: background-color (bgc)

➢属性值:

颜色取值:关键字、rgb表示法、rgba表示法、 十六进制....

➢注意点:

背景颜色默认值是透明: rgba(0,0,0,0) 、transparent

背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2.2背景图片

➢属性名: background-image (bgi)

➢属性值: background- image: url('图片的路径’);

➢注意点:

背景图片中urI中可以省略引号

背景图片默认是在水平和垂直方向平铺的

背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

2.3背景平铺

➢属性名: background-repeat (bgr)

➢属性值:

2.4 背景位置

➢属性名: background-position (bgp)

➢属性值: background-position: 水平方向位置 垂直方向位置;

➢注意点:

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

2.5 背景相关属性的连写形式

➢属性名: background (bg)

➢属性值:

单个属性值的合写，取值之间以空格隔开

➢书写顺序:

推荐: background: color image repeat position

➢省略问题:

可以按照需求省略

特殊情况:在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background: ur()

➢注意点

如果需要设置单独的样式和连写

①要么把单独的样式写在连写的下面

②要么把单独的样式写在连写的里面

3元素显示模式

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

3.1块级元素

➢显示特点:

1. 独占一行(一行只能显示一个)

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

➢代表标签:

div, p、h系列、ul. li、 dl、 dt、 dd、form、 header. nav、 foote....

3.2行内元素

➢显示特点:

1. 一行可以显示多个

2.宽度和高度默认由内容撑开

3.不可以设置宽高

➢代表标签:

a、span、b、u、i、 S、strong、 ins、 em、de......

3.3行内块元素

➢显示特点:

1. 一行可以显示多个

2.可以设置宽高

➢代表标签:input、textarea、 button、 selet.....

特殊情况: img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline

3.4元素显示模式转换

4 CSS特性

4.1继承性的介绍

➢特性: 子元素有默认继承父元素样式的特点(子承父业)

➢可以继承的常见属性(文字控制属性都可以继承)

1. color

2. font-style、font weight、font- size、font-family

3. text-indent、text-align

4. line-height

5........

➢注意点:

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

4.2层叠性的介绍

特性:

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

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

➢注意点:

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

4.3优先级的介绍

4.3.1优先级的介绍

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

优先级公式:

继承<通配符选择器<标签选择器<类选择器< id选择器<行内样式< !important

➢注意点:

1. !important写在属性值的后面，分号的前面!

2. !important不能提升继承的优先级，只要是继承优先级最低!

3.实际开发中不建议使用 !important.

4.3.2 权重叠加计算

➢场景: 如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

➢权重叠加计算公式: (每一级之间不存在进位)

➢比较规则:

1. 先比较第一级数字,如果比较出来了，之后的统统不看

2.如果第一级数字相同,此时再去比较第二级数字,如果比较出来了，之后的统统不看

3.如果最终所有数字都相同, 表示优先级相同,则比较层叠性(谁写在下面，谁说了算!)

➢注意点: !important如果不是继承，则权重最高，天下第一!