Dotcpp  >  编程教程  >  CSS语法  >  CSS颜色设置的6种方法

CSS颜色设置的6种方法

点击打开在线编译器,边学边练

制作好看且丰富多彩的网页肯定会与颜色打交道,所有的颜色都是有三种颜色按照不同的比例合成产生,这三种颜色就是三原色,三原色是红(red)、绿(green)、蓝(blue),这三种颜色按不同的比例混合这三种颜色就可以得到其它颜色,通过调整红、绿、蓝三种颜色的数值可以最大限度的控制颜色。

如果你能理解三原色的原理,下面学习CSS颜色也会更容易理解。

CSS 中提供了一些属性(例如 color、background)来设置 HTML 元素的颜色(例如元素的背景颜色或字体颜色),我们可以通过不同形式的值来指定颜色,如下表所示:

描述实例
颜色名称使用颜色名称来设置具体的颜色,比如 red、blue、brown、lightseagreen 等,颜色名称不区分大小写color: red;
十六进制码使用十六进制码以 #RRGGBB 或 #RGB(比如 #ff0000)的形式设置具体颜色,"#" 后跟 6 位或 3 位十六进制字符(0-9, A-F)color: #f03;
RGB通过 rgb() 函数对 red、green、blue 三原色的强度进行控制,从而实现不同的颜色color: rgb(255,0,51);
RGBARGBA 扩展了 RGB,在 RGB 的基础上增加了 alpha 通道来设置颜色的透明度,需要使用 rgba() 函数实现color: rgba(255,0,0,0.1);
HSL通过 hsl() 函数对颜色的色调、饱和度、亮度进行调节,从而实现不同的颜色color: hsl(120,100%,25%);
HSLAHSLA 扩展了 HSL,在 HSL 的基础上增加了 alpha 通道来设置颜色的透明度,需要使用 hsla() 函数实现color: hsla(240,100%,50%,0.5);

1. 颜色名称

使用颜色名称来设置颜色是最简单的方法。CSS 中定义了一些表示颜色的关键字,如下表中所示,使用这些关键字可以轻松的为元素设置颜色。

颜色名颜色颜色名颜色颜色名颜色
aqua天蓝black黑色blue蓝色
fuchsia品红gray灰色green绿色
lime浅绿maroon紫红色navy深蓝
olive橄榄色orange橙色purple紫色
red红色silver浅灰色teal蓝绿色
white白色yellow黄色

除了上表中介绍的 17 个颜色外,浏览器中还支持很多的颜色名称,但不同的浏览器之间对颜色的解析可能存在差异,所以使用的时候一定要注意。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>dotcpp</title>
    <style>
        h2 {
            color: pink;
        }

    </style>

</head>
<body>
    <h2>俺是一个标题</h2>
</body>
</html>

输出结果如下:

颜色名称


2. 十六进制码

用十六进制表示,由0~9、a~f组成一个以#后面跟6个十六进制数的颜色单位。这个六位数可以分为三组,每组两位,依次表示 red、green、blue 三种颜色的强度,

例如:color: #D1483E;

如果使用的是三对两位相同的十六进制数,#后6位数可以简写为3位数。

例如:color: #000; (黑色);


3. RGB

RGB 是 red、green、blue 的缩写,它是一种色彩模式,可以通过对 red、green、blue 三种颜色的控制来实现各式各样的颜色。CSS 中要使用 RGB 模式来设置颜色需要借助 rgb() 函数,函数的语法格式:rgb(red, green, blue)

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

h1 {
color: rgb(156, 109, 0);
}
p {
color: rgb(0%, 100%, 0%);
}


4. RGBA

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

您需要借助 rgba() 函数来使用 RGBA 模式,该函数需要接收四个参数,除了 red、green、blue 三种颜色的强度外,还需要一个 0~1 之间的小数来表示颜色的透明度,其中 0 表示完全透明,1 表示完全不透明。rgba() 函数的语法格式:rgba(red, green, blue, alpha);

其中 red、green、blue 分别表示三原色红、绿、蓝的强度,alpha 表示颜色的透明度,例如:

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


5. HSL

HSL 是 Hue(色调)、Saturation(饱和度)、Lightness(亮度)的缩写,它同样也是一种色彩模式,可以通过对色调、饱和度、亮度三个属性的调节来实现不同颜色的。CSS 中使用 HSL 模式需要借助 hsl() 函数,函数的语法格式:hsl(hue, saturation, lightness)

语法说明如下:

(1) hue

参数 hue 表示颜色在色盘上的度数(从 0 到 360),0 或 360 表示红色,120 表示绿色,240 表示蓝色,如下图所示;

(2)saturation

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


(3) lightness

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


6. HSLA

HSLA 是 HSL 的扩展,在 HSLA 中增加了对颜色透明度的控制,其余与 HSL 相同。CSS 中使用 HSLA 模式需要借助 hsla() 函数,函数的语法格式:hsla(hue, saturation, lightness, alpha)

参数 alpha 是一个 0 ~ 1 之间小数,用来表示颜色的透明度,0 表示完全透明,而 1 表示完全不透明。

通过不同的方式来为 HTML 元素设置颜色:

<!DOCTYPE html>
<html>
<head>
    <title>CSS颜色</title>
    <style>
    p {
        font-size: 16px;
        font-weight: bold;
    }
    #rgb {
        color: rgb(255, 0, 0);
    }

    #rgba {
        color: rgba(255, 0, 0, 0.5);
    }

    #hex {
        color: #EE82EE;
    }

    #short {
        color: #E8E;
    }

    #hsl {
        color: hsl(0, 50%, 50%);
    }

    #hsla {
        color: hsla(120,60%,70%,0.3);
    }

    #built {
        color: green;
    }
    </style>
</head>
<body>
    <p id="rgb">
        color: rgb(255, 0, 0);
    </p>
    <p id="rgba">
        color: rgba(255, 0, 0, 0.5);
    </p>
    <p id="hex">
        color: #EE82EE;
    </p>
    <p id="short">
        color: #E8E;
    </p>
    <p id="hsl">
        color: hsl(0, 50%, 50%);
    </p>
    <p id="hsla">
        color: hsla(120,60%,70%,0.3);
    </p>
    <p id="built">
        color: green;
    </p>
</body>
</html>

展示结果如图:

HSLA


本文固定URL:https://www.dotcpp.com/course/1131

上一课:

CSS注释语法

下一课:

CSS背景(background)

C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:

一点编程也不会写的:零基础C语言学练课程

解决困扰你多年的C语言疑难杂症特性的C语言进阶课程

从零到写出一个爬虫的Python编程课程

只会语法写不出代码?手把手带你写100个编程真题的编程百练课程

信息学奥赛或C++选手的 必学C++课程

蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程

手把手讲解近五年真题的蓝桥杯辅导课程

Dotcpp在线编译      (登录可减少运行等待时间)