CSS 樣式檔案
## 一、CSS 樣式檔案的用途
CSS（Cascading Style Sheets，階層式樣式表）用來控制 HTML 網頁的外觀與版面，例如：
- 文字的顏色、大小與字型
- 背景顏色或背景圖片
- 元素的寬度、高度與間距
- 網頁版面配置
- 按鈕、表格、表單等元件的樣式
- 配合不同螢幕尺寸製作響應式網頁
將樣式獨立寫在 CSS 檔案中，可以讓 HTML 負責內容、CSS 負責外觀，方便維護，也能讓多個網頁共用同一份樣式。
---
## 二、CSS 檔案的基本寫法
CSS 檔案通常使用 `.css` 副檔名，例如：
```text
style.css
```
CSS 的基本語法如下：
```css
選擇器 {
屬性: 值;
}
```
例如：
```css
p {
color: blue;
font-size: 18px;
}
```
以上表示：
- `p`：選取所有 `<p>` 段落元素
- `color: blue;`：文字顏色設為藍色
- `font-size: 18px;`：文字大小設為 18 像素
---
## 三、CSS 常見選擇器
### 1. 元素選擇器
直接選取 HTML 元素：
```css
h1 {
color: darkgreen;
}
```
會套用到所有 `<h1>` 元素。
### 2. 類別選擇器
使用 `.` 加上類別名稱：
```css
.title {
color: red;
text-align: center;
}
```
HTML 中使用：
```html
<h1 class="title">網站標題</h1>
```
### 3. ID 選擇器
使用 `#` 加上 ID 名稱：
```css
#main-content {
background-color: #f2f2f2;
}
```
HTML 中使用：
```html
<div id="main-content">
主要內容
</div>
```
### 4. 群組選擇器
同時設定多個元素：
```css
h1, h2, p {
font-family: Arial, sans-serif;
}
```
---
## 四、建立 CSS 樣式檔案
假設網站資料夾如下：
```text
website/
├── index.html
└── style.css
```
在 `style.css` 中撰寫：
```css
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
margin: 0;
}
h1 {
color: #2c3e50;
text-align: center;
}
p {
color: #555;
font-size: 16px;
line-height: 1.6;
}
.button {
display: inline-block;
padding: 10px 20px;
color: white;
background-color: #3498db;
text-decoration: none;
border-radius: 5px;
}
.button:hover {
background-color: #217dbb;
}
```
---
## 五、將 CSS 引入 HTML
在 HTML 的 `<head>` 區段中，使用 `<link>` 標籤引入外部 CSS：
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 範例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>我的網頁</h1>
<p>這是一段套用了 CSS 樣式的文字。</p>
<a href="#" class="button">瞭解更多</a>
</body>
</html>
```
其中：
```html
<link rel="stylesheet" href="style.css">
```
說明如下：
- `rel="stylesheet"`：表示這是一份樣式表
- `href="style.css"`：指定 CSS 檔案的位置
---
## 六、CSS 檔案位於其他資料夾時
如果 CSS 放在 `css` 資料夾：
```text
website/
├── index.html
└── css/
└── style.css
```
HTML 應寫成：
```html
<link rel="stylesheet" href="css/style.css">
```
如果 HTML 位於子資料夾，而 CSS 位於上一層，則可使用：
```html
<link rel="stylesheet" href="../style.css">
```
---
## 七、其他 CSS 寫法
除了外部樣式表，CSS 也可以寫在 HTML 中。
### 1. 內部樣式表
放在 HTML 的 `<style>` 標籤內：
```html
<head>
<style>
body {
background-color: lightyellow;
}
</style>
</head>
```
### 2. 行內樣式
直接寫在 HTML 元素的 `style` 屬性中：
```html
<p style="color: red;">紅色文字</p>
```
不過一般建議使用**外部 CSS 檔案**，因為它能讓 HTML 結構更清楚，也方便多個頁面共用與統一修改。
相關學習地圖、教學課程
F2E 網站前端工程