Web前端学习笔记4（CSS）

最新推荐文章于 2025-12-02 22:03:53 发布

原创最新推荐文章于 2025-12-02 22:03:53 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3 #html5

Web前端专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了CSS中的样式继承原理，通过实例展示了如何设置样式使得子元素继承父元素的样式。接着探讨了选择器的优先级规则，解释了在样式冲突时如何确定哪个样式生效。此外，还讲解了CSS中的长度单位，如像素、百分比、em和rem，并举例说明它们的应用。最后，文章讨论了颜色表示方式，包括颜色名称、RGB、RGBA、16进制和HSL值。通过这些基础知识的学习，为后续的页面布局打下坚实基础。

上次学习了一些关于CSS的知识，现在还剩下一些，继续整理一下。

知识点学习

上次学习了一些基础的CSS语法，包括各种选择器还有伪类、伪元素的学习，接下来再来看看剩下的一些。

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>
        /* 
            样式的继承：
                一个元素内部的元素会继承它的样式
         */
         p{
             color: crimson;
         }
    </style>
</head>
<body>

    <p>
        我是一个p元素
        <span>
            我是p元素内部的span
        </span>
    </p>

    <span>我是p元素外的span</span>
     
</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>
        /* 
            样式的冲突：当对同一个元素设置多个样式，而且样式不同，这样就出现了冲突，那么这个时候应该听谁的？

            发生冲突的时候，应该根据优先级选择

            选择器的权重：
                内联样式       1 0 0 0
                id选择器       0 1 0 0
                类和伪类选择器  0 0 1 0
                元素选择器     0 0 0 1
                通配选择器     0 0 0 0
                继承的样式      没有优先级

            将所有选择器优先级进行相加，得到最终的优先级
            但是不能越界，即元素选择器的优先级永远不会比类选择器的高

            在选择器后面可以加上（!important）,优先级将会变到最高，不过要慎用
         */
        #box1{
            background-color: cyan;
        }

        div#box1{
            background-color: darkorchid;
        }

        .red{
            background-color: darkgoldenrod;
        }



    </style>
</head>
<body>
    
    <div id="box1" class="red" >我是一个div</div>
</body>
</html>

3、单位

我们所看到的图片、文字和其他的屏幕上显示的东西，其实都是由一个个像素组成的，CSS中我们经常需要设置元素的大小，宽度和高度等等，这里我们用的单位就是像素。还有一些其他的单位。

<!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>

        /* 
            长度单位：
                1、像素（像素的个数）
                2、百分比（相对于父元素的百分比长度）

                3、em
                    - em是相对于字体大小来计算的
                    - 1em = 1font-size
                    - em 会根据字体的大小改变而改变

                4、rem
                    - rem是相对于根元素（html）的字体大小
         */
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .box2{
            width: 50%;
            height: 50%;
            background-color: brown;
        }

        .box3{
            font-size: 10px;
            width: 10em;
            height: 10em;
            background-color: chartreuse;
        }
    </style>
</head>
<body>

    <div class="box1">

        <div class="box2"></div>

    </div>

    <div class="box3"></div>
    
</body>
</html>

4、颜色

可以直接利用颜色名称、也可以用RGB值等等。

<!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>
        /* 
            颜色单位：
                在CSS中可以直接使用颜色名来设置颜色
                    比如：red, green, orange, blue...
                但是在CSS中直接使用颜色名非常的不方便

                RGB值：
                    - R red, G green, B blue
                    - 每种颜色在 0~255 之间
                    - 语法：RGB（红色，绿色，蓝色）

                RGBA值：
                    可以设置透明（A）
                    1 表示完全不透明，0 表示完全透明

                16进制RGB值：
                    语法：#红色绿色蓝色
                    00 ~ ff

                HSL值 HSLA值：
                    H 色相（0~360）
                    S 饱和度(0%~100%)
                    L 亮度(0%~100%)
                

         */
        .box1{
            width: 100px;
            height: 100px;

            background-color: coral;
            background-color: rgba(100, 210, 170, 0.9);
            background-color: #ffff00;
            background-color: hsl(0, 100%, 0%);
        }
    </style>
</head>
<body>
    
    <div class="box1"></div>
</body>
</html>