如何修改 HTML DIV 區塊內的文字顏色 - 網頁設計教學站

如何修改 HTML DIV 區塊內的文字顏色

HTML DIV 區塊內的文字顏色是可以變更的,傳統的 HTML 會透過 <font color> 標籤來改變文字的顏色,但到了 CSS 時代,可以改用更簡單的 color 屬性直接調整 DIV 區塊內的文字顏色,如果搭配 <span> 標籤還可以更精準的標註出某些特定文字再給予不同的顏色,在這裡我們要學習到基本的 color 屬性,再套用至 DIV 區塊內完成修改文字顏色的效果。

CSS color 屬性語法
color: 顏色碼;
語法中的顏色碼可以使用 RGB 色碼、顏色的英文名稱或十六進位的色碼,例如純黑色可以用 black 或 #000000、純白色可以是 white 或 #FFFFFF,如果想更進一步認識 color 屬性,可以參考我們的這篇介紹。

參考閱讀:CSS color 文字顏色設計

接著我們就把 color 屬性套用至 HTML DIV 區塊內,多看幾個範例的效果。

修改 HTML DIV 區塊內的文字顏色範例
<div style="border:1px #ccc solid;padding:5px;margin-top:15px;color:red;">
顯示紅色文字
</div>
<div style="border:1px #ccc solid;padding:5px;margin-top:15px;color:blue;">
顯示藍色文字
</div>
<div style="border:1px #ccc solid;padding:5px;margin-top:15px;color:green;">
顯示綠色文字
</div>
範例的輸出結果
顯示紅色文字
顯示藍色文字
顯示綠色文字

在範例中我們總共使用了三種不同的文字顏色,分別是紅色、藍色與綠色,你也可以透過 Wibibi 網站上所提供的《色碼表》挑選出各式各樣不同的顏色來套用,效果會很不一樣。

延伸閱讀
© Copyright webtech.tw Since 2010