# HTML + CSS 全功能教學指南 ## 目標 - 介紹 HTML 和 CSS 的所有基本功能和概念。 - 詳細解釋每個功能及其用法。 ## HTML 基礎 ### 1. HTML 結構 HTML 是用來建立網頁結構的標記語言。以下是基本的 HTML 文檔結構： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Webpage</title> </head> <body> <header> <h1>Welcome to My Webpage</h1> </header> <main> <section> <h2>About</h2> <p>This is a paragraph about the webpage.</p> </section> <section> <h2>Contact</h2> <p>Contact us at email@example.com</p> </section> </main> <footer> <p>&copy; 2024 My Webpage</p> </footer> </body> </html> ``` ### 2. 常用 HTML 標籤 - `<!DOCTYPE html>`：聲明文件類型。 - `<html>`：HTML 文件的根元素。 - `<head>`：包含元數據，如字符編碼、網頁標題等。 - `<body>`：包含網頁的主要內容。 - `<header>`：網頁的頁眉部分。 - `<main>`：網頁的主要內容區域。 - `<section>`：用於分割內容的區塊。 - `<footer>`：網頁的頁腳部分。 - `<h1>` 至 `<h6>`：標題標籤，數字越小級別越高。 - `<p>`：段落標籤。 - `<a>`：連結標籤，使用 `href` 屬性指定目標 URL。 ## CSS 基礎 ### 1. CSS 結構 CSS 是用來控制 HTML 元素外觀的樣式表語言。以下是基本的 CSS 結構： ```css /* src/styles.css */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #4CAF50; color: white; text-align: center; padding: 10px 0; } section { padding: 20px; margin: 10px 0; } footer { background-color: #4CAF50; color: white; text-align: center; padding: 10px 0; } ``` ### 2. CSS 選擇器 - `*`：通配符選擇器，選擇所有元素。 - `element`：元素選擇器，選擇指定的 HTML 元素。 - `.class`：類選擇器，選擇指定 class 的所有元素。 - `#id`：ID 選擇器，選擇指定 ID 的元素。 - `element, element`：群組選擇器，選擇多個元素。 ### 3. CSS 屬性 - `color`：設定文本顏色。 - `background-color`：設定背景顏色。 - `font-family`：設定字體。 - `font-size`：設定字體大小。 - `margin`：設定外邊距。 - `padding`：設定內邊距。 - `text-align`：設定文本對齊方式。 - `border`：設定邊框。 - `display`：設定元素的顯示方式。 ### 4. CSS 位置配置 - `position: static`：預設值，元素按正常流動布局。 - `position: relative`：相對定位，元素相對於其正常位置進行移動。 - `position: absolute`：絕對定位，元素相對於最近的已定位祖先元素進行移動。 - `position: fixed`：固定定位，元素相對於瀏覽器窗口進行移動。 - `position: sticky`：粘性定位，元素在滾動到特定位置時變為固定。 ### 5. CSS 布局 - `display: block`：元素作為區塊元素顯示。 - `display: inline`：元素作為行內元素顯示。 - `display: inline-block`：元素作為行內區塊元素顯示。 - `display: flex`：使用彈性盒模型布局。 - `display: grid`：使用網格布局模型。 ### 6. CSS Flexbox ```css .container { display: flex; justify-content: center; align-items: center; } .item { flex: 1; } ``` - `display: flex`：將容器設置為彈性盒模型。 - `justify-content`：設定主軸對齊方式。 - `align-items`：設定交叉軸對齊方式。 - `flex`：設定元素的彈性伸縮。 ### 7. CSS Grid ```css .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`：設定網格項之間的間距。 ### 8. CSS 動畫 ```css @keyframes example { from {background-color: red;} to {background-color: yellow;} } div { animation-name: example; animation-duration: 4s; } ``` - `@keyframes`：定義動畫的關鍵幀。 - `animation-name`：設定動畫名稱。 - `animation-duration`：設定動畫持續時間。 ### 9. SCSS 基礎 SCSS 是 CSS 的擴充功能，增加了變量、嵌套等功能。 ```scss $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; } } ``` - `$primary-color`：變量，用於存儲顏色值。 - 嵌套：在父選擇器內部嵌套子選擇器，提高可讀性。 --- - [✔️] 此文章部分內容為AI創作，若有錯誤請備註。 - [✔️] 分享貼文請標註來源。