05 CSS02

NYX_UNI

已于 2023-06-12 15:14:30 修改

阅读量815

点赞数

分类专栏：零基础前端 CSS 文章标签： css css3 前端

于 2022-11-03 09:47:36 首次发布

本文链接：https://blog.csdn.net/NYX_UNI/article/details/127452116

版权

零基础前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

目标
1、选择器进阶
2、背景相关属性
3、元素显示模式
4、CSS三大特性
5、综合案例

一、选择器进阶

1、复合选择器
2、并集选择器
3、交集选择器
4、Emmet语法
5、hover伪类选择器

请添加图片描述

1、复合选择器

1.1 后代选择器：空格

· 作用：根据HTML的嵌套关系，选择父元素后代中满足条件的元素
· 选择器语法：选择器1 选择器2 {CSS}
· 结果：在选择器1所找到标签的后代{儿子、孙子、重孙子…}中，找到满足选择器2的标签，设置样式

1.2 子代选择器：>

· 作用：根据HTML的嵌套关系，选择父元素子代中满足条件的元素
· 选择器语法：选择器1>选择器2 {CSS}
· 结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

2、并集选择器：，

· 作用：同时选择多组标签，设置相同的样式
· 选择器语法：选择器1，选择器2 {CSS}
· 结果：在选择器1和选择器2的标签，设置样式

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

3、交集选择器：紧挨着

· 作用：选中页面中同时满足多个选择器的标签
· 选择器语法：选择器1选择器2 {CSS}
· 结果：（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

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

4、Emmet语法

作用：通过简写语法，快速生成代码
语法：
请添加图片描述

5、hover伪类选择器

· 作用：选中鼠标悬停在元素上的状态，设置样式
· 选择器语法：选择器：hover {CSS}

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

二、背景相关属性

1、背景颜色
2、背景图片
3、背景平铺
4、背景位置
5、背景相关属性连写

1、背景颜色

· 属性名：background（bgc）
· 属性值：
颜色取值：关键字、rgb表示法、rgba表示法（a为透明度0-1）、十六进制、…

·背景颜色默认值是透明：rgba（0,0,0,0）、transparent
·背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会先给盒子设置背景颜色

2、背景图片

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

·背景图片中url可以省略引号
·背景图片默认是在水平方向平铺的
·背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3、背景平铺

· 属性名：background-repeat（bgr）
· 属性值：
请添加图片描述

4、背景位置

· 属性名：background-position
· 属性值：background-position：水平方向位置垂直方向位置；
请添加图片描述

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

5、背景相关属性的连写形式

· 属性名：background（bg）
· 属性值：
单个属性值的合写，取值之间以空格隔开
· 书写顺序：（推荐，不强求）

background：color image repeat position

· 省略问题：
可以按照需求省略
特殊情况：在pc 端，如果盒子大小和背景图片一样，此时可以直接写background：url（）

如果需要设置单独的样式和连写
	要么把单独的样式写在连写下面
	要么把单独的样式写在连写里面

三、元素显示模式

1、块级元素
2、行内元素
3、行内块元素
4、元素显示模式转换

1、块级元素

· 属性：display：block
· 显示特点：
①独占一行
②宽度默认是父元素的宽度，高度默认由内容撑开
③可以设置宽高
· 代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer
· 可从chrome调试的computed中输入display查找其属性，如图
请添加图片描述

2、行内元素

· 属性：display：inline
· 显示特点：
①一行可以显示多个
②宽度和高度默认由内容撑开
③不可以设置宽高
· 代表标签：
a、span、b、u、i、s、strong、ins、em、del、…

3、行内块元素

· 属性：display：inline-block
· 显示特点：
①一行可以显示多个
②可以设置宽高
· 代表标签：
input、textarea、button、select、…

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

4、元素显示i模式转换

· 目的：改变元素默认的显示特点，让元素复合布局要求
· 语法：
请添加图片描述

拓展1：HTML嵌套规范注意点

1、块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等，但是：p标签中不要嵌套div、p、h等块级元素。
2、a标签内部可以嵌套任意元素，a标签不能嵌套a标签。

拓展2：居中方法总结

请添加图片描述

四、CSS三大特性

1、继承性
2、层叠性
3、优先级

1、继承性

· 特性：子元素有默认继承父元素样式的特点（子承父业）
· 可以继承的常见属性：
（1）color
（2）font-style、font-weight、font-size、font-family
（3）text-indent、text-align
（4）line-height
（5）…

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

请添加图片描述

拓展1 继承的应用

· 好处：可以在一定程度上减少代码
· 常见应用场景：
（1）可以直接给ul设置list-style：none，从而取出列表默认的小圆点样式
（2）直接给body标签设置统一的font-size，从而统一不同浏览器默认文字的大小

拓展2 继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
· a标签的color会继承失效
· h系列标签的font-size会继承失效
· div的高度不能继承，但是宽度有类似于继承的效果

2、层叠性

（1）特性
· 给同一个标签设置不同的样式 -> 此时样式会层叠叠加 -> 会共同作用在标签上
· 给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效
（2）注意点
当样式冲突时，只有当选择器优先级相同时，才能通过叠层性判断结果

3、优先级

3.1 单个符号的优先级

（1）特性
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
（2）优先级公式
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
（3）注意点
· !important写在属性值的后面，分号的前面！
· !important不能提升继承的优先级，只要是继承优先级最低！
· 实际开发中不建议使用!important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    	/* 7、！important 最强外挂 */
        p {
            color: purple !important;
        }

        /* 5、id选择器 */
        #one {
            color: aqua;
        }

        /* 4、类选择器 */
        .son {
            color: yellow;
        }

        /* 3、标签选择器 */
        p {
            color: blue;
        }

        /* 2、通配符选择器 */
        * {
            color: green;
        }

        /* 1、继承 */
        .father {
            color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <!-- 6、行内样式 -->
        <p class="son" id="one" style="color: pink">我是一个标签</p>
    </div>
</body>
</html>

3.2 权重叠加计算

（1）场景
如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
（2）权重计算公式
请添加图片描述
（3）比较规则
· 先比较第一级数字，如果比较出来了，之后的统统不看
· 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
· …
· 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算）

注意点：！important如果不是继承，则权重最高

拓展1 权重叠加计算案例

（1）权重计算题解题步骤
· 先判断选择器是否能直接选中标签，如果不能直接选中->是继承，优先级最低->直接pass
· 通过权重计算公式，判断谁权重最高
（2）注意点
实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况

拓展2 差错流程

请添加图片描述

五、综合案例

1、综合案例-普通导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            width: 80px;
            height: 50px;
            background-color: red;
            /* 文字颜色 */
            color: white;
            /* 需要可以设置宽高，还需要一行显示多个 */
            display: inline-block;
            /* 去除a标签的下划线 */
            text-decoration: none;
            /* 让内部文字水平居中 */
            text-align: center;
            /* 让内部的文字垂直居中 */
            line-height: 50px;
        }
        a:hover{
            background-color: #ffa500;
        }
    </style>
</head>
<body>
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>