首页 前端知识 【CSS颜色指南】:看完这一篇就明白CSS常见颜色表示方法

【CSS颜色指南】:看完这一篇就明白CSS常见颜色表示方法

2024-05-27 10:05:09 前端知识 前端哥 133 874 我要收藏
大家好,我是翼同学!

目录

  • 1️⃣前言
  • 2️⃣颜色体系
    • ✨颜色名称
    • 📓颜色值
      • 📙HEX值
      • 📘RBG值
      • 📗HSL值
    • 💡关键字
      • 🎐transparent
      • 🪄currentColor
  • 3️⃣写在最后

1️⃣前言

今日笔记内容是:

  • CSS中的颜色体系

在HTML文档中,有好多地方可以通过CSS来设置颜色属性美化样式,常见的有文本的颜色color、元素的背景色background-color、元素的边框border-color、元素的阴影颜色等。而在CSS中,颜色的表示方法也有很多,下面就来看看具体的颜色指南。


2️⃣颜色体系

在CSS中有多种颜色表示方法,思维导图如下:

✨颜色名称

  • CSS支持 140 种被预定义过色值的标准颜色名称
  • 比如:redbluegreen
  • 这些颜色名称是不区分大小写的
  • 举例如下:


📓颜色值

颜色值有三种表示方式:

  • HEX值
  • RGB值
  • HSL值

现在举例如下:

📙HEX值

  • HEX值的特定格式来表示颜色值是颜色定义中最常见的方法了
  • HEX值由符号#和十六进制组合而成,其表示形式为:#RRGGBB,比如##fafa44
  • 其中,R表示红色G表示绿色B表示蓝色,其值介于00~ff之间,用于指定颜色的强度
  • 注意,当#RRGGBB满足两个R、两个G和两个B同时相等时,可以简写为#RGB,比如#aabbcc可以简写为#abc

如下所示:

📘RBG值

  • 在CSS中,也可以通过RGB值来指定颜色。
  • 其中RGB分别表示红绿蓝,书写格式为:rgb(0, 0, 0),括号里用三个数值分别表示种颜色的强度,并且数值的范围是:0~255

RBG值举例如下:

  • 另外,有一个知识点是透明度。也就是可以为RGB值添加alpha值用于定义透明度
  • 具体做法为,在rgb(0, 0, 0)添加第四个值,范围是0~1
  • 其中0是最小值,表示完全透明,1是最大值,表示不透明
  • 现举例如下:


📗HSL值

  • 在CSS中,可以使用HSL值来表示颜色值
  • 这个颜色表示与前两种不怎么像。
  • HSL值分别表示色调、饱和度和亮度

具体解释如下:

一、色调(hue)

色调是色轮的度数,其值的范围是0360,其中0表示红色,120表示绿色,240表示蓝色。

具体如下所示:

在这里插入图片描述

二、饱和度(saturation)

饱和度,表示色彩的纯度。饱和值越高,色彩越纯,越低则色彩越灰。并且注意到,饱和值是用百分号来表示,0%表示灰色阴影,100%表示全色。

示意图如下:

三、亮度(lightness)

亮度也可以称明亮度。值越高越亮,也就越接近白色。值越小就越暗,越接近黑色。

跟饱和度一样,亮度值也是用百分比来表示。其中0%是黑色,50%表示不明不暗,100%是白色。

举个例子:

和RGB值一样,HSL值也可以添加alpha值来指定颜色的不透明度。其语法为:hsla(0, 0, 0, 0.0),最后一个值表示alpha,取值范围也是0.01.0

效果如下所示:


💡关键字

在CSS中,关于颜色表示的还有两个关键字:transparentcurrentColor。具体用法看下面:

🎐transparent

  • transparent,意为透明,用于表示完全透明的颜色。
  • transparent就是全透明黑色rgba(0,0,0,0))的速记方法
  • 需要注意的是,在 CSS3 之前,transparent 关键字不是一个真实的颜色。而在支持 CSS3 的浏览器中,它被重新定义为一个真实的颜色,也就是说,transparent被延伸到任何一个有color值的属性上。

举个例子:

div { background-color: transparent;}

🪄currentColor

在CSS3中,扩展了currentColor关键字,用于所有接收颜色的属性上,表示元素当前颜色。

如何来理解这个关键字呢?

来看一个例子:

div{
    color: red;
    border:1px solid;
}

如果你一看就知道上述代码的运行效果,那就能轻松理解currentColor关键字的作用。

具体的,当我们指定<div>标签中color属性为红色时,即使不给盒子边框设置颜色值(border:1px solid;),其默认颜色值也会是color属性的值,也就是红色。另外,如果我们去掉上述代码中的color属性的定义,边框会变成什么颜色?此时边框的颜色取决于父元素的颜色值,也就是说color值具有继承性。

因此,总结的说,currentColor关键字用于接受颜色的属性上,其作用是:使用当前color属性值的计算值,如果当前未设置color值,则会继承父元素的color值


3️⃣写在最后

好了,今天的笔记就写到这里。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9684.html
标签
记录
评论
会员中心 联系我 留言建议 回顶部
复制成功!