CSS进阶

浅浅的花香味﹌ 2024-03-22 12:58 44阅读 0赞

### 01-复合选择器 ###

定义：由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素（标签）。

#### 后代选择器 ####

后代选择器：**选中某元素的后代元素**。

选择器写法：父选择器 子选择器 \{ CSS 属性\}，父子选择器之间用**空格**隔开。

#### 子代选择器 ####

子代选择器：选中某元素的子代元素（**最近的子级**）。

选择器写法：父选择器 > 子选择器 \{ CSS 属性\}，父子选择器之间用 **>** 隔开。

#### 并集选择器 ####

并集选择器：选中**多组标签**设置**相同**的样式。

选择器写法：选择器1, 选择器2, …, 选择器N \{ CSS 属性\}，选择器之间用 **,** 隔开。

#### 交集选择器 ####

交集选择器：选中**同时满足多个条件**的元素。

选择器写法：选择器1选择器2 \{ CSS 属性\}，选择器之间连写，没有任何符号。

> 注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

#### 伪类选择器 ####

伪类选择器：伪类表示元素**状态**，选中元素的某个状态设置样式。

鼠标悬停状态：**选择器:hover \{ CSS 属性 \}**

##### 超链接伪类 #####

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4QC9rgZ5-1683342247304)(assets/1680319272736.png)\]][img-4QC9rgZ5-1683342247304_assets_1680319272736.png]

> 提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。
> 
> 经验：工作中，一个 a 标签选择器设置超链接的样式， hover状态特殊设置

a {
        
      color: red;
    }
    
    a:hover {
        
      color: green;
    }

### 02-CSS特性 ###

CSS特性：化简代码 / 定位问题，并解决问题

*  继承性
 *  层叠性
 *  优先级

#### 继承性 ####

继承性：子级默认继承父级的**文字控制属性**。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cZ6AtK9d-1683342247305)(assets/1680319376438.png)\]][img-cZ6AtK9d-1683342247305_assets_1680319376438.png]

> 注意：如果标签有默认文字样式会继承失败。 例如：a 标签的颜色、标题的字体大小。

#### 层叠性 ####

特点：

*  相同的属性会覆盖：**后面的 CSS 属性覆盖前面的 CSS 属性**
 *  不同的属性会叠加：**不同的 CSS 属性都生效**

> 注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断。

#### 优先级 ####

优先级：也叫权重，当一个标签**使用了多种选择器时**，基于不同种类的选择器的**匹配规则**。

##### 基础选择器 #####

规则：选择器**优先级高的样式生效**。

公式：**通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important**

**（选中标签的范围越大，优先级越低）**

##### 复合选择器-叠加 #####

叠加计算：如果是复合选择器，则需要**权重叠加**计算。

公式：（每一级之间不存在进位）

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sTpeYCB0-1683342247306)(assets/1680319646205.png)\]][img-sTpeYCB0-1683342247306_assets_1680319646205.png]

规则：

*  从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
 *  **!important 权重最高**
 *  继承权重最低

### 03-Emmet 写法 ###

Emmet写法：代码的**简写**方式，输入缩写 VS Code 会自动生成对应的代码。

*  HTML标签

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ls3fYdrZ-1683342247306)(assets/1680319897697.png)\]][img-ls3fYdrZ-1683342247306_assets_1680319897697.png]

*  CSS：大多数简写方式为属性单词的**首字母**

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FyRxaYft-1683342247307)(assets/1680319926111.png)\]][img-FyRxaYft-1683342247307_assets_1680319926111.png]

### 04-背景属性 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NYx2ww5E-1683342247307)(assets/1680319971861.png)\]][img-NYx2ww5E-1683342247307_assets_1680319971861.png]

#### 背景图 ####

网页中，使用背景图实现装饰性的图片效果。

*  属性名：**background-image**（bgi）
 *  属性值：url(背景图 URL)

div {
        
      width: 400px;
      height: 400px;
    
      background-image: url(./images/1.png);
    }

> 提示：背景图默认有**平铺（复制）效果**。

#### 平铺方式 ####

属性名：**background-repeat**（bgr）

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jlZ9pNaU-1683342247308)(assets/1680320072292.png)\]][img-jlZ9pNaU-1683342247308_assets_1680320072292.png]

div {
        
      width: 400px;
      height: 400px;
      background-color: pink;
      background-image: url(./images/1.png);
    
      background-repeat: no-repeat;
    }

#### 背景图位置 ####

属性名：**background-position**（bgp）

属性值：水平方向位置 垂直方向位置

*  关键字

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r9EMFMIH-1683342247308)(assets/1680320211424.png)\]][img-r9EMFMIH-1683342247308_assets_1680320211424.png]

*  坐标
    
     *  水平：正数向右；负数向左
     *  垂直：正数向下；负数向上

div {
        
      width: 400px;
      height: 400px;
      background-color: pink;
      background-image: url(./images/1.png);
      background-repeat: no-repeat;
    
      background-position: center bottom;
      background-position: 50px -100px;
      background-position: 50px center;
    }

> 提示：
> 
>  *  关键字取值方式写法，可以颠倒取值顺序
>  *  可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中

#### 背景图缩放 ####

作用：设置背景图大小

属性名：**background-size**（bgz）

常用属性值：

*  关键字
    
     *  cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
     *  contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
 *  百分比：根据盒子尺寸计算图片大小
 *  数字 + 单位（例如：px）

div {
        
      width: 500px;
      height: 400px;
      background-color: pink;
      background-image: url(./images/1.png);
      background-repeat: no-repeat;
      
      background-size: cover;
      background-size: contain;
    }

> 提示：工作中，**图片比例与盒子比例相同**，使用 cover 或 contain 缩放背景图效果相同。

#### 背景图固定 ####

作用：背景不会随着元素的内容滚动。

属性名：**background-attachment**（bga）

属性值：**fixed**

body {
        
      background-image: url(./images/bg.jpg);
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

#### 背景复合属性 ####

属性名：**background**（bg）

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（**空格隔开各个属性值，不区分顺序**）

div {
        
      width: 400px;
      height: 400px;
    
      background: pink url(./images/1.png) no-repeat right center/cover;
    }

### 05-显示模式 ###

显示模式：标签（元素）的显示方式。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Elw8yQiH-1683342247309)(assets/1680320464551.png)\]][img-Elw8yQiH-1683342247309_assets_1680320464551.png]

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

#### 块级元素 ####

特点：

*  独占一行
 *  宽度默认是父级的100%
 *  添加宽高属性生效

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CiwCkZAF-1683342247309)(assets/1680320578369.png)\]][img-CiwCkZAF-1683342247309_assets_1680320578369.png]

#### 行内元素 ####

特点：

*  一行可以显示多个
 *  设置宽高属性不生效
 *  宽高尺寸由内容撑开

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KzM10Znw-1683342247310)(assets/1680320583985.png)\]][img-KzM10Znw-1683342247310_assets_1680320583985.png]

#### 行内块元素 ####

特点：

*  一行可以显示多个
 *  设置宽高属性生效
 *  宽高尺寸也可以由内容撑开

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iI6knWbJ-1683342247311)(assets/1680320590005.png)\]][img-iI6knWbJ-1683342247311_assets_1680320590005.png]

#### 转换显示模式 ####

属性：**display**

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f9F0pWyv-1683342247311)(assets/1680320613034.png)\]][img-f9F0pWyv-1683342247311_assets_1680320613034.png]

[img-4QC9rgZ5-1683342247304_assets_1680319272736.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/609b075d314442c4b81f8bd5e402c45c.png
[img-cZ6AtK9d-1683342247305_assets_1680319376438.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/131a92b7e06145fc8eae317ba19a2abb.png
[img-sTpeYCB0-1683342247306_assets_1680319646205.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/440fa90d1d0444499b28357caf2101a9.png
[img-ls3fYdrZ-1683342247306_assets_1680319897697.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7824401a297a4210bafb237a927669dc.png
[img-FyRxaYft-1683342247307_assets_1680319926111.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/af678339bafc454d815b582c3afdf6ad.png
[img-NYx2ww5E-1683342247307_assets_1680319971861.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bc4879a584814e6983340753b23d69ff.png
[img-jlZ9pNaU-1683342247308_assets_1680320072292.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/08aad44da051469dbd726fd2cda6801d.png
[img-r9EMFMIH-1683342247308_assets_1680320211424.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/066ff1ab6aa34f608f3b5d27b0f71561.png
[img-Elw8yQiH-1683342247309_assets_1680320464551.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/80d60eb728384446a0a376b8781ec3dd.png
[img-CiwCkZAF-1683342247309_assets_1680320578369.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/ba49c4f4174a4bf68026f115b49a49ec.png
[img-KzM10Znw-1683342247310_assets_1680320583985.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/88680feaa7fc4699a90e10ad37eda9e9.png
[img-iI6knWbJ-1683342247311_assets_1680320590005.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/45c0154d71fa4980a57615984aa9acf0.png
[img-f9F0pWyv-1683342247311_assets_1680320613034.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f700a70b408547968327ab466038b708.png