CSS Font Color

如何在 HTML 中设置文本颜色

• 使用 `background-color` 属性在 CSS 中设置任何对象的背景颜色都很简单。
• 如果你想改变页面前景颜色怎么办？特别是文本，你通常不想为其指定背景颜色。
• 由于 CSS 缺少 `foreground-color` 属性，`color` 属性允许这样做。
• 在这篇文章中，我将向你展示如何使用 `color` 属性来更改文本的颜色。我们还将探讨它接受的不同值。
• `color` 属性有四种接受值的方式：命名颜色、RGB 颜色、十六进制颜色和 HSL 颜色。现在，让我们逐一探讨。

命名颜色

顾名思义，您通过指定所需的颜色并引入 `color` 属性来应用该值。这可以是指定的任何颜色，例如红色、绿色、蓝色、橙色、深红色、青色等。浏览器可以识别大约 147 种已识别的颜色。

基本语法如下所示

// 另一种语法

十六进制颜色（或简称为 Hex 颜色）

颜色使用十六进制值表示，这些值有六个字符。首先使用井号/数字符号（#），后跟 0 到 9 之间的任何数字，然后是 A 到 F 之间的任何字母。

红色由前两个值表示，绿色由接下来的两个值表示，蓝色由最后两个值表示。在使用十六进制值时，您的颜色色调没有任何限制。

语法

RGB 颜色

红色、绿色和蓝色统称为 RGB。通过改变红色、绿色和蓝色的量，您可以设置 RGB 坐标中的颜色。这三者的整数范围为 0 到 255。

RGB 也可以称为 RGBA。额外的“a”代表 alpha，它允许您调整颜色的不透明度。它的值介于 0.0 和 1.0 之间，其中 0.0 表示 0% 不透明度，0.5 表示 50% 不透明度，1.0 表示 100% 不透明度。

基本语法是 `rgba(redAmount, greenAmount, blueAmount, alpha)`。

如果您不想使用 alpha 值，可以将其限制为 `rgba(redAmount, greenAmount, blueAmount)`。

正常 RGB 值具有以下语法

50%（0.5）不透明度以这种方式演示 alpha 值的作用

HSL 颜色

• 色相、饱和度和亮度构成了 HSL 的缩写。它是另一种用于文本和其他对颜色敏感元素的 CSS 颜色规范方法。
• 色相是色轮的 360° 表示。因此，240° 是蓝色，120° 是绿色，0° 是红色。
• 饱和度是颜色灰度级别的百分比表示。100% 是颜色本身，而 0% 是灰度色调。
• 亮度是颜色深浅的百分比表示。100% 是白色，而 0% 是黑色。
• 您可以像处理 RGB 颜色一样调整颜色的不透明度。因此，HSLA 也是一种。

完整的基本语法是 `hsl(colorDegree, saturationPercentage, lightnessPercentage, alpha)`。如果您不需要 alpha 值，可以将其限制为 `hsl(colorDegree, saturationPercentage, lightnessPercentage)`。

语法

你可以这样给 hsl 颜色赋予特定的不透明度

在指定颜色时，您应该使用命名颜色、十六进制颜色、RGB 颜色还是 HSL 颜色？

它的一大优点是，多种方法都可以使用 CSS 完成相同的任务。这在书写颜色时得到了体现。

有四种应用颜色的方法。因此，您可能在想哪种最好。

• 在使用命名颜色时，您在应用不同颜色色调方面受到限制。
• 您无法获得红色、绿色、蓝色、黄色或其他指定颜色的更多版本。大多数浏览器仅支持约 147 种预设颜色。
• 十六进制颜色非常生动。因为您的创造力是唯一的限制，所以开发人员最常使用它们。您可以使用多种色调，甚至可以使用十六进制颜色创建前所未有的颜色。
• RGB 颜色与十六进制颜色一样动态。

结论

为文本添加颜色可以增加您网站的视觉吸引力。选择合适的配色方案也可以使您的内容更易于阅读。