在HTML文件中應用顏色的不同方法


一個色彩豐富的網站或應用程式比只有黑白色的網站或應用程式更具視覺吸引力。本文將介紹在HTML文字中應用顏色的每種方法。與其他HTML標籤一樣,HTML文件中沒有專門用於應用顏色的標籤。另一方面,您可以利用style屬性為特定元素新增顏色和吸引力。您可以使用<body>標籤在頁面級別指定顏色,也可以使用bgcolor屬性為單個標籤設定顏色。

<body>標籤具有以下屬性,可用於設定不同的顏色:

  • bgcolor - 設定頁面的背景顏色。

  • text - 設定正文文字的顏色。

  • alink - 設定活動連結或選定連結的顏色。

  • link - 設定連結文字的顏色。

  • vlink - 設定已訪問連結的顏色,即您已點選的連結文字的顏色。

HTML顏色編碼方法

在網頁中設定顏色共有三種不同的方法:

  • 顏色名稱 - 可以直接指定顏色名稱,例如green、blue或red。

  • 十六進位制程式碼 - 一個六位數程式碼,表示構成顏色的紅、綠、藍的量。

  • 顏色十進位制或百分比值 - 此值使用rgb( )屬性指定。

現在我們將逐一檢視這些配色方案。

HTML顏色 - 顏色名稱

您可以直接指定顏色名稱來設定文字或背景顏色。W3C列出了16種基本的顏色名稱,這些名稱將透過HTML驗證器驗證,但主流瀏覽器支援超過200種不同的顏色名稱。讓我們來看看W3C標準的16種顏色名稱列表,建議使用它們。

黑色 (Black)

灰色 (Gray)

銀色 (Silver)

青綠色 (Teal)

白色 (White)

海軍藍 (Navy)

黃色 (Yellow)

橄欖綠 (Olive)

酸橙綠 (Lime)

栗色 (Maroon)

青色 (Aqua)

紫色 (Purple)

紫紅色 (Fuchsia)

藍色 (Blue)

紅色 (Red)

綠色 (Green)

示例

以下示例演示如何使用顏色名稱設定HTML標籤的背景顏色:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Colors by Name</title>
</head>
<body text="Fuchsia" bgcolor="silver ">
   <h2>Mahendra Singh Dhoni</h2>
   <table bgcolor="green">
      <tr>
         <td>
            <font color="white">Mahendra Singh Dhoni is an Indian professional cricketer. He was captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014. Dhoni is widely considered one of the greatest cricket captains, wicket-keeper-batsman and finishers in the history of cricket.</font>
         </td>
      </tr>
   </table>
</body>
</html>

執行以上程式碼後,將生成包含應用顏色並在網頁上顯示的文字的輸出。

HTML顏色 - 十六進位制程式碼

十六進位制是顏色的6位數表示形式。前兩位數字(RR)表示紅色值,接下來的兩位是綠色值(GG),最後兩位是藍色值(BB)。十六進位制值可以從任何圖形軟體(如Adobe Photoshop、Paintshop Pro或MS Paint)中獲取。

每個十六進位制程式碼前面都會帶有一個磅號或井號(#)。以下是使用十六進位制表示法的一些顏色的列表。

  • #000000

  • #FF0000

  • #00FF00

  • #0000FF

  • #FFFF00

示例

讓我們來看下面的例子,我們將使用十六進位制顏色程式碼設定HTML標籤的背景顏色。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Colors by Hex</title>
</head>
<body text="#DE3163" bgcolor="#D5F5E3">
   <h2 style="font-family:verdana; text-align:center">TutorialsPoint</h2>
   <table bgcolor="#F7F9F9 ">
      <tr>
         <td>
            <font color="#1C2833">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</font>
         </td>
      </tr>
   </table>
</body>
</html>

執行以上程式碼後,將生成包含應用顏色並在網頁上顯示的文字的輸出。

HTML顏色 - RGB值

此顏色值使用rgb( )屬性指定。此屬性接受三個值,分別用於紅色、綠色和藍色。該值可以是0到255之間的整數或百分比。讓我們看看使用RGB值的幾種顏色。

  • rgb(0,0,0)

  • rgb(255,0,0)

  • rgb(0,255,0)

  • rgb(0,0,255)

  • rgb(255,255,0)

並非所有瀏覽器都支援rgb()顏色屬性,因此建議不要使用它。

示例

考慮以下示例,我們將使用rgb()值透過顏色程式碼設定HTML標籤的背景顏色:

<!DOCTYPE html>
<html>
<head>
   <title> HTML | <font> color Attribute </title>
   <style>
      h2 {
         font-family: verdana;
         text-align: center;
         color: rgb(222, 49, 99)
      }
      font {
         font-family: verdana;
      }
   </style>
</head>
<body>
   <h2>Virat Kohli</h2>
   <font size="5" color="rgb(128, 128, 0)"> Virat Kohli is an Indian international cricketer and the former captain of the Indian national cricket team. Widely regarded as one of the greatest batsmen in the history of the sport, he plays for Royal Challengers Bangalore in the IPL and Delhi in domestic cricket. </font>
</body>
</html>

執行以上程式碼後,將生成包含使用rgb()屬性著色的文字的輸出,並在網頁上顯示。

更新於:2024年1月22日

瀏覽量:184

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告