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
属性。
一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!
即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!
《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。
《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。
《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。
《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买