一、認(rèn)識CSS 顏色（CSS color）

這里要介紹的是網(wǎng)頁設(shè)置顏色包含有哪些；網(wǎng)頁顏色規(guī)定規(guī)范。

1、常用顏色地方包含：字體顏色、超鏈接顏色、網(wǎng)頁背景顏色、邊框顏色
2、顏色規(guī)范與顏色規(guī)定：網(wǎng)頁使用RGB模式顏色

二、顏色基礎(chǔ)知識

網(wǎng)頁中顏色的運(yùn)用是網(wǎng)頁必不可少的一個(gè)元素。使用顏色目的在于有區(qū)別、有動(dòng)感（特別是超鏈接中運(yùn)用）、美觀之用，同時(shí)顏色也是各種各樣網(wǎng)頁的樣式表現(xiàn)元素之一,了解CSS 字體顏色。

傳統(tǒng)的html顏色與w3c標(biāo)準(zhǔn)下的css顏色對比和DIV CSS運(yùn)用顏色

CSS color顏色語法：

color:#000000;

Css樣式中color后直接加RGB顏色值（#FFFFFF 、#000000 、#F00）
RGB顏色值在實(shí)際布局時(shí)候確定，可以使用Photoshop（簡稱PS）拾取工具進(jìn)行獲取獲得。

三、兩種方法設(shè)置對象顏色樣式

1、在DIV標(biāo)簽內(nèi)使用color顏色樣式
<div style="color:#F00">www.dbjr.com.cn</div>

2、在CSS選擇器中使用color顏色樣式CSS代碼：

.divcss5{color:#00F}

/* 設(shè)置對象divcss5內(nèi)文字為藍(lán)色 */

擴(kuò)展閱讀：這里運(yùn)用了CSS注釋對此樣式設(shè)置說明，了解CSS 注釋

3、DIV+CSS顏色樣式完整案例：

Css代碼：

HTML代碼：

4、實(shí)例結(jié)構(gòu)圖：




以上使用標(biāo)簽內(nèi)使用color顏色樣式和css代碼使用color顏色樣式。

四、文字顏色控制一樣  

傳統(tǒng)html和css 文字顏色相同使用“color：”+“RGB顏色取值”即可，如顏色為黑色字即對應(yīng)設(shè)置CSS屬性選擇器內(nèi)添加“color:#000;”即可。

五、網(wǎng)頁背景顏色設(shè)置區(qū)別  

傳統(tǒng)設(shè)置背景顏色使用“bgcolor=顏色取值”，而CSS中則“background:”+顏色取值。例如：設(shè)置背景為黑色，傳統(tǒng)Html設(shè)置，即在標(biāo)簽內(nèi)加入“bgcolor="#000"”即可實(shí)現(xiàn)顏色為黑色背景，如果在W3C中即在對應(yīng)CSS選擇器中始終“background:#000”實(shí)現(xiàn)。

六、設(shè)置邊框顏色區(qū)別  

傳統(tǒng)“bordercolor=取值”，CSS中“border-color:”+顏色取值。例如：在傳統(tǒng)html直接在table標(biāo)簽加入“bordercolor="#000"”即可，在現(xiàn)在CSS中設(shè)置“border-color:#000;”即可讓邊框顏色為黑色，同時(shí)記得對包括設(shè)置寬度和樣式（虛線、實(shí)現(xiàn)）。

DIV+CSS顏色值擴(kuò)展知識：
顏色值是一個(gè)關(guān)鍵字或一個(gè)數(shù)字的RGB規(guī)范。

16個(gè)關(guān)鍵字是采取從Windows的VGA調(diào)色板： 水色 ， 黑色 ， 藍(lán)色 ， 紫紅色 ， 灰 ， 綠 ， 灰 ， 褐紅色 ，藏青色， 橄欖色 ， 紫色 ， 紅色 ， 銀色 ， 青色 ， 白色 ， 黃色 。

七、RGB顏色給出了四種方法之一  

1、#rrggbb（ 如 ，＃00cc00） （強(qiáng)烈推薦使用此表示顏色取值）
2、#的RGB（ 如 ，＃0c0）
3、RGB（十中，x，x）的x是一個(gè)包容性的0和255之間的整數(shù)（ 如 的RGB（0,204,0））
4、RGB（Ÿ％，Ÿ％，Ÿ％），其中 y是一個(gè)包容性的數(shù)量介于0.0和100.0（ 如 的RGB（0％，80％，0％））

八、以下是RGB顏色表




當(dāng)然一般的網(wǎng)頁開發(fā)軟件都有顏色取值器：


網(wǎng)頁開發(fā)軟件DW軟件中CSS取色器

如何獲得CSS顏色值？

我們又不能記住顏色值，以及如何確定準(zhǔn)確的與美工圖相同顏色值呢？其實(shí)很簡單通常我們是在PS軟件里通過識色器工具進(jìn)行獲得準(zhǔn)確顏色值，當(dāng)然也可以借用其它專門識別顏色工具進(jìn)行獲取準(zhǔn)確的color顏色值。

九、div css color顏色樣式總結(jié)

使用css樣式設(shè)置對象內(nèi)容color顏色樣式，我們可以使用命名CSS類對象設(shè)置其顏色樣式，還有直接在html標(biāo)簽內(nèi)設(shè)置color樣式。以上我們也詳細(xì)介紹和實(shí)踐這2種對文字內(nèi)容設(shè)置顏色方法。

最新評論