跳到主要内容位置

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 属性。