在 CSS 中定义颜色的三种方法

要获取整个课程中突出显示的所有示例的源代码,请访问www.ericsdevblog.com

在上一篇文章中,我们讨论了如何选择 HTML 元素,现在是时候讨论下一步了,如何向它们应用样式。

让我们从简单的开始,您可以使用 CSS 为几乎任何元素定义颜色。例如,正如我们之前所见,您可以通过指定属性来更改文本的颜色color

p {
    color: red;
}

或者背景颜色:

p {
  background-color: darkorange;
}

color可以使用描述性词语(如reddarkorange等)自定义该属性。还有许多其他选项可用于设置该color属性。

在 CSS 中定义颜色的三种方法

然而,世界上有无数种不同的颜色,并不是所有的颜色都可以用简单的言语来描述。幸运的是,CSS 还提供了更准确的指定颜色的方法,包括 RGB、HEX 和 HSL。

RGB颜色

RGB 代表红色、绿色和蓝色。它们是计算机科学中的基本颜色,当它们混合在一起时,可以创造出世界上的每种颜色。RGB 颜色由以下函数定义:

rgb(<red>, <green>, <blue>)

参数redgreenblue定义每种颜色的强度,使用0和之间的整数值2550是最弱的,255也是最强的。例如,下面的示例与 相同color: red;

p {
    color: rgb(255, 0, 0);
}

如果将颜色混合在一起,您将能够创造出各种不同的颜色。

p {
    color: rgb(168, 189, 45);
}

我建议使用 VS Code 来帮助您找到所需的颜色,因为很难仅从数字想象得到的颜色。

在 CSS 中定义颜色的三种方法

还有一个名为 的兄弟函数rgba(),它需要一个额外的参数。

p {
    color: rgba(<red>, <green>, <blue>, <alpha>);
}

最后一个参数alpha定义元素的透明度。它接受从0到 的值10完全透明且1完全实体。

p {
    color: rgba(167, 189, 45, 0.408);
}
在 CSS 中定义颜色的三种方法

十六进制颜色

十六进制颜色用十六进制数指定,如下所示:

#rrggbb

十六进制颜色代码始终以 开头#,它本质上是公式的简写rgb()。每个变量 、rrgg接受从到 的bb十六进制值,对应于从到 的十进制数。例如:00ff0255

p {
    color: #ff0000;
}

color: rgb(255, 0, 0);此示例与和相同color: red;

同样,您可以指定一个alpha值来控制元素的透明度。

#rrggbbaa

aa00还采用从到 的值ff,这些值被重新映射为0和之间的十进制值1

p {
    color: #a7bd2d68;
}

这个例子与 相同rgba(167, 189, 45, 0.408)您可以使用此工具验证这一点。

在 CSS 中定义颜色的三种方法

HSL颜色

如果您从事设计或其他相关领域,那么您已经熟悉这种定义颜色的方法。HSL 采用三个变量:

hsl(<hue>, <saturation>, <lightness>)

hue是色轮上的度数,从0360。色轮看起来像这样:

在 CSS 中定义颜色的三种方法

请注意,该轮子没有黑色、白色或灰色。saturation这就是参数和的工作lightness

saturation是一个百分比值,从0100,它确定应向原始颜色添加多少灰色。0表示颜色完全是灰色的,100表示没有添加灰色。

在 CSS 中定义颜色的三种方法

lightness也是一个百分比值,它决定在原始颜色中添加多少黑色或白色。

在 CSS 中定义颜色的三种方法

最后,hsla()是一个类似的公式,允许您定义一个alpha值,该值控制元素的透明度。

hsla(hue, saturation, lightness, alpha)
p {
  color: hsla(69, 62%, 46%, 0.408);
}

#a7bd2d68此示例与和相同rgba(167, 189, 45, 0.408)

在 CSS 中定义颜色的三种方法

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索