由於 CSS color 屬性可以接受許多種顏色表示方式,例如十六進位的色碼,RGB 色碼以及顏色英文名稱,所以變化很多樣,設計也有彈性。
CSS color 文字顏色屬性語法
color: 色碼;
CSS color 屬性可以接受的顏色表示法有十六進位的色碼、RGB 色碼以及顏色英文名稱,一般的瀏覽器也都支援這幾種色碼表示法,設計師可以從 Wibibi 網站上的《色碼表》挑選各種顏色來套用,這裡先看幾個簡單的寫法。- color:red; // 文字顏色為紅色
- color:yellow; // 文字顏色為黃色
- color:blue; // 文字顏色為藍色
- color:#000000; // 文字顏色為黑色,其中 #000000 是黑色的十六進位色碼。
- color:#FFFFFF; // 文字顏色為白色,其中 #FFFFFF 是白色的十六進位色碼。
CSS color 文字顏色範例一、設計 DIV 區塊內的文字顏色
範例輸出結果 DIV 區塊內的文字預設顏色都是綠色的
CSS color 文字顏色範例二、透過 span 個別設定 DIV 區塊內特定的文字顏色
範例輸出結果 DIV 區塊內的文字預設顏色是綠色,這段文字是藍色的
CSS color 文字顏色範例三、input type text 單行文字欄位內的文字顏色
範例輸出結果網頁設計師常常會使用 CSS color 來修改 input type text 表單文字欄位的文字顏色,以範例三這樣的寫法,讓文字輸入欄位的預設文字顏色變成紅色,就算填寫新的文字也會是紅色,設計師可以自己修改 CSS color 的屬性值變更為其他種預設顏色。CSS color 文字顏色範例四、textarea 多行文字欄位內的文字顏色
範例輸出結果CSS color 屬性也常常用來套用至 textarea 多行文字欄位,讓欄位有預設的顏色,套用方法也很簡單,直接在 textarea 的開頭標籤內使用 style 宣告 color 屬性即可,用法與其它網頁元素套用 color 屬性的寫法都一樣。更多網頁文字設計技巧