CSS 學習筆記 > CSS DIV 背景顏色

CSS DIV 背景顏色需要透過 css 內建 background 背景屬性中的 background-color 來設計，使用技巧非常的簡單，就是把 div 直接加上 background-color 的屬性並給顏色的色碼或顏色的英文即可，透過 DIV 區塊的背景顏色設計，可以讓網頁中不同區塊有著不同的風格，是一種相當簡單提升網頁質感的設計技巧，以下提供幾個 CSS DIV 區塊背景顏色設計範例。

CSS DIV 區塊背景顏色設計範例呈現結果 範例中總共有三個 DIV 區塊，我們在每個 DIV 區塊的開頭標籤內，使用 background-color 的屬性，分別設定紅色（red）、藍色（blue）、綠色（green）等三種顏色，這些顏色都可以透過色碼表上的十六進位色碼修改成自己想要的顏色，Wibibi 提供的十六進位色碼表就相當好用，我們在 background-color 背景屬性的介紹篇，有詳細的顏色使用說明以及範例，在網頁設計上非常實用，有興趣研究的朋友請參閱此篇：css background-color 背景顏色。

範例中有一個語法是『padding:20px』可能會造成部分讀者的疑問，其實 padding 是內距的意思，純粹是為了讓表格內的文字與邊框有一點距離，看起來比較清晰些，padding 與背景顏色的呈現並沒有關係，別疑問囉！

背景顏色是一種修改 DIV 視覺效果比較簡單的方式，因為挑選顏色比起製作圖片還要方便，但如果單純的背景顏色不夠精緻，眼前的網頁需要更精緻效果的表現，可能會用背景圖片來呈現，CSS 當然做得到這樣的效果，請看這篇：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 文字欄位字型
• 用 DIV 排版三欄式網頁設計
• HTML Table cellspacing CSS 替代語法
• CSS DIV 邊框顏色
• CSS DIV 網頁置中
• 用 CSS 的 font-family 屬性修改 DIV 區塊的文字字型
• 修改 CSS DIV 區塊內的文字字型
• css background-color 背景顏色
• css color 文字顏色
• css padding 內距

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