当前位置：首页 > article >正文

CSS进阶

article 2025/1/19 13:39:29

文章目录

一选择器进阶
- 1 复合选择器
- - 1.1 后代选择器：空格
  - 1.2 子代选择器：>
- 2 并集选择器：，
- 3 交集选择器：紧挨着
- 4 hover伪类选择器
- 5 Emmet语法
二背景相关属性
- 1 背景颜色
- 2 背景图片
- 3 背景平铺
- 4 背景位置
- 5 背景相关属性连写
- 6 拓展img标签和背景图片的区别
三元素显示模式
- 1 块级元素
- 2 行内元素
- 3 行内块元素
- 4 元素显示模块转换
- 5 拓展：HTML嵌套规范注意点
四 CSS特性
- 1 继承性
- 2层叠性
五综合案例
- 1 案例

一选择器进阶

1 复合选择器

1.1 后代选择器：空格

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 找到div的儿子p设置文字颜色是红色 */
        /* 父选择器 后代选择器{} */
        div p{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 后代：儿子孙子，重孙子...... -->
     <p>这是一个p标签</p>
     <div>
        <p>这是div的儿子</p>
     </div>
</body>
</html>

1.2 子代选择器：>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div > a{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">子级</a>
        <p>
            <a href="#">孙子</a>
        </p>
    </div>
</body>
</html>

2 并集选择器：，

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,div,span,h1{
            color: red;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <div>div</div>
    <span>sp</span>
    <h1>h</h1>
    <h2>kkk</h2>
</body>
</html>

3 交集选择器：紧挨着

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.box{
            color: red;
        }
    </style>
</head>
<body>
    <p class="box">ppp</p>
    <p>66</p>
    <div class="box">ppppp</div>
</body>
</html>

4 hover伪类选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }
        a:hover{
            color: red;
        }
        div:hover{
            color: aqua;
        }
    </style>
</head>
<body>
    <a href="#">链接</a>
    <div>ppppppp</div>
</body>
</html>

5 Emmet语法

在这里插入图片描述

二背景相关属性

1 背景颜色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px; 
            background-color:red;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

2 背景图片

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 900px;
            height: 900px;
            background-color: pink;
            background-image: url(./屏幕截图\ 2024-10-23\ 194127.png);
        }
    </style>
</head>
<body>
    <div>你好</div>
</body>
</html>

3 背景平铺

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 900px;
            height: 900px;
            background-color: pink;
            background-image: url(./屏幕截图\ 2024-10-23\ 194127.png);
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div>你好</div>
</body>
</html>

4 背景位置

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 900px;
            height: 900px;
            background-color: pink;
            background-image: url(./屏幕截图\ 2024-10-23\ 194127.png);
            background-repeat: no-repeat;
            /* background-position: center center; */
            background-position: 60px 90px;
            /* 正数：向右向下移动；负数：向左向下移动 */
            /* 注意：背景色和背景图只显示在盒子里面 */
        }
    </style>
</head>
<body>
    <div>你好</div>
</body>
</html>

5 背景相关属性连写

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 900px;
            height: 900px;
            /* 背景图位置如果是英文单词可以颠倒顺序 */
            /* 背景图位置如果是数组则不能颠倒 */
            background: pink url(./屏幕截图\ 2024-10-23\ 194127.png) no-repeat center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

6 拓展img标签和背景图片的区别

在这里插入图片描述

三元素显示模式

1 块级元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>ssss</div>
    <div>dddddddd</div>
</body>
</html>

2 行内元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置宽高不生效，尺寸和内容大小相同 */
        span{
            width: 300px;
            height: 300px;
            background-color: palegoldenrod;
        }
    </style>
</head>
<body>
    <span>oooo</span>
    <span>llll</span>
</body>
</html>

3 行内块元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <img src="./屏幕截图 2024-10-23 194127.png" alt="#">
    <img src="./屏幕截图 2024-10-23 194127.png" alt="#">
</body>
</html>

4 元素显示模块转换

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>666</div>
    <div>333</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置宽高不生效，尺寸和内容大小相同 */
        span{
            width: 300px;
            height: 300px;
            background-color: palegoldenrod;
            display: block;
        }
    </style>
</head>
<body>
    <span>oooo</span>
    <span>llll</span>
</body>
</html>

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- p和h标签不能互相嵌套 -->
     <p><h1>66</h1></p>
    <!-- p里不含div -->
     <p><div>666</div></p>
</body>
</html>

四 CSS特性

1 继承性

在这里插入图片描述

子元素已有的不会继承，没有的继承父类

2层叠性

在这里插入图片描述

五综合案例

1 案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
            width: 100px;
            height: 50px;
            background-color: red;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        a:hover{
            background-color: orange;
        }
    </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>