建站
咨詢
售后
建站咨詢
新聞中心
在定制您的網(wǎng)站時，字體顏色經(jīng)常被忽視。在大多數(shù)情況下，網(wǎng)站所有者會保留默認(rèn)字體顏色，如黑色或他們?yōu)檎暮蜆?biāo)題文本顏色定義的任何主題樣式。
但是，出于多種原因，可能需要更改網(wǎng)站上的HTML字體顏色。更改HTML字體顏色可能看起來令人生畏，但它非常簡單。有多種方法可以更改您網(wǎng)站上的字體顏色。
在這篇文章中，我們將向您展示更改網(wǎng)站字體顏色的不同方法，并首先討論您為什么要這樣做。
為什么要更改HTML字體顏色？
您可能希望更改字體顏色，因為這樣做有助于提高您網(wǎng)站的可讀性和可訪問性。例如，如果您的網(wǎng)站使用較深的配色方案，將字體顏色保留為黑色會使您網(wǎng)站上的文本難以閱讀。
您要考慮更改字體顏色的另一個原因是，如果您要使用品牌調(diào)色板中的較深顏色。這是強化品牌的又一個機會。它建立了品牌一致性并確保您所有營銷渠道中的文本看起來都相同。
順便說一下，讓我們看看如何定義和更改HTML字體顏色。
定義顏色的方法
在網(wǎng)頁設(shè)計中有多種定義顏色的方法，包括名稱、RGB 值、十六進(jìn)制代碼和HSL值。讓我們來看看它們是如何工作的。
顏色名稱
顏色名稱是在CSS樣式中定義顏色的最簡單方法。顏色名稱是指HTML顏色的特定名稱。目前，支持140種顏色名稱，您可以在樣式中使用這些顏色中的任何一種。例如，您可以使用“blue”將單個元素的顏色設(shè)置為藍(lán)色。
HTML顏色名稱
但是，這種方法的缺點是并非所有顏色名稱都受支持。換句話說，如果您使用的顏色不在支持的顏色列表中，您將無法通過顏色名稱在您的設(shè)計中使用它。
RGB和RGBA值
接下來，我們有RGB和RGBA值。RGB代表紅色、綠色和藍(lán)色。它通過混合紅色、綠色和藍(lán)色值來定義顏色，類似于在實際調(diào)色板上混合顏色的方式。
RGB值
RGB值如下所示：RGB(153,0,255)。第一個數(shù)字指定紅色輸入，第二個指定綠色輸入，第三個指定藍(lán)色。
每種顏色輸入的值范圍在0到255之間，其中0表示根本不存在顏色，而255表示特定顏色處于其最大強度。
RGBA值在混合中再增加一個值，即表示不透明度的alpha值。它的范圍從0（不透明）到1（完全透明）。
十六進(jìn)制值
HEX代碼是另一個易于使用的顏色選擇選項。
十六進(jìn)制顏色代碼的工作方式類似于RGB代碼。它們由0到9的數(shù)字和A到F的字母組成。十六進(jìn)制代碼如下所示：#800080。前兩個字母指定紅色的強度，中間的兩個數(shù)字指定綠色的強度，最后兩個數(shù)字設(shè)置藍(lán)色的強度。
HSL和HSLA值
在HTML中定義顏色的另一種方法是使用HSL值。HSL代表色調(diào)、飽和度和亮度。
HSL顏色值
色調(diào)使用從0到360的度數(shù)。在標(biāo)準(zhǔn)色輪上，紅色約為0/360，綠色約為120，藍(lán)色約為240。
飽和度使用百分比來定義顏色的飽和度。0代表黑白，100代表全彩。
最后，亮度使用與飽和度類似的百分比。在這種情況下，0%代表黑色，100%代表白色。
例如，我們一直在使用整個本文紫色看起來像這樣在HSL： hsl(276, 100%, 50%)。
HSL與RGB一樣，支持不透明度。在這種情況下，你會使用其中A代表字母和一個數(shù)字定義為從0到1，如果我們想降低例如紫色的不透明度值HSLA，我們會使用此代碼：hsl(276, 100%, 50%, .85)。
既然您知道如何定義顏色，讓我們看看更改HTML字體顏色的不同方法。
舊的：
在HTML5被引入并設(shè)置為編碼標(biāo)準(zhǔn)之前，您可以使用字體標(biāo)簽更改字體顏色。更具體地說，您將使用帶有顏色屬性的字體標(biāo)記來設(shè)置文本顏色。color要么用其名稱或與它的十六進(jìn)制代碼指定。
這是此代碼如何使用十六進(jìn)制顏色代碼的示例：
This text is purple.
這就是如何使用顏色名稱將文本顏色設(shè)置為紫色。
This text is purple.
但是，標(biāo)簽在HTML5中已棄用，不再使用。改變字體顏色是一個設(shè)計決定，設(shè)計不是HTML的主要目的。因此，HTML5不再支持這些標(biāo)簽是有道理的。
那么如果不再支持 標(biāo)簽，你如何更改HTML字體顏色？答案是使用CSS層疊樣式表。
新的：CSS樣式
要使用CSS更改HTML字體顏色，您將使用與相應(yīng)選擇器配對的CSS顏色屬性。CSS允許您使用顏色名稱、RGB、十六進(jìn)制和HSL值來指定顏色?？梢酝ㄟ^三種方式使用CSS更改字體顏色。
內(nèi)聯(lián)CSS
內(nèi)聯(lián)CSS直接添加到您的HTML文件中。您將使用諸如
之類的HTML標(biāo)記，然后使用CSS顏色屬性對其進(jìn)行樣式設(shè)置，如下所示：
This is a purple paragraph.
如果您想使用十六進(jìn)制值，您的代碼將如下所示：
This is a purple paragraph.
如果你打算使用RGB值，你會這樣寫：
This is a purple paragraph.
最后，使用HSL值，您將使用以下代碼：
This is a purple paragraph.
上面的示例向您展示了如何更改網(wǎng)站上段落的顏色。但是您不僅限于段落。您可以更改標(biāo)題和鏈接的字體顏色。
例如，將上面的標(biāo)簽替換為將更改該標(biāo)題文本的顏色，而將其替換為標(biāo)簽將更改該鏈接的顏色。您還可以使用元素為任意數(shù)量的文本著色。
如果要更改整個段落或標(biāo)題的背景顏色，這與更改字體顏色的方式非常相似。您必須改用該background-color屬性并使用顏色名稱、十六進(jìn)制、RGB或HSL值來設(shè)置顏色。下面是一個例子：
嵌入式 CSS
嵌入式CSS位于 上面的代碼會將頁面上每個段落的顏色更改為紫色。與內(nèi)聯(lián)CSS方法類似，您可以使用不同的選擇器來更改標(biāo)題和鏈接的字體顏色。 如果要使用十六進(jìn)制代碼，代碼如下所示： 下面的示例使用RBGA值，因此您可以看到設(shè)置不透明度的示例： HSL代碼如下所示： 最后，您可以使用外部CSS更改網(wǎng)站上的字體顏色。外部CSS是放置在單獨的樣式表文件中的CSS，通常稱為style.css或stylesheet.css。 此樣式表負(fù)責(zé)您網(wǎng)站上的所有樣式，并指定字體顏色和字體大小、邊距、填充、字體系列、背景顏色等。簡而言之，樣式表負(fù)責(zé)您的網(wǎng)站在視覺上的外觀。 要使用外部CSS更改字體顏色，您需要使用選擇器來設(shè)置您想要的HTML部分的樣式。例如，此代碼將更改您網(wǎng)站上的所有正文： 請記住，您可以使用RGB、十六進(jìn)制和HSL值而不僅僅是顏色名稱來更改字體顏色。如果要編輯樣式表，建議在代碼編輯器中進(jìn)行。 所以現(xiàn)在您知道如何使用CSS來更改字體顏色了。但是您應(yīng)該使用哪種方法？ 如果您使用內(nèi)聯(lián)CSS代碼，您將直接將其添加到您的HTML文件中。一般來說，這種方法適用于快速修復(fù)。如果您想更改單個頁面上特定段落或標(biāo)題的顏色，此方法是最快且最簡單的方法。 但是，內(nèi)聯(lián)樣式會使HTML文件的大小變大。HTML文件越大，加載網(wǎng)頁所需的時間就越長。除此之外，內(nèi)聯(lián)CSS會使您的HTML變得混亂。因此，通常不鼓勵使用CSS更改HTML字體顏色的內(nèi)聯(lián)方法。 嵌入式CSS位于
外部CSS
body {color: purple;}
內(nèi)聯(lián)、嵌入式還是外部？