颜色与单位
一、颜色
1、概述
色调：很接近通俗意义上的颜色。
是指图像的相对明暗程度，在彩色图像上表现为颜色
饱和度：是指颜色中灰色的含量。
饱和度最大时，颜色中灰色的含量为零；饱和度最小时，颜色基本就是灰色。也就是说，饱和度与灰色的占比是成反比的。（可以理解为，纯度越高,表现越鲜明,纯度较低,表现则较黯淡）
亮度：是指颜色中黑色的含量。
亮度最大时，颜色中黑色的含量为零。亮度最小时，颜色会变得非常暗。也就是说，亮度与黑色的占比是成反比的。
对比度：前景色与背景色之间的差异。
差异越大，对比度越大；否则反之。
Web 安全色：不需要担心颜色在不同硬件环境、操作系统和浏览器之间的差异Web 安全色目前基本具有 216 种颜色，其中色彩为 210 种，非色彩为 6 种。
2、前景色与背景色
简单来说，CSS中color属性表示前景色，background-color 属性表示背景色。
例：
before {
color: red;
}
last{
background-color:lightcoral;
}
3、颜色值的类型
在上述无论是 color 属性还是 background-color 属性都需要应用到颜色值，这个颜色是一种标准 RGB 色彩空间（sRGB color space）的颜色。
颜色值可以通过如下 3 种类型进行定义：色彩关键字、RGB 色彩模式、HSL 色彩模式
注意：虽然 CSS 颜色值是被精确定义的，但在不同的输出设备上仍然有可能显示不一。
3.1 色彩关键字
色彩关键字是一个不区分大小写的标识符，其表示一个具体的颜色，例如 red 表示红色、blue 表示蓝色等。
注意：除了 16 个 HTML 基本颜色之外，其他任何颜色都需要通过特定的计算程序转换（通过进制转换），最终导致不同浏览器呈现出的效果可能会不一致。
transparent 关键字表示一个完全透明的颜色，并且 transparent 是 background-color 属性的默认值。
3.2 RGB 色彩模式
RGB是一个简称，全称为 Red-Green-Blue，即红-绿-蓝。RGB 色彩模式是工业界的一种颜色标准，是通过对红、绿、蓝三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。
在 CSS 中使用 RGB 色彩模式有如下 2 种方式：
十六进制符号 #RRGGBB 和 #RGB
#RRGGBB：是 # 符号后面编写 6 个十六进制字符（0-9，A-F）
#RGB：是 # 符号后面编写 3 个十六进制字符（0-9，A_F）
说明：当 #RRGGBB 格式中的两个 R 或 G 或 B 值相同时，就可以改写为 #RGB 格式。例如 #ff0033 可以改写成 #f03。
函数符 rgb(R, G, B)
这里的 R、G、B 的值可以使用 0 ~ 255 之间的值
这里的 R、G、B 的值也可以使用 0% ~ 100% 之间的值
说明： rgb(R,G,B) 的 255 和 100% 是一致的，相当于十六进制符号中的 FF。
如下示例代码展示了 RGB 模式的几种用法：
#p1 {
background-color: #FFCC33;
}
#p2 {
background-color: #FC3;
}
#p3 {
background-color: rgb(255, 204, 51);
}
3.3 HSL 色彩模式
HSL是一个简称，全称为 Hue-Saturation-Lightness，即 色调-饱和度-亮度。HSL 色彩模式是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。
在 CSS 中使用 HSL 色彩模式是通过 hsl(H, S, L) 函数实现的，具体含义如下：
H 表示色调，其值范围为 0 ~ 360 之间的一个角度。
S 表示饱和度，其值范围为 0% ~ 100% 之间的百分值。
L 表示亮度，其值使用百分值表示。0%表示黑色，50%表示标准色，100%表示白色。
如下示例代码展示了 HSL 模式的几种用法：
p {
background-color: hsl(50, 33%, 25%);
}
4、透明度
在 CSS3 版本中新增了 opacity 属性用来设置 HTML 元素的透明度，该属性的值范围介于 0 ~ 1 之间。具体情况如下所示：
如果值为 0 或 0.0 则表示完全透明
如果值为 0.5 则表示半透明
如果值为 1 或 1.0 则表示不透明
如下示例代码所示展示了 opacity 属性的用法：
div {
background-color: lightcoral;
}
.light {
opacity: 0.2;
}
.medium {
opacity: 0.5;
}
.heavy {
opacity: 0.9;
}
</style>
</head>
<body>
<div class="light">这是一个测试内容.</div>
<div class="medium">这又是一个测试内容.</div>
<div class="heavy">这还是一个测试内容.</div>
</body>
CSS 中的透明度除了提供了 opacity 属性用法之外，还可以结合 RGB 模式和 HSL 模式共同使用。具体如下所示：
RGB 模式增加了 rgba(R,G,B,A) 函数，其中 A 为 alpha 表示透明度。
HSL 模式增加了 hsla(H,S,L,A) 函数，其中 A 为 alpha 表示透明度。
二、单位
1、css 的值
CSS 中的值是一种定义允许子值集合的方法。例如我们现在可以使用色彩关键字、RGB 色彩模式或 HSL 色彩模式不同类型来描述颜色值。
在 CSS 中除了颜色值需要不同类型描述之外，比较常见的还有长度值也需要不同类型描述，例如 10px 或 50% 等。
2、CSS 的单位
1、绝对长度单位：
绝对长度单位所描述的长度一般与任何其他因素是无关的。可以简单地理解为无论在什么情况下，这种的长度是固定、不变化的。在 HTML 页面中比较常用的绝对长度单位是像素（px）
cm 厘米 1cm = 96px/2.54
mm 毫米 1mm = 1/10th of 1cm
Q 四分之一毫米 1Q = 1/40th of 1cm
in 英寸 1in = 2.54cm = 96px
pc 十二点活字 1pc = 1/16th of 1in
pt 点 1pt = 1/72th of 1in
px 像素 1px = 1/96th of 1in
2、相对长度单位：
相对长度单位所描述的长度一般会具有一个明确的参考物，例如父级元素、根元素或视口大小等。使用相对长度单位更适用于现在越发复杂的终端设备的屏幕输出。（自适应）
em 父元素的字体大小
ex 字符“x”的高度
ch 数字“0”的宽度
rem 根元素的字体大小
lh 元素的line-height
vw 视窗宽度的1%
vh 视窗高度的1%
vmin 视窗较小尺寸的1%
vmax 视图大尺寸的1%
3、像素值
像素的英文为 Pixel，简写为 px。像素是指在由一个数字序列表示的图像中的一个最小单位。
目前几乎所有的数码设备都具有分辨率的概念，这里的分辨率更多是指图像分辨率。该图像分辨率指的是图像中存储的信息量，毕竟典型的是以每英寸的像素数（PPI，pixel per inch）来衡量。
在屏幕尺寸固定不变的情况下，分辨率的值越大，每英寸的像素数（PPI）越大，单个像素所占的大小就越小。而一般屏幕显示的字体都是通过像素来设置的，例如 18px。
4、百分比
5、em 与 rem
em 与 rem 都是相对单位，目前更多应用于移动端设备，例如手机、平板电脑的显示。具体的含义如下所示：
em：是相对于当前 HTML 元素的父级元素来进行设置。（理解为相对）
rem：是相对于当前 HTML 根元素（<html>）来进行设置。（理解为绝对）
上述 2 种单位都具有如下 3 种情况：
小于 1 时：表示相对于父级元素或根元素缩小。例如 0.5em 表示是父级元素的 0.5 倍，0.5rem 表示是根元素的 0.5 倍。
等于 1 时：表示与父级元素或根元素的大小保持一致。
大于 1 时：表示相对于父级元素或根元素放大。例如 1.5em 表示是父级元素的 1.5 倍，1.5rem 表示是根元素的 1.5 倍。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>em与rem</title>
<style>
html {
font-size: 16px;
}
.ems li {
font-size: 1.3em;
}
.rems li {
font-size: 1.3rem;
}
</style>
</head>
<body>
<ul class="ems">
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="rems">
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
