CSS color 屬性設計網頁文字顏色

CSS color 屬性的功能是用來設計網頁文字顏色,取代傳統 HTML 的 font color 屬性,CSS 的 color 屬性可以應用在許多的網頁元素中,例如常見的 DIV 區塊span 區域textarea 多行文字欄位input type text 表單文字欄位 ... 等,修改網頁元素內的文字顏色。

由於 CSS color 屬性可以接受許多種顏色表示方式,例如十六進位的色碼,RGB 色碼以及顏色英文名稱,所以變化很多樣,設計也有彈性。

CSS color 文字顏色屬性語法

color: 色碼;
CSS color 屬性可以接受的顏色表示法有十六進位的色碼、RGB 色碼以及顏色英文名稱,一般的瀏覽器也都支援這幾種色碼表示法,設計師可以從 Wibibi 網站上的《色碼表》挑選各種顏色來套用,這裡先看幾個簡單的寫法。
  • color:red; // 文字顏色為紅色
  • color:yellow; // 文字顏色為黃色
  • color:blue; // 文字顏色為藍色
  • color:#000000; // 文字顏色為黑色,其中 #000000 是黑色的十六進位色碼。
  • color:#FFFFFF; // 文字顏色為白色,其中 #FFFFFF 是白色的十六進位色碼。
以上只是幾個簡單的 CSS color 文字顏色設定的寫法,以下是幾個將 color 屬性套用到網頁元素的應用範例,提供給各位讀者朋友們參考。

CSS color 文字顏色範例一、設計 DIV 區塊內的文字顏色

範例輸出結果
DIV 區塊內的文字預設顏色都是綠色的
DIV 區塊的預設文字顏色可以在開頭 DIV 標籤內透過 color 屬性來設定,以範例中「color:green;」這樣的寫法,表示 DIV 區塊內的所有文字顏色都預設為綠色,要改變為其他種顏色也可以,只需要修改 green 為其他顏色的英文單字或顏色的色碼即可。

CSS color 文字顏色範例二、透過 span 個別設定 DIV 區塊內特定的文字顏色

範例輸出結果
DIV 區塊內的文字預設顏色是綠色,這段文字是藍色的
範例二所呈現的是透過 span 標籤,把特定的文字套用 CSS color 屬性,進而修改特定文字的顏色,同一個 DIV 區塊內可以用 span 區域各別設定很多不同文字的顏色,沒有用 span 標籤特別修改過的文字顏色就呈現 DIV 區塊原本預設的文字顏色。

CSS color 文字顏色範例三、input type text 單行文字欄位內的文字顏色

範例輸出結果
網頁設計師常常會使用 CSS color 來修改 input type text 表單文字欄位的文字顏色,以範例三這樣的寫法,讓文字輸入欄位的預設文字顏色變成紅色,就算填寫新的文字也會是紅色,設計師可以自己修改 CSS color 的屬性值變更為其他種預設顏色。

CSS color 文字顏色範例四、textarea 多行文字欄位內的文字顏色

範例輸出結果
CSS color 屬性也常常用來套用至 textarea 多行文字欄位,讓欄位有預設的顏色,套用方法也很簡單,直接在 textarea 的開頭標籤內使用 style 宣告 color 屬性即可,用法與其它網頁元素套用 color 屬性的寫法都一樣。

更多網頁文字設計技巧
分享於 2014-12-17 - 更新於 2017-07-31