css进阶

目 录

• 选择器进阶

• 背景相关属性

• 元素显示模式

• css特性

• 综合案例

css进阶：

选择器进阶：

复合选择器——后代；首先要创建一个父选择器然后父选择器要用空格与后代选择器隔开{}

eg：

子代选择器：首先要创建父选择器然后父选择器要用>符号与子代选择器隔开{}

eg：

注意点：子代只包括儿子 子选择器中，选择器与选择器之间通过>隔开

并集选择器：同时选择多组标签，设置相同样式

注意点：1.并集选择器中的每组选择器之间通过，分隔

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

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

交集选择器：作用：选中页面中，同时满足多个选择系的标签

注意点：1.选择器中的选择器之间事情挨着的没有东西分隔

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

Hover伪类选择器：作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选中选择器：hover{css}

注意点：伪类选择器中的元素的某种状态

Emmet语法：作用：简写快速生成代码

背景相关属性：

背景颜色：background-color（bgc）

颜色取值：关键字，rgb表示法，rgba表示法，十六进制……

注意点：1.背景颜色默认值为透明rgb（0，0，0，0）transparent

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

背景图片：background-image(bgi) 注：背景里面的图片设置

属性值：background-image：url（‘图片的路径’）

注意点：1.背景图片中url中可以省略引号

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

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

背景位置：background-position（bgp）

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

背景-复合属性：background（bg）

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

背景的复合属性可以不分顺序

背景图的两个位置顺序：

背景图位置如果是英文单词可以颠倒顺序

背景图位置如果是数值不可以颠倒顺序

元素显示模式：

块：显示特点:

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

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

3. 可以设置宽高

代表标签:

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

行内元素：

显示特点:

1.一行可以显示多个

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

3. 不可以设置宽高

代表标签:

a, span 、 b、 u, i, s. strong、 ins、 em, del.....

行内块：显示特点:

1.行可以显示多个

2.可以设置宽高

代表标签:

input、textareabutton、 select......

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

元素显示模块转换：

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

拓展-标签嵌套：

1.块级元素一般作为大容器，可以嵌套:文本、块级元素、行内元素、行内块元素等等.....

但是: p标签中不要嵌套div、p、h等块级元素

2.a标签内部可以嵌套任意元素

但是: a标签不能套a标签

Css特性-继承性

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

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

1. color

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

3. text-indent、text-align

4. line-height

5.……

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

a标签不能继承color标签

h系列标签不能继承font-size标签

Css特性-层叠性

特性:

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

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

注意点:

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