CSS 教程之 CSS 颜色和长度说明

  Web Site15 minutes read (About 2200 words)

CSS 中的颜色设置，以及元素长度单位说明。

CSS 颜色

在前面博文【HTML 教程之 HTML 字符集和颜色】中提到过，HTML 颜色采用的是 RGB 颜色模式，是通过对红 (R)、绿 (G)、蓝 (B) 三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。

并且，我们还提到可以使用颜色值（Color Value，3/6 位十六进制颜色值/RGB）和颜色名称（Color Name）来指定 HTML 元素的颜色。

CSS 中也提供了 不同模式 的值来为元素指定颜色，如下表所示：

值 描述 实例
Color Name 使用颜色名称（不区分大小写）来设置具体的颜色，例如 red、blue、brown color: red;
Color Value 使用 3/6 位十六进制字符的形式来设置具体颜色，形式：#RRGGBB 或 #RGB，例如 #ff0000 color: #f03;
RGB 使用 rgb() 函数（R && G && B）三通道的强度进行控制，从而实现不同的颜色 color: rgb(255,0,51);
RGBA RGBA 扩展了 RGB，在 RGB 的基础上增加了 alpha 通道来设置颜色的透明度，需要 rgba() 函数 color: rgba(255,0,0,0.1);
HSL 使用 hsl() 函数，对颜色的色调、饱和度、亮度进行调节，从而实现不同的颜色 color: hsl(120,100%,25%);
HSLA HSLA 扩展了 HSL，在 HSL 的基础上增加了 alpha 通道来设置颜色的透明度，需要 hsla() 函数 color: hsla(240,100%,50%,0.5);

Color Name

使用颜色名称来设置颜色是最简单的方法。

颜色名称是通过一些标准定义好的颜色名，目前所有浏览器都支持 141 个标准颜色名称（ HTML 和 CSS 颜色规范定义）

17 标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。再加 124 个其它颜色。

关于HTML 和 CSS 颜色名称支持，你可以参考 >>> HTML 颜色手册。

需要注意的是，不同的浏览器之间对颜色的解析可能存在差异，为了安全起见，不建议你在 CSS 中使用颜色名称来指定颜色。

Color Value

使用 3 位 或 6 位十六进制码的形式设置颜色是最常见的一种方法。

它们都可以分为三组，分别对应 R && G && B 三个颜色通道，形式为：#RRGGBB（6 位） 或 #RGB（3 位）。

在使用十六进制码表示颜色时，如果每组的两个十六进制数都是相同的，例如 #00ff00、#ffffff、#aabbcc，则可以将它们简写为 #0f0、#fff、#abc。

需要注意的是，你不需要查颜色手册，可以通过一些 取色器 软件即可获取任意可见颜色的十六进制码。

RGB

CSS 中要使用 RGB 模式来设置颜色需要借助 rgb() 函数，函数的语法格式如下：

1
rgb(red, green, blue)

其中，red、green、blue 分别表示三原色红、绿、蓝的强度，这三个参数的取值可以是 0~255 之间的整数，也可以是 0%~100% 之间百分比数值。

样例如下：

1
2
3
4
5
6
h1 {
    color: rgb(255, 165, 0);
}
p {
    color: rgb(0%, 100%, 0%);
}

RGBA

RGBA 是 RGB 的扩展，在 RGB 的基础上又增加了对 Alpha 通道的控制，Alpha 通道可以设置颜色的透明度。

故，CSS 中要使用 RGBA 模式来设置颜色需要借助 rgba() 函数，函数的语法格式如下：

1
rgba(red, green, blue, alpha);

其中，alpha 表示颜色的透明度，取值为 0~1（ 0 表示完全透明，1 表示完全不透明）之间的小数。

样例如下：

1
2
3
p {
    color: rgba(255, 0, 0, 0.5);
}

HSL

HSL 是 Hue（色调）、Saturation（饱和度）、Lightness（亮度）的缩写，它同样也是一种色彩模式，可以通过对色调、饱和度、亮度三个属性的调节来实现不同颜色的。

CSS 中要使用 HSL 模式来设置颜色需要借助 hsl() 函数，函数的语法格式如下：

1
hsl(hue, saturation, lightness)

其中，

[1] >>> hue

参数 hue 表示颜色在色盘上的度数（0~360），0/360 表示红色，120 表示绿色，240 表示蓝色。

[2] >>> saturation

参数 saturation 为一个百分比数值，表示色彩的饱和度，0% 表示灰色，100% 表示全彩。

[3] >>> lightness

参数 lightness 同样为一个百分比数值，表示颜色的亮度，0% 是黑色（没有亮度），50% 为最合适的亮度（既不发黑也不过亮），100% 是白色（曝光严重）。

实例如下：

1
2
3
p {
    color: hsl(0, 100%, 50%);
}

HSLA

HSLA 是 HSL 的扩展，在 HSLA 中增加了对 Alpha 通道（颜色透明度）的控制，其余与 HSL 相同。

CSS 中要使用 HSLA 模式来设置颜色需要借助 hsla() 函数，函数的语法格式如下：

1
hsla(hue, saturation, lightness, alpha)

其中，alpha 表示颜色的透明度，取值为 0~1（ 0 表示完全透明，1 表示完全不透明）之间的小数。

实例如下：

1
2
3
p {
    color: hsla(0, 100%, 50%, 0.5);
}

CSS 长度单位

HTML 中元素的尺寸是非常的属性，例如字体大小、元素宽高等等，这就要涉及到长度的单位问题。

CSS 支持多种不同的长度单位，根据类型的不同可以分为两类：

  • 绝对长度单位；
  • 相对长度单位。

下面我们来看 CSS 中支持的几种具体度量单位：

绝对长度单位

绝对长度单位表示一个真实的物理尺寸，它的大小是固定的，不会因为其它元素尺寸的变化而变化。

如下列举了 CSS 中支持的绝对长度单位（常用高亮）：

单位 描述 示例
cm 厘米 p{font-size: 0.5cm;}
mm 毫米 p{font-size: 5mm;}
in inch 英寸（1in = 96px = 2.54cm） p{font-size: 1in;}
px pixel 像素（1px = 1/96in） p{font-size: 16px;}
pt point，专用印刷单位 “磅”，（1pt = 1/72in） p{font-size: 16pt;}
pc pica，专用字体大小印刷单位 “派卡”，相当于我国新四号铅字的尺寸（1pc = 12pt） p{font-size: 5pc;}

实例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS 演示</title>

        <style>
            .box{
                width: 4in;
                height: 4.5cm;
                border: 2mm solid black;
                font-size: 16px;
            }
            .pt{
                font-size: 6pt;
            }
            .pc{
                font-size: 3pc;
            }
        </style>
        </style>
    </head>
    <body>
        <div>
            <div class="box">
                这是 16px 的字体
                <p class="pt">这是 6pt 的字体</p>
                <p class="pc">这是 3pc 的字体</p>
            </div>
        </div>
    </body>
</html>

相对长度单位

相对长度单位指的是这个单位没有一个固定的值，它的值受到其它元素属性（例如浏览器窗口的大小、父级元素的大小）的影响。

也即是说，相对长度单位必须有一个对照物，即相对于谁的（那个元素）长度单位，在 响应式布局方面相对长度单位非常适用。

如下列举了 CSS 中支持的相对长度单位（常用高亮）：

单位 描述 示例
em 相对于自身 font-size 属性的值（未设置，默认继承父元素 font-size 属性的值），1em 等同于 font-size=”xx” 的属性值。例如 font-size 的值为 16px，那么 1em 就等于 16px p{line-height:2em;}
rem 相对于根元素的 font-size 属性的大小。例如根元素的 font-size 是 100px，那么 1.2rem 就相当于 120px p{font-size: 1.2rem;}
ex 相对于所用字体中，小写英文字母 x 的高度，若无法确定 x 的高度则使用 0.5em 计算 p{font-size: 1ex;}
ch 相对于所用字体中，数字 0 的高度，若无法确定 0 的高度则使用 0.5em 计算 p{line-height: 3ch}
vw 相对于浏览器窗口的宽度，1vw = 窗口宽度的 1% p{font-size: 5vw;}
vh 相对于浏览器窗口的高度，1vh = 窗口高度的 1% p{font-size: 5vh;}
vmin vw 与 vh 中较小的值 p{font-size: 5vmin;}
vmax vw 与 vh 中较大的值 p{font-size: 5vmax;}
% 相对于父元素宽度或字体大小的百分比 div{width: 55%}

实例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS 演示</title>

        <style>
            .box{
                width: 50vw;
                height: 50vh;
                border: 1ex solid black;
                font-size: 16px;
            }
            .info{
                font-size: 2em;
            }
            .ex > span{
                font-size: 2ex;
            }
            .ch > span{
                font-size: 4ch;
            }
        </style>
        </style>
    </head>
    <body>
        <div class="box">
            <p style="font-size: 32px;">这是 32px 的字体</p>
            <p class="info">这是 2em 的字体</p>
            这是 16px 的字体
            <p class="ex">
                x: <span>这是 3ex 的字体</span>
            </p>
            <p class="ch">
                0: <span>这是 4ch 的字体</span>
            </p>
        </div>
    </body>
</html>

CSS 教程之 CSS 颜色和长度说明

https://www.orangeshare.cn/2019/01/12/css-jiao-cheng-zhi-css-yan-se-he-chang-du-shuo-ming/

Author

Waldeinsamkeit

Posted on

2019-01-12

Updated on

2022-12-15

Licensed under

#
You need to set install_url to use ShareThis. Please set it in _config.yml.

Like this article? Support the author with

Comments

You forgot to set the shortname for Disqus. Please set it in _config.yml.

Catalogue

×