第四章：值和单位

4.1 关键字，字符串和其他文本值

关键字

有时，值用一个词表示，这就是关键字。

none是一个常见的关键字，如果想要移除链接的下划线，可以这么写

a:link, a:visited{text-decoration: none;}

全局关键字

CSS3定义了几个全局关键字，所有的属性都能使用：inherit, initial和unset。

inherit关键字：inherit元素把某个属性的值设为和父元素同一属性的值一样。
initial关键字：initial把属性设为预定义的值，相当于重置。
unset关键字：unset会自动选取inherit或initial，对于继承的属性来说，使用inherit，不继承的属性，使用initial。

这三个关键字在所有的属性中都可以使用。

all这个特殊的属性只接受这几个全局关键字。

all 表示除了 unicode-bidi 与 direction 之外的所有属性。

字符串

字符串指放在单引号或双引号内的任意字符序列。

URL

URL分为绝对URL和相对URL。

引用URL的格式如下：

url(protocol://server/pathname) /* 绝对URL */
url(pathname) /* 相对URL */

标识符

有些属性接收标识符，最常见的有生成的列表序号。在取值语法中用<identifier>表示。

4.2 数字和百分数

名称	数据类型	说明
整数	`<integer>`	由一到多个数组成，前面可以有`+`或`-`，表示正数和负数。
数字	`<number>`	整数或者实数（小数）。
百分数	`<percentage>`	在`number`后加一个`%`。
弹性值	`<flex>`	在`number`后加`fr`。

4.3 距离

<length>是表示距离尺寸的一种CSS数据格式。<length>数据类型包含number，后面跟长度单位。

绝对长度单位

类型	说明
`cm`	厘米
`mm`	毫米
`q`	四分之一毫米
`in`	英寸（2.54厘米）。`1in` = `2.54cm` = `96px`.
`pt`	点（1/72 英寸）。`1pt` = 1/12 `pc`.
`pc`	派卡。`1pc` = `12pt` = 1/6 `in`.
`px`	`1px` = 1/96 `in`.

如果显示器的像素密度与每英寸96px相差特别大，用户代理应该缩放像素度量，使用参考像素。

分辨率单位

随着媒体查询和响应式设计的出现，为了描述显示器的分辨率，出现了3个新的单位。

类型	说明
`dpi`	表示每英寸的点数。
`dpcm`	表示每`cm`的点数。
`dppx`	表示每`px`的点数。`1dppx` = `96dpi`

相对长度单位

相对长度代表着以其它距离为单位的一种尺寸。使用这个单位的，可以是指定字符的大小，行高，或者是viewport的大小。

类型	说明
`em`	1em等于元素的`font-size`属性值。
`ex`	ex指所用字体中小写字母x的高度。
`rem`	1rem等于根元素的`font-size`属性值。
`ch`	这一单位代表元素所用字体 `font`中“0”这一字形的预测尺寸。

视口相关的单位

视口百分比长度定义相对于viewport的大小的<length>值，即文档的可见部分。

类型	说明
`vw`	视口宽度的 1/100。
`vh`	视口高度的 1/100。
`vmin`	视口高度和宽度之间的最小值的 1/100。
`vmax`	视口高度和宽度之间的最大值的 1/100。

4.4 计算值：calc()

calc() 函数允许在声明CSS属性值时执行一些计算。

它可以用在如下场合：<length>、<frequency>, <angle>、<time>、<number>、或<integer>。

例如：

/* property: calc(expression) */
width: calc(100% - 80px);

calc() 函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是+, -, *, /（加减乘除）操作符的组合，采用标准操作符处理法则的简单表达式。在需要时，还可以使用小括号来建立计算顺序。

有以下限制：

在 + 和 - 运算符两边必须使用相同的单位类型。
* 计算的两个值中必须有一个是 <number> 。
/ 计算的两个值的右侧的那个必须是 <number> 。
任何情况下都不能除以0。
在 + 和 - 运算符两边必须有空白。

4.5 属性值

在一些CSS属性中，可以使用样式表对应的元素上的HTML属性值，方法是使用attr() 表达式。

比如：

p::before {content: "[" attr(id) "]";}

对于以下文档：

<p id="text">
    这是一段文本
</p>

结果为：

attr() 理论上能用于所有的CSS属性，但目前支持的仅有伪元素的 content 属性

4.6 颜色

色彩关键字

如果只想使用基本的颜色，使用色彩关键字是最简单的办法。

色彩关键字是不区分大小写的标识符，它表示一个具体的颜色，例如 red, blue, brown, lightseagreen 。

RGB 和 RGBa 颜色

颜色可以使用红-绿-蓝（red-green-blue (RGB)）模式被定义。

函数式RGB

rgb(R,G,B)，rgb 后跟3个 <integer> 或3个 <percentage> 值。整数 255 相当于 100%，和十六进制符号里的 F 或 FF 。

十六进制RGB

#RRGGBB 和 #RGB

# 后跟6位十六进制字符（0-9, A-F）。
# 后跟3位十六进制字符（0-9, A-F）

三位数的 RGB 符号（#RGB）和六位数的形式（#RRGGBB）是相等的。例如， #f03 和 #ff0033 代表同样的颜色。

函数式RGBa

rgba() 函数在红-绿-蓝-阿尔法（RGBa）模式下被定义。RGBa 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。 a 表示透明度：0=透明；1=不透明；

十六进制RGBa

#RRGGBBaa 和 #RGBa

与RGBa一样，多出来的a为alpha通道的值。

HSL 和 HSLa 颜色

HSL即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

色相（Hue） 表示色环（即代表彩虹的一个圆环）的一个角度（0~360度）。这个角度作为一个无单位的 <numbe> 被给出。定义 red=0=360，其它颜色分散于圆环，所以 green=120, blue=240，以此类推。作为一个角度，它隐含像 -120=240 和 480=120 这样的回环。

饱和度和明度由百分数来表示。

100% 是满饱和度，而 0% 是一种灰度。

100% 亮度是白色， 0% 亮度是黑色，而 50% 亮度是“一般的”。

HSLa

颜色可以使用 hsla() 函数符在色相-饱和度-明度-阿尔法（HSLa）模式下被定义。HSLa 扩展自 HSL 颜色模式，包含了阿尔法通道，可以规定一个颜色的透明度。 a 表示透明度：0=透明；1=不透明；

特殊的颜色关键字

有两个颜色关键字可以在任何允许使用颜色值的地方使用：

transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色。从技术上说，它是带有阿尔法通道为最小值的黑色，是 rgba(0,0,0,0) 的简写。
currentColor 关键字代表当前元素的 color 属性的计算值。

4.7 角度

类型	说明
`deg`	度数。完整的圆周是360度。
`grad`	百分度。完整的圆周是400百分度。
`rad`	弧度。完整的圆周是2π。
`turn`	圈数。一个完整的圆周是一圈。

4.8 时间和频率

<time> 数据类型表达了以秒（s）或毫秒（ms）为单位的时间的值。于animation、transition及相关属性中使用，用来定义持续时间或延迟时间。它是一个 <number> 值后跟一个s（秒）或者ms（毫秒）。

<frequency> 数据类型表示频率维度，像一个说话声音的音调。它由一个<number> 值后跟一个 hz（赫兹）或 khz （千赫兹）组成。

4.9 位置

<position> 数据类型表示用于设置相对于框的位置的2D空间中的坐标，用来指定图像在背景区域的位置（background-position 属性）。

定义：

[
    [ left | center | right | top | bottom | <percentage> | <length> ] |
    [ left | center | right | <percentage> | <length> ]
    [ top | center | bottom | <percentage> | <length> ] |
    [ center | [ left | right ] [ <percentage> | <length> ]? ] && 
    [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
]

声明一个值

如果只声明一个值，那么第二个值将被设置为 center 。

left;
/* 实际上为 */
left center;

声明两个值

如果声明了两个值（像上面那样隐式或显式），而且第一个值为长度或者百分数，那么前一个值始终是横向值。

25% 35px;/* 25% 是横向距离， 35px是纵向距离。 */
35px 25%;/* 35px 是横向距离， 25% 是纵向距离。 */

所以如果写 25% left 将会无效，因为两个值都是横向距离，没有指定纵向距离。（同理 left right 等也无效）。

如果写成 left 25% 有效，因为既指定了横向距离，又指定了纵向距离。

声明三个值

三个值的最后一个值被设置为0，然后按照四个值去处理。所以 right 20px bottom 和 right 20px bottom 0 效果一样。

声明四个值

如果声明四个值，必须有两个长度或百分数，而且它们前面都得是关键字。比如 right 10% top 25px 。

4.10 自定义值：CSS 变量

CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var() 来访问。

var() 函数可以代替元素中任何属性中的值的任何部分。var() 函数不能作为属性名、选择器或者其他除了属性值之外的值。

CSS 变量定义由 -- 开头，区分大小写。

div {
    --default--color: red;
}
p {color: var(--default--color);}

对于文档：

<div>
    <p>一段文本</p>
</div>