CSS 學習筆記 > CSS DIV 區塊

CSS DIV 區塊顧名思義就是區塊等級的網頁元素，那這個 DIV 區塊可以幹嘛用呢？答案是 DIV 區塊可以用來做排版或編排各網頁元素的位置，而且還可以做美化，DIV 標籤已經是現代網頁設計的主流，所有的網頁設計師都應該要認識 DIV 區塊，以下是 DIV 基本語法及範例參考。

CSS DIV 區塊語法DIV 區塊的語法非常簡單，開頭處的 DIV 標籤內，可以使用 style 直接宣告出 DIV 區塊內的元素樣式，例如文字大小、文字顏色或是 DIV 本身的背景顏色、邊框樣式 ... 等項目，也可以設定 id 或 class 等規則，在其他地方撰寫 DIV 的樣式語法。

CSS DIV 區塊處理網頁元素呈現結果這個 DIV 範例很簡單，就是把 DIV 本身的背景顏色改為粉紅色（pink），文字顏色則改為藍色（blue），這裡用到了三個 CSS 的屬性，若有興趣可以看一看。

• css background-color 背景顏色
• css color 文字顏色
• css padding 內距
  

對於 DIV 區塊有一定的基本認識後，應該可以進一步了解 DIV 更多的應用方式，這幾篇可以加深對 CSS DIV 區塊設計的技術，值得研究。

• CSS DIV 背景顏色
• CSS DIV 背景圖片
• CSS DIV 邊框顏色
• CSS DIV 網頁置中
• CSS DIV 區塊內的文字或圖片置中
• 修改 CSS DIV 區塊內的文字顏色
• 修改 CSS DIV 區塊內的文字字型
• 用 DIV 排版單欄式網頁設計
• 用 DIV 排版兩欄式網頁設計
• 用 DIV 排版三欄式網頁設計

以上是 DIV 區塊的基本介紹，接著來研究一下 CSS 的區域：CSS span 區域。

累積熱門文章

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

今日熱門文章

• CSS font-size 網頁文字大小設計
• CSS z-index 垂直螢幕方向位置 (z軸高度)
• css padding 內距
• CSS DIV 背景顏色
• 利用 CSS border 修改網頁圖片邊框顏色與樣式
• 用 CSS 的 font-family 修改 input type text 文字欄位字型
• 修改 CSS DIV 區塊內的文字顏色
• CSS line-height 網頁文字行高設計
• CSS letter-spacing 屬性設計文字水平間距離
• 用 CSS 的 font-family 屬性修改網頁表格文字的字型

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