CSS DIV 文字顏色設計

CSS DIV 文字顏色需要用到 CSS 的 color 屬性，我們可以簡單的用 color 將整個 DIV 內的文字顏色統一規劃，也可以透過 span 標籤把要用特殊顏色標註的文字標示出來，用 color 屬性來修改或設計 DIV 區塊內的文字顏色是 CSS 設計的標準做法，幾乎所有主流的瀏覽器都支援 color 屬性，對於 CSS color 屬性或 DIV 區塊的用法若有疑問，可以參閱以下這兩篇的解說內容。

• CSS color 文字顏色
• CSS DIV 區塊標籤的使用教學

如果對於 DIV 區塊或 color 屬性沒有問題，可以接著來看這幾個文字顏色設計範例。

CSS DIV 文字顏色設計範例

<div style="color:#D68B00;border:2px #ccc solid;padding:10px;">採用 #D68B00 文字顏色</div>
<div style="color:#00D600;border:2px #ccc solid;padding:10px;">採用 #00D600 文字顏色</div>
<div style="color:#A830FF;border:2px #ccc solid;padding:10px;">採用 #A830FF 文字顏色</div>
<div style="color:#FF30FF;border:2px #ccc solid;padding:10px;">採用 #FF30FF 文字顏色</div>
<div style="color:#969696;border:2px #ccc solid;padding:10px;">採用 #969696 文字顏色</div>

範例呈現效果

採用 #D68B00 文字顏色

採用 #00D600 文字顏色

採用 #A830FF 文字顏色

採用 #FF30FF 文字顏色

採用 #969696 文字顏色

範例從上而下有很多個 DIV 區塊，每個 DIV 區塊內的文字顏色都不一樣，只要的差異在於 color 屬性的參數值，color 屬性可以使用 RGB 色碼、十六進位色碼或是顏色的英文名稱，通常會使用十六進位色碼，因為顏色多又不用記，本站提供的《色碼表》就可以查詢超過四百種以上的顏色，另外，為了讓範例更清楚呈現，所以我們替範例的 DIV 區塊增加了邊框設計，若有興趣研究相關知識，請閱讀這幾篇。

• CSS border 邊框
• CSS border-color 邊框顏色
• CSS border-width 邊框寬度

➤除了可以修改 DIV 文字顏色之外，我們也可以修改字型，請看：CSS DIV 文字字型設計。