HTML & CSS 基礎筆記

第一個 HTML 範例#

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title>我的第一個網頁</title>
5
</head>
6
<body>
7
    Hello HTML!
8
</body>
9
</html>

優化開發流程#

將編輯器和瀏覽器並排，方便即時查看修改
安裝 Live Server 擴充功能，自動重新載入網頁
- 在 HTML 檔案中按右鍵，選擇 “Open with Live Server”

HTML 基本結構與元素#

基本結構#

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title>網頁標題</title>
5
    <!-- meta 資訊、CSS 連結等放在 head 中 -->
6
</head>
7
<body>
8
    <!-- 網頁的實際內容放在 body 中 -->
9
</body>
10
</html>

標題元素#

1
<h1>一級標題</h1>
2
<h2>二級標題</h2>
3
<h3>三級標題</h3>
4
<h4>四級標題</h4>
5
<h5>五級標題</h5>
6
<h6>六級標題</h6>

段落與換行#

1
<p>這是一個段落。</p>
2
<p>這是另一個段落。</p>
3

4
<!-- 換行 -->
5
一行文字<br>換到下一行

註解#

1
<!-- 這是 HTML 註解，不會顯示在網頁上 -->

在 VS Code 中使用 Ctrl + / (Windows) 或 Cmd + / (Mac) 快速添加/移除註解

空格處理#

HTML 中多個連續空格只會顯示為一個空格
使用特殊字元   來顯示多個空格

列表#

無序列表 (圓點列表)#

1
<ul>
2
    <li>項目一</li>
3
    <li>項目二</li>
4
    <li>項目三</li>
5
</ul>

有序列表 (編號列表)#

1
<ol>
2
    <li>第一步</li>
3
    <li>第二步</li>
4
    <li>第三步</li>
5
</ol>

表格#

1
<table>
2
    <tr>
3
        <th>標題 1</th>
4
        <th>標題 2</th>
5
    </tr>
6
    <tr>
7
        <td>資料 1</td>
8
        <td>資料 2</td>
9
    </tr>
10
</table>

超連結#

1
<!-- 基本連結 -->
2
<a href="https://www.example.com">連結文字</a>
3

4
<!-- 在新分頁開啟 -->
5
<a href="https://www.example.com" target="_blank">在新分頁開啟</a>
6

7
<!-- 連結到自己的頁面 -->
8
<a href="./page2.html">前往第二頁</a>
9

10
<!-- 電子郵件連結 -->
11
<a href="mailto:example@example.com">寄信給我</a>

錨點 (頁內連結)#

1
<!-- 先定義錨點 -->
2
<h2 id="section1">第一節</h2>
3

4
<!-- 連結到錨點 -->
5
<a href="#section1">跳到第一節</a>

圖片#

1
<!-- 基本圖片 -->
2
<img src="./images/photo.jpg" alt="風景照片">
3

4
<!-- 設定寬高 -->
5
<img src="./dog.jpg" alt="狗狗" width="300" height="200">
6

7
<!-- 圖片作為連結 -->
8
<a href="https://www.example.com">
9
    <img src="./logo.png" alt="Logo">
10
</a>

表單#

1
<form action="/submit" method="post">
2
    <!-- 文字輸入 -->
3
    <label for="username">用戶名:</label>
4
    <input type="text" id="username" name="username"><br>
5

6
    <!-- Email 輸入 -->
7
    <label for="email">電子郵件:</label>
8
    <input type="email" id="email" name="email"><br>
9

10
    <!-- 日期選擇器 -->
11
    <label for="birthdate">生日:</label>
12
    <input type="date" id="birthdate" name="birthdate"><br>
13

14
    <!-- 數字輸入 -->
15
    <label for="age">年齡:</label>
16
    <input type="number" id="age" name="age" min="1" max="120"><br>
17

18
    <!-- 多行文字 -->
19
    <label for="message">留言:</label><br>
20
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br>
21

22
    <!-- 核取方塊 -->
23
    <input type="checkbox" id="subscribe" name="subscribe" value="yes">
24
    <label for="subscribe">訂閱電子報</label><br>
25

26
    <!-- 下拉選單 -->
27
    <label for="country">國家:</label>
28
    <select id="country" name="country">
29
        <option value="tw">台灣</option>
30
        <option value="jp">日本</option>
31
        <option value="us">美國</option>
32
    </select><br>
33

34
    <!-- 提交按鈕 -->
35
    <input type="submit" value="送出">
36
</form>

Meta 元素#

1
<head>
2
    <!-- 字符集 -->
3
    <meta charset="UTF-8">
4

5
    <!-- 視口設定，對響應式網頁很重要 -->
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7

8
    <!-- 網頁描述 -->
9
    <meta name="description" content="這是一個描述網頁內容的簡短摘要">
10

11
    <!-- 關鍵字 -->
12
    <meta name="keywords" content="HTML, CSS, 網頁設計">
13

14
    <!-- Open Graph 標籤，用於社交媒體分享 -->
15
    <meta property="og:title" content="網頁標題">
16
    <meta property="og:description" content="網頁描述">
17
    <meta property="og:image" content="https://example.com/image.jpg">
18
</head>

特殊字元 (字元實體)#

  - 空格
< - 小於符號 (<)
> - 大於符號 (>)
& - 和符號 (&)
" - 雙引號 (”)
' - 單引號 (’)
© - 版權符號 (©)
™ - 商標符號 (™)

文字格式化#

1
<!-- 加粗 -->
2
<b>粗體文字</b>
3
<strong>重要文字</strong> <!-- 語義上更強調重要性 -->
4

5
<!-- 斜體 -->
6
<i>斜體文字</i>
7
<em>強調文字</em> <!-- 語義上表示強調 -->

iframe 元素#

1
<!-- 嵌入其他網頁 -->
2
<iframe src="https://www.example.com" width="600" height="400"></iframe>
3

4
<!-- 嵌入 YouTube 影片 -->
5
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

音訊元素#

1
<audio controls>
2
    <source src="music.mp3" type="audio/mpeg">
3
    您的瀏覽器不支援音訊元素。
4
</audio>

div 和 span 元素#

1
<!-- div 是區塊級元素 -->
2
<div>這是一個區塊</div>
3

4
<!-- span 是行內元素 -->
5
<p>這段文字中的<span>這部分</span>可以單獨設定樣式。</p>

按鈕元素#

1
<!-- 基本按鈕 -->
2
<button>點我</button>
3

4
<!-- 帶有 JavaScript 事件的按鈕 -->
5
<button onclick="alert('Hello!')">點我顯示提醒</button>
6

7
<!-- 作為連結的按鈕 -->
8
<a href="https://www.example.com">
9
    <button>前往網站</button>
10
</a>

語義化標籤#

1
<header>
2
    <h1>網站標題</h1>
3
    <nav>
4
        <ul>
5
            <li><a href="#">首頁</a></li>
6
            <li><a href="#">關於我們</a></li>
7
            <li><a href="#">聯絡我們</a></li>
8
        </ul>
9
    </nav>
10
</header>
11

12
<main>
13
    <article>
14
        <h2>文章標題</h2>
15
        <p>文章內容...</p>
16
    </article>
17

18
    <aside>
19
        <h3>相關資訊</h3>
20
        <p>側邊欄內容...</p>
21
    </aside>
22
</main>
23

24
<footer>
25
    <p>&copy; 2025 我的網站</p>
26
</footer>

CSS 基礎#

CSS 的基本觀念#

CSS 用於描述 HTML 元素如何在螢幕上呈現

CSS 規則由選擇器和聲明區塊組成：

1
選擇器 {
2
  屬性: 值;
3
  屬性: 值;
4
}

CSS 使用方式#

行內樣式#

1
<p style="color: blue; font-size: 16px;">這是藍色文字。</p>

內部樣式表#

1
<head>
2
    <style>
3
        p {
4
            color: blue;
5
            font-size: 16px;
6
        }
7
    </style>
8
</head>

外部樣式表 (推薦)#

1
<head>
2
    <link rel="stylesheet" href="styles.css">
3
</head>

1
p {
2
    color: blue;
3
    font-size: 16px;
4
}

CSS 顏色單位#

1
/* 顏色名稱 */
2
color: red;
3

4
/* RGB 值 */
5
color: rgb(255, 0, 0);  /* 紅色 */
6
color: rgb(0, 255, 0);  /* 綠色 */
7
color: rgb(0, 0, 255);  /* 藍色 */
8

9
/* 十六進制顏色代碼 */
10
color: #ff0000;  /* 紅色 */
11
color: #00ff00;  /* 綠色 */
12
color: #0000ff;  /* 藍色 */
13

14
/* HSL (色相、飽和度、亮度) */
15
color: hsl(0, 100%, 50%);    /* 紅色 */
16
color: hsl(120, 100%, 50%);  /* 綠色 */
17
color: hsl(240, 100%, 50%);  /* 藍色 */

CSS 字體#

1
/* 指定字體 */
2
font-family: Arial, Helvetica, sans-serif;
3

4
/* 使用 Google Fonts */
5
/* 先在 HTML 的 head 中添加: */
6
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
7

8
/* 然後在 CSS 中使用: */
9
font-family: 'Roboto', sans-serif;
10

11
/* 自定義字體 */
12
@font-face {
13
    font-family: 'MyCustomFont';
14
    src: url('fonts/custom-font.woff2') format('woff2');
15
}
16

17
font-family: 'MyCustomFont', Arial, sans-serif;

CSS 邊框#

1
/* 單獨設定各屬性 */
2
border-width: 2px;
3
border-style: solid;
4
border-color: black;
5

6
/* 縮寫 */
7
border: 2px solid black;
8

9
/* 圓角邊框 */
10
border-radius: 5px;
11

12
/* 單獨設定各邊 */
13
border-top: 1px solid red;
14
border-right: 2px dashed green;
15
border-bottom: 3px dotted blue;
16
border-left: 4px double yellow;

CSS 背景#

1
/* 背景顏色 */
2
background-color: #f0f0f0;
3

4
/* 背景圖片 */
5
background-image: url('background.jpg');
6

7
/* 背景重複 */
8
background-repeat: no-repeat;  /* 不重複 */
9
background-repeat: repeat-x;   /* 水平重複 */
10
background-repeat: repeat-y;   /* 垂直重複 */
11

12
/* 背景尺寸 */
13
background-size: cover;    /* 覆蓋整個容器 */
14
background-size: contain;  /* 確保整張圖片可見 */
15
background-size: 200px 100px;  /* 指定寬高 */
16

17
/* 背景位置 */
18
background-position: center;
19
background-position: top left;
20
background-position: 50% 25%;
21

22
/* 縮寫 */
23
background: #f0f0f0 url('background.jpg') no-repeat center / cover;

CSS 浮動排版#

1
/* 向左浮動 */
2
float: left;
3

4
/* 向右浮動 */
5
float: right;
6

7
/* 清除浮動 */
8
clear: both;

CSS Overflow#

1
/* 預設值，內容超出容器會顯示 */
2
overflow: visible;
3

4
/* 內容超出容器會被隱藏 */
5
overflow: hidden;
6

7
/* 總是顯示捲軸 */
8
overflow: scroll;
9

10
/* 需要時才顯示捲軸 */
11
overflow: auto;

CSS Display#

1
/* 區塊元素 */
2
display: block;
3

4
/* 行內元素 */
5
display: inline;
6

7
/* 行內區塊元素 */
8
display: inline-block;
9

10
/* 隱藏元素 */
11
display: none;
12

13
/* Flex 容器 */
14
display: flex;
15

16
/* Grid 容器 */
17
display: grid;

CSS 寬度和高度#

1
/* 固定值 */
2
width: 300px;
3
height: 200px;
4

5
/* 百分比 */
6
width: 50%;
7
height: 100%;
8

9
/* 視窗寬高百分比 */
10
width: 50vw;  /* 視窗寬度的 50% */
11
height: 50vh; /* 視窗高度的 50% */
12

13
/* 最小最大值 */
14
min-width: 100px;
15
max-width: 500px;
16
min-height: 100px;
17
max-height: 500px;

CSS 定位#

1
/* 靜態定位（預設） */
2
position: static;
3

4
/* 相對定位（相對於自己的原始位置） */
5
position: relative;
6
top: 10px;
7
left: 20px;
8

9
/* 絕對定位（相對於最近的已定位祖先） */
10
position: absolute;
11
top: 0;
12
right: 0;
13

14
/* 固定定位（相對於視窗） */
15
position: fixed;
16
bottom: 20px;
17
right: 20px;
18

19
/* 黏性定位 */
20
position: sticky;
21
top: 0;  /* 滾動到頂部時會固定 */

CSS 盒模型#

1
/* 內容區域 */
2
width: 300px;
3
height: 200px;
4

5
/* 內邊距 */
6
padding: 20px;  /* 四邊都是 20px */
7
padding: 10px 20px;  /* 上下 10px，左右 20px */
8
padding: 10px 20px 30px 40px;  /* 上右下左 */
9

10
/* 邊框 */
11
border: 1px solid black;
12

13
/* 外邊距 */
14
margin: 10px;  /* 四邊都是 10px */
15
margin: 10px auto;  /* 上下 10px，左右自動居中 */
16
margin: 10px 20px 30px 40px;  /* 上右下左 */
17

18
/* 改變盒模型計算方式 */
19
box-sizing: border-box;  /* 寬高包含 padding 和 border */

CSS 選擇器#

1
/* 元素選擇器 */
2
p {
3
    color: blue;
4
}
5

6
/* ID 選擇器 */
7
#header {
8
    background-color: black;
9
}
10

11
/* 類別選擇器 */
12
.highlight {
13
    background-color: yellow;
14
}
15

16
/* 通用選擇器 */
17
* {
18
    margin: 0;
19
    padding: 0;
20
}
21

22
/* 群組選擇器 */
23
h1, h2, h3 {
24
    font-family: Arial, sans-serif;
25
}

CSS 選擇器組合器#

1
/* 後代選擇器 */
2
article p {  /* article 內的所有 p */
3
    color: gray;
4
}
5

6
/* 子選擇器 */
7
article > p {  /* article 的直接子元素 p */
8
    color: blue;
9
}
10

11
/* 相鄰兄弟選擇器 */
12
h2 + p {  /* 緊跟在 h2 後的第一個 p */
13
    font-weight: bold;
14
}
15

16
/* 一般兄弟選擇器 */
17
h2 ~ p {  /* h2 後的所有同層級 p */
18
    color: green;
19
}

CSS 屬性選擇器#

1
/* 具有特定屬性的元素 */
2
[class] {
3
    color: blue;
4
}
5

6
/* 屬性值等於指定值的元素 */
7
[type="email"] {
8
    border: 1px solid blue;
9
}
10

11
/* 屬性值以指定值開頭的元素 */
12
[href^="https"] {
13
    color: green;
14
}
15

16
/* 屬性值以指定值結尾的元素 */
17
[href$=".pdf"] {
18
    color: red;
19
}
20

21
/* 屬性值包含指定值的元素 */
22
[title*="hello"] {
23
    font-weight: bold;
24
}

CSS 偽類別#

1
/* 連結狀態 */
2
a:link {  /* 未訪問的連結 */
3
    color: blue;
4
}
5
a:visited {  /* 已訪問的連結 */
6
    color: purple;
7
}
8
a:hover {  /* 滑鼠懸停的連結 */
9
    text-decoration: underline;
10
}
11
a:active {  /* 點擊中的連結 */
12
    color: red;
13
}
14

15
/* 元素狀態 */
16
input:focus {  /* 獲得焦點的輸入框 */
17
    border: 2px solid blue;
18
}
19
button:disabled {  /* 禁用的按鈕 */
20
    opacity: 0.5;
21
}
22

23
/* 結構偽類 */
24
li:first-child {  /* 第一個子元素 */
25
    font-weight: bold;
26
}
27
li:last-child {  /* 最後一個子元素 */
28
    color: red;
29
}
30
li:nth-child(odd) {  /* 奇數位置的子元素 */
31
    background-color: #f0f0f0;
32
}
33
li:nth-child(even) {  /* 偶數位置的子元素 */
34
    background-color: #e0e0e0;
35
}
36
p:empty {  /* 沒有內容的元素 */
37
    display: none;
38
}
39

40
/* 否定偽類 */
41
:not(.highlight) {  /* 不具有 highlight 類別的元素 */
42
    color: gray;
43
}

CSS 偽元素#

1
/* 第一個字母 */
2
p::first-letter {
3
    font-size: 2em;
4
    font-weight: bold;
5
}
6

7
/* 第一行 */
8
p::first-line {
9
    color: blue;
10
}
11

12
/* 選中的文字 */
13
::selection {
14
    background-color: yellow;
15
    color: black;
16
}
17

18
/* 在元素內容前插入 */
19
.info::before {
20
    content: "⚠️ ";
21
}
22

23
/* 在元素內容後插入 */
24
.external-link::after {
25
    content: " 🔗";
26
}
27

28
/* 列表項目符號 */
29
li::marker {
30
    color: red;
31
}

CSS 權重 (Specificity)#

權重從低到高:

元素、偽元素選擇器: p, div, ::before (權值: 001)
類別、屬性、偽類選擇器: .class, [type="text"], :hover (權值: 010)
ID 選擇器: #id (權值: 100)
行內樣式: style="..." (權值: 1000)
!important: color: red !important; (最高權重)

CSS 過渡 (Transitions)#

1
/* 單獨設定 */
2
transition-property: background-color;  /* 要過渡的屬性 */
3
transition-duration: 0.3s;              /* 過渡時間 */
4
transition-timing-function: ease-in-out; /* 過渡速度曲線 */
5
transition-delay: 0.1s;                 /* 延遲時間 */
6

7
/* 縮寫 */
8
transition: background-color 0.3s ease-in-out 0.1s;
9

10
/* 多個屬性過渡 */
11
transition: color 0.3s, background-color 0.5s;
12

13
/* 所有可過渡屬性 */
14
transition: all 0.3s;

CSS 動畫 (Animations)#

1
/* 定義關鍵影格 */
2
@keyframes slide-in {
3
    0% {
4
        transform: translateX(-100%);
5
        opacity: 0;
6
    }
7
    100% {
8
        transform: translateX(0);
9
        opacity: 1;
10
    }
11
}
12

13
/* 應用動畫 */
14
.box {
15
    /* 單獨設定 */
16
    animation-name: slide-in;           /* 動畫名稱 */
17
    animation-duration: 1s;             /* 動畫時間 */
18
    animation-timing-function: ease;    /* 速度曲線 */
19
    animation-delay: 0.5s;              /* 延遲時間 */
20
    animation-iteration-count: 3;       /* 重複次數 */
21
    animation-direction: alternate;     /* 播放方向 */
22
    animation-fill-mode: forwards;      /* 結束後保持最後狀態 */
23

24
    /* 縮寫 */
25
    animation: slide-in 1s ease 0.5s 3 alternate forwards;
26
}

Font Awesome 使用#

1
<!-- 在 head 中添加 Font Awesome -->
2
<head>
3
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
4
</head>
5

6
<!-- 使用 Font Awesome 圖示 -->
7
<i class="fas fa-star"></i>           <!-- 實心星星 -->
8
<i class="far fa-star"></i>           <!-- 空心星星 -->
9
<i class="fab fa-twitter"></i>        <!-- Twitter 圖示 -->
10

11
<!-- 調整大小 -->
12
<i class="fas fa-star fa-lg"></i>     <!-- 大一點 -->
13
<i class="fas fa-star fa-2x"></i>     <!-- 兩倍大 -->

響應式網頁設計 (RWD)#

1
/* 媒體查詢 */
2
@media screen and (max-width: 600px) {
3
    /* 小螢幕的樣式 */
4
    .container {
5
        width: 100%;
6
    }
7
    .sidebar {
8
        display: none;
9
    }
10
}
11

12
@media screen and (min-width: 601px) and (max-width: 1024px) {
13
    /* 中型螢幕的樣式 */
14
    .container {
15
        width: 80%;
16
    }
17
}
18

19
@media screen and (min-width: 1025px) {
20
    /* 大螢幕的樣式 */
21
    .container {
22
        width: 1000px;
23
    }
24
}
25

26
/* 響應式圖片 */
27
img {
28
    max-width: 100%;
29
    height: auto;
30
}

CSS Flexbox#

1
/* 容器設定 */
2
.container {
3
  display: flex;
4

5
  /* 主軸方向 */
6
  flex-direction: row; /* 水平排列 (默認) */
7
  /* flex-direction: row-reverse; */ /* 水平反向排列 */
8
  /* flex-direction: column; */ /* 垂直排列 */
9
  /* flex-direction: column-reverse; */ /* 垂直反向排列 */
10

11
  /* 換行設定 */
12
  flex-wrap: nowrap; /* 不換行 (默認) */
13
  /* flex-wrap: wrap; */ /* 換行 */
14
  /* flex-wrap: wrap-reverse; */ /* 反向換行 */
15

16
  /* 縮寫: flex-direction + flex-wrap */
17
  /* flex-flow: row wrap; */
18

19
  /* 主軸對齊 */
20
  justify-content: flex-start; /* 靠左/靠上 (默認) */
21
  /* justify-content: flex-end; */ /* 靠右/靠下 */
22
  /* justify-content: center; */ /* 居中 */
23
  /* justify-content: space-between; */ /* 兩端對齊 */
24
  /* justify-content: space-around; */ /* 均勻分布 (項目周圍) */
25
  /* justify-content: space-evenly; */ /* 均勻分布 (所有間距相等) */
26

27
  /* 交叉軸對齊 */
28
  align-items: stretch; /* 拉伸填滿 (默認) */
29
  /* align-items: flex-start; */ /* 靠上/靠左 */
30
  /* align-items: flex-end; */ /* 靠下/靠右 */
31
  /* align-items: center; */ /* 居中 */
32
  /* align-items: baseline; */ /* 基線對齊 */
33

34
  /* 多行對齊 (需設定 flex-wrap: wrap) */
35
  align-content: stretch; /* 拉伸填滿 (默認) */
36
  /* align-content: flex-start; */ /* 靠上 */
37
  /* align-content: flex-end; */ /* 靠下 */
38
  /* align-content: center; */ /* 居中 */
39
  /* align-content: space-between; */ /* 兩端對齊 */
40
  /* align-content: space-around; */ /* 均勻分布 */
41
}
42

43
/* 項目設定 */
44
.item {
45
  /* 排序 */
46
  order: 0; /* 預設值 (數字越小越靠前) */
47

48
  /* 放大比例 */
49
  flex-grow: 0; /* 預設不放大 */
50

51
  /* 縮小比例 */
52
  flex-shrink: 1; /* 預設會等比縮小 */
53

54
  /* 初始大小 */
55
  flex-basis: auto; /* 預設大小 */
56

57
  /* 縮寫: flex-grow + flex-shrink + flex-basis */
58
  flex: 0 1 auto; /* 默認值 */
59
  /* flex: 1; */ /* 等同於 flex: 1 1 0%; (常用於均分空間) */
60

61
  /* 個別交叉軸對齊 (覆蓋容器的 align-items) */
62
  align-self: auto; /* 跟隨容器設定 (默認) */
63
  /* align-self: flex-start; */ /* 靠上/靠左 */
64
  /* align-self: flex-end; */ /* 靠下/靠右 */
65
  /* align-self: center; */ /* 居中 */
66
  /* align-self: stretch; */ /* 拉伸填滿 */
67
}

Flexbox 實例應用#

1
/* 基本導航欄 */
2
.navbar {
3
  display: flex;
4
  justify-content: space-between; /* 項目間均勻分布 */
5
  align-items: center; /* 垂直居中 */
6
  padding: 1rem;
7
  background-color: #333;
8
}
9

10
/* 均等分布的卡片容器 */
11
.card-container {
12
  display: flex;
13
  flex-wrap: wrap; /* 允許卡片換行 */
14
  gap: 20px; /* 卡片間距 */
15
}
16

17
.card {
18
  flex: 1 1 300px; /* 放大比例1, 縮小比例1, 基本寬度300px */
19
  min-width: 300px; /* 最小寬度 */
20
  padding: 20px;
21
  border: 1px solid #ddd;
22
}
23

24
/* 聖杯布局 (Header, Sidebar, Main, Footer) */
25
.holy-grail {
26
  display: flex;
27
  flex-direction: column;
28
  min-height: 100vh; /* 至少佔滿整個視窗高度 */
29
}
30

31
.header, .footer {
32
  background-color: #f0f0f0;
33
  padding: 20px;
34
}
35

36
.content-container {
37
  display: flex;
38
  flex: 1; /* 佔用所有可用空間 */
39
}
40

41
.sidebar {
42
  flex: 0 0 200px; /* 不放大, 不縮小, 固定寬度200px */
43
  background-color: #e0e0e0;
44
  padding: 20px;
45
}
46

47
.main-content {
48
  flex: 1; /* 佔用所有剩餘空間 */
49
  padding: 20px;
50
}
51

52
/* 響應式布局: 在小螢幕上改變排列方向 */
53
@media (max-width: 768px) {
54
  .content-container {
55
    flex-direction: column; /* 改為垂直排列 */
56
  }
57

58
  .sidebar {
59
    flex-basis: auto; /* 重置固定寬度 */
60
  }
61
}

CSS Grid 布局#

1
/* 容器設定 */
2
.grid-container {
3
  display: grid;
4

5
  /* 定義網格列 */
6
  grid-template-columns: 200px 1fr 2fr; /* 三列: 固定寬度, 1份剩餘空間, 2份剩餘空間 */
7
  /* grid-template-columns: repeat(3, 1fr); */ /* 三列等寬 */
8
  /* grid-template-columns: minmax(100px, 1fr) 2fr 1fr; */ /* 第一列最小100px, 最大1fr */
9

10
  /* 定義網格行 */
11
  grid-template-rows: 100px auto 100px; /* 三行: 固定高度, 自動高度, 固定高度 */
12
  /* grid-template-rows: repeat(3, minmax(100px, auto)); */ /* 三行最小高度100px */
13

14
  /* 網格間距 */
15
  gap: 20px; /* 行和列間距都是20px */
16
  /* column-gap: 20px; */ /* 僅列間距 */
17
  /* row-gap: 10px; */ /* 僅行間距 */
18

19
  /* 簡寫: 區域命名 */
20
  grid-template-areas:
21
    "header header header"
22
    "sidebar main main"
23
    "footer footer footer";
24

25
  /* 項目對齊 (水平方向) */
26
  justify-items: stretch; /* 拉伸填滿 (默認) */
27
  /* justify-items: start; */ /* 靠左 */
28
  /* justify-items: end; */ /* 靠右 */
29
  /* justify-items: center; */ /* 居中 */
30

31
  /* 項目對齊 (垂直方向) */
32
  align-items: stretch; /* 拉伸填滿 (默認) */
33
  /* align-items: start; */ /* 靠上 */
34
  /* align-items: end; */ /* 靠下 */
35
  /* align-items: center; */ /* 居中 */
36

37
  /* 整體內容對齊 (當網格大小小於容器) */
38
  justify-content: start; /* 靠左 (默認) */
39
  /* justify-content: end; */ /* 靠右 */
40
  /* justify-content: center; */ /* 居中 */
41
  /* justify-content: space-between; */ /* 兩端對齊 */
42
  /* justify-content: space-around; */ /* 均勻分布 */
43

44
  align-content: start; /* 靠上 (默認) */
45
  /* align-content: end; */ /* 靠下 */
46
  /* align-content: center; */ /* 居中 */
47
  /* align-content: space-between; */ /* 兩端對齊 */
48
  /* align-content: space-around; */ /* 均勻分布 */
49
}
50

51
/* 項目設定 */
52
.grid-item {
53
  /* 指定項目位置 (基於網格線編號) */
54
  grid-column-start: 1;
55
  grid-column-end: 3; /* 或 span 2 (橫跨2列) */
56
  grid-row-start: 1;
57
  grid-row-end: 2;
58

59
  /* 縮寫 */
60
  grid-column: 1 / 3; /* 從第1條列線到第3條列線 */
61
  /* grid-column: 1 / span 2; */ /* 從第1條列線開始橫跨2列 */
62
  grid-row: 1 / 2; /* 從第1條行線到第2條行線 */
63

64
  /* 更簡潔的縮寫: grid-row-start / grid-column-start / grid-row-end / grid-column-end */
65
  grid-area: 1 / 1 / 2 / 3;
66

67
  /* 使用命名區域 */
68
  grid-area: header;
69

70
  /* 個別項目對齊 */
71
  justify-self: stretch; /* 水平拉伸 (默認) */
72
  /* justify-self: start; */ /* 靠左 */
73
  /* justify-self: end; */ /* 靠右 */
74
  /* justify-self: center; */ /* 水平居中 */
75

76
  align-self: stretch; /* 垂直拉伸 (默認) */
77
  /* align-self: start; */ /* 靠上 */
78
  /* align-self: end; */ /* 靠下 */
79
  /* align-self: center; */ /* 垂直居中 */
80
}

CSS Grid 實例應用#

1
/* 照片牆布局 */
2
.gallery {
3
  display: grid;
4
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自動填充, 每列最小250px */
5
  gap: 15px;
6
  padding: 20px;
7
}
8

9
.gallery-item {
10
  overflow: hidden;
11
  border-radius: 8px;
12
}
13

14
.gallery-item img {
15
  width: 100%;
16
  height: 100%;
17
  object-fit: cover;
18
}
19

20
/* 經典網頁布局 */
21
.page-layout {
22
  display: grid;
23
  grid-template-areas:
24
    "header header header"
25
    "nav content sidebar"
26
    "footer footer footer";
27
  grid-template-columns: 200px 1fr 200px;
28
  grid-template-rows: auto 1fr auto;
29
  min-height: 100vh;
30
}
31

32
.header { grid-area: header; }
33
.nav { grid-area: nav; }
34
.content { grid-area: content; }
35
.sidebar { grid-area: sidebar; }
36
.footer { grid-area: footer; }
37

38
/* 響應式布局 */
39
@media (max-width: 768px) {
40
  .page-layout {
41
    grid-template-areas:
42
      "header"
43
      "nav"
44
      "content"
45
      "sidebar"
46
      "footer";
47
    grid-template-columns: 1fr; /* 單列 */
48
  }
49
}
50

51
/* 網格中的網格 (嵌套網格) */
52
.nested-grid {
53
  display: grid;
54
  grid-template-columns: repeat(3, 1fr);
55
  gap: 10px;
56
}
57

58
.nested-item {
59
  display: grid;
60
  grid-template-columns: 1fr 1fr;
61
  grid-template-rows: auto 1fr;
62
  gap: 5px;
63
}

CSS 動畫與過渡#

1
/* 過渡效果 */
2
.transition-element {
3
  width: 100px;
4
  height: 100px;
5
  background-color: blue;
6

7
  /* 單一屬性過渡 */
8
  transition: background-color 0.5s ease;
9

10
  /* 多屬性過渡 */
11
  /* transition: background-color 0.5s ease, transform 0.3s ease-in-out; */
12

13
  /* 所有可過渡屬性 */
14
  /* transition: all 0.5s ease; */
15

16
  /* 延遲過渡 */
17
  /* transition: background-color 0.5s ease 0.2s; */ /* 延遲0.2秒 */
18
}
19

20
.transition-element:hover {
21
  background-color: red;
22
  transform: scale(1.2); /* 放大1.2倍 */
23
}
24

25
/* 動畫 */
26
@keyframes slide-in {
27
  0% {
28
    transform: translateX(-100%);
29
    opacity: 0;
30
  }
31
  100% {
32
    transform: translateX(0);
33
    opacity: 1;
34
  }
35
}
36

37
.animated-element {
38
  animation-name: slide-in; /* 動畫名稱 */
39
  animation-duration: 1s; /* 持續時間 */
40
  animation-timing-function: ease-out; /* 時間函數 */
41
  animation-delay: 0s; /* 延遲 */
42
  animation-iteration-count: 1; /* 重複次數 (infinite為無限重複) */
43
  animation-direction: normal; /* 方向 (normal, reverse, alternate, alternate-reverse) */
44
  animation-fill-mode: forwards; /* 結束後保持最後一幀 */
45

46
  /* 縮寫 */
47
  /* animation: slide-in 1s ease-out 0s 1 normal forwards; */
48
}
49

50
/* 多步驟動畫 */
51
@keyframes pulse {
52
  0% {
53
    transform: scale(1);
54
  }
55
  50% {
56
    transform: scale(1.2);
57
  }
58
  100% {
59
    transform: scale(1);
60
  }
61
}
62

63
.pulse-element {
64
  animation: pulse 2s infinite ease-in-out;
65
}

CSS 變數 (自定義屬性)#

1
/* 全局變數定義 */
2
:root {
3
  --primary-color: #007bff;
4
  --secondary-color: #6c757d;
5
  --padding-standard: 15px;
6
  --border-radius: 8px;
7
  --font-main: 'Roboto', sans-serif;
8
}
9

10
/* 使用變數 */
11
.button {
12
  background-color: var(--primary-color);
13
  padding: var(--padding-standard);
14
  border-radius: var(--border-radius);
15
  font-family: var(--font-main);
16
  color: white;
17
}
18

19
.button-secondary {
20
  background-color: var(--secondary-color);
21
}
22

23
/* 作用域變數 */
24
.card {
25
  --card-padding: 20px;
26
  padding: var(--card-padding);
27
}
28

29
/* 變數計算與備用值 */
30
.element {
31
  margin: calc(var(--padding-standard) * 2);
32
  color: var(--text-color, #333); /* 如果--text-color未定義, 使用#333 */
33
}