首先可以使用編輯器 Visual Studio Code (VS Code) 來練習
前置準備
- 打開VS Code，建立一個資料夾
- 新增兩個檔案index.html 和 style.css 於project 資料夾內
- 範例為html基本模板，並關聯css檔
- 接著就可以開始寫你要的css語法於style.css內
index.html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的網站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1>我的網站</h1>
</div>
</header>
<main class="container">
<h2>文章標題</h2>
<p>這是一段文字，展示基本的 CSS 架構。</p>
<a href="#" class="btn">按鈕</a>
</main>
<footer class="footer">
<p>© 2025 我的網站</p>
</footer>
</body>
</html>
1. CSS 在哪裡寫？
<!-- HTML 檔案 head 裡 -->
<link rel="stylesheet" href="style.css">
2. 常見 CSS 架構
(1) Reset / Normalize
不同瀏覽器有不同預設樣式，所以建議先做「初始化」：
/* 清除 margin / padding 差異 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
(2) 全域樣式 (Global)
設定字體、背景色、字顏色：body {
font-family: Arial, "Noto Sans TC", sans-serif;
line-height: 1.5;
background-color: #f5f5f5;
color: #333;
}
(3) 排版容器 (Layout)
.container {
max-width: 960px;
margin: 0 auto; /* 置中 */
padding: 0 16px; /* 左右留白 */
}
(4) 標題、段落 (Typography)
h1, h2, h3 {
margin-bottom: 1rem;
font-weight: bold;
}
p {
margin-bottom: 1rem;
}
(5) 按鈕 (Components)
.btn {
display: inline-block;
padding: 8px 16px;
border-radius: 6px;
background: #198C75;
color: #fff;
text-decoration: none;
}
.btn:hover {
background: #136f5e; /* 深一點的綠色 */
}
(6) 簡單版面 (Layout)
.header {
background: #fff;
border-bottom: 1px solid #ddd;
padding: 12px 0;
}
.footer {
background: #222;
color: #fff;
text-align: center;
padding: 16px;
}
3. 建議學習順序
- Reset → 把瀏覽器預設樣式清乾淨
- 全域設定 → 設字體、背景
- 排版容器 →
.container、header/footer - 文字樣式 → h1, p 等
- 按鈕 / 小元件
- 顏色 & 間距 調整
4. 範例檔案結構
project/
├─ index.html
└─ style.css
