CSS 播客 - 006:颜色(第一部分)
颜色是任何网站的重要组成部分,在 CSS 中,有许多颜色类型选项 功能和处理方式。
您如何决定使用哪种颜色类型? 如何使颜色变为半透明? 在本课中 您将了解有哪些选项可以帮助您为项目和团队做出正确的决策。
CSS 具有各种不同的数据类型, 例如字符串和数字。 Color 就是其中之一,并且使用了其他类型, 比如用数字来描述自己的定义
数字颜色
您首次在 CSS 中接触颜色很可能是通过数字颜色。 我们可以采用几种不同形式处理数值颜色值。
十六进制颜色
h1 {
color: #b71540;
}
十六进制记数法(通常简称为十六进制)是 RGB 的简写语法, 该函数为红绿蓝分配一个数值, 即三种主要颜色。
十六进制范围为 0-9 和 A-F。 当以 6 位数序列使用时, 它们将转换为 0-255 的 RGB 数值范围 分别对应于红色、绿色和蓝色通道。
您还可以使用任何数字颜色定义 Alpha 值。
Alpha 值是透明度的百分比。
在十六进制代码中,您需要在六位数序列中再添加两位,
组成一个 8 位数序列。
例如,如需在十六进制代码中将黑色设置为黑色,请输入 #000000
。
如需添加 50% 的透明度,请将其更改为 #00000080
。
由于十六进制刻度介于 0-9 和 A-F 之间,因此透明度值可能与您的预期并不一致。
以下是一些添加到黑色十六进制代码 #000000
中的关键常用值:
- 0% alpha(完全透明)为 00:
#00000000
- 50% alpha 为 80:
#00000080
- 75% alpha 为 BF:
#000000BF
要将两位十六进制数转换为十进制数, 用第一个数字乘以 16(因为十六进制数是 16), 然后加上第二个数字。以 75% alpha 的 BF 为例:
- 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%)
。
alpha 可通过以下两种方式之一在 rgb()
中设置。
在红色、绿色和蓝色参数后面添加 /
。
或使用 rgba()
函数。
alpha 可以用百分比或 0 到 1 之间的小数来定义。
例如,如需在现代浏览器中将 50% 的 Alpha 黑色设置为 50%,请写入 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 之间的小数来定义。
例如,如需设置 50% 的 Alpha 黑色,请使用 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。 其中一些最热门的名称 根据网络年鉴, 分别为黑色、白色、红色、蓝色和灰色。 其中最爱的包括金线花、爱丽蓝色和艳粉色。
除了标准颜色之外,还可以使用特殊的关键字:
transparent
是完全透明的颜色。 它也是background-color
的初始值currentColor
是color
属性在上下文中计算的动态值。 如果您将文本颜色设置为red
,然后将border-color
设置为currentColor
,则文本颜色也将为红色。 如果您定义了currentColor
的元素没有定义color
的值,currentColor
将改为通过级联计算
在 CSS 规则中的什么位置使用颜色
如果 CSS 媒体资源接受
<color>
数据类型,以值表示,
它可接受上述任何颜色表达方法。
如需设置文本样式,请使用 color
、text-shadow
和 text-decoration-color
属性
它们都接受 color 作为值或 color 作为值的一部分。
对于背景,您可以将颜色设置为 background
或 background-color
的值。
颜色也可用于渐变,例如 linear-gradient
。
渐变是一种可在 CSS 中以编程方式定义的图片。
渐变接受两种或更多颜色格式组合的颜色,如十六进制、RGB 或 hsl。
最后,border-color
和 outline-color
用于设置框上边框和轮廓的颜色。
box-shadow
属性也接受颜色作为其中一个值。
检查您的理解情况
测试您对颜色的掌握情况
以下哪些是有效的颜色?
rgb(255, 0, 0)
#0f08
hotpink
#OOFZ2
rbga(400 0 1)
hsl(180deg 50% 50%)
发现无效的 hsl 颜色。
hsl(.5turn 40% 60%)
hsl(0 0% 0% / 20%)
hsl(0, 0, 0)
hsl(5, 0%, 90%)
hsl(2rad 50% 50%)