CSS文字颜色

在这一快速教程中，我们将为您展示如何使用CSS和HTML 标签、ID或类（Class）为任何HTML文字元素设置颜色。如果您对CSS样式还不熟悉，可查看我们关于CSS颜色入门的教程，请看这里。

CSS文字颜色使用HTML标签

首先，让我们来设计一些基础文字。在这一示例中我们会使用<h1>标签，但您可以使用CSS对任何文字元素进行设计。以下是我们的示例HTML文件，一个非常简单的页面，只包括一个标题和一个比较短的小节。 

HTML

<head>
</head>
<body>
  <h1>Title</h1>
  <p>Some paragraph text.</p>
</body>

我们来将<h1>元素设为红色。我们将在HTML文件的<head>添加一个<h1>元素的CSS样式，将颜色从默认的黑色改为红色。 

HTML

<head>
  <style>
    h1 { color: #FF0000; }
  </style>
</head>
<body>
  <h1>Title</h1>
  <p>Some paragraph text.</p>
</body>
演示的CodePen

CSS文字颜色使用ID

另一种设计<h1>元素的方式是赋予它一个ID；在这个示例中，我们将使用'heading'这个ID。ID能够使用CSS进行设计，方法与HTML标签相同，但是以'#'符号为前缀。 

HTML

<head>
  <style>
    #heading { color: #FF0000; }
  </style>
</head>
<body>
  <h1 id="heading">Title</h1>
  <p>Some paragraph text.</p>
</body>
演示的CodePen

CSS文字颜色使用类（Class）

为HTML元素添加颜色的第三种方法是使用类（Class）― 与ID非常相似，除了它们的前缀是一个点'.'而不是'#'。这里我们对<h1>元素采用相同的CSS颜色，但使用名为'heading'的类。 

HTML

<head>
  <style>
    .heading { color: #FF0000; }
  </style>
</head>
<body>
  <h1 class="heading">Title</h1>
  <p>Some paragraph text.</p>
</body>
演示的CodePen