CSS允許你使用HTML 網(wǎng)頁(yè)設計師很熟悉的十六進(jìn)制顏色記法來(lái)定義顏色:
h1 {color:#FF0000;} /* set *Hls to red */
h2 {color:#903BC0;} /* set H2s to a dusky purple */
h3 {color:#000000;} /* set H3s to black */
h4 {color:#808080;} /* set H4s to medium gray */
到目前為止,計算機使用“十六進(jìn)制記法”已經(jīng)有相當長(cháng)的時(shí)間,網(wǎng)頁(yè)開(kāi)發(fā)人員往往會(huì )經(jīng)過(guò)培訓或由實(shí)戰經(jīng)驗來(lái)了解如何使用十六進(jìn)制。由于他們對十六進(jìn)制記法相當熟悉,所以在老式的HTML中往往會(huì )使用十六進(jìn)制記法來(lái)設置顏色。這種做法也沿襲到了CSS中。以下介紹其工作原理:將三個(gè)介于00~FF的十六進(jìn)制數連起來(lái),就可以設置一種顏色。這種記法的一般語(yǔ)法是#RRGGBB。注意,在這三個(gè)數之間沒(méi)有空格、逗號或其他分隔符。
十六進(jìn)制記法在數學(xué)上等價(jià)于上一節討論的整數三元組記法。例如,rgb(255, 255,255)就完全等價(jià)于#FFFFFF,而rgb(51,102,128>則與#336680完
全相同。你完全可以使用你想用的任何記法,無(wú)論哪一種記法,大多數用戶(hù)代理給出的表示都是相同的。如果你有一個(gè)計算器;可以在十進(jìn)制和十六進(jìn)制之間轉換,那么在這兩種記法間切換相當簡(jiǎn)單。
如果組成十六進(jìn)制數的3組數各自都是成對的,CSS還允許采用一種簡(jiǎn)寫(xiě)記法。這種記法的一般語(yǔ)法是#RGB:
h1 {color:#000;}/* set H1s to black */
h2 (color:#666;}/* set H2s to dark gray */
h3 {color:#FFF;}/* set H3s to wh1te */
從標記可以看到,每個(gè)顏色值中只有3位。不過(guò),因為00~FF之間的十六進(jìn)制數需要2位,而你總共只有3位,這又是怎么做到的呢?
答案是,瀏覽器會(huì )取每一位,井將其復制成兩位。因此,#F00等價(jià)于#FF0000,#6FA與#66FFAA相同,#FFF則變成#FFFFFF,這就是white。顯然,并非每種顏色都可以采用這種方式表示。例如,中灰色(medium gray)用標準十六進(jìn)制記法可以寫(xiě)作#808080。這就不能用簡(jiǎn)寫(xiě)記法來(lái)表示,與其最接近的記法是#888,而這等同于#888888。
對于我們前面討論的所有顏色,表4-1做了一個(gè)總結。瀏覽器可能無(wú)法識別這些顏色關(guān)鍵字,因此,為了更為安全,要用RGB或十六進(jìn)制三元組值來(lái)定義。另外,有些簡(jiǎn)寫(xiě)的十六進(jìn)制值根本不會(huì )出現。在這些情況下,采用標準記法的較長(cháng)值(6位)不能簡(jiǎn)寫(xiě)為3位,因為這些值不能進(jìn)行復制。例如,值#880會(huì )擴展為#888800而不是#808000 (即olive)。因此,#808000沒(méi)有簡(jiǎn)寫(xiě)版本,表中相應的項為空。
所謂“Web安全”顏色是指,在256色計算機系統上總能避免抖動(dòng)的顏色。Web安全顏色可以表示為RGB值20%和51 (相應的十六進(jìn)制值為33)的倍數。另外,0%或0也是一個(gè)安全值。因此,如果使用RGB百分數,要讓所有這3個(gè)分量都要么是0%,要么是一個(gè)能被20整除的數,例如rgb(40%,100%,80%)或rgb(60%,0%,0%)。如果使用0~255 范圍的RGB值,則各分量值要么是0要么是能被51整除的數,如rgb(0,204,153)或 rgb(255,0,102。
采用十六進(jìn)制記法,使用值00、33、66、99、CC和FF的三元組都認為是Web安全的。這種例子有#669933、#00CC66、#FF00FF。這說(shuō)明,Web安全顏色的簡(jiǎn)寫(xiě)十六進(jìn)制值是0, 3, 6, 9, C,和F,因此,#693、#0C6和#F0F都是Web安全顏色的例子。
當前文章標題:網(wǎng)頁(yè)設計師的十六進(jìn)制RGB顏色
當前URL:http://amzcoolest.com/news/wzzz/16-hexadecima-color.html