2.3 CSS像素、em和RGB

2.3 CSS像素、em和RGB

像素与em

  1. 像素单位、百分比表示、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

  1. 两种定义颜色的方式: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>
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页