CSS color 文字顏色設計

CSS color 文字顏色設計屬性可以取代傳統 HTML 的 font color 屬性，將 CSS color 屬性套用到一些網頁元素中就可以改變元素內的文字顏色，例如 DIV 區塊內的文字顏色、textarea 文字輸入欄位內的文字顏色或是用 span 標籤將網頁中特定文字包起來顯示特定的顏色，color 屬性的語法非常簡單，是 CSS 設計文字顏色的標準屬性，幾乎所有的主流瀏覽器都支援 CSS color 屬性的效果。

CSS color 屬性語法
color: 色碼或顏色名稱;
CSS color 屬性的參數只有一個，可以使用十六進位的色碼、RGB 色碼或者是直接使用文字的英文名稱，例如黑色就用 black、紅色就用 red，以此類推，不過為了可以有更細緻的文字顏色，通常會選擇像是十六進位的色碼這種變化較多的顏色，會比單純用顏色的英文名稱來得好搭配，Wibibi 網站上所提供的《色碼表》有數百種顏色可以挑選，以下我們來看 color 屬性的實際應用範例。

CSS color 文字顏色設計範例一、標示特定文字顏色
這段文字沒有修改顏色
<span style="color:red;">這段文字是紅色的</span>
<span style="color:blue;">這段文字是藍色的</span>
範例的效果
這段文字沒有修改顏色這段文字是紅色的這段文字是藍色的
範例一的文字總共有三種，最左邊的是完全沒經過 color 屬性修改的文字，所以就是預設的黑色，接著用 span 標籤把紅色文字與藍色文字的部分包起來，使用 color 屬性分別設計出紅色與藍色的文字顏色，由範例可以看到 color 屬性使用起來非常的簡單，重點在於顏色的挑選，要怎麼讓文字顏色搭配整體網頁設計的風格比較重要，接著來看看怎麼用 CSS color 修改 DIV 區塊內的文字顏色。

CSS color 文字顏色設計範例二、修改 DIV 區塊內的文字顏色
<div style="color:green;border:2px #cccccc solid;padding:5px;">
文字顏色全部都是綠色的
</div>
範例的效果
文字顏色全部都是綠色的
範例二在 DIV 標籤使用 color 屬性將整個 DIV 區塊內的文字顏色都標示為綠色，如果 DIV 區塊內有很多文字，我們也可以利用範例一的 span 標籤手法，將其中特定的文字用不同顏色來表示，要怎麼換成其他顏色呢？上方提到的色碼表有很多色碼可以用，自己選幾個來測試看看吧！範例二的 border 是 DIV 邊框，padding 是 DIV 內距，這兩個屬性只是為了讓範例更清楚而已，不是本篇重點。

更多文字設計
© Copyright webtech.tw Since 2010