CSS权威指南（4）

值和单位

---

一、关键字、字符串和其他文本值

1.关键字

有时，值用一个词表示，这叫关键字。例如none、normal、underline等。

全局关键字
CSS3定义了几个“全局”关键字，规范中的每个属性都能使用：inherit、initial和unset。
inherit关键字 把元素某个属性的值设为与父元素同一属性的值一样。即这个关键字强制继承，即便是在通常情况下不继承时。

代码如下（示例）：

#toolbar{background: blue;color: white;}

//通常a标签未设置时未点击颜色为蓝色
<div id="toolbar">
    <a href="css4_0404.html">One</a> | <a href="css4_0406.html">Two</a> |
    <a href="css4_0405.html">Three</a>
</div>

效果：

代码如下（示例）：

#toolbar{background: blue;color: white;}
#toolbar a {color:inherit;}//强制继承值

<div id="toolbar">
    <a href="css4_0404.html">One</a> | <a href="css4_0406.html">Two</a> |
    <a href="css4_0405.html">Three</a>
</div>

效果：

initial关键字 把属性的值设为预定义的初始值，相当于“重设”值。
unset关键字 是inherit和initial的通用替身。对于继承的属性来说，unset的作用相当于inherit；对于不继承的属性来说，unset的作用和initial一样。
all表示除direction和unicode-bidi之外的所有属性。all只接受inherit、initial和unset这三个全局关键字 。

2.字符串

字符串值指在单引号和双引号内的任意字符序列，定义可取得值时以表示。

3.URL

引用URL的一般格式如下：

url(protocol://server/pathname)//绝对位置
url(pathname)//相对位置

4.图像

图像值引用的是图像，句法使用<image>表示。<image>表示下面三种值中的一个：

• <url>指向外部资源的URL标识符
• <image-set>一系列图像，根据图中的条件选择
• <gradient>线性渐变或径向渐变图像，可以是单个的，也可以是重复的。

5.标识符

有些属性接收标识符值，即用户定义的某种标识符。标识符本身是词，而且区分大小写。

二、数字和百分数

1.整数

整数值由一到多个数组成，前面还可以有+或-号，分别表示正数和负数。在取值语法中，整数值用<integer>表示。

2.数字

数字值是<integer>或实数，后者指整数后跟一个点号，再跟一些整数。在取值句法中，数字值用<number>表示。

3.百分数

百分数值是在<number>后跟一个百分号（%），在取值句法中用<percentage>表示。

4.弹性值

弹性值是<number>后跟fr。单位弹性值是1fr。

三、距离

长度单位分为两种：绝对长度单位和相对长度单位。

1.绝对长度单位

绝对长度单位有七个，包括：英尺(in)、厘米(cm)、毫米(mm)、四分之一毫米(q)、点(pt)、派卡(pc)和像素(px)。

2.分辨率单位

随着媒体查询和响应式设计的出现，为了描述显示器的分辨率，出现了三个新的单位：点每英寸(dpi)、点每厘米(dpcm)和点每像素单位(dppx)。

3.相对长度单位

相对长度单位中的“相对”是指其长度是相对其他东西而言的，相对长度的实际值（或绝对值）根据不受其控制的因素而变。

em和ex单位
按CSS定义，1em等于元素的font-size属性值。理论上，1em等于所用字体中小写字母m的宽度 。如果使用em设定字号，那么它相对父元素的字号而言。
ex值所用字体中小写字母x的高度。

rem单位
rem也基于声明的字号。em相对于元素的字号计算，而rem是指相对于根元素（html）计算 。rem实际作用相当于重设字号。
代码如下（示例）：

<p> This paragraph has the same font size as the root element thanks to inheritance.</p>
<div style="font-size: 30px; background: silver;">
  <p style="font-size: 1em;">This paragraph has the same font size as its parent element.</p>
  <p style="font-size: 1rem;">This paragraph has the same font size as the root element.</p>
</div>

效果：

ch单位
CSS把ch单位定义为所用字体中一个零的进度。

视区相关的单位
CSS新增了三个与视区尺寸相关的单位，这些单位根据视区的尺寸计算。视区单位包括：

• 视区宽度单位（vw）：这个单位根据视区的宽度计算，然后除以100。
• 视区高度单位（vh）：这个单位根据视区的高度计算，然后除以100。
• 视区尺寸最小单位（vmin）：这个单位等于视区宽度或高度的1/100，始终取宽度和高度中较小的那个。
• 视区尺寸最大单位（vmax）：这个单位等于视区宽度或高度的1/100，始终取宽度和高度中较大的那个。

代码如下（示例）：

div {height: 50vh; width: 33vw; background: gray;}
body {height: 350px; width: 750px; border: 2px solid #444;}//视区大小
div {width: 50%; height: 33%;}

<div>A div!  It is half the width of the viewport and a third the height.  Six of them could create a full-viewport UI.</div>
<p>A paragraph which follows the single <code>div</code> we actually have in this example.</p>

效果：

四、计算值

CSS提供了cale()值，括号中允许使用的运算符有+、-、*、/，以及括号。
cale()限制：

• +和-号两侧的值必须使用相同的单位类型，或者是<number>和<integer>。
• *计算的两个值中必须有一个是<number>。
• /计算的两个值中右边的那个必须是<number>。左边是<integer>时，结果为一个<number>值，否则，结果的单位与左边的值一样。
• 任何情况下都不能除以零。

五、属性值

attr()可以使用样式对应的元素上的HTML属性值。

六、颜色

1.具名颜色

基本的具名颜色包括：aqua、gray、Navy、silver、black、green、Olive、teal、blue、lime、Purple、white、fuchsia、maroon、Red、yellow。

2.RGB和RGBa颜色

函数式RGB颜色
有两种颜色值使用函数值RGB表示法。
语法：

rgb(color) /*color是三个值，可以是百分数或整数*/

代码如下（示例）：

rgb(100%,100%,100%);
rgb(0,0,0);

RGBa颜色
这种表示法在RGB的三个通道后面增加了一个alpha值，alpha（不）的取值范围为0~1。
代码如下（示例）：

rgba(100%,100%,100%,0.5);
rgba(0,0,0,0.5);

十六进制RGB值
语法：

#RRGGBB

代码如下（示例）：

h1{color:#000;}/*如果每个十六进制中的两个数字相等，可以使用简短表示法*/
h2{color:#999aaa;}

十六进制RGBa值
代码如下（示例）：

p.one{color:#000000FF;}

3.HSL和HSLa颜色

HSL是Hue（色相）、Saturation（饱和度）和Lightness（明度）的简称，其中色相是角度值，取值范围是0-360，饱和度是从0（无饱和度）-100（完全饱和）的百分数，明度是从0（全暗）-100（全明）的百分数。
代码如下（示例）：

p.one{color:hsl(0,0%,0%);}
p.two{color:hsla(0,0%,0%,1);}

4.颜色关键字

transparent和currentColor可以在任何允许使用颜色值的地方使用。transparent表示完全透明的颜色，currentColor是当前元素color属性计算得到的值。

七、角度

角度一般用<anger>表示，包括：

• deg：度数，完整的圆周是360度。
• grad：百分度，完整的圆周是400百分度。
• rad：弧度，完整的圆周是2π。
• turn：圈数，一个完整的圆周是一圈。

八、时间和频率

<time>单位s（秒）或ms（毫秒），<frequency>单位Hz（赫兹）或kHz（千赫兹）。
代码如下（示例）：

a[href] {transition-duration:2.4s;}
h1 {pitch:128hz;}

九、位置

位置值用于指定图像在背景区域中的位置，使用<position>表示。

十、自定义值

自定义标识符以两个连字符开头（–）。调用的方法是使用var()值类型。