接上文

3、CSS中的颜色

最简单的办法：使用规定的颜色名称、设置红绿蓝三种颜色成分的值（十进制或十六进制）。

设置颜色成分值时，十进制值以逗号分隔，十六进制值前面通常要加上一个#符号（如：#ffffff，代表白色）

CSS颜色选编：

表示更复杂的颜色

颜色名称和简单的十六进制数不是表示颜色的唯一方法。

CSS颜色函数：

4、CSS中的长度

设置长度值时，应让数字和单位标识符连在一起，二者之间不加空格或其他字符。

4.1、绝对长度

css支持五种绝对单位

⚠️一条样式中可以混合使用多种单位，包括混合使用绝对单位和相对单位。 相对单位更灵活、更容易管理。

4.2、相对长度

相对长度的规定和实现都比绝对长度更复杂，需要以严密、精确的语言明确定义。

①与字号挂钩的相对单位

使用相对单位时所设置的实际上是另一种度量值的倍数。

<style>
p {    
background: grey;         
color:white;font-size: 15pt;     
height: 2em;
}
</style>
height属性值设置为2em，意思是：p元素在屏幕上显示出来的高度应为字号的两倍。这个倍数是在显示每个元素的时候计算出来的。

⚠️相对单位还可以用来表示另一个相对单位的倍数。

<style type="text/css">
html {font-size: 0.2in;}                
p {               
background: grey;          
color:white;
font-size: 2rem;
height: 2em;              
   }       
</style>

rem单位根据html元素（文档的根元素）的字号而定。

font-size属性值被设置为2rem，这表示使用该值的所有元素的字号将是根元素字号的两倍——0.4英寸

⚠️第三个与字体相关的相对单位是ex。这个单位指的是当前字体的x高度，即字体基线到中线之间的距离，一般与字母x的高度相当，1ex～0.5em

②像素单位的问题

像素定义：参考像素是距读者一臂之遥的像素密度为96dpi的设备上一个像素的视角（visual angle）。

它们将1像素视为1英寸的1/96

<style>
p {           
background: grey;    
color:white;font-size: 20px;
width: 200px;   
 }
</style>

⚠️CSS像素原本是个相对单位，但在实际使用中却变成了绝对单位，因此就没那么灵活了。

③百分比单位

可以把一个度量单位表示为其他属性值的百分比

<style>
p {            
 background: grey;   
 color:white;
font-size: 200%;
width: 50%;    
 }
</style>

⚠️使用百分比单位会遇到两个麻烦。一是并非所有属性都能用这个单位。二是对于能用百分比单位的属性，那个百分比挂钩的其他属性各不相同。

④未获广泛支持的CSS属性

⑤用算式作值

<style>
p { 
background: grey; 
color:white;        
font-size: 20pt;     
width: calc(80% -20px);   
}
</style>

算式包含在关键字calc之后的括号之中。在其中可以混合各种单位进行基本的算术运算。