網頁設計進階：CSS 樣式實作與視覺美學

本課程將進階探討如何利用 CSS 提升網頁的專業感。我們將透過「飲料店菜單」的實作練習，學習選擇器的運用、文字排版細節，以及如何運用背景與轉場效果創造動態視覺。

---

1. 實作練習：數位飲料店菜單

在新聞網頁或專題中，結構化的列表（如名單、數據、選單）非常常見。我們利用 HTML 標籤搭配 CSS 進行樣式美化。

HTML 結構要求

請使用以下標籤建立你的菜單原型：

• <h3>: 飲料分類（如：季節限定、手作茶飲）。
• <ul> & <li>: 清單結構。
• <span>: 用於標註價格或強調特定字詞。
• <hr>: 區隔不同類別的分隔線。

CSS 樣式核心屬性

請在你的樣式表中套用以下設定：

• font-family: 設定字體。建議使用 sans-serif 或特定風格字體提升品牌感。
• font-size: 區分標題與內文。
• text-align: 決定標題或內容要居中或靠左。
• color: 設定字體顏色（建議搭配飲料品牌的視覺色系）。
• vertical-align: 調整圖片與文字，或不同大小文字之間的垂直對齊。

單位概念：px vs. em

• px (Pixels): 絕對單位，像素。適合精確的邊框或間距設定。
• em: 相對單位。$1em$ 等於當前元素的字體大小。常用於排版，讓間距能隨字體大小成比例縮放。

---

2. 虛擬選擇器 (Pseudo-selectors)

為了讓菜單看起來更生動，我們不需要為每個標籤手動加 class，而是利用 CSS 的自動選取功能。

• :first-letter:
  • 用途：選取段落或標題的第一個字母。
  • 新聞應用：常用於長篇報導的「首字放大」效果，增加古典或雜誌感。
• nth-child(2n+1):
  • 用途：選取奇數列。
  • 實作建議：在菜單清單中使用，為奇數行加上淡淡的背景色，讓使用者更易於閱讀。

---

3. 樣式優先級 (Specificity)

當多個 CSS 規則同時作用在同一個元素時，誰會勝出？ 這就是 Specificity (權重) 的概念。你可以參考 Specifishity 的圖表：

1. Inline styles: 直接寫在標籤上的 style="" (權重最高)
2. IDs: #navbar
3. Classes / Attributes / Pseudo-classes: .menu-item, :hover
4. Elements: h1, p, li

提示：如果你的 CSS 沒生效，通常是因為權重被其他的規則蓋過去了。

---

4. 背景圖進階設定

利用背景圖案（Backgrounds）可以營造網頁的氛圍。請嘗試使用以下屬性：

• background-color: 基礎底色。
• background-image: 匯入背景圖（可使用範例雲朵圖：cloud.svg）。
• background-repeat: 設定是否重複（no-repeat, repeat-x）。
• background-position: 調整背景在容器中的位置（例如：center, top right）。
• background-size: 關鍵屬性。建議嘗試 cover (填滿) 或 contain (完整顯示)。
• background-attachment: 嘗試設定為 fixed，會產生類似視差捲動的效果。

---

5. 動態轉場效果 (Transition)

為了增加互動感，我們讓寬度與背景圖在滑鼠移入時產生平滑的變化。

實作範例

.card {
    width: 200px;
    background-size: 100%;
    /* 設定動態效果 */
    transition-property: width, background-size;
    transition-duration: 0.5s; /* 持續時間 */
    transition-timing-function: ease-in-out; /* 漸變函數 */
}

.card:hover {
    width: 250px;
    background-size: 120%;
}

---

6. 繳交作業與版本控制

完成後，請將你的專案更新至 GitHub 並提交 Pull Request。

1. 將本地檔案 commit 並 push 到你的 GitHub 儲存庫。
2. 前往課程專案庫：fju-xinmeti-11402
3. 建立 New pull request。
4. 在說明中註明你的「系級、姓名、學號」。

---

參考資源：

• HTML 手冊
• CSS 手冊