# HTML + CSS 全功能教學指南 (Part 3)

## 目標
- 完成 HTML 和 CSS 的全面介紹，涵蓋之前未解釋的功能和概念。
- 提供詳細的實例和解釋。

## 進階 HTML 功能

### 1. 列表
列表用於組織相關的內容。

#### 1.1 無序列表
無序列表使用圓點（或其他標記）列出項目。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

- `<ul>`：無序列表元素。
- `<li>`：列表項元素。

#### 1.2 有序列表
有序列表使用數字或字母列出項目。

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

- `<ol>`：有序列表元素。
- `<li>`：列表項元素。

### 2. 嵌入內容
嵌入外部內容如圖片和框架。

#### 2.1 圖片
使用 `<img>` 標籤嵌入圖片。

<img src="image.jpg" alt="Description of the image" width="500" height="300">

- `src`：指定圖片的來源 URL。
- `alt`：提供替代文本以防圖片無法顯示。
- `width` 和 `height`：設定圖片的寬度和高度。

#### 2.2 嵌入框架
使用 `<iframe>` 標籤嵌入另一個 HTML 文件。

<iframe src="https://example.com" width="600" height="400"></iframe>

- `src`：指定嵌入的 URL。
- `width` 和 `height`：設定框架的寬度和高度。

### 3. Meta 標籤
提供關於 HTML 文檔的元數據。

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

- `charset`：指定字符編碼。
- `name` 和 `content`：提供描述、關鍵詞、作者等元數據。
- `viewport`：設置視口屬性以控制布局。

## 進階 CSS 功能

### 1. 偽類和偽元素
用於選擇特定狀態或部分的元素。

#### 1.1 偽類
選擇元素的特定狀態。

a:hover {
    color: red;
}

- `:hover`：當鼠標懸停在元素上時應用樣式。

其他常見偽類：
- `:active`：當元素被激活（例如被點擊）時應用樣式。
- `:focus`：當元素獲得焦點時應用樣式。
- `:nth-child(n)`：選擇其父元素的第 n 個子元素。

#### 1.2 偽元素
選擇元素的特定部分。

p::before {
    content: "Note: ";
    font-weight: bold;
}

- `::before`：在元素的內容前插入內容。
- `::after`：在元素的內容後插入內容。

### 2. CSS Media Queries
用於在不同屏幕尺寸和設備上應用不同的樣式。

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

- `@media`：定義媒體查詢。
- `screen and (max-width: 600px)`：當屏幕寬度小於等於 600 像素時應用樣式。

### 3. CSS 變換
用於改變元素的尺寸、位置和旋轉角度。

div {
    transform: scale(1.5) rotate(45deg) translateX(100px);
}

- `transform: scale()`：縮放元素。
- `transform: rotate()`：旋轉元素。
- `transform: translateX()`：沿 X 軸平移元素。

### 4. CSS 過渡
用於平滑地改變 CSS 屬性。

button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: green;
}

- `transition`：定義過渡效果，包含屬性、持續時間和過渡函數。
- `hover` 狀態下的樣式變化。

### 5. CSS 動畫
定義關鍵幀動畫效果。

@keyframes example {
    from {
        background-color: red;
    }
    to {
        background-color: yellow;
    }
}

div {
    animation: example 1s ease-in-out;
}

- `@keyframes`：定義動畫的關鍵幀。
- `animation`：應用動畫，包含名稱、持續時間和過渡函數。

### 6. CSS 變量
CSS 變量允許在樣式表中定義可重用的值。

:root {
    --primary-color: #4CAF50;
}

div {
    background-color: var(--primary-color);
}

- `--primary-color`：定義 CSS 變量。
- `var(--primary-color)`：使用 CSS 變量。

### 7. CSS 布局
使用 Flexbox 和 Grid 設計彈性佈局和網格佈局。

#### 7.1 Flexbox
彈性盒模型，用於設計彈性佈局。

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.item {
    flex: 1;
}

- `display: flex`：將容器設置為彈性盒模型。
- `flex-direction`：設置主軸方向（如 `row` 或 `column`）。
- `justify-content`：設定主軸對齊方式。
- `align-items`：設定交叉軸對齊方式。
- `flex`：設定元素的彈性伸縮。

#### 7.2 Grid
網格模型，用於設計複雜的網格佈局。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.grid-item {
    background-color: #ccc;
    padding: 20px;
}

- `display: grid`：將容器設置為網格佈局。
- `grid-template-columns`：設定網格列的模板。
- `grid-gap`：設定網格項之間的間距。

## CSS 最佳實踐

### 1. 模塊化 CSS
將 CSS 拆分成多個模塊以提高可維護性。

/* src/styles/buttons.css */
button {
    background-color: blue;
    color: white;
}

/* src/styles/forms.css */
input {
    border: 1px solid #ccc;
    padding: 5px;
}

### 2. 使用預處理器
使用如 SCSS 等預處理器來增強 CSS 的功能。

$primary-color: #4CAF50;

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;

    header {
        background-color: $primary-color;
        color: white;
        text-align: center;
        padding: 10px 0;
    }

    section {
        padding: 20px;
        margin: 10px 0;
    }

    footer {
        background-color: $primary-color;
        color: white;
        text-align: center;
        padding: 10px 0;
    }
}

### 3. BEM 命名法
使用 BEM（Block, Element, Modifier）命名法來提高 CSS 的可讀性和可維護性。

/* BEM 命名法 */
.header__title {
    font-size: 2em;
}

.header__subtitle {
    font-size: 1.5em;
}

.header--large {
    padding: 20px;
}

- `Block`：代表組件的命名空間（如 `header`）。
- `Element`：組件內的子部分（如 `header__title`）。
- `Modifier`：組件的變體或狀態（如 `header--large`）。

---

- [✔️] 此文章部分內容為AI創作，若有錯誤請備註。
- [✔️] 分享貼文請標註來源。