生活大小事。分享文。試用文。生活便利貼。

CSS float 用來定義區塊的浮動，可以設定為靠左浮動或靠右浮動，常見用法像是文字繞圖片的特效或是 DIV 區塊排版上使用，在 CSS 設計上任何元素都是可以浮動的，像是 DIV 區塊、span、圖片 ... 等。也許你常常看到這樣的版面配置，淡紫色的部分可以是圖片、影片、或其他你想放的東西，要做出這樣文字內容繞的圖片的效果，就可以使用 CSS float 的語法，此範例用的是 float:left，也就是淡紫色區塊靠左浮動，其他文字則在淡紫色區塊旁邊呈現，當文字量超過淡紫色區塊的高度時，就自動跑到區塊的下方繼續呈現。







請注意，這樣的效果浮動的是淡紫色區塊，而不是文字，所以 css float 語法要用在淡紫色區塊，文字僅是因為淡紫色區塊浮動，所以才繞著他呈現，接著我們來看看 css float 的基本語法，再看看實際應用該怎麼寫。



CSS float 浮動語法

CSS box model 盒子模型也稱為區塊模型，所謂的 box model 其實就是傳統的 HTML 區塊概念再進化，假設我們用了一個 DIV 區塊來放置內容，CSS 允許網頁設計師將 DIV 區塊看成一個盒子，透過控制內距的 padding、控制外距的 margin 以及控制元素邊框的 border 屬性來調整盒子的展現結果，我們會在範例中呈現各種不同的 CSS box model 盒子模型效果，這對網頁排板有相當的幫助。



這裡要先解釋 CSS box model 會用到的屬性

三欄式的網頁排版設計是應用非常普遍的版型配置方式，優點是網頁內的區塊更多，尤其是邊欄上還可以加入許多不同的欄位，隨著 CSS 的持續普及，現在的網頁設計師經常使用 CSS DIV 的區塊規劃，來設計三欄式網頁排板，透過每個 DIV 區塊的寬度、高度、浮動等技巧，搭配上不同的背景顏色，就可以很輕鬆的規劃出以下這三欄式網頁的樣貌，本文就以這個範例示意圖的原始碼來介紹如何使用 CSS DIV 設計出三欄式網頁，首先要看的是比較簡單的 HTML 部分，接著就是稍微複雜的 CSS 語法部分，但整體而言還算是 CSS 排版的基礎。







如上圖三欄式網頁示意圖，我們規劃了幾個大區塊，分別為最上方的網頁標頭區 header、左右兩的邊欄 sidebar_left 與 sidebar_right、中間的網頁內文區 content 以及最下方的網頁腳區 footer，以下範例語法將告訴您如何設計出這樣的網頁版型。



HTML 語法架構

HTML Table rowspan 屬性的功能是用來合併多個列（row），rowspan 可以將表格的兩行合併為一行，也可以一次合併多行，其功能類似 Microsoft word 或 OpenOffice writer 中＂垂直合併儲存格＂的效果，有了 rowspan 可以讓 HTML 表格有無限的變化。與 colspan 一樣的是 rowspan 也只能用在 HTML 表格的 td 標籤內，用在其他地方沒有效果，所有主流的瀏覽器均支援 HTML Table rowspan 屬性的效果。



HTML Table rowspan 屬性語法

HTML Table 表格可以用來填寫許多的文字內容，在網頁設計排版與內容編排上算是非常傳統的規劃方式，不過 HTML 表格內的文字行高在沒有美化的情況下，經常造成視覺上的不舒適，為了能提供較好的閱讀舒適度，網頁設計師可以透過 CSS 的 line-height 屬性來調整 HTML Table 表格內的文字行高，技巧非常簡單，我們這篇就來教各位如何使用 line-height 屬性以及套用到表格內調整文字行高的應用範例。



CSS line-height 屬性基本語法

CSS span 區域標籤可以用來輕易的將網頁內容特定的部分標示起來並設計出不同的區域效果，例如改變文字的大小、顏色、樣式、字型 ... 等，都是可以的，同時 span 區域也可以擁有自己的背景顏色，網頁設計師只需要採用 CSS background-color 屬性就能輕易的修改 span 區域的背景顏色，我們先來看看 span 區域與 background-color 屬性的基本語法，再套用到範例中看實際的效果。



CSS span 區域標籤語法

CSS span 區域可以很輕易的將我們想調整的文字包起來做樣式設計，這當然也包含了對文字的字型下定義，例如將 span 區域內的字型修改成 serif、sans-serif、monospace 甚至是常見的新細明體、標楷體或微軟正黑體都辦得到，要做出這樣的效果必須使用 CSS 的 font-family 屬性，這是標準的字型修改屬性，除了修改 span 區域內的文字字型之外，也可以修改其它網頁中的文字字型，受到幾乎所有主流的瀏覽器所支持，我們就先來看看基本的語法規則再來套用到範例看效果。



CSS font-family 屬性基本語法

DIV 區塊內的文字行高是可以調整的，為什麼要調整 DIV 區塊內的文字行高呢？原因很簡單，因為要調整出最適合閱讀的行高，讓讀者可以輕鬆的閱讀，例如嘗試用較大的字體放在預設的 DIV 區塊內，很可能會出現不同行文字黏在一起或重疊的現象，為了避免這種情況發生，網頁設計師可以採用 CSS 的 line-height 屬性來調整 DIV 區塊的文字行高，讓整體視覺效果更舒服，提高網頁的瀏覽品質。



CSS line-height 屬性語法

CSS 中透過 border-style 設定邊框的樣式，可以一次設定四個邊框，也可以分別設定各個邊框樣式，網頁中的許多元素，特別是 DIV 區塊以及 span 區域的邊框樣式，都可以使用 border-style 來設計，border-style 要能正確顯示，通常會同時包含 border-width（邊框寬度）以及 border-color（邊框顏色）的搭配，幾乎所有的主流瀏覽器都支援 CSS border-style 的邊框樣式屬性。



CSS border-style 設定語法

border 顧名思義就是邊框的意思，在 CSS 中，你可以透過 border 的語法來對邊框做許多樣化的設計變化，例如設定邊框的寬度、樣式、顏色等等，也可以隱藏邊框，原則上 CSS 對於 border 的設計不只局限於 DIV 區塊或 span 的邊框，也可以應用到其他的網頁元素的邊框上，例如網頁標題的邊框、圖片的邊框（img border）... 等，所有的主流瀏覽器都支援 CSS border 屬性。



CSS border 語法介紹