HTML 字体颜色

2025年3月25日 | 阅读 7 分钟

借助一些 HTML 工具，我们可以设计和样式化我们的网页内容。文本格式化是网页设计的一种方式。借助 HTML，我们可以为网页内容中的文本提供不同的外观。因此，字体颜色是改变文本外观的最重要方法之一。使用字体颜色的基本语法如下。

语法

<element style="color: color_value;">
  Text content goes here
</element> 

在上面的代码中

<element> 标签代表所有 HTML 元素，例如 <h1>、<p> 或 <span>。
style="color: color_value;" 是 CSS 的内联属性，我们可以使用它为网页内容的文本提供字体颜色。我们可以使用颜色名称、十六进制颜色代码、RGB 值或 HSL 值来表示颜色。

让我们来讨论所有可用的字体颜色属性方法。

使用颜色名称

在 HTML 中，我们可以使用颜色名称为字体颜色定义颜色属性。此属性非常容易记住名称。以下是一些示例。

<p style="color: red;">This text is red.</p>
<p style="color: blue;">This text is blue.</p>
<p style="color: green;">This text is green.</p>

让我们通过一个程序来详细讨论颜色属性。

示例 1

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Wider Rainbow with Different Shapes</title>
 <style>
  .rainbow {
   width: 400px; /* Increased container width */
   height: 80px; /* Increased container height */
   position: relative;
   overflow: hidden;
  }

  .rainbow div {
   height: 100%;
   position: absolute;
  }

  .red { background-color: red; border-radius: 50% 50% 0 0; }
  .orange { background-color: orange; }
  .yellow { background-color: yellow; }
  .green { background-color: green; }
  .blue { background-color: blue; }
  .indigo { background-color: indigo; }
  .violet { background-color: violet; border-radius: 0 0 50% 50%; }
 </style>
</head>
<body>
 <div class="rainbow">
  <div class="red" style="width: 100%;"></div>
  <div class="orange" style="width: 85%;"></div>
  <div class="yellow" style="width: 70%;"></div>
  <div class="green" style="width: 55%;"></div>
  <div class="blue" style="width: 40%;"></div>
  <div class="indigo" style="width: 25%;"></div>
  <div class="violet" style="width: 10%;"></div>
 </div>
</body>
</html>

输出

说明

在上面的代码中，我们创建了七个具有不同背景颜色的 div 元素，使用了颜色名称（红色、橙色、黄色、绿色、蓝色、靛蓝色和紫色）。我们使用 `border-radius` 属性使 div 元素呈圆形，并赋予它们彩虹般的外观。`display: inline-block` 样式确保彩虹色水平显示在一起。

十六进制颜色代码

使用十六进制值提供字体颜色在开发者中非常流行。每个十六进制颜色将用 `#` 值和六位十六进制代码表示。十六进制代码提供了大量的颜色集合。以下是一些示例。

<p style="color: #FF5733;">This text is a shade of orange.</p>
<p style="color: #3498DB;">This text is a shade of blue.</p>
<p style="color: #27AE60;">This text is a shade of green.</p>

示例 2

让我们通过一个程序来详细讨论颜色属性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body {
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  h1 {
    font-size: 3rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
</style>
</head>
<body>
 <h1>Welcome to the tpointtech!</h1>
</body>
</html>

输出

说明

在上面的代码中，我们为 `body` 元素设置了 `linear-gradient` 属性作为背景。`to-right` 方向指定渐变从左到右，创建水平彩虹效果。我们为每种彩虹色（红色、橙色、黄色、绿色、蓝色、靛蓝色和紫色）指定了七个十六进制颜色代码。

RGB 和 RGBA 值

我们还可以使用 RGB 和 RGBA 值来设置颜色属性。我们可以使用 RGB（红、绿、蓝）值或 RGBA（红、绿、蓝、Alpha）值来实现透明度。RGB 包含三个整数，分别表示红色、绿色和蓝色在 0 到 255 范围内的强度。同样，RGBA 值包含类似的整数，但增加了 Alpha 值，它控制颜色的不透明度（0 表示完全透明，1 表示完全不透明）。以下是一些示例。

<p style="color: rgb(255, 0, 0);">This text is red.</p>
<p style="color: rgba(0, 128, 255, 0.5);">This text is semi-transparent blue.</p>

示例 3

这是 RGB 颜色实现的示例。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .colored-box {
    width: 200px;
    height: 200px;
    background-color: rgb(255, 0, 0); /* Red color using RGB values */
  }
</style>
</head>
<body>
 <div class="colored-box"></div>
 
</body>
</html>

输出

说明

在上面的代码中，我们创建了一个带有 `colored-box` 类的 HTML `

` 元素。然后，在 CSS 中，我们定义了 `.colored-box` 类并使用 `background-color` 属性将背景颜色设置为红色，使用了 RGB 值。RGB 值 `rgb(255, 0, 0)` 代表红色，其中红色强度最大 (255)，绿色为 0，蓝色为 0。在输出中，我们得到一个 200x200 像素的带有红色背景的方形。

示例 4

这是 RGBA 颜色实现的示例。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .semi-transparent-box {
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 255, 0.5); /* Blue color with 50% transparency */
  }
</style>
</head>
<body>
 <div class="semi-transparent-box"></div>
 
</body>
</html>

输出

说明

在上面的代码中，我们有一个带有 `semi-transparent-box` 类的 HTML `

` 元素。然后，我们定义了 `.semi-transparent-box` 类并使用 `background-color` 属性将背景颜色设置为蓝色，使用了 `rgba(0, 0, 255, 0.5)`。其中，RGBA 值 `rgba(0, 0, 255, 0.5)` 代表蓝色，红色和蓝色通道强度为最大 (255)，绿色为 0，透明度为 50% (0.5)。

HSL 和 HSLA 值

它提供了在我们的网页上设置字体颜色的不同方法。HSL 代表颜色本身，饱和度控制强度，亮度控制明暗度。HSLA 值包含额外的 Alpha 值用于透明度。以下是一些示例。

<p style="color: hsl(0, 100%, 50%);">This text is red.</p>
<p style="color: hsla(210, 100%, 50%, 0.5);">This text is semi-transparent blue.</p>

示例 5

这是 HSL 颜色实现的示例。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .hsl-box {
    width: 200px;
    height: 200px;
    background-color: hsl(120, 100%, 50%); /* Green color using HSL values */
  }
</style>
</head>
<body>
 <div class="hsl-box"></div>
 
</body>
</html>

输出

说明

在上面的代码中，我们有一个带有 `hsl-box` 类的 HTML `

` 元素。然后，我们定义了 `.hsl-box` 类并使用 `background-color` 属性将背景颜色设置为绿色，使用了 `hsl(120, 100%, 50%)`。在 HSL 值中，第一个值（在此示例中为 120）代表色相，它决定颜色的类型（例如，0 为红色，120 为绿色，240 为蓝色）。第二个值（在此示例中为 100%）代表饱和度，它控制颜色的强度或鲜艳度（100% 为完全饱和，0% 为灰度）。第三个值（在此示例中为 50%）代表亮度，它控制颜色的深浅（0% 为黑色，100% 为白色）。

示例 6

这是 HSLA 颜色实现的示例。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style> after 
  .hsla-box {
    width: 200px;
    height: 200px;
    background-color: hsla(210, 100%, 50%, 0.5); /* Semi-transparent blue color using HSLA values */
  }
</style>
</head>
<body>
 <div class="hsla-box"></div>
 
</body>
</html>

输出

说明

在上面的代码中，我们有一个带有 `hsla-box` 类的 HTML `

` 元素。然后，我们定义了 `.hsla-box` 类并使用 `background-color` 属性将背景颜色设置为半透明的蓝色，使用了 `hsla(210, 100%, 50%, 0.5)`。`hsla` 函数接受四个值。第一个值（在此示例中为 210）代表色相，决定颜色的类型。第二个值（在此示例中为 100%）代表饱和度，控制颜色的强度。第三个值（在此示例中为 50%）代表亮度，控制颜色的明暗度。第四个值（在此示例中为 0.5）代表 Alpha 通道，控制颜色的透明度。它的范围从 0（完全透明）到 1（完全不透明）。

将字体颜色与其他样式结合使用

为了达到引人注目的样式，我们需要结合所有其他样式属性。例如，我们可以更改字体大小、字体系列并添加各种 CSS 属性，以在您的网页上创建精美的排版。

以下是一些示例，

<h1 style="color: #FF5733; font-size: 36px; font-family: 'Arial', sans-serif; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">Welcome to tpointtech</h1>

示例 7

这是将字体颜色与其他样式结合使用的实现示例。

代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   h1 {
     color: #ff5733; /* Hexadecimal color code for a reddish-orange color */
     font-size: 36px;
     font-weight: bold;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }
 </style>
 </head>
 <body>
  <h1>Welcome to tpointtech</h1>
  
 </body>
 </html>

输出

说明

在上面的代码中，我们有一个带有文本“Welcome to tpointtech.”的 HTML `

` 元素。然后，我们使用 `color` 属性将字体颜色设置为一种红橙色，十六进制代码为 `#ff5733`。我们还设置了 `font-size` 属性使文本更大（36px），`font-weight` 使文本加粗，并使用 `text-shadow` 添加细微的文本阴影以提高可读性。
下一主题HTML 字体大小

← 上一篇 下一篇 →

HTML 字体颜色

语法

使用颜色名称

示例 1

十六进制颜色代码

示例 2

RGB 和 RGBA 值

示例 3

示例 4

HSL 和 HSLA 值

示例 5

示例 6

将字体颜色与其他样式结合使用

示例 7

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 字体颜色

语法

使用颜色名称

示例 1

十六进制颜色代码

示例 2

RGB 和 RGBA 值

示例 3

示例 4

HSL 和 HSLA 值

示例 5

示例 6

将字体颜色与其他样式结合使用

示例 7

相关帖子

HTML class 属性

Web3 堆栈 - 为什么 Web3 比 Web2 有更好的用户体验

HTML 图标

如何创建 Discord 机器人

HTML 页眉图片

如何在 HTML 中插入图片

HTML 弹出窗口

如何在 HTML 中更改字体大小

HTML 超链接标签

HTML 搜索框

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器