原文: CSS Font Color – How to Style Text in HTML

在你正在创建的网站上设置文本颜色,一开始可能会让人困惑。但在这篇文章中,你会学到如何去设置。

如何在 HTML 中设置文本颜色

在 CSS 中,background-color 属性对于设置任何东西的背景色都是非常直接的。

那么,如果你想设置页面上某些东西的前景色,该怎么办?特别是文本,在正常情况下,你不会想为它设置背景色。

在 CSS 中没有前景色属性,所以使这成为可能的是 color 属性。

在这篇文章中,我将向你介绍如何使用 color 属性来设置文本的颜色。我们还将看看它取值的各种方式。

color 属性以 4 种不同的方式取值:命名颜色、十六进制颜色、RGB 颜色和 HSL 颜色。现在让我们来看看每一种方式。

命名的颜色

顾名思义,你使用了 color 属性,并通过命名你想要的颜色来应用这个值。这可能是红色、绿色、蓝色、橙色、深红色、青色,或任何其他命名的颜色。浏览器识别的命名颜色大约有 147 种。

基本的语法是这样的:

element {
    color: colorName
}
<p>freeCodeCamp</p>
 p {
     color: crimson;
}
named-color

十六进制颜色(或简称十六进制颜色)

十六进制值用于表示总共有 6 个字符的颜色。它们以磅/数字符号(#)开始,然后是 0 至 9 的任何数字,最后是 A 至 F 的任何字母。

前两个值代表红色,后两个代表绿色,而最后两个代表蓝色。使用十六进制值,你可以使用的颜色深浅没有限制。

<p>freeCodeCamp</p>
 p {
    color: #dc143c;
 }

RGB 颜色

RGB 是红、绿、蓝的意思。使用 RGB 颜色,你可以用你想要的红色、绿色和蓝色的量来指定颜色。所有这三种颜色都用 0 到 255 之间的数字表示。

有一种类型的 RGB 叫做 rgba。额外的 a 代表 alpha,它让你指定颜色的不透明度。它的数值从 0.0 到 1.0——0.0 表示 0% 不透明度,0.5 表示 50% 不透明度,1.0 表示 100% 不透明度。

基本语法是 rgba(amountOfRed, amountOfGreen, amountOfBlue, alpha)

如果你不想要 alpha 值,你可以把它限制为 rgba(amountOfRed, amountOfGreen, amountOfBlue)

下面是常规 RGB 值的语法:

<p>freeCodeCamp</p>
 p {
   color: rgb(220, 20, 60);
 }
rgb-color

这是 alpha 值为 50%(0.5)的效果:

p {
    color: rgb(219, 20, 60, 0.5);
}
rgb-fifty-percent-opacity

HSL 颜色

HSL 是色相、饱和度和亮度的缩写。它是在 CSS 中为文本(以及其他任何需要颜色的东西)指定颜色的另一种方式。

  • 色相 Hue 代表 360° 的色轮。所以,0° 是红色,120° 是绿色,240° 是蓝色。
  • 饱和度 Saturation 是指颜色中的灰色量,以百分比表示。0% 是灰色的阴影,100% 是颜色本身。
  • 明度 Lightness 是指颜色中的暗度和亮度,以百分比表示。0% 是黑色,100% 是白色。

就像 RGB 颜色一样,你也可以设置颜色的不透明度。所以,也有 hsla。

完整的基本语法是 hsl(colorDegree, saturationPercentage, lightnessPercentage, alpha)。如果你不想要 alpha 值,你可以把它限制为 hsl(colorDegree, saturationPercentage, lightnessPercentage)

<p>freeCodeCamp</p>
 p {
   color: hsl(348, 83%, 47%);
 }
hsl-color

你可以像这样给 hsl 颜色应用一个特定的不透明度:

 p {
   color: hsla(348, 83%, 47%, 0.5);
  }
hsl-fifty-percent-opacity-1

你应该使用命名颜色、Hex 颜色、RGB 颜色还是 HSL 颜色来设置颜色?

CSS 的奇妙之处在于,有多种方法可以做同一件事。你已经看到了这一点,在文本中应用颜色。

既然你可以用 4 种不同的方式来应用颜色,你一定想知道哪种方式是最好用的。

当你使用命名的颜色时,你在应用不同颜色的深浅方面有点受限制。红色、绿色、蓝色、黄色或任何其他命名的颜色都有很多变化,你无法使用命名的颜色。你只能使用浏览器认可的大约 147 种预定义颜色。

十六进制的颜色是非常动态的。它们是开发者中最常用的。使用十六进制颜色,你可以使用各种色调,甚至使用一种从未有人使用过的颜色。

RGB 颜色和十六进制颜色一样是动态的。除了能够指定你想要多少红色、绿色和蓝色,从 0 到 255,你还可以通过额外的 alpha 值设置你想要的颜色的透明度。

HSL 是最有活力的。你可以在色轮中从 0 到 360 度指定你想要的确切颜色,设置你想要的饱和度和暗度的百分比,还可以设置 0.0 到 1.0 的不透明度。

因此,这真的取决于你和你的使用情况——以及你想发挥多大程度的创造性。

总结

对文本应用颜色有助于使你的网站对访问者更有吸引力。正确的颜色组合也可以帮助你的内容变得更具有可读性。

在这篇文章中,你已经学会了如何用颜色属性的 4 种不同的值来给文本应用颜色。

谢谢你阅读本文,继续编码吧。