CSS 字体颜色

原文： 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

}

freeCodeCamp

p {

color: crimson;

}

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

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

freeCodeCamp

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 值的语法：

freeCodeCamp

p {

color: rgb(220, 20, 60);

}

这是 alpha 值为 50%（0.5）的效果：

p {

color: rgb(219, 20, 60, 0.5);

}

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)。

freeCodeCamp

p {

color: hsl(348, 83%, 47%);

}

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

p {

color: hsla(348, 83%, 47%, 0.5);

}

你应该使用命名颜色、Hex 颜色、RGB 颜色还是 HSL 颜色来设置颜色？CSS 的奇妙之处在于，有多种方法可以做同一件事。你已经看到了这一点，在文本中应用颜色。

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

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

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

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

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

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

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

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

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