继承、选择器的权重、像素和百分比、em和rem、RGB值、HSL值——CSS3

嘻嘻哈哈二郎神

已于 2023-02-13 16:18:24 修改

阅读量277

点赞数

分类专栏： CSS 文章标签： css3 前端

于 2022-12-14 18:33:39 首次发布

本文链接：https://blog.csdn.net/weixin_70320000/article/details/128315591

版权

CSS 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

一、CSS三大特性

三个非常重要的特性：层叠性、继承性、优先级

层叠性主要是解决样式冲突的问题

继承性：子标签会继承父标签的某些样式，子元素可以继承父元素的样式（text-, font-, line- 这些元素开头的可以继承，以及color属性）

行高的继承性

优先级：选择器的权重

二、继承

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上。

继承是发生在祖先后代之间的

继承的设计是为了方便我们开发，

利用继承可以将一些通用的样式统一设置到共同的祖先元素上，

这样只需设置一次即可让所有的元素都具有该样式

注意：并不是所有的样式都会被继承：

比如背景相关的（如background-color），布局相关等这些样式都不会继承

background-color默认值是 transparent ( adj.透明的)

三、选择器的权重

样式的冲突

当我们通过不同的选择器，选中相同元素，并且为相同的样式设置不同的值时，此时就发生样式的冲突。

发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

选择器的权重

!important 无穷大

内联样式 1000 1，0，0，0

id选择器 100 0，1，0，0

类和伪类、属性选择器 10 0，0，1，0

元素和伪元素选择器 1 0，0，0，1

通配选择器 0，0，0，0

继承的样式没有优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）

选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器

如果优先级计算后相同，此时则优先使用靠下的样式

可以在某一个样式的后边添加 !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>
        div{
            background-color: yellow;
        }
        .red{
            background-color:red !important;
        }
        #box1{
            background-color: orange;
        }
        div#box1{
            background-color: skyblue;
        }
    </style>

</head>
<body>
    <div id="box1" class="red" style="background-color: green;">我是一个div</div>
</body>
</html>

注意：超链接的伪类 :link，:visited，:hover，:active 权重相同，所以要想有效果，需要hover设置在:link，:visited 后面，:active 设置在:hover后面

四、像素和百分比

长度单位：

像素

- 屏幕（显示器）实际上由一个一个的小点点构成的

- 不同屏幕的像素大小是不同的，像素越小的屏幕现实的效果越清晰

- 所以同样的200px在不同的设备下显示效果不一样

百分比

- 也可以将属性值设置为相对于父元素属性的百分比

- 设置百分比可以使子元素跟随父元素的改变而改变

五、em和rem

- em 是相对于元素的字体大小来计算的

- 1em = 10font-size, 一般默认font-size是16px

- em会根据字体大小的改变而改变

rem

- rem是相对于根元素（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>
    <style>
        html{
            font-size: 20px;
        }
        .box3{
            font-size: 20px;
            /* width: 10em;
            height: 10em; */
            width: 10rem;
            height: 10rem;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="box3"></div>
</body>
</html>