如何在HTML中使用CSS更改字体颜色？

最新推荐文章于 2025-02-22 22:54:23 发布

cunjiu9486

最新推荐文章于 2025-02-22 22:54:23 发布

阅读量8.7k

点赞数 6

文章标签： css html css3 js javascript ViewUI

原文链接：https://www.poftut.com/how-to-change-font-color-with-css-in-html/

版权

本文详细介绍了如何使用CSS更改HTML元素的字体颜色。内容包括使用颜色名称、十六进制和RGB数值来指定颜色，以及通过内联CSS和外部CSS文件进行设置。此外，还展示了如何一次性更改多种标签的字体颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cascading Style Sheet or CSS is used to change attributes of the HTML elements. We can change font size, color, shape, size, length, etc with CSS. In this tutorial, we will learn how to change the font color of different elements in HTML with CSS.

级联样式表或CSS用于更改HTML元素的属性。我们可以使用CSS更改字体大小，颜色，形状，大小，长度等。在本教程中，我们将学习如何使用CSS更改HTML中不同元素的字体颜色。

字体颜色语法 (Font Color Syntax)

Font color has very simple syntax where we use “ tag and color attributes with the color data in 3 different representation format name, hex number and RGB number.

字体颜色具有非常简单的语法，其中我们将“ tag”和“ color属性与颜色数据一起使用3种不同的表示格式name ， hex number和RGB number 。

<font color="color_name|hex_number|rgb_number">

使用颜色名称更改字体颜色 (Change Font Color with Color Name)

As stated previously we can specify the color with its human-friendly name like red, blue etc. This is the easiest way to describe the color. In this example, we will set the font color to the blue.

如前所述，我们可以使用人性化的名称来指定颜色，例如red ， blue等。这是描述颜色的最简单方法。在此示例中，我们将字体颜色设置为blue 。

<p><font color="red">This is some red text!</font></p>
<p><font color="blue">This is some blue text!</font></p>
<p><font color="green">This is some green text!</font></p>
<p>This is a normal text without font color</p>

用十六进制数字更改字体颜色(Change Font Color with Hex Number)

Another way to specify the font color is by using hex numbers. Colors have high precision hexadecimal numbers where the color can be precisely defined. Hexadecimal numbers provide us the ability to select very detailed colors that can not be expressed with the color name. Before providing the hexadecimal number we need to put a # in order to specify the hexadecimal number. In this example, we will use the hexadecimal values of red,blue and green.

指定字体颜色的另一种方法是使用十六进制数字。颜色具有可精确定义颜色的高精度十六进制数。十六进制数字使我们能够选择颜色名称无法表达的非常详细的颜色。在提供十六进制数之前，我们需要输入＃以指定十六进制数。在此示例中，我们将使用red ， blue和green的十六进制值。

<p><font color="#ff0000">This is some red text!</font></p>
<p><font color="#0000ff">This is some blue text!</font></p>
<p><font color="#80ff00">This is some green text!</font></p>
<p>This is a normal text without font color</p>

使用RGBA编号更改字体颜色(Change Font Color with RGBA Number)

RGB or Red, Green, Blue, Alpha is a very old coloring system that can be also used for font color specification. most of the colors consist of a mixture of main colors Red, Blue, and Green. We can express these colors with the weight of these main colors. We have to provide 4 values where we will prefix it with the RGB and surround it with parenthesis. The last alpha value is used to set opacity where 1 means opaque and 0 means transparent. We can also set floating numbers like 0.34 , 0.54, etc.

RGB或Red, Green, Blue, Alpha是一种非常古老的着色系统，也可以用于字体颜色规范。大多数颜色由红色，蓝色和绿色等主要颜色的混合组成。我们可以用这些主要颜色的重量来表达这些颜色。我们必须提供4个值，在这些值的前面加上RGB并用括号括起来。最后一个alpha值用于设置不透明度，其中1表示不透明，0表示透明。我们还可以设置浮点数，例如0.34，0.54等。

<p><font color="rgb(255, 0, 0,1)">This is some red text!</font></p>
<p><font color="rgb(0, 0, 255,1)">This is some blue text!</font></p>
<p><font color="rgb(0, 255, 0,1)">This is some green text!</font></p>
<p>This is a normal text without font color</p>

使用内联CSS更改字体颜色 (Change Font Color with Inline CSS)

CSS font colors can be set in two different ways where we can use set into the HTML tag directly or with an external CSS file. Actually, we have used inline CSS by setting an HTML CSS color attribute like below.

CSS字体颜色可以通过两种不同的方式设置，我们可以将set直接用于HTML标记中，也可以与外部CSS文件一起使用。实际上，我们通过设置如下所示HTML CSS color属性来使用内联CSS。

<p><font color="#ff0000">This is some red text!</font></p>
<p><font color="#0000ff">This is some blue text!</font></p>
<p><font color="#80ff00">This is some green text!</font></p>
<p>This is a normal text without font color</p>

使用外部CSS更改字体颜色 (Change Font Color with External CSS)

Another way is using an external CSS file where we have to specify it in the header of the HTML file. The external CSS file will contain the following CSS code which will change p or paragraph elements font color to the red.

另一种方法是使用外部CSS文件，我们必须在HTML文件的标题中指定它。外部CSS文件将包含以下CSS代码，这些代码会将p或paragraph元素的字体颜色更改为红色。

p {
   color:red;
}

We can also use the hexadecimal or RGB presentation of the colors like below.

我们还可以使用以下颜色的十六进制或RGB表示形式。

p {
 color:rgb(255, 0, 0,1);
}

a {
   color: #ff0000
}

If the external CSS file has the name mysite.css it can be imported like below with link element.

如果外部CSS文件的名称为mysite.css则可以通过以下link元素将其导入。

<link rel="stylesheet" Type="text/css" href="http://www.example.com/mysite.css">

带有CSS头部标记的ChangeFont颜色 (ChangeFont Color with CSS Inside Head Tag)

We can use <head> tag in order to specify a generic CSS code where we do not need to use an external CSS file. We will use <style> tag a put our font color changer CSS code. In this example, we will set the font color of p or paragraph tag to the blue.

我们可以使用<head>标记来指定通用CSS代码，而无需使用外部CSS文件。我们将使用<style>标记放入我们的字体颜色更改器CSS代码。在此示例中，我们将p或paragraph标签的字体颜色设置为蓝色。

<head>
   <style>
      .p {color:blue};
   </style>
</head>

更改多个标签字体颜色 (Change Multiple Tag Font Color)

If we want to change multiple types of tags font color with a single and simple CSS code we need to specify them like below. In this example, we will set the h1, h2, h3, h4 font colors to the blue with an external CSS code.

如果我们想用一个简单CSS代码更改多种类型的标签字体颜色，则需要像下面这样指定它们。在此示例中，我们将使用外部CSS代码将h1 ， h2 ， h3 ， h4字体颜色设置为blue 。

h1, h2, h3, h4, h5, h6 {
 color: blue;
}

LEARN MORE HTML Bold Tag Usage and Examples

了解更多HTML粗体标记的用法和示例

翻译自: https://www.poftut.com/how-to-change-font-color-with-css-in-html/