前端开发Day03（CSS进阶）

A宝呀

已于 2023-04-21 21:32:08 修改

阅读量43

点赞数

文章标签： css html 前端

于 2023-04-20 09:33:05 首次发布

本文链接：https://blog.csdn.net/m0_73254888/article/details/130257569

版权

复合选择器

后代选择器

<!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>
</head>
<style>
    div span {
        font: italic 700 20px/2 楷体;
        color: blue;
    }
    span {
        font: italic 700 20px/2 楷体;
        color: darksalmon;
    }
</style>
<body>
    <span>span 标签为粉色</span>
    <div>
        <span>
            文字为蓝色
        </span>
        <p>
            <span>文字颜色变了莫 div p span</span>
        </p>
    </div>
</body>
</html>

后代选择器:：选中所有后代，比如div span 只要div后代有span标签，就会变化

子代选择器

我只要让div span这个标签变化，只有body里div span标签才有变化哦

div > span {
        font: italic 700 20px/2 楷体;
        color: blue;
    }

并集选择器

p span p {
        color: beige;
    }

交集选择器

p .special {
        text-decoration: line-through;
    }

直接将两个选择器写在一起就好啦

伪类选择器

<style>
    a {
        font-size: 20px;
        color: brown;
    }
    a:hover {
        color: aqua;
    }
</style>
<body>
    <a href="#">wlc</a>
</body>

对于a超链接而已，

:link 表示访问前

:visited 表示访问后

:hover表示鼠标悬停

:active表示点击后（激活的效果）

CSS特性

继承性

<style>
    body {
        color: bisque;
        text-align: center;
        font-size: 20px;
    }
</style>
<body>
    <a href="https://mp.csdn.net/mp_blog">CSDN</a>
</body>

这边是继承Body，如果body里有对已有的东西，那最后的结果就是利用本身的属性

这边比如字号大小、本身颜色问题，a本身就是有颜色的，蓝色

层叠性

优先级

这边的最后两个CSS性质是继承，因为没有直接作用在p上

Emmet写法

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

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

背景

背景图

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;
}

提示：

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

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

背景图缩放

关键字：

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 缩放背景图效果相同。

背景图固定

<style>
    body {
        background-image: url(../Day01/背景图.jpg);
        background-repeat: no-repeat;
        background-position: center top;

        background-attachment: fixed;
    }
</style>

背景复合属性

显示模式

块级元素

行内元素

行内块元素

转换显示模式

<!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>
</head>
<style>
    div {
        width: 100px;
        height: 100px;

        display: inline-block;
    }
    .special1 {
        background-color: brown;
    }
    .special2 {
        background-color: blue;
    }
    span {
        width: 100px;
        height: 100px;
    }
    .span1 {
        background-color: #3881f5;
    }
    .span2 {
        background-color: #9651ea;
    }
    img {
        width: 400px;
    }
</style>
<body>
    <!-- 块级 -->
    <div class="special1">div 标签1</div>
    <div class="special2">div 标签2</div>

    <!-- 行内 -->
    <span class="span1">span 标签1</span>
    <span class="span2">span 标签2</span>

    <!-- 行内块 -->
    <img src="../Day01/背景图.jpg" alt="">
    <img src="../Day01/背景图.jpg" alt="">

</body>
</html>

综合案例---热词

<!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>
</head>
<style>
    a {
        display: block;
        width: 200px;
        height: 80px;
        background-color: #30bbb4;
        color: #fff;
        text-decoration: none;
        text-align: center;
        line-height: 80px;
        font-size: 18px;
    }

    a:hover {
        background-color: #608dd9;
    }
</style>
<body>
    <a href="">HTML</a>
    <a href="">CSS</a>
    <a href="">JavaScript</a>
    <a href="">Vue</a>
    <a href="">React</a>
</body>
</html>

<!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>
</head>
<style>
    .banner {
        height: 500px;
        background-color: #f3f3f4;
        background-image: url(./bk.png);
        background-repeat: no-repeat;
        background-position: left bottom;

        text-align: right;
    }

    .banner h2 {
        color: #333;
        font-size: 36px;
        line-height: 100px;
        font-weight: 400;
    }

    .banner p {
        color: #333;
        font-size: 20px;
    }

    .banner a {
        width: 125px;
        height: 40px;
        background-color: #f06b1f;

        display: inline-block;

        text-align: center;
        line-height: 40px;

        color: #fff;
        text-decoration: none;
    }
</style>
<body>
    <div class="banner">
        <h2>让创造产生价值</h2>
        <p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
        <a href="#">我要报名</a>
    </div>
</body>
</html>