CSS学习03：CSS颜色与单位

我们会在很多地方看到CSS单位中使用到数值。下面将介绍数值的最常用类别。

1、CSS颜色

网页中的颜色设置非常重要，有字体颜色，背景颜色，边框颜色等，设置颜色的方法也有很多种。

英文命名颜色

p {
  color: pink;
}/*给p标签的字体颜色设置为粉色*/

RGB颜色

由 Red、Green、Blue 三种颜色的比例来配色，简称 RGB。

p {
  color: rgb(154, 51, 102);
}

每一项的值可以是 0~255 之间的整数，也可以是 0~100% 的百分数，如：

p {
  color: rgb(30%, 20%, 40%);
}

十六进制颜色（Hexadecimal colors）

现在较为普遍的颜色使用法，每个十六进制颜色由红、绿、蓝三部分组成，其原理其实也是 RGB 设置。

红、绿、蓝这三种颜色，每一部分的取值范围可以从十六进制 00~FF或者从十进制的0~255。

示例：

p {
  color: #00eeff;
}

十进制数的分解

十六进制数的分解

我们需要理解十六进制数中的字母，十六进制个位数字的取值范围是0~15，但是9以上的数字用字母表示。

A = 10 
B = 11
C = 12
D = 13
E = 14
F = 15

计算十六进制色

网页颜色

使用十六进制数来设置颜色，三个颜色，每个颜色有256种可能的取值，总共16777216种颜色。

2、长度值

长度单位总结了几种常用单位：px，em，rem，%，这三种单位都是相对单位。

像素

px 像素（Pixel）。相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的。

特点：

• IE 无法调整那些使用 px 作为单位的字体大小。
• 国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位。

em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em=14px。如果 font-size 为 18px，那么 1em=18px。

p {
  font-size: 14px;
  line-height: 2em;
}
/*在这里的line-height行高被设置成了14*2=28px*/

div中的p元素字体大小为20px，则1em = 20px。

p的字体大小是从div继承下来的，为12px。

p的字体大小是从html继承下来的，为14px。

所以em为元素的字体大小。

rem

rem是CSS3中新增的一种相对长度单位。 当使用rem单位时，根节点的字体大小（font-size）决定了rem的尺寸。
类似于em单位，但rem的基准是相对于根节点的字体大小。

%

p {
  font-size: 14px;
  line-height: 120%;
}
/*行高为：14*1.2=16.8*/

3、挑战

制作谷歌图标