CSS 學習筆記 > 修改 CSS DIV 區塊內的文字顏色

修改 CSS DIV 區塊內的文字顏色要用到的是 CSS 的 color 屬性，預設的 DIV 區塊並沒有特別的文字顏色，通常就是跟著父層元素的顏色設定，例如網頁預設文字為黑色，DIV 區塊內的文字顏色就會是黑色，如果網頁設計師希望某一個區塊內的文字有不同的顏色效果，就可以將 CSS 的 color 屬性套用至 DIV 區塊內，馬上就能將整個區塊內的文字顏色修改為自己想要的結果，這樣的技巧屬於 CSS 的基本設計技巧並已受到廣大瀏覽器的支援。

修改 CSS DIV 區塊內的文字顏色範例一、DIV 區塊預設文字顏色範例的視覺效果範例一所呈現的是在 DIV 區塊內使用 CSS 的 color 屬性，創造出 DIV 區塊內預設文字顏色為藍色的效果，語法中的「color:blue;」即為 CSS 宣告文字顏色為藍色的語法，另外的 border 是用來設計 DIV 區塊邊框樣式，而 padding 則是用來設計 DIV 區塊的內距，這幾個都是常用功能，有興趣的朋友可以閱讀以下幾篇的介紹。

• CSS color 屬性設計網頁文字顏色
• CSS border 元素邊框設計
• css padding 內距

修改 CSS DIV 區塊內的文字顏色範例二、額外修改部份文字顏色範例的視覺效果範例二延續了範例一的 DIV 區塊文字顏色，再額外添加 span 區域將第二行文字標示起來並加入 color 屬性，讓 span 區域內的文字顏色改為紅色，即語法中「color:red;」的部份，如此一來就能輕易修改 DIV 區塊內的部份文字顏色，讓 DIV 區塊的視覺效果更豐富。

除了修改顏色之外，字型也可以修改，請參閱：修改 CSS DIV 區塊內的文字字型。

更多 DIV 設計技巧

• CSS DIV 網頁置中
• CSS DIV 區塊內的文字或圖片置中
• CSS DIV 背景圖片

累積熱門文章

• 如何用 css style 替文字增加刪除線
• 用 DIV 排版兩欄式網頁設計
• 用 DIV 排版三欄式網頁設計
• CSS text-align 水平對齊設計
• css color 文字顏色
• 用 DIV 排版單欄式網頁設計
• CSS 的註解寫法規則
• CSS DIV 區塊
• CSS DIV 區塊內的文字或圖片置中
• CSS z-index 垂直螢幕方向位置 (z軸高度)

今日熱門文章

• 用 CSS 的 font-family 屬性修改 textarea 文字欄位字型
• css border-width 邊框粗細
• CSS font-weight 文字粗細效果
• 修改 CSS DIV 區塊內的文字字型
• 利用 CSS border 修改網頁圖片邊框顏色與樣式
• css background-color 背景顏色
• CSS font-family 網頁文字的字型設定
• css padding 內距
• CSS font-style 設計文字樣式
• 用 DIV 排版單欄式網頁設計

CSS 是目前非常熱門的網頁設計語言，幾乎所有主流的瀏覽器都支援 CSS 語法，比起傳統的網頁設計方式，CSS 能夠提供設計師更多的優勢以設計出更獨具風格的網頁，也讓網站維護更加有效率，CSS 讓網頁設計更進化了。