三、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>
相关推荐
zero13_小葵司6 分钟前
Vue 3 前端工程化规范
前端·javascript·vue.js
Yolanda_20226 分钟前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js
伍哥的传说9 分钟前
Vite Plugin PWA – 零配置构建现代渐进式Web应用
开发语言·前端·javascript·web app·pwa·service worker·workbox
小桥风满袖1 小时前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心1 小时前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~1 小时前
CSS3的新特性
前端·javascript·css3
IT_陈寒1 小时前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询1 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件