html网页颜色字体设置？

时间：2024-02-12 10:15:01 | 来源：网站运营

时间：2024-02-12 10:15:01 来源：网站运营

html网页颜色字体设置？：在您正在构建的网站上设置文本颜色起初可能会令人困惑。但在本文中，您将学习如何做到这一点。

如何在 HTML 中设置文本颜色

在CSS中，该属性对于设置任何内容的背景颜色都非常简单。 background-color

那么，如果您想设置页面上某些内容的前景颜色，该怎么办？尤其是文本，在正常情况下，您不希望为其设置背景色。

CSS中没有属性，因此使这成为可能的是属性。 foreground-color color

在本文中，我将引导您完成如何使用 color 属性设置文本的颜色。我们还将介绍它采用值的各种方式。

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

命名颜色

顾名思义，您可以引入 color 属性，并通过命名所需的颜色来应用值。这可能是红色，绿色，蓝色，橙色，深红色，青色或任何其他命名的颜色。浏览器识别出大约147种命名颜色。

基本语法如下所示：

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

十六进制颜色（或只是十六进制颜色）

十六进制值用于表示总共包含 6 个字符的颜色。它们以磅/数字符号（#）开头，然后是0到9的任何数字，最后是从A到F的任何字母。

前 2 个值代表红色，接下来的两个值代表绿色，最后 2 个值代表蓝色。使用十六进制值时，可以使用的颜色阴影没有限制。

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

颜色

RGB 代表红色、绿色和蓝色。使用RGB colosr，您可以根据所需的红色，绿色和蓝色来指定颜色。所有三者都用0到255之间的数字表示。

有一种名为 的 RGB 类型。额外的“a”代表 alpha，它允许您指定颜色的不透明度。它采用从 0.0 到 1.0 的值 – 0.0 表示 0% 不透明度，0.5 表示 50% 不透明度，1.0 表示 100% 不透明度。 rgba

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

如果您不想要 Alpha 值，则可以将其限制为。 rgba(amountOfRed, amountOfGreen, amountOfBlue)

以下是常规 RGB 值的语法：

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





在这里，它展示了具有50%（0.5）不透明度的alpha值：

p { color: rgb(219, 20, 60, 0.5);}

HSL 颜色

HSL 代表色调、饱和度和亮度。这是在 CSS 中为文本（以及任何其他采用颜色的内容）指定颜色的另一种方法。

• 色相以 360° 表示色轮。因此，0° 为红色，120° 为绿色，240° 为蓝色。
• 饱和度是颜色中灰色的量，以百分比表示。0%是灰色的阴影，100%是颜色本身。
• 亮度是颜色中以百分比表示的暗度和亮度。0% 为黑色，100% 为白色。

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

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

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





您可以对 hsl 颜色应用特定的不透明度，如下所示：

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

是否应使用命名颜色、十六进制颜色、RGB 颜色或 HSL 颜色来指定颜色？

关于CSS的一个奇妙的事情是，有多种方法可以做同样的事情。您已经通过对文本应用颜色来了解这一点。

由于您可以通过4种不同的方式应用颜色，因此您一定想知道哪种颜色最适合使用。

当你使用命名颜色时，你在应用不同颜色深浅方面可以走多远是有限的。红色，绿色，蓝色，黄色或任何其他命名颜色都有很多变体，您无法使用命名颜色访问。您只能访问浏览器识别的大约147种预定义颜色。

十六进制颜色非常动态。它们是开发人员中最常用的，因为你的极限是你的创造力。使用十六进制颜色，您可以使用各种色调，甚至可以使用从未有人使用过的颜色。

RGB 颜色与十六进制颜色一样动态。除了能够指定从 0 到 255 所需的红色、绿色和蓝色量之外，您还可以使用额外的 alpha 值设置颜色的透明度。

HSL是最具活力的。您可以在色轮中指定所需的确切颜色（以度为单位，从 0 到 360），以百分比设置所需的饱和度和暗度，还可以将不透明度设置为 0.0 到 1.0。

所以实际上，这取决于你和你的用例 - 以及你想要获得的创意或具体程度。

结论

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

在本文中，您已经学习了如何使用 4 种不同类型的值将颜色应用于文本，这些值可用于 color 属性。

感谢您的阅读，并继续编码。