HTML5/CSS編程實(shí)戰(zhàn)

CSS 通過使用十六進(jìn)制代碼設(shè)置特定的顏色預(yù)覽模式

你是否知道在 CSS 中還有其他表示顏色的方法?其中的一種方法稱作 hexadecimal code(十六進(jìn)制編碼),簡寫為hex code。

我們通常使用decimals,也就是十進(jìn)制數(shù)字,它對每一位數(shù)字使用符號0到9來表示。Hexadecimals(或hex)是十六進(jìn)制數(shù)字,這意味著它使用十六個不同的符號。像十進(jìn)制那樣,符號 0-9 代表數(shù)值零到九,再使用 A、B、C、D、E、F 代表數(shù)值十到十五。合在一起,用 0 到 F 可以代表hexadecimal中的每一位數(shù)字,共為我們提供 16 個可能的數(shù)值。你可以在這兒找到更多關(guān)于十六進(jìn)制數(shù)字的信息。

在 CSS 中,我們可以使用 6 位十六進(jìn)制數(shù)字來表示顏色,每 2 位分別表示紅色 (R)、綠色 (G) 和藍(lán)色 (B) 成分。例如,#000000是黑色,同時也是可能的數(shù)值中最小的。你可以在這兒找到更多關(guān)于 RGB 顏色系統(tǒng)的信息。

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

body {

background-color: #000000;

}

CSS 十六進(jìn)制白色表達(dá)方式

0是 hex code(十六進(jìn)制編碼)中最小的一個,它代表顏色的完全缺失。

F是 hex code(十六進(jìn)制編碼)中最大的一個,它代表最大可能的亮度。

讓我們通過把 background-color 的 hex code 修改為#FFFFFF,以把body元素的背景改為白色。

body {

background-color: #FFFFFF;

}

CSS 十六進(jìn)制RGB紅色表達(dá)方式

你可能會疑惑為什么我們使用6位數(shù)來表示一種顏色而不是只用一位或二位,答案是使用6位數(shù)可提供給我們巨大數(shù)量的顏色變化。

會有多少種可能的顏色?16 個值和 6 個位置意味著我們有 16 的 6 次方,或者說超過 1600 萬種可能的顏色。

Hex code 遵循 red-green-blue(紅-綠-藍(lán)),或者叫rgb格式。hex code 中的前兩位表示顏色中紅色的數(shù)量,第三四位代表綠色的數(shù)量,第五六位代表藍(lán)色的數(shù)量。

所以要得到絕對的純紅色,你只需要在第一和第二位使用F(最大可能的數(shù)值),且在第三、第四、第五和第六位使用0(最小可能數(shù)值)。

通過對 background-color 應(yīng)用 hex code 值#FF0000以把body元素的背景色設(shè)置為紅色。

body {

background-color: #FF0000;

}

CSS 十六進(jìn)制RGB綠色表達(dá)方式

記住hex code遵循 red-green-blue(紅-綠-藍(lán)),或稱為rgb格式。hex code 中的前兩位表示顏色中紅色的數(shù)量,第三四位代表綠色的數(shù)量,第五六位代表藍(lán)色的數(shù)量。

所以要得到絕對的純綠色,你只需要在第三和第四位使用F(最大可能的數(shù)值),且在其它位使用0(最小可能數(shù)值)。

通過對 background-color 應(yīng)用 hex code 值#00FF00以把body元素的背景色設(shè)置為綠色。

body {

background-color: #00FF00;

}

CSS 十六進(jìn)制RGB藍(lán)色表達(dá)方式

hex code遵循 red-green-blue(紅-綠-藍(lán)),或稱為rgb格式。hex code 中的前兩位表示顏色中紅色的數(shù)量,第三四位代表綠色的數(shù)量,第五六位代表藍(lán)色的數(shù)量。

所以要得到絕對的純藍(lán)色,你只需要在第五和第六位使用F(最大可能的數(shù)值),且在其它位使用0(最小可能數(shù)值)。

通過對 background-color 應(yīng)用 hex code 值#0000FF以把body元素的背景色設(shè)置為藍(lán)色。

body {

background-color: #0000FF;

}

CSS 十六進(jìn)制RGB混合顏色

從這三種純色(紅、綠、藍(lán)),我們能得到 1600 萬種其它的顏色。

例如,橙色是純紅,混合一些綠,沒有藍(lán)。

通過對 background-color 應(yīng)用 hex code 值#FFA500以把body元素的背景色設(shè)置為橙色。

body {

background-color: #FFA500;

}

CSS 灰色度設(shè)置

從這三種純色(紅、綠、藍(lán)),我們能得到 1600 萬種其它的顏色。

我們也可以通過平均混合所有三種顏色得到不同灰度等級的灰色。

通過對 background-color 應(yīng)用 hex code 值#808080以把body元素的背景色設(shè)置為灰色。

body {

background-color: #808080;

}

CSS 不同等級的灰度設(shè)置

通過平均混合所有三種顏色,我們還可以得到其他色度等級的灰色,這樣我們可以非常接近純黑色。

通過對 background-color 應(yīng)用 hex code 值#111111以把body元素的背景色設(shè)置為深灰色。

CSS 十六進(jìn)制RGB表達(dá)式縮寫

許多人對超過 1600 萬種顏色感覺十分地抓狂,并且 hex code 非常難以記憶。幸運(yùn)的是,你可以縮短它。

例如,紅,hex code 是#FF0000,可被縮寫成#F00。也就是說,一位表示紅,一位表示綠,一位表示藍(lán)。

這會把所有可能的顏色數(shù)減少至大約 4000 種,但是瀏覽器會把#FF0000和#F00解釋為完全相同的顏色。

繼續(xù)前進(jìn),嘗試使用#F00把body元素的背景色改為紅色。

body {

background-color: #F00;

}

CSS 使用rgb屬性設(shè)定顏色

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

代表黑色的 RGB 值看起來是下面的樣子:

rgb(0, 0, 0)

代表白色的 RGB 值看起來是下面的樣子:

rgb(255, 255, 255)

使用rgb,你通過 0 至 255 之間的一個數(shù)字來指定每種顏色的亮度,而不是像 hex code 那樣使用六個十六進(jìn)制數(shù)字。

如果你做個算術(shù),16 乘以 16 總共有 256 個值,所以從零開始計(jì)數(shù)的rgb,和 hex code 一樣有完全相同數(shù)量的可能數(shù)值。

讓我們用黑色的 RGB 值rgb(0, 0, 0)替換掉body元素背景色的 hex code。

body {

background-color: rgb(0,0,0);

}

CSS 使用rgb屬性設(shè)定白色

代表黑色的 RGB 值看起來是下面的樣子:

rgb(0, 0, 0)

代表白色的 RGB 值看起來是下面的樣子:

rgb(255, 255, 255)

使用rgb,你通過 0 至 255 之間的一個數(shù)字來指定每種顏色的亮度,而不是像 hex code 那樣使用六個十六進(jìn)制數(shù)字。

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

body {

background-color: rgb(255, 255, 255);

}

CSS 使用rgb屬性設(shè)定紅色

和使用 hex code 一樣,你可以通過不同數(shù)值的組合來表示 RGB 中不同的顏色。

這些數(shù)值遵循 RGB 順序模式:第一位表示紅色,第二位表示綠色,第三位表示藍(lán)色。

把body元素的背景色修改為紅色的 RGB 值:rgb(255, 0, 0)。

body {

background-color: rgb(255, 0, 0);

}

CSS 使用rgb屬性設(shè)定綠色

現(xiàn)在將body元素的背景色修改為綠色的rgb值:rgb(0, 255, 0)。

body {

background-color: rgb(0, 255, 0);

}

CSS 使用rgb屬性設(shè)定藍(lán)色

將你的body元素的背景色修改為藍(lán)色的 RGB 值:rgb(0, 0, 255)。

body {

background-color: rgb(0, 0, 255);

}

CSS 使用rgb屬性設(shè)定混合顏色

就像使用 hex code 一樣,你可以使用不同數(shù)值的組合在 RGB 中混合出各種顏色。

將body元素的背景色修改為橙色的 RGB 值:rgb(255, 165, 0)。

body {

background-color: rgb(255, 165, 0);

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容