04.继承，选择器权重及长度与颜色单位_颜色信息l、a、b、avg 权重-CSDN博客

本文链接：https://blog.csdn.net/Edshine/article/details/120276344

继承，选择器权重及长度与颜色单位

文章目录

继承，选择器权重及长度与颜色单位

1.继承

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先后后代之间的
继承的设计是为了方便我们的开发，
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
这样只需设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承
比如：背景相关的，布局相关等的这些样式都不会被继承

2.选择器的权重

样式的冲突：

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

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

选择器的权重：

内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）,

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

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

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，

注意：在开发中这个玩意一定要慎用！

3.长度单位

<body>

    <div class="box1">

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

    </div>

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

<style>        
		.box1{
             */
            width:300px;
            height: 100px;
            background-color: orange;
        }

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

        .box3{
            font-size: 50px;
            width: 10em;
            height: 10em;
            width: 10rem;
            height: 10rem;
            background-color: greenyellow;
        }
</style>

3.1 像素

屏幕（显示器）实际上是由一个一个的小点点构成的
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
所以同样的200px在不同的设备下显示效果不一样

3.2 百分比

也可以将属性值设置为相对于其父元素属性的百分比
设置百分比可以使子元素跟随父元素的改变而改变

3.3 em

em是相对于元素的字体大小来计算的
1em = 1font-size=30个像素（px）
em会根据字体大小的改变而改变

3.4 rem

rem

4 颜色单位

在CSS中可以直接使用颜色名来设置各种颜色

比如：red、orange、yellow、blue、green … …
但是在css中直接使用颜色名是非常的不方便

RGB值：

RGB通过三种颜色的不同浓度来调配出不同的颜色
R red，G green ，B blue
每一种颜色的范围在 0 - 255 (0% - 100%) 之间
语法：RGB(红色,绿色,蓝色)

RGBA:

就是在rgb的基础上增加了一个a表示不透明度
需要四个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明 0表示完全透明 .5半透明

十六进制的RGB值：

语法：#红色绿色蓝色
颜色浓度通过 00-ff
如果颜色两位两位重复可以进行简写
aabbcc --> #abc

HSL值 HSLA值

H 色相(0 - 360)
S 饱和度，颜色的浓度 0% - 100%
L 亮度，颜色的亮度 0% - 100%

  background-color: red;
            background-color: rgb(255, 0, 0);
            background-color: rgb(0, 255, 0);
            background-color: rgb(0, 0, 255);
            background-color: rgb(255,255,255);
            background-color: rgb(106,153,85);
            background-color: rgba(106,153,85,.5);
            background-color: #ff0000;
            background-color: #ffff00;
            background-color: #ff0;
            background-color: #bbffaa;
            background-color: #9CDCFE;
            background-color: rgb(254, 156, 156);
            background-color: hsla(98, 48%, 40%, 0.658)