如何修改 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 網站上所提供的《色碼表》挑選出各式各樣不同的顏色來套用，效果會很不一樣。

延伸閱讀