CSS 播客 - 006:颜色第一部分
颜色是任何网站的重要组成部分,在 CSS 中有多种颜色类型、功能和处理方式选项。
如何确定要使用哪种颜色类型? 如何使颜色变为半透明? 在本课程中,您将了解您可以通过哪些选项为项目和团队做出正确的决策。
CSS 具有各种不同的数据类型,例如字符串和数字。 颜色是其中一种类型,它使用其他类型(例如,数字作为自己的定义)。
数字颜色
您在 CSS 中首次看到颜色时,很可能是通过数字颜色进行的。我们可以以几种不同形式处理数字颜色值。
十六进制颜色
h1 {
color: #b71540;
}
十六进制记数法(通常简称为十六进制)是 RGB 的简写语法,它将数值分配给红色、绿色和蓝色(三原色)。
十六进制范围是 0-9 和 A-F。 在六位数序列中使用时,它们会转换为 0-255 的 RGB 数值范围,分别对应于红色、绿色和蓝色通道。
您还可以使用任何数字颜色定义 Alpha 值。Alpha 值是透明度的百分比。
在十六进制代码中,您要在 6 位数序列的基础上再加两位数,形成一个 8 位数序列。例如,如需在十六进制代码中设置黑色,请编写 #000000
。
如需添加 50% 的透明度,请将其更改为 #00000080
。
由于十六进制刻度为 0-9 和 A-F,因此透明度值可能与您的预期不太一样。
以下是添加到黑色十六进制代码 #000000
中的一些重要的常用值:
- 0%(完全透明)为 00:
#00000000
- 50% alpha 为 80:
#00000080
- 75% alpha 为 BF:
#000000BF
如需将一个两位数的十六进制值转换为十进制数,需要将第一个数位乘以 16(因为十六进制数是以 16 为底数的),然后加上第二个数位。以 BF 为例,说明此值为 75% 的 Alpha 值:
- B 等于 11,乘以 16 等于 176
- F 等于 15
- 176 + 15 = 191
- Alpha 值为 255 的 191—75%
RGB(红、绿、蓝)
h1 {
color: rgb(183, 21, 64);
}
RGB 颜色是通过 rgb()
颜色函数定义的,使用数字或百分比作为参数。数字必须在 0-255 的范围内,百分比必须介于 0% 到 100% 之间。
RGB 的缩放范围为 0-255,因此 255 相当于 100%,0 到 0%。
如需在 RGB 中设置黑色,请将其设置为 rgb(0 0 0)
,即零红色、零绿色和零蓝色。黑色也可以定义为 rgb(0%, 0%, 0%)
。白色是完全相反的字母:rgb(255, 255, 255)
或 rgb(100%, 100%, 100%)
。
您可以通过以下两种方式之一在 rgb()
中设置 Alpha 版。在红色、绿色和蓝色参数后面添加一个 /
,或使用 rgba()
函数。alpha 值可以指定为百分比或介于 0 到 1 之间的小数。例如,如需在现代浏览器中设置 50% alpha 黑色,请写入:rgb(0 0 0 / 50%)
或 rgb(0 0 0 / 0.5)
。
如需获得更广泛的支持,请使用 rgba()
函数,写入 rgba(0, 0, 0, 50%)
或 rgba(0, 0, 0, 0.5)
。
HSL(色调、饱和度、亮度)
h1 {
color: hsl(344, 79%, 40%);
}
HSL 代表色相、饱和度和亮度。 色调用于描述色轮上的值,范围为 0 度到 360 度,从红色开始(表示 0 和 360 度)。 色调 180(即 50%)位于蓝色范围内。这是我们所见颜色的来源。
饱和度是指所选色相的鲜艳程度。
饱和度完全较低的颜色(饱和度为 0%
)将显示为灰度。最后,亮度是参数,用于描述增加光的从白变黑的比例。亮度为 100%
将始终为您提供白色。
使用 hsl()
颜色函数,您可以通过写入 hsl(0 0% 0%)
,甚至是 hsl(0deg 0% 0%)
来定义纯黑色。这是因为 hue 参数定义了色轮上的度数(如果您使用数字类型,则值为 0-360)。您也可以使用角度类型,即 (0deg
) 或 (0turn)
。饱和度和亮度均通过百分比定义。
Alpha 是在 hsl()
中定义的,方式与 rgb()
相同,即在色相、饱和度和亮度参数后面添加 /
,或者使用 hsla()
函数。alpha 值可以指定为百分比或介于 0 到 1 之间的小数。例如,如需将 Alpha 值设为 50%,请使用 hsl(0 0% 0% / 50%)
或 hsl(0 0% 0% / 0.5)
。使用 hsla()
函数写入 hsla(0, 0%, 0%, 50%)
或 hsla(0, 0%, 0%, 0.5)
。
颜色关键字
CSS 中有 148 种已命名的颜色。这些是普通的英文名称,例如 purple、tomato 和 goldenrod。 根据网页年鉴,一些最常用的名称为黑色、白色、红色、蓝色和灰色。我们最喜爱的包括 goldenrod、aliceblue 和 Hotpink。
除了标准颜色之外,您还可以使用特殊关键字:
transparent
是一种完全透明的颜色。 它也是background-color
的初始值。currentColor
是color
属性的上下文计算的动态值。如果文本颜色为red
,然后将border-color
设置为currentColor
,它也会变为红色。如果您定义currentColor
的元素没有为color
定义值,系统将改为通过级联计算currentColor
在 CSS 规则中的什么位置使用颜色
如果 CSS 属性接受 <color>
数据类型作为值,它将接受上述任何表示颜色的方法。如需设置文本样式,请使用 color
、text-shadow
和 text-decoration-color
属性,这些属性都接受颜色作为值或颜色作为值的一部分。
对于背景,您可以将颜色设置为 background
或 background-color
的值。颜色也可以在渐变中使用,例如 linear-gradient
。渐变是一种可在 CSS 中以编程方式定义的图片。渐变接受两种或更多种颜色格式的任意组合,例如十六进制、RGB 或 hsl。
最后,border-color
和 outline-color
用于设置框上的边框和轮廓的颜色。box-shadow
属性也接受 color 作为值之一。
检查您的掌握程度
考考你对颜色的掌握情况
以下哪些是有效的颜色?
rbga(400 0 1)
#0f08
#OOFZ2
rgb(255, 0, 0)
hsl(180deg 50% 50%)
hotpink
发现无效的 hsl 颜色。
hsl(5, 0%, 90%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)