CSS 串接樣式表 - 基本語法 / 顯示與定位

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

• 基本語法跟常見樣式列表，請參考 這份講義 。
• CSS 定位與顯示模式，請參考 這份講義 。
• 登入網站 後，請使用 建立新筆記 來建立練習用頁面。
• 你可以在 我的作品 中找到你建立的所有筆記。
• CSS Selector 亦可透過 CSS Diner 遊戲方式來學習。速查表則可以在 W3School 找到。
• Can I Use ..? 功能相容性資訊網站。

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

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

課程內容大致上包含基本語法、 CSS Selector 以及以下屬性：

• color, background
• font-size, font-family, font-weight, font-style
• text-align, text-transform, text-decoration
• width, height
• background 系列樣式

課堂練習

• 運用 Google Font 載入喜歡的字型, 並設定文字樣式 ( 01 )
• 利用 CSS 設定方塊背景 ( 02 )

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

• 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