前端：HTML5 and CSS 入门（四）

1.Override Class Declarations by Styling ID Attributes

我们刚刚证明了浏览器读取 CSS 的顺序是从上到下，这意味着，在发生冲突时，浏览器会使用最后的 CSS 声明。

但是并非只有这些，还有其他覆盖 CSS 的方法。你还记得 id 属性吗？

让我们来覆盖你的 pink-text 和 blue-text 两个 class，通过为 h1 元素添加 id 并设置 id 的样式，使你的 h1 元素变成 orange（橙色）。

给你的 h1 元素添加名为 orange-text 的 id 属性。记住，id 样式看起来是这样的：

在你的 h1 元素中保留 blue-text 和 pink-text 两个 class。

在你的 style 元素中为你的 orange-text id 创建一个 CSS 声明，就像下面例子中的样子：

#brown-text {
color: brown;
}
注意：你声明的这个 CSS 在 pink-text类选择器的上面还是下面是无所谓的，因为 id 属性总是具有更高的优先级。

2.Override Class Declarations with Inline Styles

我们证明了无论在 style 元素 CSS 的哪个位置进行声明，id 声明都会覆盖 class 声明。

还有其他覆盖 CSS 的方法。你还记得行内样式吗？

试着用 in-line style（行内样式） 使 h1 元素变为白色。记住，行内样式看起来是这样的：

<h1 style="color: green">

保留 h1 元素中的 blue-text 和 pink-text 两个 class。

3.Override All Other Styles by using Important

耶！我们刚刚证明了行内样式将覆盖style 中定义的所有 CSS。

但是等一下，还有最后一种覆盖 CSS 的方法，这是所有方法中最强大的，但是在讲它之前，我们先讲讲为什么你要覆盖 CSS。

很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，你可以使用 !important。

让我们再回到我们的 pink-text class 声明。还记得不？我们的 pink-text class 被随后的 class 声明、id 声明和行内样式所覆盖了。

让我们来给 pink-text 元素的 color 声明加上关键字 !important，以便 100% 确保你的 h1 元素是粉色的。

举例如下：

color: pink !important;

4.Use Hex Code for Specific Colors

你是否知道在 CSS 中还有其他表示颜色的方法？其中的一种方法称作 hexadecimal code（十六进制编码），简写为 hex code。

我们通常使用 decimals，也就是十进制数字，它对每一位数字使用符号0到9来表示。Hexadecimals （或 hex）是十六进制数字，这意味着它使用十六个不同的符号。像十进制那样，符号 0-9 代表数值零到九，再使用 A、B、C、D、E、F 代表数值十到十五。合在一起，用 0 到 F 可以代表 hexadecimal 中的每一位数字，共为我们提供 16 个可能的数值。你可以在 这儿 找到更多关于十六进制数字的信息。

在 CSS 中，我们可以使用 6 位十六进制数字来表示颜色，每 2 位分别表示红色 ®、绿色 (G) 和蓝色 (B) 成分。例如，#000000 是黑色，同时也是可能的数值中最小的。你可以在 这儿 找到更多关于 RGB 颜色系统的信息。

把 body 元素的 background-color 由 black 替换成其 hex code 表示，即#000000。

5.Use Hex Code to Color Elements White

0 是 hex code（十六进制编码）中最小的一个，它代表颜色的完全缺失。

F 是 hex code（十六进制编码）中最大的一个，它代表最大可能的亮度。

让我们通过把 background-color 的 hex code 修改为 #FFFFFF，以把 body 元素的背景改为白色。

6.Use Hex Code to Color Elements Red

你可能会疑惑为什么我们使用6位数来表示一种颜色而不是只用一位或二位，答案是使用6位数可提供给我们巨大数量的颜色变化。

会有多少种可能的颜色？16 个值和 6 个位置意味着我们有 16 的 6 次方，或者说超过 1600 万种可能的颜色。

Hex code 遵循 red-green-blue（红-绿-蓝），或者叫 rgb 格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。

所以要得到绝对的纯红色，你只需要在第一和第二位使用 F （最大可能的数值），且在第三、第四、第五和第六位使用 0 （最小可能数值）。

通过对 background-color 应用 hex code 值 #FF0000 以把 body 元素的背景色设置为红色。

7.Use Hex Code to Color Elements Green

记住 hex code 遵循 red-green-blue（红-绿-蓝），或称为 rgb 格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。

所以要得到绝对的纯绿色，你只需要在第三和第四位使用 F （最大可能的数值），且在其它位使用 0 （最小可能数值）。

通过对 background-color 应用 hex code 值 #00FF00 以把 body 元素的背景色设置为绿色。

8.Use Hex Code to Color Elements Blue

hex code 遵循 red-green-blue（红-绿-蓝），或称为 rgb 格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。

所以要得到绝对的纯蓝色，你只需要在第五和第六位使用 F （最大可能的数值），且在其它位使用 0 （最小可能数值）。

通过对 background-color 应用 hex code 值 #0000FF 以把 body 元素的背景色设置为蓝色。

9.Use Hex Code to Mix Colors

从这三种纯色（红、绿、蓝），我们能得到 1600 万种其它的颜色。

例如，橙色是纯红，混合一些绿，没有蓝。

通过对 background-color 应用 hex code 值 #FFA500 以把 body 元素的背景色设置为橙色。

10.Use Hex Code to Color Elements Gray

11.Use Hex Code for Specific Shades of Gray

通过平均混合所有三种颜色，我们还可以得到其他色度等级的灰色，这样我们可以非常接近纯黑色。

通过对 background-color 应用 hex code 值 #111111 以把 body 元素的背景色设置为深灰色。

12.Use Abbreviated Hex Code

许多人对超过 1600 万种颜色感觉十分地抓狂，并且 hex code 非常难以记忆。幸运的是，你可以缩短它。

例如，红，hex code 是 #FF0000 ，可被缩写成 #F00。也就是说，一位表示红，一位表示绿，一位表示蓝。

这会把所有可能的颜色数减少至大约 4000 种，但是浏览器会把 #FF0000 和 #F00 解释为完全相同的颜色。

继续前进，尝试使用 #F00 把 body 元素的背景色改为红色。

13.Use RGB values to Color Elements

在 CSS 中表示颜色的另一个方法是使用 rgb 值。

代表黑色的 RGB 值看起来是下面的样子：

rgb(0, 0, 0)

代表白色的 RGB 值看起来是下面的样子：

rgb(255, 255, 255)

使用 rgb，你通过 0 至 255 之间的一个数字来指定每种颜色的亮度，而不是像 hex code 那样使用六个十六进制数字。

如果你做个算术，16 乘以 16 总共有 256 个值，所以从零开始计数的 rgb，和 hex code 一样有完全相同数量的可能数值。

让我们用黑色的 RGB 值 rgb(0, 0, 0) 替换掉 body 元素背景色的 hex code。

14.Use RGB to Color Elements White

代表黑色的 RGB 值看起来是下面的样子：

rgb(0, 0, 0)

代表白色的 RGB 值看起来是下面的样子：

rgb(255, 255, 255)

使用 rgb，你通过 0 至 255 之间的一个数字来指定每种颜色的亮度，而不是像 hex code 那样使用六个十六进制数字。

把 body 元素的背景色从黑色的 RGB 值修改为白色的 rgb 值 rgb(255, 255, 255)。

15.Use RGB to Color Elements Red

和使用 hex code 一样，你可以通过不同数值的组合来表示 RGB 中不同的颜色。

这些数值遵循 RGB 顺序模式：第一位表示红色，第二位表示绿色，第三位表示蓝色。

把 body 元素的背景色修改为红色的 RGB 值：rgb(255, 0, 0)。

16.Use RGB to Color Elements Green

17.Use RGB to Color Elements Blue

将你的 body 元素的背景色修改为蓝色的 RGB 值：rgb(0, 0, 255)。

18.Use RGB to Mix Colors