码江湖之入门篇------CSS（TwoDay）

1.复合选择器？

    （1）复合选择器：

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

    

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

    （2）后代选择器：

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

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

    （3）子代选择器：

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

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

    （4）并集选择器：

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

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

    （5）交集选择器：

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

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

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

    （6）伪类选择器：

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

        

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

    （7）伪类-超链接（拓展）：

        超链接一共有 四 个状态。

        提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。                 

2.CSS特性？

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

                • 继承性

                • 层叠性

                • 优先级

    （1）继承性：

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

        注意：如果标签有默认文字样式会继承失败。

        例如：a 标签的颜色、标题的字体大小。

    （2）层叠性：

        特点：

                • 相同的属性会 覆盖 ： 后面 的 CSS 属性覆盖 前面 的 CSS 属性

                • 不同的属性会 叠加 ： 不同 的 CSS 属性 都生效

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

        

    （3）优先级：

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

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

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

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

    （4）优先级 – 叠加计算规则：

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

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

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

        ******规则：

                • 从左向右 依次比较选个数， 同一级 个数 多 的优先级 高 ，如果个数相同，则向后比较

                • !important 权重最高

                • 继承权重最低

3.Emmet 写法 ？

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

4.背景属性？

1

    （1）背景图：

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

        属性名： background-image （bgi）

        属性值： url(背景图 URL)

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

    （2）背景属性：

    （3）背景图平铺方式：

        属性名： background-repeat （bgr）        

    （4）背景图位置：

        属性名： background-position （bgp）

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

        提示：

                • 关键字 取值方式写法，可以 颠倒 取值顺序

                • 可以只写 一 个关键字， 另一个方向 默认为 居中；数字 只写 一 个值表示 水平 方向，垂直方

向为 居中

    （5）背景图缩放：

        作用：设置背景图大小

        属性名： background-size （bgz）

        常用属性值：

                • 关键字

                        cover ：等比例 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

                        contain ：等比例缩放背景图片以完全装入背景区，可能背景区部分空白

                        • 百分比 ：根据盒子尺寸计算图片大小

                        • 数字 + 单位（例如：px）

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

    （6）背景图固定：

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

        属性名： background-attachment （bga）

        属性值： fixed

    （7）背景复合属性:

        属性名： background （bg）

        

        属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（ 空格 隔开各个

属性值， 不区分顺序 ）

        

5.显示模式？

    （1）显示模式：

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

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

         块级元素

                 独占 一行

                 宽度默认是 父 级的 100%

                 添加 宽高 属性 生效

         行内元素

                 一行 可以显示 多个

                 设置 宽高 属性不 生效

                 宽高尺寸由 内容撑开

         行内块元素

                 一 行可以显示 多个

                 设置 宽高 属性 生效

                 宽高尺寸也可以由 内容撑开

    （2）转换显示模式：

        属性名：display

今天结束！！！

        各位小伙伴们！

        下期间！！！！！！