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