css基础知识最后补充：继承、选择器的权重、像素和百分比、em和rem、RGB值、HSL值以及HSLA值（萌新必看，大佬随便）

最新推荐文章于 2022-04-27 22:19:09 发布

尐╋猪

最新推荐文章于 2022-04-27 22:19:09 发布

阅读量2.5k

点赞数 8

分类专栏：前端文章标签： css css3 html html5 windows

本文链接：https://blog.csdn.net/qq_45623543/article/details/109409080

版权

前端专栏收录该内容

18 篇文章 4 订阅

订阅专栏

《个人学习笔记十三》

继承

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

选择器的权重

样式的冲突
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定。
选择器的权重

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

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是但不计算的），选择器的累加不会超过其最大的数量级，类选择器在高也不会比id选择器高。
如果在某一个样式的后面添加 !important ，则此时该样式会获得最高的优先级，甚至超过内联样式。（注意：开发中，慎用，不方便修改）

像素和百分比

长度单位：

像素

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

百分比

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

<!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>
        .box1 {
            height: 200px;
            width: 200px;
            background-color: blue;
        }
        
        .box2 {
            height: 50%;
            /* 宽和高为box1的一半 */
            width: 50%;
            background-color: darkseagreen;
        }
    </style>
</head>


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

</html>

显示结果：
在这里插入图片描述

em和rem

这两个也是长度单位。

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

rem是相对于根元素的字体大小来计算。
例子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>
        .box1 {
            font-size: 2px;
            height: 200em;
            width: 200em;
            background-color: blue;
        }
        
        .box2 {
            font-size: 1px;
            height: 200em;
            width: 200em;
            background-color: firebrick;
        }
    </style>
</head>


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

</html>

</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>
        html {
            font-size: 1px;
        }
        
        .box1 {
            height: 200rem;
            width: 200rem;
            background-color: blue;
        }
        
        .box2 {
            height: 100rem;
            width: 100rem;
            background-color: firebrick;
        }
    </style>
</head>


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

</html>

</html>

显示结果：
在这里插入图片描述

RGB值

颜色单位：

在CSS中可以直接使用颜色名来设置各种颜色。
比如：red、orange、yellow、blue、green、pink、等
但是在CSS中直接使用颜色名是非常的不方便。

RGB值：

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

RGBA：

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

十六进制的RGB值

语法:#红色绿色蓝色
颜色浓度范围 00-ff
如果颜色两位重复可以进行简写
#aabbcc 简写 #abc

例子：

<!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>
        .box1 {
            height: 100px;
            width: 100px;
            background-color: red;
        }
        
        .box2 {
            height: 100px;
            width: 100px;
            background-color: rgb(0, 255, 0);
        }
        
        .box3 {
            height: 50px;
            width: 100px;
            background-color: rgba(0, 255, 0, .5);
        }
        
        .box4 {
            height: 100px;
            width: 100px;
            background-color: #0000ff;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

</html>

结果显示：
在这里插入图片描述

HSL值 HSLA值

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

代码：

<!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>
        .box1 {
            height: 100px;
            width: 100px;
            background-color: hsl(88, 40%, 50%);
        }
    </style>
</head>

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

</html>

解释如下：
在这里插入图片描述

尐╋猪

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
11
评论
css基础知识最后补充：继承、选择器的权重、像素和百分比、em和rem、RGB值、HSL值以及HSLA值（萌新必看，大佬随便）

《个人学习笔记十三》继承样式的继承，我们为一个元素设置的样式同时也会应用到后代元素上。继承是发生在祖先后代之间的。继承的设计是为了方便我们的开发。利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上。这样只需要设置一次即可，可让所有的元素都具有该样式注意：并不是所有的样式都会被继承如背景、布局相关的，等这些样式都不会被继承。选择器的权重样式的冲突当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器
复制链接

扫一扫

专栏目录