網站製作⼯工作坊
網站設計與前端框架
2015/04/25 元智⼤大學資訊傳播學系 陳俊安
這堂課你將會學到
• ⼀一些關於CSS的⼆二三事
• 實務上很常⽤用到的功能
CSS Review
Selector 選擇器
• ID選擇器:針對#ID選擇元素
• Class選擇器:針對.class選擇元素

(class在網⾴頁中可以重複使⽤用)
• 類型選擇器:針對HTML原有的標籤設定外觀
• 後代選擇器:當⼀一段HTML被 2 個以上的選擇器包圍時,
可以⽤用這些選擇器的階層關係,選擇到正確的HTML
• ⼦子選擇器:跟後代選擇器的差別-⼦子選擇器中間不能插⼊入其
他 HTML 標籤,後代選擇器則可以
• http://www.w3school.com.cn/cssref/css_selectors.asp
常使⽤用的屬性
• 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 ⽂文字對⿑齊
Box-model 區塊模型
• s 外間距
邊框
內間距
內容
Box-model 區塊模型
• 每⼀一個元素我們都可視它為⼀一個 Box
• ⼀一個元素真正佔⽤用的視覺空間,應該是 content
+ padding + border
• CSS屬性:box-sizing
• border-box, content-box
• CSS屬性:margin, padding:都是上右下左的順序
• http://www.jaceju.net/blog/archives/17/
inline/block ⾏行內與塊狀
• 塊狀元素(block element)
• div - 常⽤用塊級,也是CSS layout的主要標簽
• form - 表單
• h1, h2, h3, h4, h5, h6- 標題
• ol,ul - 排序列表、⾮非排序列表
• p - 段落
• table - 表格
inline/block ⾏行內與塊狀
• ⾏行內元素(inline element)
• a - 連結
• b, em, i, span, strong - 粗體(不推薦)、強調、斜體、
⾏行內容器、粗體
• br - 換⾏行
• img - 圖⽚片
• input, label, select, textarea - 輸⼊入框、表格標簽、選
單、⽂文字區域
inline/block ⾏行內與塊狀
• CSS屬性:Display
• 每個元素都有預設的display屬性,可以透過
css來修改這些預設屬性,讓元素依照你想
呈現的類型顯⽰示
• inline、block、inline-block
position 位置
• static 預設
• 這代表元素會被放在預設的地⽅方。
• 預設時 top、bottom、left、和 right 的值無意義
• 此屬性值可以不設置,除⾮非是要將設定還原為
預設
• fixed 固定位置
• 鎖定在視窗固定位置,不受其他元素影響
position 位置
• relative 相對定位:
• 使⽤用 top / bottom、left / right 調整元素位置
• 相對於⾃自⼰己原先的位置移動
• absolute 絕對定位
• 透過top / bottom、left / right 設定元素座標
• 根據上⼀一個設定relative的元素定位
問與答
學員可開始練習

5.網站設計與前端框架