三、CSS 颜色的四种表示方法

CSS 颜色的四种表示方法颜色

1、单词表示

css 复制代码
h1 {
    color: black;
}
h2 {
    color:red;
}

2、rgb/rgba表示

red、green、blue是光的三原色。

css 复制代码
h1 {
    color: rgb(255, 0, 0);
}

h2 {
    color: rgba(0%, 0%, 100%, 0);
}

注意:

  1. 三种颜色相同,就是灰色,值越大,灰色越深。
  2. 全 0 为黑色 ,全 255 为白色。
  3. rgba中的a取值范围是0-1,值越小,可见度越低。
  4. rgb,三者的取值要么全是百分数,要么全是数值,不能混用。

3、hex/hexa

用16进制的数表示颜色的取值。(ff = 255), 需要在前面加上一个 #

css 复制代码
/*HEX*/
h2 {
    color: #ff0000;
}

/*HEXA*/
h3 {
    color: #ff4a7bff;
}

注意: 两两重复可以简写,一旦前三位简写,最后一位也要简写。

css 复制代码
h3 {
    color: #f00f
}

4、hsl/hsla表示法

用法:color:hsl(色相,饱和度,亮度)

css 复制代码
.hsl {
    color: hsl(0deg, 100%, 100%);
}

hsL是通过色相、饱和度、亮度、来表示颜色的一种格式。hsl(色相、饱和度、亮度)。

  • 色相:取值范围是0-360,单位deg可以省略,详情见上图。
  • 饱和度:取值范围是0%-100%,理解为往对应颜色中加入灰色。(0%为全灰,100%没有灰)
  • 亮度:取值范围是0%-100%,。(0%黑色,100%白色)

代码

html 复制代码
<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>Rock学前端</title>
    <style>
        h1 {
            color: red;
        }

        /*光的三原色*/
        .h1 {
            color: rgb(255, 0, 0);
        }

        .h2 {
            color: rgb(0, 255, 0);
        }

        .h3 {
            color: rgb(0%, 0%, 100%);
        }

        /*完全透明*/
        .rgba {
            color: rgba(255, 0, 0, 0.5);
        }

        .rgb000 {
            color: rgb(0, 0, 0); /*黑色*/
        }

        .rgb2553 {
            color: rgb(255, 255, 255); /*白色*/
        }

        .violet {
            color: rgb(138, 43, 226)
        }

        .HEX {
            color: #ff0000;
            /*两两重复可以简写,一旦前三位简写,后面三位也要简写*/
            /*color: #f00;*/
        }

        /*ie不支持hexA*/
        .HEXA {
            color: #87ceedff;
        }

        /*deg可以省略*/
        .hsl {
            /*color: hsl(0,100%,50%);*/
            /*0% 灰色*/
            /*100 白色*/
            color: hsl(14, 100%, 50%);
        }

        .hsla {
            color: hsla(0, 100%, 50%);
        }
    </style>
</head>
<body>
<div>
    <h1>词语表示</h1>
    <h1>Rock1688学</h1>
    <h1>rgb</h1>
    <h2 class="h1">Lorem.</h2>
    <h2 class="h2">Eveniet!</h2>
    <h2 class="h3">Numquam!</h2>
    <h1>rgba</h1>
    <h2 class="rgba">Rock test</h2>

    <hr>
    <hr>
    <h1 class="rgb000">rgb000</h1>
    <h1 class="rgb2553">rgb 255 255 255</h1>
    <hr>
    <h2 class="violet">紫罗兰</h2>

    <hr>
    <hr>
    <h1>HEX/HEXA</h1>
    <h2 class="HEX">HEX</h2>
    <h2 class="HEXA">HEXA</h2>
    <hr>
    <hr>
    <h1>hsl表示法</h1>
    <h2 class="hsl">Rock Test</h2>
    <h2 class="hsla">Rock Test</h2>
</div>

</body>
</html>
相关推荐
小桥风满袖2 分钟前
极简三分钟ES6 - Promise
前端·javascript
breeze_whisper3 分钟前
当前端收到一个比梦想还大的数字:BigInt处理指南
前端·面试
小喷友4 分钟前
阶段四:实战(项目开发能力)
前端·rust
小高0074 分钟前
性能优化零成本:只加3行代码,FCP从1.8s砍到1.2s
前端·javascript·面试
子兮曰5 分钟前
🌏浏览器硬件API大全:30个颠覆性技术让你重新认识Web开发
前端·javascript·浏览器
即兴小索奇9 分钟前
Google AI Mode 颠覆传统搜索方式,它是有很大可能的
前端·后端·架构
大虾写代码17 分钟前
nvm和nrm的详细安装配置,从卸载nodejs到安装NVM管理nodejs版本,以及安装nrm管理npm版本
前端·npm·node.js·nvm·nrm
星哥说事18 分钟前
下一代开源 RAG 引擎,让你的 AI 检索与推理能力直接起飞
前端
....49218 分钟前
Vue3 与 AntV X6 节点传参、自动布局及边颜色控制教程
前端·javascript·vue.js
machinecat20 分钟前
Webpack模块联邦 - vue项目嵌套react项目部分功能实践
前端·webpack