html網(wǎng)頁(yè)顏色字體設(shè)置？

時(shí)間：2024-02-12 10:15:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-12 10:15:01 來源：網(wǎng)站運(yùn)營(yíng)

html網(wǎng)頁(yè)顏色字體設(shè)置？：在您正在構(gòu)建的網(wǎng)站上設(shè)置文本顏色起初可能會(huì)令人困惑。但在本文中，您將學(xué)習(xí)如何做到這一點(diǎn)。

如何在 HTML 中設(shè)置文本顏色

在CSS中，該屬性對(duì)于設(shè)置任何內(nèi)容的背景顏色都非常簡(jiǎn)單。 background-color

那么，如果您想設(shè)置頁(yè)面上某些內(nèi)容的前景顏色，該怎么辦？尤其是文本，在正常情況下，您不希望為其設(shè)置背景色。

CSS中沒有屬性，因此使這成為可能的是屬性。 foreground-color color

在本文中，我將引導(dǎo)您完成如何使用 color 屬性設(shè)置文本的顏色。我們還將介紹它采用值的各種方式。

color 屬性以 4 種不同的方式獲取值：命名顏色、十六進(jìn)制顏色、RGB 顏色和 HSL 顏色?，F(xiàn)在讓我們看一下每一個(gè)。

命名顏色

顧名思義，您可以引入 color 屬性，并通過命名所需的顏色來應(yīng)用值。這可能是紅色，綠色，藍(lán)色，橙色，深紅色，青色或任何其他命名的顏色。瀏覽器識(shí)別出大約147種命名顏色。

基本語法如下所示：

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

十六進(jìn)制顏色（或只是十六進(jìn)制顏色）

十六進(jìn)制值用于表示總共包含 6 個(gè)字符的顏色。它們以磅/數(shù)字符號(hào)（#）開頭，然后是0到9的任何數(shù)字，最后是從A到F的任何字母。

前 2 個(gè)值代表紅色，接下來的兩個(gè)值代表綠色，最后 2 個(gè)值代表藍(lán)色。使用十六進(jìn)制值時(shí)，可以使用的顏色陰影沒有限制。

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

顏色

RGB 代表紅色、綠色和藍(lán)色。使用RGB colosr，您可以根據(jù)所需的紅色，綠色和藍(lán)色來指定顏色。所有三者都用0到255之間的數(shù)字表示。

有一種名為 的 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)

以下是常規(guī) RGB 值的語法：

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





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

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

HSL 顏色

HSL 代表色調(diào)、飽和度和亮度。這是在 CSS 中為文本（以及任何其他采用顏色的內(nèi)容）指定顏色的另一種方法。

• 色相以 360° 表示色輪。因此，0° 為紅色，120° 為綠色，240° 為藍(lán)色。
• 飽和度是顏色中灰色的量，以百分比表示。0%是灰色的陰影，100%是顏色本身。
• 亮度是顏色中以百分比表示的暗度和亮度。0% 為黑色，100% 為白色。

就像 RGB 顏色一樣，您也可以設(shè)置顏色的不透明度。所以，還有hsla。

完整的基本語法是 。您可以將其限制為不需要 alpha 值的情況。 hsl(colorDegree, saturationPercentage, lightnessPercentage, alpha) hsl(colorDegree, saturationPercentage, lightnessPercentage)

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





您可以對(duì) hsl 顏色應(yīng)用特定的不透明度，如下所示：

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

是否應(yīng)使用命名顏色、十六進(jìn)制顏色、RGB 顏色或 HSL 顏色來指定顏色？

關(guān)于CSS的一個(gè)奇妙的事情是，有多種方法可以做同樣的事情。您已經(jīng)通過對(duì)文本應(yīng)用顏色來了解這一點(diǎn)。

由于您可以通過4種不同的方式應(yīng)用顏色，因此您一定想知道哪種顏色最適合使用。

當(dāng)你使用命名顏色時(shí)，你在應(yīng)用不同顏色深淺方面可以走多遠(yuǎn)是有限的。紅色，綠色，藍(lán)色，黃色或任何其他命名顏色都有很多變體，您無法使用命名顏色訪問。您只能訪問瀏覽器識(shí)別的大約147種預(yù)定義顏色。

十六進(jìn)制顏色非常動(dòng)態(tài)。它們是開發(fā)人員中最常用的，因?yàn)槟愕臉O限是你的創(chuàng)造力。使用十六進(jìn)制顏色，您可以使用各種色調(diào)，甚至可以使用從未有人使用過的顏色。

RGB 顏色與十六進(jìn)制顏色一樣動(dòng)態(tài)。除了能夠指定從 0 到 255 所需的紅色、綠色和藍(lán)色量之外，您還可以使用額外的 alpha 值設(shè)置顏色的透明度。

HSL是最具活力的。您可以在色輪中指定所需的確切顏色（以度為單位，從 0 到 360），以百分比設(shè)置所需的飽和度和暗度，還可以將不透明度設(shè)置為 0.0 到 1.0。

所以實(shí)際上，這取決于你和你的用例 - 以及你想要獲得的創(chuàng)意或具體程度。

結(jié)論

將顏色應(yīng)用于文本有助于使您的網(wǎng)站對(duì)訪問者更具吸引力。正確的顏色組合也可以幫助你的內(nèi)容變得更有可讀性。

在本文中，您已經(jīng)學(xué)習(xí)了如何使用 4 種不同類型的值將顏色應(yīng)用于文本，這些值可用于 color 屬性。

感謝您的閱讀，并繼續(xù)編碼。