html-css2 继承/选择器的权重/像素百分比 em rem/颜色 RGB HSL

木一叶liuyue

已于 2022-03-08 09:01:53 修改

阅读量206

点赞数

分类专栏：前段文章标签： css html

于 2021-07-23 20:59:42 首次发布

本文链接：https://blog.csdn.net/Kerryliuyue/article/details/119043256

版权

前段专栏收录该内容

47 篇文章 0 订阅

订阅专栏

本文详细讲解了CSS中的样式继承原则，哪些样式可以被后代元素继承，哪些不能，并通过实例展示了颜色、尺寸单位（像素、百分比、em、rem）以及颜色表示（RGB、HSL）的使用。同时，深入探讨了CSS选择器的权重计算，如何解决样式冲突，并给出了实际应用场景中的例子。

摘要由CSDN通过智能技术生成

继承

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<!>, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /*样式的继承,我们作为一个元素设置的样式同时也会应用到它的后代元素上
      继承只是发生在祖先后代之间的
      这样只需要设置一次就可以让所有的样式都具有该样式   
      注意：并不是所有的样式都会被继承 比如背景相关的、布局相关的
    */
  
    body{ 
        font-size:12px;
     }
    p{
        color: red;
        background-color: turquoise;
        /*不会被继承,但是因为是透明的，会被透过来*/
    }
    p>span{
        background-color: violet;
    }
    div{
        color: turquoise;
    }
</style>

<body>
    <!--p元素里面可以放行内元素，但是不能放块元素-->

    <p>
        我是一个p元素
        <br>

        <span>
            我是p中的span元素
        </span>

    </p>
    <span>我是p元素外的span</span>
    <div>
        我是div
            <span>
                我是div中的span
                <em>我是span中的em</em>
            </span>
        
    </div>

</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>
        div{
        /* 元素选择器，级别1 */
        color: cornflowerblue;
    }
    .red{
        /* 类选择器，级别10 */
        color: crimson;
    }
    #box{
        /* id选择器，级别100 */
        color:chocolate;
    }
    div#box{
        /* 两个选择器级别相加 */
        color: darkmagenta;
    }
    /*
    样式的冲突:
            -当我们通过不同的选择器，选中相同的元素，
            并且为相同的样式设置不同值时，此时就发生了样式冲突
    发生样式冲突是，应用哪个样式应该由选择器的权重（优先级决定）
   
    选择器的权重:
    内联样式 1000 在写的时候就写上
    id选择器 100
    类和伪类选择器10
    元素选择器 1
    通配选择器 0
    继承 没有优先级（重点理解）

    比较优先级时，需要将所有的选择器的优先级进行相加计算，
    优先级越高，则越优先显示（分组选择器是单独计算的）
    选择器的累加不会超过最大的数量级，类选择器再高也不会超过id选择器
    可以在某一个样式的后边添加！imporant，则该样式会获取到最高的优先级，甚至超过内联样式
    */
    *{
        font-size: 50px;
    }
    div{
        font-size: 20px;
    }
</style>
<body>
    <div id="box" class="red" style="color: teal;">我是一个div <span>我是div中继承的span</span></div>
    <!-- 内联样式选择器，级别最高 <div id="box" class="red" style="color: chartreuse;"><span>我是div中继承的span</span></div>-->
</body>
</html>

像素百分比 em rem

<!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>
    html{
        font-size: 16px;
    }
    .box1{
        /*
        长度单位：像素
        像素越小的屏幕显示效果越清晰
        
        百分比
        也可以将属性值设置为相对于其父元素属性的百分比
        
        em
        em是相对于元素的字体大小来计算的
        1 em=1 font-size(默认是16px)
        em会根据字体大小的改变而改变  

        rem
        rem是相对于根元素（HTML）的字体大小来计算
        */
        width:200px;
        height:100px;
        background-color: teal;
    }
    .box2{
        width: 50%;
        height: 50%;
        background-color: yellow;
    }
    .box3{
        font-size: 16px;
        width: 10em;
        height: 10em;
        background-color: greenyellow;

}
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

颜色 RGB HSL

<!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>
    .box1 {
        width: 100px;
        height: 100px;
        /*
            颜色单位，在CSS中可以直接颜色名
            RGB值 rgb(,,,)
            RGBA就是在rgb的基础上增加了一个a表示不透明度
            需要四个值 前三个和rgb一样，第四个表示不透明度
            1表示完全不透明 0表示完全透明 .5表示半透明
            HSL值 HSLA值

            H色相（0-360）
            S 饱和度，颜色的浓度 0%-100%
            L 亮度 颜色的亮度 0%-100%
*/
        background-color: rgb(255, 255, 255);
        background-color: rgb(255, 255, 255, .5);
        background-color: #bfa;
        background-color: #ff0;
        background-color: rgb(255, 255, 255);
        background-color: hsl(0, 100%, 50%);

    }
</style>

<body>
    <div class="box1"></div>
</body>

</html>

木一叶liuyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-css2 继承/选择器的权重/像素百分比 em rem/颜色 RGB HSL

继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<!>, initial-scale=1.0"> <title>Do
复制链接

扫一扫