第5章：值和单位
在这个章节，我们将探讨CSS中几乎所有功能的基础：影响颜色、距离和大小等各种属性的单位，以及帮助定义这些值的单位。如果没有单位，您将无法声明一个图像应该有10像素的空白空间，或者一个标题的文本应该具有一定的大小。通过理解这里提出的概念，您将能够更快地学习和使用CSS的其他部分。
关键字、字符串和其他文本值
关键字
样式表中的所有内容都是文本，但某些值类型直接表示文本字符串，而不是数字或颜色。这个类别中包括URL，以及有趣的是，还包括图像。
全局关键字
CSS 定义了五个全局关键字，这些关键字被规范中的每个属性所接受：inherit、initial、unset、revert 和 revert-layer。
inherit：继承父级属性，它在正常情况下不发生继承的情况下强制继承。
initial：将元素初始化成css的初始值
unset：继承和初始化元素 unset关键字作为inherit和initial的通用替代品。如果属性是可继承的，unset的效果与使用inherit相同。如果属性不可继承，unset的效果与使用initial相同。
revert：还原到浏览器内置样式
revert-layer：可以让CSS属性值还原为上一层@layer中设置的同属性值，如果当前CSS不在@layer规则中，或者没有祖先@layer规则，则表现类似于revert关键字，使用浏览器默认的控件样式。注意 截至2023年底，只有Firefox支持revert-layer，但我们预计它将在不久的将来得到广泛支持。
all属性
这些全局值可以用于所有属性，但有一个特殊的属性只接受全局关键字：all。
all 属性代表除 direction、unicode-bidi 和任何自定义属性的任意属性。all的取值有四种：initial、inherit、unset、revert
字符串
字符串值是任意的字符序列，用单引号或双引号包裹， 在值定义中表示为< string >。
标识符
一种单词、大小写敏感的字符串，不需要用引号引用，称为标识符。
URLs
URLs：统一资源定位符
1. 相对路径 相对路径是相对于CSS文件所在的位置来确定资源的位置。如果CSS文件和资源文件在同一文件夹下，则可以直接使用文件名。如果CSS文件在上一级文件夹，则需要使用../表示回到上一级目录。 示例代码：
p {
background-image: url(bg.jpg);
font-family: url("../fonts/arial.ttf");
}
2. 绝对路径 绝对路径是从网站根目录开始的路径。如果资源文件在网站根目录下的images文件夹里，则可以使用/images/bg.jpg来引用。 示例代码：
p {
background-image: url(/images/bg.jpg);
font-family: url(http://www.example.com/fonts/arial.ttf);
}
3. data URI data URI是将资源文件编码成base64字符串，直接嵌入到CSS代码中，避免了HTTP请求，加载速度更快。但是对于大型图片和音频文件，会增加CSS文件的体积和加载时间。 示例代码：
p {
background-image: url(data:image/png;base64,iVBORw0KGg.....);
}
在写CSS代码时，需要根据实际情况选择不同的url地址写法，以保证资源的正确加载和使用效果。
数字和百分比
CSS中可能会用到各种数值类型。以下都被归类为数字:
Data type Description
<integer> <integer>是整数如1024或-55。
<number> <number>表示一个十进制数——它可以有也可以没有带小数成分的小数点。例 如:0.255、128或-1.2。
<dimension> <dimension>是一个带有单位的<number>。例如45deg5s或10px。<dimension> 是 一个包含<length>、<angle>、<time>和<resolution>类型的总称类别。
<percentage> <percentage>表示其他值的一小部分。例如50%。百分比值总是相对于另一个数 量。例如元素的长度是相对于它的父元素的长度的。
长度
您最常遇到的数字类型是<length>。例如10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝对长度。了解它们之间的区别是很重要的这样才能理解事情会变得有多大。
绝对长度单位
以下都是绝对(absolute )长度单位-它们与其他任何东西都无关并且通常被认为总是相同的大小。
Unit Name Equivalent to
cm Centimeters 1cm = 37.8px = 25.2/64in
mm Millimeters 1mm = 1/10th of 1cm
Q Quarter-millimeters四分之一毫米 1Q = 1/40th of 1cm
in Inches 1in = 2.54cm = 96px
pc Picas 1pc = 1/6th of 1in
pt Points 1pt = 1/72nd of 1in
px Pixels 1px = 1/96th of 1in
大多数这些单元在用于打印而不是屏幕输出时更有用。例如我们通常不会在屏幕上使用厘米(cm)。您通常使用的唯一值是px(像素)。
相对(Relative)长度单位
相对长度单位是相对于其他东西的可能是父元素字体的大小或者视口的大小。使用相对单位的好处是通过一些仔细的规划您可以使文本或其他元素的大小相对于页面上的其他所有内容进行缩放。下表列出了一些对web开发最有用的单元。
Unit Relative to
em 父元素的字体大小在排版属性(如font-size)的情况下以及元素本身的字体大小在其他属性(如width)的情况下。
ex 元素字体的x高度。
ch 元素字体的字形“0”的预先度量(宽度)。
rem Font size of the root element.
lh 元素的行高(Line height)。
rlh 根元素的行高。当用于根元素的font-size或line-height属性时它引用属性的初始值。
vw 视口(viewport)宽度的1%。
vh 视口高度的1%。
vmin 视口较小尺寸的1%。
vmax 视口大尺寸的1%。
vb 在根元素的块轴方向上初始包含块大小的1%。
vi 根元素的行内轴方向上初始包含块大小的1%。
svw, svh 分别是小视口宽度和高度的1%。
lvw, lvh 分别为大视口宽度和高度的1%。
dvw, dvh 分别是动态视口宽度和高度的1%。
ems and rems
em和rem是你在调整从盒子到文本的大小时最可能遇到的两个相对长度。理解它们是如何工作的以及它们之间的区别是值得的特别是当您开始处理更复杂的主题(如样式文本或CSS布局)时。下面的示例提供了一个演示。
下面所示的HTML是一组嵌套列表——我们总共有两个列表两个示例都有相同的HTML。唯一的区别是前者有一个类em后者有一个类rem。
首先我们将<html>元素的字体大小设置为16px。
概括一下em单位在排版的情况下意味着“父元素的字体大小”。<ul>中带有ems类的<li>元素的大小取自它们的父元素。因此每个连续的嵌套层会逐渐变大因为每个嵌套层的字体大小都设置为1.3em - 1.3倍于其父层的字体大小。
简而言之rem单位表示“根元素的字体大小”(rem代表“root em”)。<ul>中带有rems类的<li>元素的大小取自根元素(<html>)。这意味着每个连续的嵌套层不会继续变大。
但是如果您在CSS中更改<html>元素的字体大小您将看到其他所有内容都相对于它发生了变化——包括rem和em大小的文本。
函数值
CSS最近的一个重要发展是增加了许多实际上为函数的值。这些值可以进行数学计算、限制值范围、从HTML属性中提取值等。事实上，CSS有很多这样的值，如下所示：
abs()
acos()
asin()
atan()
atan2()
attr()
blur()
brightness()
calc()
character-variant()
circle()
clamp()
color-contrast()
color-mix()
color()
conic-gradient()
contrast()
cos()
counter()
counters()
cross-fade()
device-cmyk()
drop-shadow()
element()
ellipse()
env()
exp()
fit-content()
grayscale()
hsl()
hsla()
hue-rotate()
hwb()
hypot()
image-set()
image()
inset()
invert()
lab()
lch()
linear-gradient()
log()
matrix()
matrix3d()
max()
min()
minmax()
mod()
oklab()
oklch()
opacity()
ornaments()
paint()
path()
perspective()
polygon()
pow()
radial-gradient()
rem()
repeat()
repeat-conic-gradiant()
repeating-linear-gradiant()
repeating-radial-gradient()
rgb()
rgba()
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
round()
saturate()
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
sepia()
sign()
sin()
skew()
skewX()
skewY()
sqrt()
styleset()
stylistic()
swash()
symbols()
tan()
translate()
translate3d()
translateX()
translateY()
translateZ()
url()
var()
这是97个不同的函数值。
颜色
名字颜色
CSS 增加了一组 148 种可以用人类可读的名称（如 red 或 firebrickred）标识的颜色。
颜色关键字
CSS有两个特殊的关键词，可以在允许颜色值的地方使用：transparent和currentcolor。
顾名思义，transparent定义了一个完全透明的颜色。CSS颜色模块将其定义为等同于rgb(0 0 0 / 0%)，这是它的计算值。
RGB
RGB颜色是由红、绿、蓝三个颜色通道的数值组合而成的颜色模型。在CSS中，我们可以使用 rgb() 函数来设置RGB颜色值。需要注意的是 rgb(255,255,255,0.5) 允许我们有第四个参数，它的值从 0-1，用来表示透明度。
例如，以下颜色值表示浅灰色：
h1 {
color: rgb(192, 192, 192);
}
在这个例子中，我们使用了 rgb() 函数来指定颜色值，并在括号中输入了三个数值来表示 R、G、B 三个颜色通道的数值。这些数值可以从0到255之间取值。RGB颜色使用起来比较直观，同时可以通过增加或减少数字来微调颜色，得到不同的颜色效果。
RGBA
RGBA颜色是由红、绿、蓝三个颜色通道和不透明度组成的颜色模型。在CSS中，我们可以使用 rgba() 函数来设置RGBA颜色值。
例如，以下颜色值表示半透明蓝色：
h1 {
color: rgba(0, 0, 255, 0.5);
}
在这个例子中，rgb() 函数中最后一个数值 0.5 代表了不透明度，取值范围为0到1之间。数值越小，颜色就越透明；数值越大，颜色就越不透明。
使用 RGBA 颜色可以实现更加细致的颜色设置，同时具有透明度控制的能力，常用于设计中的半透明效果。
HSL和HSLa颜色
色相、饱和度和亮度（HSL）颜色表示法与色相、饱和度和亮度（HSB）颜色系统相似，后者是图像编辑软件（如Photoshop）中的颜色系统，同样直观易懂。色相用角度值表示，饱和度用百分比值表示，从0%（无饱和度）到100%（完全饱和度），亮度用百分比值表示，从0%（完全黑暗）到100%（完全明亮）。
HWB 颜色
HWB 全称为Hue-Whiteness-Blackness，表示色调、白度和黑度。
- 色调：色轮中的一个角度；
- 白度：表示要混合的白色量的百分比。值越高，颜色越白。
- 黑度：表示要混合的黑色量的百分比。值越高，颜色越黑
LAB 颜色
LAB是一个可以在Photoshop等软件中访问的颜色空间，它代表了人类可以看到的整个颜色范围。它使用三个轴表示:亮度、a轴和b 轴。
亮度：从黑色到白色。值越低，颜色越接近黑色。
a轴：从绿色到红色。较低的值接近绿色，较高的值更接近红色。
b轴：从蓝色到黄色。较低的值接近蓝色，越高的值更接近黄色。
警告
截至2022年底，只有WebKit支持lab()。
LCH 颜色
LCH代表亮度、色度和色调。它与Lab具有相同的L值，但不是使用坐标a和 b，而是使用C(色度）和H(色调)。色调可以是0到360之间的值。色度代表颜色的量，它类似于HSL 中的饱和度。但是色度值可以超过100，理论上它是无上限的。
对于色度值，目前的浏览器和显示器可以显示颜色量是有限的，只有0-230之间的值是有用的，超过之后就和230的差异就不大了。
警告
截至2022年底，只有Safari支持lch()值
Oklab和Oklch
Oklab和Oklch是Lab和LCH的改进版本，将通过oklab()和oklch()函数值在CSS中得到支持。Oklab是在大量视觉上相似的颜色上进行数值优化开发的，其结果是一个在色相线性和均匀性以及比CIE色彩空间更好的亮度均匀性方面都优于CIE色彩空间的色彩空间。Oklch是Oklab的极坐标版本，就像LCH是Lab的极坐标版本一样。由于这种更好的均匀性，Oklab和Oklch将成为CSS中颜色插值计算的默认值。然而，截至2022年底，只有Safari支持oklab()和oklch() CSS函数值。
使用color()
color()函数值允许在命名颜色空间中指定颜色，而不是隐含的sRGB颜色空间。它接受四个用空格分隔的参数，以及一个可选的第五个不透明度值，前缀为正斜杠(/)。
第一个参数是一个预定义的命名颜色空间。截至2022年底，可能的值包括srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz、xyz-d50和xyz-d65。随后的三个值是特定于第一个参数中声明的颜色空间的。有些颜色空间可能允许这些值为百分比，而其他颜色空间则不允许。
警告
截至2022年底，只有Safari支持color()。
应用颜色
既然我们已经了解了所有可能的颜色格式，让我们稍微讨论一下最常使用颜色值的属性：color。此属性设置元素的文本颜色和currentcolor的值。
角度
在 CSS 中，有以下几种常见的角度单位：
- 度数（deg）：以度数为单位的角度，可以是正数、负数或零。一个完整的圆是360度。
- 弧度（rad）：以弧度为单位的角度，通过将圆弧的长度定义为圆的半径的倍数来计算。一个完整的圆是2π弧度，约等于6.28318。
- 梯度（grad）：以梯度为单位的角度，一个完整的圆是400梯度。
- 百分比（%）：以百分比为单位的角度，相对于一个完整的圆。一个完整的圆相当于 100%。
时间和频率
属性是时间时，是一个 <number> 值后跟一个 s（秒）或 ms（毫秒）。时间值常用在过渡和动画中使用，用于定义持续时间或延迟时间。1s = 1000ms 。
视听CSS中有一种值 <frequency> ，它是一个 <number> 值后跟 Hz（赫兹）或KHz（千赫兹）。这个单位的标识符不区分大小写。Hz 和 hz 是等效的。
位置
指定原始图像在背景区域中的放置。（水平和垂直方向）
[
[ left | center | right | top | bottom | <percentage>
[ left | center | right | <percentage> | <length> ]
[ top | center | bottom | <percentage> | <length> ] |
[ center | [ left | right ] [ <percentage> | <length>
[ center | [ top | bottom ] [ <percentage> | <length>
]
如果您只声明一个值，例如left或25%，则第二个值设置为center。（水平left或25% 垂直center）
如果您声明两个值（无论是隐式地，如上例中，还是显式地），并且第一个值是长度或百分比，则它总是被认为是水平值。因此，给定25% 35px，25%是水平距离，35px是垂直距离。如果您交换它们说35px 25%，那么35px是水平的，25%是垂直的。
如果您声明了四个值您必须有两个长度或百分比，每个长度或百分比前面都有一个关键字。。因此，right 10px bottom 30px表示从右边缘向左偏移10像素，从底部边缘向上偏移30像素。同样，top 50% left 35px表示从顶部偏移50%，从左边缘向右偏移35像素。
您只能使用background-position属性声明三个位置值。如果您声明了三个值，规则与四个值的规则相同，只是第四个偏移设置为0（没有偏移）。因此，right 20px top与right 20px top 0相同。
自定义属性
任何这种类型的自定义标识符都以两个破折号（--）开头。然后可以在以后通过使用var()值类型来调用它。
请注意，这些名称是区分大小写的，所以--main-color和--Main-color是完全不同的标识符。
html {
--base-color: #639;
--highlight-color: #AEA;
}
h1 {color: var(--base-color);}
h2 {color: var(--highlight-color);}
