03.2 CSS Advanced

Transcript 03.2 CSS Advanced

CSS – 進階
IDIC
版型設計
尺寸的基本概念
• 區塊的大小單位為像素簡寫 px
• 字型的大小單位為 pt
• 在版面及圖片大小的設定通常會參考常用的螢幕解
析度
• 目前常用的螢幕解析度
• 1024x768
結構化的 HTML tags
DIV 及 SPAN
• <DIV>
• 為區塊(Block tag)的一種，被DIV包住的 HTML tags 會變成一
個區塊物件，自行獨立成一行。
HTML
• 搭配 CSS 使用可做為網頁排版用途
DIV
DIV
• 用途：可將文件內容分不同區塊
基本資料顯示區
模組功能連
結區
搜尋區DIV
詳細資料顯示區
DIV
• <SPAN>
• 為行內(Inline tag) 的一種，被 SPAN 包住的 HTML tag 會變成
一個行內的物件，不會獨立成一行。
• 用途：標示網頁中某些特別資料的顯示格式。例如：將網頁中
含有「王小明」的字都用紅色字表示。
區塊(Block) 效果– 以 DIV 為例
<!DOCTYPE html>
<html>
<body>
<p>My mother has<DIV style="color:blue;font-weight:bold">blue</DIV> eyes and my father
has <DIV style="color:green;font-weight:bold">green</DIV> eyes.</p>
</body>
</html>
由於在 <DIV> 標籤內的
內容會被一個方塊所框住
所以接著的資料會被往下
行移動
行內(Inline) 效果 – 以SPAN為例
<!DOCTYPE html>
<html>
<body>
<p>My mother has <SPAN style="color:blue;fontweight:bold">blue</SPAN> eyes and my
father has <SPAN style="color:green;font-weight:bold">green</SPAN> eyes.</p>
</body>
</html>
行內標籤 <SPAN>
只會顯示在同一行
使用 DIV 的版面設計
• 透過 <DIV> 配合樣式的設定可以配置一個網頁的版
面雛形
• 透過事先定義好版面的主要區塊
橫幅
• 配合 CSS 的樣式設計
資
訊
列
內容
註腳
資
訊
列
盒狀模型(box model)
盒狀模型(Box Model)
• 我們都可以把每個 HTML tag 視為一個盒子
• 透過 Box Model 來可設定 HTML tag (盒子) 的內外
距
• 設定範圍主要分為
• 邊界(Margin)
• 填空(Padding)
• 邊框(Border)
盒狀模型(Box Model)
• 範例：黃色小鴨圖片放在 DIV 內
盒狀模型(Box Model)
• 範例：黃色小鴨圖片放在 DIV 內
• Box Model 可設定 HTML tag 的邊框
屬性： border(邊框)
盒狀模型(Box Model)
• 範例：黃色小鴨圖片放在 DIV 內
• Box Model 可設定 HTML tag 的邊界
屬性： margin (邊界)
盒狀模型(Box Model)
• 範例：黃色小鴨圖片放在 DIV 內
• Box Model 可讓 HTML tag 與內容之間留白
屬性：Padding (留白)
盒狀模型的樣式設定
• 盒狀模型的樣式皆可針對四個方向設定
• 上(top), 左(right), 下(bottom), 右(left)
• 可設定的屬性主要分為
• 邊界的大小(margin)
• 指定邊界方向可使用(margin-方向)
• 例: 上方邊界
• margin-top: 5px
• 填空的大小(padding)
• 指定邊界方向可使用(padding-方向)
• 例: 下方填空 3px
• padding-bottom: 3px
• 邊框(border)
盒狀模型(Box Model) – 續
• 邊框的設定可分為三種
• 寬度(border-width)
• 指定邊界方向可使用 border-方向-width
• 例: border-top-width: 5px
• 色彩(border-color)
• 指定邊界方向可使用 border-方向-color
• 例: border-left-color: red
• 樣式(border-style)
• 指定邊界方向可使用 border-方向-style
• 樣式的屬性值有:
• 點虛線(dotted), 虛線(dashed), 實線(solid), 雙實線(double)
• 槽狀(groove),脊狀(ridge)
• 凹陷(inset), 凸出(outset)
盒狀模型(Box Model) – 續
• 同時指定邊框的寬度, 色彩, 樣式
• border-方向: <寬> <樣式> <色彩>
• 設定下方邊框為 2px 點虛線綠色
• border-bottom: 2px dotted green;
• 或不指定方向，即四周
• 設定四週邊框為 1px 實線黑色
• border: 1px solid black;
練習
• 利用 DIV, SPAN 搭配 CSS 的 box Model 調整圖片
與文字的間距。
• 圖片四周的外距 10 px
• 價格四周內距 5px
• 描述下方的外距 5px
視覺格式模型
(Visual formatting model)
區塊的大小
• 區塊大小的設定方式，可指定固定大小或者比例
• 寬度(width)
• width: 100px
• width: 80%
• 高度(height)
• height: 100px
• height: 90%;
• 在區塊中可以指定文章段落行高(line-height)
• 1.2 倍行高的範例
• line-height: 1.2
區塊位置的設定
DIV
P
• 區塊位置的顯示方式(position)
• 相對位置(relative)
• 設定標籤與標籤在呈現上的相對位置
• 如右圖
• 決對位置(absolute)
• 存在於網頁上的決對位置 (即使拉動卷軸也不會移動)
• 固定位置(fixed)
• 存在於營幕上的固定位置 (卷軸下拉會隨著改變位置)
• 位置的指定
• 上(top), 下(bottom), 左(left), 右(right)
• top: 100px;
區塊的順序
• 重疊的區塊有上下順序之分
• 必需先設定區塊位置 (position ) 才能設定順序。
• 可以使用 z-index 屬性設定
• 數值越大越上方，數值越小越下面
• z-index: <數字>
• 若無設定 z-index 則會顯示於最下方
z-index: 1
z-index: 2
浮動區塊
• 浮動 (float)
• 可以令圖片或者區塊(DIV)置於文字之中
• 可設定置左(left)或罝右(right)
浮動區塊– 續
• 浮動圖片可能會介於兩個段落之間
• 若不想要延續浮動的效果可以在下個段落使用 clear 屬
性
浮動區塊– 續
• clear 屬性的方向可以選擇左邊(left), 右邊(right)或者
兩邊(both)
浮動區塊的範例
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Float example</TITLE>
<STYLE type="text/css">
IMG { float: left }
</STYLE>
</HEAD>
<BODY>
<P><IMG src=“img.png” alt="This image will illustrate floats"> Some sample text that
has no other... </P>
<P style="clear: left">This paragraph is ‘clear’ proper set to ‘left’ so that it will be forced
to be below any left floating images… </P>
</BODY>
</HTML>
當內容超出區塊
• 當內容超出區塊如右圖
• 可以使用 overflow 屬性來控制超出內容的顯示方式
• 隱藏超出的內容(hidden)
• 使用卷軸顯示超出的內容(scroll)
• 自動判斷大小顯示卷軸(auto)
練習
• 文章排版
• 文章下載位置：
•
http://203.64.105.131/download/training/css
Homework.zip
注意事項
• 版型上的間隔空間使用 CSS 盒狀模型設定
• 不要使用 <p> 或 <br /> (嚴重錯誤)
• 使用 CSS float 之後一定要加 clear
課後作業-我的網路商店
• 網站的版形如左：三欄式版型
• 中間內容請排列商品資訊。
橫幅
資訊列
內容
註腳
資訊列
課後作業-我的網路商店
瀏覽器的檢視效果
作業的評分標準
• 適當的應用課堂所教的標籤 (30%)
• 不一定要全部使用，但也不可過少
• HTML 及 CSS 語法的正確性及閱讀性 (40%)
• 標籤有頭有尾 (20%)
• 要適當縮排 (20%)
• 主題、美觀及實用性 (30%)
• 是否考慮畫面解析度
• 文章排版

03.2 CSS Advanced

Transcript 03.2 CSS Advanced

Directory