本次網站製作工工作坊旨在教授 CSS 的基本概念和實務應用，包括選擇器、屬性、行內與塊狀元素，以及定位方式。學員將學習如何使用 CSS 屬性來調整元素的外觀和布局。課程還包括相關資源連結和練習時間。

1. 網站製作⼯工作坊
網站設計與前端框架
2015/04/25 元智⼤大學資訊傳播學系 陳俊安

2. 這堂課你將會學到
• ⼀一些關於CSS的⼆二三事
• 實務上很常⽤用到的功能

3. CSS Review

4. Selector 選擇器
• ID選擇器：針對#ID選擇元素
• Class選擇器：針對.class選擇元素
（class在網⾴頁中可以重複使⽤用）
• 類型選擇器：針對HTML原有的標籤設定外觀
• 後代選擇器：當⼀一段HTML被 2 個以上的選擇器包圍時，
可以⽤用這些選擇器的階層關係，選擇到正確的HTML
• ⼦子選擇器：跟後代選擇器的差別-⼦子選擇器中間不能插⼊入其
他 HTML 標籤，後代選擇器則可以
• http://www.w3school.com.cn/cssref/css_selectors.asp

5. 常使⽤用的屬性
• background-color 背景顏⾊色
• background-image 背景圖⽚片
• background-repeat 背景圖⽚片
重複排列
• border-style 框線樣式
• border-width 框線寬度
• border-color 框線顏⾊色
• font-family 字型
• font-size 字體⼤大⼩小
• font-weight 字體厚度
• font-style 字體樣式
• line-height ⾏行⾼高
• letter-spacing 字元間距
• text-align ⽂文字對⿑齊

6. Box-model 區塊模型
• s 外間距
邊框
內間距
內容

7. Box-model 區塊模型
• 每⼀一個元素我們都可視它為⼀一個 Box
• ⼀一個元素真正佔⽤用的視覺空間，應該是 content
+ padding + border
• CSS屬性:box-sizing
• border-box, content-box
• CSS屬性:margin, padding：都是上右下左的順序
• http://www.jaceju.net/blog/archives/17/

8. inline/block ⾏行內與塊狀
• 塊狀元素(block element)
• div - 常⽤用塊級，也是CSS layout的主要標簽
• form - 表單
• h1, h2, h3, h4, h5, h6- 標題
• ol,ul - 排序列表、⾮非排序列表
• p - 段落
• table - 表格

9. inline/block ⾏行內與塊狀
• ⾏行內元素(inline element)
• a - 連結
• b, em, i, span, strong - 粗體(不推薦)、強調、斜體、
⾏行內容器、粗體
• br - 換⾏行
• img - 圖⽚片
• input, label, select, textarea - 輸⼊入框、表格標簽、選
單、⽂文字區域

10. inline/block ⾏行內與塊狀
• CSS屬性:Display
• 每個元素都有預設的display屬性，可以透過
css來修改這些預設屬性，讓元素依照你想
呈現的類型顯⽰示
• inline、block、inline-block

11. position 位置
• static 預設
• 這代表元素會被放在預設的地⽅方。
• 預設時 top、bottom、left、和 right 的值無意義
• 此屬性值可以不設置，除⾮非是要將設定還原為
預設
• fixed 固定位置
• 鎖定在視窗固定位置，不受其他元素影響

12. position 位置
• relative 相對定位：
• 使⽤用 top / bottom、left / right 調整元素位置
• 相對於⾃自⼰己原先的位置移動
• absolute 絕對定位
• 透過top / bottom、left / right 設定元素座標
• 根據上⼀一個設定relative的元素定位

13. 問與答
學員可開始練習