CSS初級(jí)教程顏色_CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
CSS擁有1677216色供你處置,可以用名字,rgb(紅綠藍(lán))值或者十六進(jìn)制代碼(hex)值來(lái)表示。
有16中合法的預(yù)定義顏色名字。它們是:aqua(水綠)、 black(黑)、blue(藍(lán))、 fuchsia(紫紅)、 gray(灰)、 green(綠)、lime(淺綠)、 maroon(褐)、navy(深藍(lán))、 olive(橄欖)、purple(紫)、 red(紅)、silver(銀)、 teal(深青)、white(白)和 yellow(黃)。
透明transparent也是一個(gè)合法值。
在rgb的從0至255的三個(gè)值中,0是最低階的(如沒(méi)有紅色),255是最高階(如全是紅色)。這些值也可以是百分比。
十六進(jìn)制Hexadecimal(以“Sexadecimal”更為人知和更正確的用法)是16位的系統(tǒng)。我們?nèi)粘I钪谐S玫氖鞘M(jìn)制系統(tǒng)(基于10,從0到9),但十六進(jìn)制有16個(gè)數(shù)字,從0到f。
在CSS中的十六進(jìn)制用半角英文井號(hào)#來(lái)定義,后面跟隨3或6位數(shù)字。基本上,3位是6位的壓縮版(#f00就是#ff0000,#c96就是#cc9966等等)。3位版本比較輕易解釋(第一個(gè)數(shù)字,像rgb的第一個(gè)值,是紅色的,第二個(gè)綠色,不用說(shuō),第三個(gè)就是藍(lán)色了),但6位版本給你更多的顏色精確控制權(quán)。
前景色和背景色
顏色可以用color和background-color(注重這必須用美式英語(yǔ)中的color而不是colour)來(lái)應(yīng)用。
下面演示一段有藍(lán)色背景和黃色前景的文本的CSS:
這些顏色讓人感到有點(diǎn)粗糙,所以你可以進(jìn)一步改進(jìn)CSS代碼,使文本看起來(lái)清爽一點(diǎn):
保存這個(gè)CSS文檔,然后刷新瀏覽器。你可以看到第一級(jí)標(biāo)題(h1元素)已經(jīng)變成介于黃藍(lán)之間的混色。
你可以應(yīng)用color和background-color的屬性到大部分的HTML元素中,包括body,它可以改變整個(gè)頁(yè)面所有東西的顏色。
示例代碼 [www.hl5o.cn]
紅色red
相同于
rgb(255,0,0)
相同于
rgb(100%,0%,0%)
相同于
#ff0000
相同于
#f00
相同于
rgb(255,0,0)
相同于
rgb(100%,0%,0%)
相同于
#ff0000
相同于
#f00
有16中合法的預(yù)定義顏色名字。它們是:aqua(水綠)、 black(黑)、blue(藍(lán))、 fuchsia(紫紅)、 gray(灰)、 green(綠)、lime(淺綠)、 maroon(褐)、navy(深藍(lán))、 olive(橄欖)、purple(紫)、 red(紅)、silver(銀)、 teal(深青)、white(白)和 yellow(黃)。
透明transparent也是一個(gè)合法值。
在rgb的從0至255的三個(gè)值中,0是最低階的(如沒(méi)有紅色),255是最高階(如全是紅色)。這些值也可以是百分比。
十六進(jìn)制Hexadecimal(以“Sexadecimal”更為人知和更正確的用法)是16位的系統(tǒng)。我們?nèi)粘I钪谐S玫氖鞘M(jìn)制系統(tǒng)(基于10,從0到9),但十六進(jìn)制有16個(gè)數(shù)字,從0到f。
在CSS中的十六進(jìn)制用半角英文井號(hào)#來(lái)定義,后面跟隨3或6位數(shù)字。基本上,3位是6位的壓縮版(#f00就是#ff0000,#c96就是#cc9966等等)。3位版本比較輕易解釋(第一個(gè)數(shù)字,像rgb的第一個(gè)值,是紅色的,第二個(gè)綠色,不用說(shuō),第三個(gè)就是藍(lán)色了),但6位版本給你更多的顏色精確控制權(quán)。
前景色和背景色
顏色可以用color和background-color(注重這必須用美式英語(yǔ)中的color而不是colour)來(lái)應(yīng)用。
下面演示一段有藍(lán)色背景和黃色前景的文本的CSS:
示例代碼 [www.hl5o.cn]
h1 {
color: yellow;
background-color: blue;
}
color: yellow;
background-color: blue;
}
這些顏色讓人感到有點(diǎn)粗糙,所以你可以進(jìn)一步改進(jìn)CSS代碼,使文本看起來(lái)清爽一點(diǎn):
示例代碼 [www.hl5o.cn]
body {
font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}
font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}
保存這個(gè)CSS文檔,然后刷新瀏覽器。你可以看到第一級(jí)標(biāo)題(h1元素)已經(jīng)變成介于黃藍(lán)之間的混色。
你可以應(yīng)用color和background-color的屬性到大部分的HTML元素中,包括body,它可以改變整個(gè)頁(yè)面所有東西的顏色。
相關(guān)CSS教程:
- 相關(guān)鏈接:
- 教程說(shuō)明:
CSS教程-CSS初級(jí)教程顏色
。