CSS - 顯示、定位與區塊樣式

本次上課將學習使用 CSS 設定網頁樣式。

• 這次我們將著重在顯示與定位樣式上，講義請參考 CSS 顯示樣式相關屬性。
• 若需要複習前一次的內容：
  • 關於 CSS 的基本語法跟標籤列表，請參考 講義 。
  • CSS Selector 亦可透過 CSS Diner 遊戲方式來學習。速查表則可以在 W3School 找到。
• 登入網站 後，請使用 建立新筆記 來建立練習用頁面。
• 你可以在 我的作品 中找到你建立的所有筆記。
• Can I Use ..? 功能相容性資訊網站。

  不同的瀏覽器對於 CSS 規格的支援度不同，要更了解相容性問題，在使用任何樣式前，都先查查看 Can I Use ..? 網站。

• HTML 色碼名稱可參考 HTML Color Names 網站，亦可用 HTML Color Picker 做色碼快選。

課程內容大致上包含以下屬性：

• display 元素顯示模式
• margin, padding
• border, border-radius, box-shadow, text-shadow, outline
• position 系列樣式 ( top, left, right, bottom, z-index )

課堂練習

以下提供一些預設圖片供練習用：

• http://xinmeti.co/assets/img/sample/1.jpg
• http://xinmeti.co/assets/img/sample/2.jpg
• http://xinmeti.co/assets/img/sample/3.jpg
• http://xinmeti.co/assets/img/sample/4.jpg
• http://xinmeti.co/assets/img/sample/5.jpg
• http://xinmeti.co/assets/img/sample/6.jpg