CSS 文本字型顏色設定方法(CSS color)

這篇文章主要介紹了CSS 文本字型顏色設定方法(CSS color),需要的朋友可以參考下

一、認識CSS 顏色（CSS color）

這裡要介紹的是網頁設定顏色包含有哪些；網頁顏色規定規範。

1、常用顏色地方包含：字型顏色、超連結顏色、網頁背景顏色、邊框顏色
2、顏色規範與顏色規定：網頁使用RGB模式顏色

二、顏色基礎知識

網頁中顏色的運用是網頁必不可少的一個元素。使用顏色目的在於有區別、有動感（特別是超連結中運用）、美觀之用，同時顏色也是各種各樣網頁的樣式表現元素之一,瞭解CSS 字型顏色。

傳統的html顏色與w3c標準下的css顏色對比和p CSS運用顏色

CSS color顏色文法：

color:#000000;

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

三、兩種方法設定對象顏色樣式

1、在p標籤內使用color顏色樣式
<p style="color:#F00">www.jb51.net</p>

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

.pcss5{color:#00F}

/* 設定對象pcss5內文字為藍色 */

擴充閱讀：這裡運用了CSS注釋對此樣式設定說明，瞭解CSS 注釋

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

Css代碼：

複製代碼

代碼如下:

.pcss5{color:#00F}/* 設定對象pcss5內文字為藍色 */

HTML代碼：

複製代碼

代碼如下:

<p> 標籤內使用color css樣式<p style="color:#F00">www.jb51.net 紅色</p> </p> <p>外部樣式表設定對象color顏色<p class="pcss5">www.jb51.net 藍色</p> </p>

4、執行個體結構圖：




以上使用標籤內使用color顏色樣式和css代碼使用color顏色樣式。

四、文字顏色控制一樣

傳統html和css 文字顏色相同使用“color：”+“RGB顏色取值”即可，如顏色為黑色字即對應設定CSS屬性選取器內添加“color:#000;”即可。

五、網頁背景顏色設定區別

傳統設定背景顏色使用“bgcolor=顏色取值”，而CSS中則“background:”+顏色取值。例如：設定背景為黑色，傳統Html設定，即在標籤內加入“bgcolor="#000"”即可實現顏色為黑色背景，如果在W3C中即在對應CSS選取器中始終“background:#000”實現。

六、設定邊框顏色區別

傳統“bordercolor=取值”，CSS中“border-color:”+顏色取值。例如：在傳統html直接在table標籤加入“bordercolor="#000"”即可，在現在CSS中設定“border-color:#000;”即可讓邊框顏色為黑色，同時記得對包括設定寬度和樣式（虛線、實現）。

p+CSS顏色值擴充知識：
顏色值是一個關鍵字或一個數位RGB規範。

16個關鍵字是採取從Windows的VGA調色盤： 水色 ， 黑色 ， 藍色 ， 紫紅色 ， 灰 ， 綠 ， 灰 ， 褐紅色 ，藏青色， 橄欖色 ， 紫色 ， 紅色 ， 銀色 ， 青色 ， 白色 ， 黃色 。

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

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

八、以下是RGB顏色表



當然一般的網頁開發軟體都有顏色取值器：


網頁開發軟體DW軟體中CSS色彩選擇工具
如何獲得CSS顏色值？
我們又不能記住顏色值，以及如何確定準確的與美工圖相同顏色值呢？其實很簡單通常我們是在PS軟體裡通過識色器工具進行獲得準確顏色值，當然也可以借用其它專門識別顏色工具進行擷取準確的color顏色值。
九、p css color顏色樣式總結
使用css樣式設定對象內容color顏色樣式，我們可以使用命名CSS類對象設定其顏色樣式，還有直接在html標籤內設定color樣式。以上我們也詳細介紹和實踐這2種對文字內容設定顏色方法。