跳到主要内容位置

CSS 设置字体颜色

在网页设计中，会经常使用不同颜色的字体，来把内容进行区分显示，在浅色主题中，对于主要的文字使用较深颜色，对于次要的文字使用较浅的颜色，例如在一个聊天信息面板中，用户名使用深色字体，信息发送时间使用浅色字体。

color​

在 CSS 中，改变字体的颜色使用 color 属性，这个属性名比较有争议，单单只有一个 color，会让人误解它是设置背景色或者其它任意颜色的，实际上 color 仅仅是设置字体的颜色。例如下方代码，把文字设置成了蓝色： 

<style>
  p {
    color: blue;
  }
</style>
<p>这是一段蓝色的文字</p>

预览：

颜色表示​

在 color 属性中，我们使用了符合人类语言的 blue 属性值，代表蓝色，CSS 中内置了大量的颜色单词，但由于是英文表示的，我们对它们不太了解，所以并不容易记住，这里可以只了解几个较常用的颜色，例如：

  • red，红色。
  • green，绿色。
  • blue，蓝色。
  • yellow，黄色。
  • white，白色。
  • black，黑色。

更多的可以参考 MDN 上的颜色表。

最常用的是使用 16 进制的颜色表示法。在 CSS 中，颜色是按照 RGB（红绿蓝）三色进行调和的，符合显示器的颜色渲染规则，每种颜色色值为 0 - 255 之间，对应的 16 进制就是 00 - FF。在 CSS 中设置颜色，使用 # 号，加上三种颜色色值的顺序排列，分别表示红、绿、蓝颜色的多少，最后合成的颜色就是最终的颜色，例如 #FF0000，表示红色，因为前两位为红色 255，最大，后面的蓝色和绿色为0，这样最后的颜色为最正的红色。

使用 16 进制颜色表示法，不仅可以给文字设置颜色，还可以用在任何需要设置颜色的地方，在后面的属性中你会慢慢的遇到。

小结​

这一节我们介绍了如何设置字体的颜色，并了解到了 CSS 的两种颜色表示法，这里需要注意的是，color 属性是专门用来设置字体颜色的，需要和其它设置颜色的属性区分开，另外也不要记成 font-color，CSS 中没有 font-color 属性。

最近更新于