CSS color 文字顏色

CSS 的文字顏色設計採用的是 color 標示,不需要寫成 font-color 這樣,舉例來說,藍色的文字可以寫成『color:blue』表示,但在其他元素如邊框顏色就要使用 border-color、背景顏色要使用 background-color 來標示,只有文字顏色最簡單,直接使用 color 標示即可,設計師可將 color 寫在 DIV 區塊、span 區域、超連結內甚至是直接寫在 <body> 標籤內,以下幾個範例都是常見的 CSS 文字顏色設計方式。

CSS color 文字顏色基本語法

color: 顏色的英文或色碼 ;


語法中 color 接的參數無論是顏色的英文或色碼都可以,甚至可以是 RGB 色碼,所有主流的瀏覽器都支援 css 的 color 屬性,挑選顏色可以使用《色碼表》上的顏色編碼,若無法記住所有顏色的英文名稱,使用十六進位色碼表會比較容易,請參閱:色碼表

CSS color 文字顏色範例一、整個網頁文字顏色
<body style="color:blue;">
... 網頁內容 ...
</body>

絕大多數瀏覽器預設的網頁文字都是黑色,設計師可以在 <body> 標籤內標註 style 並使用 color 屬性來修改整個網頁的基本文字顏色,例如範例中這樣的寫法,會讓網頁的文字預設色變成藍色,若採用十六進位的色碼可寫成『<body style="color:#0000FF">』這樣,簡單來說就是把原本的 blue 改成 #0000FF 的色碼表示方式,這個部分是看設計師個人的習慣,另外,寫在 <body> 標籤內的顏色只能控制網頁基本的文字顏色,無法修改超連結的顏色,修改超連結的文字顏色請參閱:修改超連結顏色

CSS color 文字顏色範例二、span 區域內文字顏色
<body style="color:blue;">
文字顏色為藍色 <span style="color:red;">文字顏色為紅色</span>
</body>
範例輸出結果
文字顏色為藍色 文字顏色為紅色
範例二中我們特別保留了 <body> 標籤內設計藍色文字的寫法,然後準備了藍色以及紅色的文字效果,藍色的文字不需要額外設計,會根據預設的藍色顯示,而用 span 標籤所標示起來的文字則可以另外設計成紅色,瀏覽器會以 <span> 標籤所標示的顏色為主要顯示順位,除了 span 標籤之外,同樣的手法也可以用在 DIV 區塊內的文字顏色,是色彩繽紛網頁非常普遍的設計方式。

CSS color 文字顏色範例三、超連結文字顏色
<body style="color:blue;">
<a href="#" style="color:red;">超連結文字顏色為紅色</a>
</body>
範例輸出結果文字超連結的顏色就不能在 <body> 標籤內直接設計,需要額外在 CSS 的 <style> 區域內,透過 a 選擇器來設計,或是向此範例中的寫法,直接將 color 寫入超連結 a href 的標籤內,優點是可以替網頁內每一條超連結都寫出不同的顏色呈現,缺點是連結數量很多的時候,需要花很多時間寫每一條的顏色,如果想要一口氣管理整個網頁的超連結顏色請參閱《修改超連結顏色》的範例。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012