2.3 CSS像素、em和RGB

最新推荐文章于 2024-04-18 17:30:00 发布

dxt_snow

最新推荐文章于 2024-04-18 17:30:00 发布

阅读量149

点赞数

分类专栏： HTML&CSS 文章标签： css px em rgb HSL

本文链接：https://blog.csdn.net/qq_37665301/article/details/107657436

版权

HTML&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

2.3 CSS像素、em和RGB

- - 像素与em
  - RGB与HSL

像素与em

像素单位、百分比表示、em和rem

示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>像素和百分比</title>
        <style>
            .box1{
                /*
                    长度单位
                        像素
                            - 不同屏幕的像素大小是不同的，像素越小的屏幕显示越清晰
                            - 同样的200px 在不同的屏幕上显示效果不同
                        百分比
                            - 百分比是 属性值相对于其父元素属性值的 百分比
                            - 子元素的属性会跟随父元素属性值的改变而改变
                        em
                            - em是相对于元素的字体大小来计算的
                            - 1 em = 1 font-size
                            - em会根据字体大小的改变而改变
                        rem
                            - rem是相对于根元素（<html>）的字体大小来计算
                */
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
            }
            .box2{
                width: 50%;
                height: 50%;
                background-color: red;
            }
            .box3{
                width: 10em;
                height: 10em;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
        <div class="box3"></div>
    </body>
</html>

RGB与HSL

两种定义颜色的方式:RGB、HSL

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>RGB</title>
        <style>
            .box1{
                width: 100px;
                height: 100px;
                /*
                    颜色单位
                        在CSS中可以直接使用颜色名来设置各种颜色
                            比如：red、blue、green、black
                            但是在CSS中直接使用颜色名不方便
                        RGB值
                            - RGB通过三种颜色的不同浓度来调配出不同颜色
                            - R red / G green / B blue
                            - 每一种颜色的范围在 0~255（0%~100%）之间
                            - 语法：rgb(红色,绿色,蓝色)
                        RGBA值
                            - 在RGB的基础上增加了一个a表示不透明度
                            - 1 表示不透明，0.5表示半透明，0表示完全透明
                            - 语法：rgba(红色,绿色,蓝色,透明度)
                        十六进制的RGB值
                            - 语法：#红色绿色蓝色
                            - 颜色浓度：00~FF
                            - #ff0000 表示红色
                            - 如果颜色两位两位重复，可以进行简写
                                #aabbcc --> #abc
                        HSL值 和 HSLA值
                            H 色相 0 - 360
                            S 饱和度 0% - 100%
                            L 亮度 0% - 100%
                */
                background-color:rgba(255,0,0,0.5);
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
    </body>
</html>