WEB基础之：CSS值和单位

1. 数字

CSS中有两类数字：整数和实数。实数定义为整数后可跟有小数点和小数部分。

2. 百分数

百分数是一个可计算得出的实数，其后跟一个百分号(%)。**百分数值几乎总是相对于另一个值，**这个值是任意的：可能是同一个元素另一个属性的值，也可以是从父元素继承的一个值，或者是祖先元素的一个值。

3. 颜色

颜色可使用命名颜色、十六进制代码或RGB指定。

3.1 命名颜色

/*命名颜色*/
p {color: gray;}

3.2 函数式RGB颜色

语法是rgb(color)，其中color用一个百分数（范围0%_{100%）或整数（范围0}255）三元组表示。

/*RGB指定颜色*/
p {color: rgb(100%, 0%, 0%)}

/*整数三元组指定颜色*/
p {color: rgb(255, 0, 0)}

如果值落在可取范围之外，都会裁剪到最接近的范围边界。如大于100%或小于0%，会默认地调整为100%或0%，三元组会默认地调整为255或0。

3.3 十六进制RGB颜色

原理：将三个介于00~FF的十六进制数连起来组成。

若十六进制数的3组数各自是对的，可以简写为：

p {color: #0F0}

3.4 Web安全颜色

在256色计算机系统上总能避免抖动的颜色。Web安全颜色可以表示为RGB值为20%和51（相应十六进制值为33）或0%（0）的倍数。

4. 长度单位

长度单位可以划分为绝对长度单位和相对长度单位两类。

4.1 绝对长度单位

共有5种绝对长度单位：英寸（in）、厘米（cm）、点（pt）、派卡（pc）

1in=25.4mm =72pt=6pc

绝对长度在只有当浏览器知道用来显示页面的显示器、所用的打印机或其他任何用户代理的所有细节时，这些单位才会有用。

4.2 相对长度单位

根据与其他事物的关系来度量，所度量的实际(绝对)距离可能因为其他因素改变。

4.2.1 em

1em为一种给定字体的font-size值，值随父元素的不同而不同。假设一个h1元素字体大小为24像素，一个h2元素字体大小为18像素，将这两个元素的莲距都设置为1em，那么它们的左边距就分别为24像素和18像素。

em是最灵活的，因为它随字体大小缩放，所以元素和元素操作都能更为一致。

4.2.2 ex

指所用字体中小写x的高度，不同字体的高度可能不同，因此ex可能不同。

4.2.3 像素长度

1px表示一个像素，取决于显示设备的分辨率。而之所以像素是相对长度，是因为显示器上的小色框是像素。在打印的时候，1px可能要使用96ppi参考像素。

5. URL

绝对URL

body {background: url("https://w.wallhaven.cc/full/x1/wallhaven-x1wroo.jpg")}

相对URL

body {background: url("images/1.jpg")}

6. 关键字

若一个属性接受关键字，那么共关键字将只针对该属性的作用域定义。

inherit: CSS2.1中所有属性共有，使一个属性的值与其父元素的值相同。（大多数情况下不必另外指定）。

正常情况下直接指定样式(用户代理的默认样式)优于继承样式，但通过inherit可以将情况反过来。

#toobar {background: blue; color: white;}
#toobar a {color: inherit;}

<div id="toobar">
    <a href="html1.html">one</a> | <a href="html2.html">two</a>
</div>

7. CSS2中的单位

角度值：用于定义给定声音的发出位置。共有3种，度（deg）、梯度（grad）和弧度（rad），可换算为0~360度范围内的度数，允许负数值。

时间值：用于指定语音元素之间的延迟，可表示为毫秒（ms）或秒（s）。1s=1000ms，不能是负数。

频率值：用于为语音浏览器可以产生的声音声明给定频率，可表示为赫兹（Hz）或兆赫（MHz），不能是负数。Hz或MHz标签不区分大小写。