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 標籤手法,將其中特定的文字用不同顏色來表示,要怎麼換成其他顏色呢?上方提到的色碼表有很多色碼可以用,自己選幾個來測試看看吧!範例二的 borderDIV 邊框,paddingDIV 內距,這兩個屬性只是為了讓範例更清楚而已,不是本篇重點。

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