1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

前言

CSS 中经常需要指定一个颜色,有以下几种方法可以让我们表达一个颜色。

  • 颜色关键字
  • RGB
  • RGBA
  • 十六进制
  • HSL
  • HSLA

颜色关键字

在 CSS 中可以用一些简单的关键字来表示生活中常用的颜色,比如 pink 表示粉色, red 表示红色, 可以参考 MDN 的颜色关键字表格

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/abVYLLJ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

RGB

RGB color model(三原色光模式)又被称为红绿蓝颜色模型,它是将红(Red)、绿(Green)、蓝(Blue)三种颜色的光混合来表示各种颜色。

通过色散实验,通过三棱镜可将光折射出彩色光。并且选择三种有相当差距的基本色光,按照不同比例组合即可产生任何颜色,其中以红、绿、蓝最为适用。

image

image

现在的绝大多数显示设备都是采用的 RGB 发光原理,屏幕上的每一个像素点都由红绿蓝三个发光二级管组成,通过控制发光二级管的强弱来显示指定的颜色。

image

因此我们使用 RGB 来表示颜色时就是指定红绿蓝三个颜色的发光程度,取值范围是 0 ~ 255。这意味着我们总共可以表示 256 x 256 x 256 = 16777216,总计一千六百多万个颜色。

RGB 表示颜色的语法如下,用 rgb 把三个数值括起来,用逗号间隔,比如以下表示红色255,绿色0,蓝色0:

h1 {
    color: rgb(255, 0, 0);
}

$$tip

有关 RGB 颜色的取色可以参考辅助工具部分。

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/RwjMvJB?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

RGBA

RGBA 只是比 RGB 多了一个 alpha 通道,用来表示颜色的不透明度, alpha 的取值范围是 0 ~ 1,0就是完全透明,而 1 是完全不透明。

h1 {
    color: rgba(255, 100, 0, 0.3);
}

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/gOXeELV?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

十六进制

十六进制其实就是 RGB 的十六进制写法,所谓十六进制就是逢 16 进 1,一般用数字 0 ~ 9 和字母 A ~ F 表示。

在 CSS 中使用 # 号开头表示这是一个十六进制的数字,两位的十六进制可表示 256 个数字,与 RGB 中的取值范围 0 ~ 255 相等。因此用十六进制表示颜色时头两位表示红色,中间两位表示绿色,后两位表示蓝色。

比如我们有一个颜色用 RGB 表示是 rgb(255, 100, 0),那转换成十六进制就是, 红色 FF,绿色 64,蓝色 0, 那就十六进制表示相同的颜色就是 #FF6400

$$warning

当十六进制只有一位时,应当在前面补 0 补足两位。 比如 rgb(5, 5, 5) 用十六进制表示应该是 #050505

$$

h1 {
    color: #ff6400;
}

$$tip

在线进制转换器

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/YzEagjo?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

十六进制透明通道

如同 RGBA 一般,可以加入一个 alpha 通道,用来表示颜色的不透明度, 此时的 alpha 的取值范围是 0 ~ FF,0 表示完全透明, FF 表示完全不透明。

h1 {
    color: #ff640066;
}

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/gOXeENr?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

HSL

HSL 表示的是色相(Hue)、饱和度(Saturation)、亮度(Lightness)。 色相的取值范围是 0 ~ 359,饱和度与亮度的取值范围是 0% ~ 100%。可以用 HSL 在线取色工具进行取值。

h1 {
    color: hsl(40, 82%, 74%);
}

HSLA

HSLA 只是比 HSL 多了一个 alpha 通道,用来表示颜色的不透明度。 alpha 的取值范围是 0 ~ 1,0就是完全透明,而 1 是完全不透明。

h1 {
    color: hsla(40, 82%, 74%, 0.4);
}

辅助工具

Windows 画图工具

WIN+R 打开运行工具,输入 mspaint 可以打开画图工具。点击编辑颜色可以调配我们想要的颜色 RGB 数值。

image

微信截图

ALT+A 可以打开微信截图,截图工具会显示当前鼠标指针指向的 RGB 数值。

image

Snipaste 截图工具

Snipaste 是一款很优秀的截图工具,能让我们取 RGB 或十六进制的颜色数值。 image

练习

1.以下色块的颜色用 RGB 表示是多少?

$$demo

<div style=" width: 100px; height: 100px; background-color: rgb(100, 120, 200); ">

</div>

$$

2.以下色块的颜色用十六进制表示是多少?

$$demo

<div style=" width: 100px; height: 100px; background-color: #876543; ">

</div>

$$

3.以下色块的颜色用 HSL 表示是多少?

$$demo <div style=" width: 100px; height: 100px; background-color: hsla(188, 77%, 60%); ">

</div>

$$