修改 CSS DIV 內文字顏色

DIV 區塊內的文字顏色預設值通常是黑色或是根據父層容器指定文字顏色呈現，CSS 設計師可以為每一個 DIV 區塊內的文字顏色，各別做不同的設定，如此一來就能創造出每個 DIV 區塊不同文字顏色所呈現的繽紛效果，會用到的技巧很簡單，就是 CSS 內建的 color 屬性，本篇就用幾個修改 CSS DIV 區塊內文字顏色的範例，分享給各位讀者看實際效果。

修改 CSS DIV 內文字顏色範例

<div style="border:2px gray solid;color:blue;padding:10px;margin:15px 0px;">
這是藍色文字顏色的 DIV 區塊
</div>
<div style="border:2px gray solid;color:red;padding:10px;margin:15px 0px;">
這是紅色文字顏色的 DIV 區塊
</div>
<div style="border:2px gray solid;color:green;padding:10px;margin:15px 0px;">
這是綠色文字顏色的 DIV 區塊
</div>

範例的視覺效果

這是藍色文字顏色的 DIV 區塊

這是紅色文字顏色的 DIV 區塊

這是綠色文字顏色的 DIV 區塊

範例總共有三個不同文字顏色的 DIV 區塊，區塊內的 border 屬性用來設定邊框、padding 屬性用來設定內距、margin 屬性用來設定外距，而 color 屬性就是用來設定文字顏色的關鍵，更多文字顏色變化請參閱《CSS color 文字顏色設計》的內容。

更多 DIV 設計技巧