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)。