前端的学习之路：初级CSS---颜色

最新推荐文章于 2024-07-08 14:47:20 发布

new-SkyWaller

最新推荐文章于 2024-07-08 14:47:20 发布

阅读量158

点赞数

分类专栏：初级CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113557021

版权

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

颜色


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.18.04.css"> -->
    <style>
        /* 
        颜色单位：
            在css中可以直接使用颜色名来设置各种颜色
            比如：red,orange,yellow,blue....
            但是在 css中直接使用颜色名是非常的不方便


            RGB值：
                -RFB通过三种颜色的不同浓度来调配出不同的颜色
                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%）
        */
        .box{
            width: 100px;
            height: 100px;
            background-color: blue;
            background-color: rgb(255,0,0);
            background-color: rgb(0,255,0);
            background-color: rgb(35, 35, 59);
            background-color: rgb(255,255,255);
            background-color: rgb(125,145,213);
            background-color: rgba(125,145,213,.5);
            background-color: #ffff00;
            background-color: hsl(0, 100%, 0%);
            /* 它的位置在最后所以显示为黑色 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>