4. CSS 文字樣式

學習成果

• color.

• 字型族、字型堆疊、Web 安全字型。

• font-size、font-weight 和 font-style。

• text-align、text-transform 和 text-decoration。

• text-shadow.

• line-height.

注意:

還有許多其他的字型和文字樣式屬性，應鼓勵學生在持續學習中探索更多。

資源

• 基本文字和字型樣式

• 文字和排版，web.dev (2021)

• Web 安全字型，Scrimba 課程合作伙伴

學習成果

• 列表項間距設定，例如使用 margin 或 line-height。

• list-style 屬性。

• 理解為什麼預設連結樣式對於 Web 可用性很重要——它們很熟悉，有助於使用者識別連結。

• 連結狀態樣式設定：:hover、:focus、:visited 和 :active

  • 理解為什麼這些對於可用性和可訪問性是必需的。

• 使用列表和連結建立導航選單。

資源

• 列表樣式

• 連結樣式

學習成果

• 理解 Web 字型允許開發人員超越 Web 安全字型集，並在其 Web 應用程式中使用自定義字型。

• 基本設定 — @font-face 規則以及 font-family 和 src 描述符。

• 使用 font-family 屬性使用 Web 字型。

• 其他描述符 — font-weight、font-style 等。

• 使用線上服務查詢 Web 字型並生成 Web 字型程式碼，例如 Font Squirrel 和 Google Fonts。

• Web 字型對可用性的影響 — 使用多個 Web 字型可能會增加頁面下載大小。

資源

• Web 字型

• 字型知識，Google Fonts

• 關於 CSS font-family 屬性的一切，explainers.dev