在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

开启你的职业生涯

完成课程获得认证

开始学习
广告