如何使用CSS更改網站字體顏色

好的印刷設計是成功網站的重要組成部分。 CSS使您可以很好地控製網頁上的文本的外觀,這些網頁是您構建的網頁。 這包括能夠更改您使用的任何字體的顏色。

可以使用外部樣式表內部樣式表來更改字體顏色,也可以使用HTML文檔中的內聯樣式來更改字體顏色。 最佳做法決定您應該為您的CSS樣式使用外部樣式表。 內部樣式表是直接寫入文檔“頭部”的樣式,通常只用於小型的單頁面網站。 內聯樣式應該避免,因為它們與我們多年前處理的舊“字體”標籤類似。 這些內聯樣式使得管理字體樣式非常困難,因為您需要在內聯樣式的每個實例中更改它們。

在本文中,您將學習如何使用外部樣式表和段落標記中使用的樣式來更改字體顏色。 您可以應用相同的樣式屬性來更改圍繞文本的任何標記(包括標記)的字體顏色。

添加樣式以更改字體顏色

在這個例子中,你需要為你的頁面標記提供一個HTML文檔,並且需要一個附加到該文檔的單獨的CSS文件。 HTML文檔可能會在其中創建許多元素。 我們為本文的目的而關心的是段落元素。

以下是如何使用外部樣式表更改段落標記內文本的字體顏色。

顏色值可以表示為顏色關鍵字,RGB顏色編號或十六進制顏色編號。

  1. 添加段落標記的樣式屬性:
    1. p {}
  2. 顏色屬性放置在樣式中。 在該屬性後放置冒號:
    1. p {color:}
  3. 然後在屬性後添加你的顏色值。 確保使用分號結束該值:
    1. p {color:black;}

現在頁面中的段落會變成黑色。

此示例使用顏色關鍵字 - “黑色”。 這是在CSS中添加顏色的一種方式,但它非常有限。 使用關鍵字“黑色”和“白色”很簡單,因為這兩種顏色非常具體,但如果使用“紅色”,“藍色”或“綠色”等關鍵字會發生什麼? 你會得到什麼樣的紅色,藍色或綠色陰影? 您無法使用關鍵字準確指定您想要的顏色陰影。 這就是為什麼十六進制值經常用於代替顏色關鍵字的原因。

p {color:#000000; }

此CSS樣式也會將段落的顏色設置為黑色,因為#000000的十六進制代碼轉換為黑色。 你甚至可以用這個十六進制值的簡寫形式,並把它寫成#000,你會得到同樣的結果。

正如我們已經提到的,當你需要一種不僅僅是黑色或白色的顏色時,十六進制值可以很好地工作。 這裡是一個例子:

p {color:#2f5687; }

這個十六進制值可以將段落設置為藍色,但與關鍵字“藍色”不同,此十六進制代碼可讓您設置非常特定的藍色陰影 - 可能是設計人員在創建界面時選擇的一種顏色這個網站。 在這種情況下,顏色應該是中等的石板狀藍色。

最後,您還可以將RGBA顏色值用於字體顏色。 現在,所有現代瀏覽器都支持RGCA,因此您可以使用這些值,而不必擔心Web瀏覽器不支持這些值,但您也可以設置一個簡單的回退。

p {color:rgba(47,86,135,1); }

此RGBA值與前面指定的平板藍色顏色相同。 前3個值設置紅色,綠色和藍色值,最後一個數字為alpha設置。 它被設置為“1”,意思是“100%”,所以這種顏色將不具有透明度。 如果將其設置為一個十進制數字,例如0.85,它將轉換為85%的不透明度,並且顏色將稍微透明。

如果你想要防止你的顏色值,你可以這樣做:

p {
顏色:#2f5687;
顏色:rgba(47,86,135,1);
}

該語法首先設置十六進制代碼。 然後用RGBA數字覆蓋該值。 這意味著任何不支持RGBA的舊瀏覽器都會獲得第一個值,而忽略第二個值。 現代瀏覽器會按CSS級聯使用第二個瀏覽器。