公告版位

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



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

CSS float 浮動語法

float: 浮動方向;

CSS float 浮動方向可以用的值有 left(靠左浮動)、right(靠右浮動)、none(預設值,也就是不浮動)以及 inherit(繼承自父層的屬性),提醒一下最後的這個 inherit 盡量不要使用,避免 IE 不支援的情況發生。

CSS float 浮動語法範例

<style type="text/css">
#BigDiv{
 width:500px;
 height:190px;
 font-size:13px;
 color:#333333;
 line-height:22px;

rorococo007 發表在 痞客邦 留言(0) 人氣()

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

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

CSS box model 盒子模型的示意圖

CSS box model 盒子模型的示意圖

CSS box model 盒子模型實際範例

<style type="text/css">
#BoxText1 {
border:5px orange solid;
padding:10px;
width:500px;
margin:15px 0px;

rorococo007 發表在 痞客邦 留言(0) 人氣()

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

三欄式網頁設計架構示意圖

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

HTML 語法架構

<div id="sitebody">
 <div id="header">header</div>
 <div id="sidebar_left">sidebar_left</div>
 <div id="sidebar_right">sidebar_right</div>
 <div id="content">content</div>
 <div id="footer">footer</div>
</div>

在 HTML 的部分相當簡單,最外圍使用區塊 sitebody 將所有的元素都包起來,裡面就依序建立 header、sidebar_left、sidebar_right、content 以及 footer 等 DIV 區塊,有了這樣的架構,就可以使用 CSS 將每個區塊的位置設計好。

CSS 語法

<style type="text/css">

rorococo007 發表在 痞客邦 留言(0) 人氣()

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

HTML Table rowspan 屬性語法

<td rowspan="要合併的行數">

rowspan 的參數值"要合併的行數"必須小於或等於等個表格的行數,例如一個表格僅有 5 行,rowspan 最多就只能是 rowspan="5"。同一個 HTML 表格可以有許多不同的欄位使用 rowspan 屬性,以下是幾個使用了 rowspan 的表格範例。

HTML Table rowspan 屬性範例一、表格左邊合併兩行

<table border="1" cellpadding="5" style="border:2px #26FF26 solid;text-align:center;">
<tr><td rowspan="2">使用 rowspan 的欄位</td><td>表格欄位</td></tr>
<tr><td>表格欄位</td></tr>
</table>

呈現效果

使用 rowspan 的欄位 表格欄位
表格欄位

範例的重點在表格的第一行 <td> 標籤中使用了「rowspan="2"」的語法,意思是第一列要合併兩行,這樣的情況下,設計師要記得讓表格至少有兩行存在,也就是至少要有兩組 <tr> 標籤,第二組 <tr> 標籤內僅需有一組 <td> 標籤即可,rowspan 會自動將第一列的兩行合併為一行,如果表格的行標籤(<tr>)以及列標籤(<td>)數量不對,rowspan 就會出錯,所以設計師們請自行算好該有的行列數量,若您對 HTML 表格的設計規則或 CSS 的基本語法還不熟悉,這裡有幾篇可以閱讀。

rorococo007 發表在 痞客邦 留言(0) 人氣()

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

CSS line-height 屬性基本語法

line-height: 行高設定値;

其中的行高設定值可以使用預設的 normal、數字加單位、百分比或 inherit(繼承自父層的行高値)等,詳細的設定方式請參閱我們《CSS line-height》篇的介紹,接著我們就嘗試來套用至 HTML Table 表格 中看效果囉!

用 CSS line-height 設計 HTML TABLE 表格內的文字行高範例

<table style="line-height:25px;" border=1>
<tr><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td></tr>
<tr><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td></tr>
</table><br>
<table style="line-height:40px;" border=1>
<tr><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td></tr>
<tr><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td></tr>

rorococo007 發表在 痞客邦 留言(0) 人氣()

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

CSS span 區域標籤語法

<span style="樣式設計">要修改的內容</span>

詳細用法:CSS span 標籤用法介紹

CSS background-color 屬性與法

background-color: 顏色值;

詳細用法:CSS background-color 背景顏色

有了以上兩個基本的語法之後,我們就能將它們結合在一起來修改 span 的背景顏色,請看範例。

CSS span 區域背景顏色設計範例

<span style="background-color:blue;margin-right:5px;">藍色的背景顏色</span>
<span style="background-color:red;margin-right:5px;">紅色的背景顏色</span>
<span style="background-color:orange;margin-right:5px;">橘色的背景顏色</span>

範例的實際效果

藍色的背景顏色 紅色的背景顏色 橘色的背景顏色

rorococo007 發表在 痞客邦 留言(0) 人氣()

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

CSS font-family 屬性基本語法

font-family: 順位第一的字型,順位第二的字型,順位第三的字型, ... 以此類推;

CSS  font-family 屬性允許設計師一次填入多個不同的文字字型,瀏覽器會根據順序挑選能夠顯示的字形,假設第一個字型就能顯示,後面的字型就不會用到,如果第一個字型無法顯示,瀏覽器就會在 font-family 屬性中挑出順序第二的字型看看能不能顯示,以此類推,關於 CSS 的 font-family 屬性的詳細用法,請參閱:CSS font-family 字型

利用 font-family 屬性修改 span 區域內的文字字型樣式

<span style="font-family:serif;border:1px orange solid;margin-right:5px;">這是 serif 字型的文字</span>
<span style="font-family:sans-serif;border:1px orange solid;margin-right:5px;">這是 sans-serif 字型的文字</span>
<span style="font-family:DFKai-sb;border:1px orange solid;margin-right:5px;">這是標楷體字型的文字</span>

範例的實際效果

這是 serif 字型的文字 這是 sans-serif 字型的文字 這是標楷體字型的文字

範例中總共有三個不同的 span 區域,分別利用 font-family 屬性重新設計了它們的文字字型,從左而右分別是 serif 字型、sans-serif 字型以及標楷體,其中比較特別的是標楷體不一定能在非 Window 系列的作業系統中呈現,另外,範例中的 border  margin分別是邊框與外距的設計屬性,用來設計 span 的邊框與彼此間的距離,讓範例看起來更清楚而已。


rorococo007 發表在 痞客邦 留言(0) 人氣()

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

CSS line-height 屬性語法

line-height: 行高設定値;

其中的行高設定值可以使用預設的 normal、數字 + 單位(例如 25px)、百分比(%)或 inherit(繼承自父層的行高設定値),詳細的設定方式請參閱:CSS line-height 設定字體範圍高度(行間距)

DIV 區塊內的文字行高設計範例

<style type="text/css">
<!--
#DIV_A{
    margin-bottom:10px; //上方外距,參閱:CSS margin 屬性與用法範例
    border:1px #ccc solid; //區塊的邊框,參閱:CSS border 邊框
    padding:10px; //區塊內距,參閱:CSS padding 內距屬性與用法範例
}

rorococo007 發表在 痞客邦 留言(0) 人氣()

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

CSS border-style 設定語法

描述 語法
設定四個邊框樣式 border-style: 樣式;
僅設定上邊框樣式 border-top-style: 樣式;
僅設定右邊框樣式 border-right-style: 樣式;
僅設定下邊框樣式 border-bottom-style: 樣式;
僅設定左邊框樣式 border-left-style: 樣式;


CSS border-style 範例

<div style="border-width:3px;border-style:dashed;border-color:#FFAC55;padding:5px;">
測試邊框樣式
</div>

以上範例輸出結果如

測試邊框樣式

範例中「border-style:dashed」這樣的寫法代表四個邊框的樣式都是虛線(dashed),另外我們還使用了 border-width 來設定邊框的粗細、border-color 設定邊框的顏色,以及 padding 設定文字與邊框間的內距。以下準備了常用到的幾種 border-style 給您參考。

備註、挑選邊框顏色請使用:色碼表

常用 CSS border-style 樣式表

border-style:solid;
border-style:dotted;

rorococo007 發表在 痞客邦 留言(0) 人氣()

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

CSS border 語法介紹

border: 邊框粗細 邊框顏色 邊框樣式 ;


標準的 css border 規則由左至右共有三個參數,每個參數間用半形空格隔開,第一個參數為邊框的粗細(border-width),一般使用 px、em 等標準網頁單位,第二個參數標示邊框的顏色(border-color),可以使用色標準色碼或顏色的英文名稱,第三個參數是邊框樣式(border-style),可以設定實線、虛線、雙實線、連續點 ... 等許多不同的風格。

CSS border 語法範例一、直接替 DIV 區塊加上邊框

<div style="border:5px #FFAC55 solid;">
這是邊框測試
</div>

在這個範例中,我們設定 <div> 區塊的邊框寬度是 5px,邊框顏色是淡橘色(#FFAC55)、邊框樣式是實線(solid),呈現效果如下

這是邊框測試

在此範例中 border 的寬度與顏色比較沒什麼需要特別說明,依照你的喜愛自己設定即可,除了將邊框的寬度、顏色與 style 寫在一起之外,其實也可以獨立出來寫,例如 border-width(邊框寬度)、border-color(邊框顏色)以及 border-style(邊框款式)。另外,border 可以分別為四個邊做不同的設計,四個方位的表示法:上方為 border-top、右方為 border-right、下方為 border-bottom、左方為 border-left。

CSS border 範例二、獨立替四個邊做設計

<style type="text/css">

rorococo007 發表在 痞客邦 留言(0) 人氣()