昨天我們已經完成了 HTML 骨架，把履歷網站的基本結構搭建出來了。雖然功能完整，但現在的頁面就像「黑白素顏版」的履歷，看起來還不太能直接拿去面試。

今天的目標，就是用 CSS / SCSS 幫這個雛型加上樣式，讓它更有層次感、可讀性更高，也更像一個專業的作品。

今日目標

了解 CSS 的基礎概念

認識 CSS 與 SCSS 的差異

學會調整顏色、字體、排版與間距

幫昨天的履歷網站加上第一版樣式

基礎概念：CSS 與 SCSS
什麼是 CSS？

CSS（Cascading Style Sheets）用來描述 HTML 結構該如何呈現，例如字體大小、顏色、版面配置。

HTML = 內容

CSS = 外觀

JavaScript = 行為

CSS 的基本語法
選擇器 {
屬性: 值;
}

範例：

h1 {
color: blue;
font-size: 32px;
}

代表所有 標籤文字會變藍色，字體大小 32px。

什麼是 SCSS？

SCSS 是 Sass 的一種語法，它在 CSS 基礎上加強：

可以用 變數 定義顏色與字體大小

可以用 巢狀 結構，程式碼更直觀

可以用 mixin 來重複利用樣式

範例：

$main-color: #007bff;

h1 {
color: $main-color;
text-align: center;
}

實作：履歷網站加上 CSS/SCSS

昨天的 HTML 骨架長這樣（節錄）：

我們可以加一份 style.scss，內容如下：

/* 設定基礎色彩與字體 */
$primary-color: #2c3e50;
$accent-color: #007bff;
$bg-color: #f9f9f9;
$font-stack: "Noto Sans TC", Arial, sans-serif;

body {
font-family: $font-stack;
background-color: $bg-color;
margin: 0;
padding: 0;
line-height: 1.6;
color: $primary-color;
}

/* 標頭區 */
header {
background: $accent-color;
color: white;
padding: 20px;
text-align: center;

h1 {
margin: 0;
}

nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;

li {
  margin: 0 10px;

  a {
    color: white;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

}
}

/* 主內容區塊 */
main {
padding: 20px;

section {
margin-bottom: 40px;

h2 {
  border-bottom: 2px solid $accent-color;
  padding-bottom: 5px;
}

}
}

/* 側邊欄 */
aside {
background: white;
padding: 20px;
margin: 20px;
border: 1px solid #ddd;
}

/* 頁尾 */
footer {
background: $primary-color;
color: white;
text-align: center;
padding: 10px;
}

成果

加上這份樣式後，網站會有以下改變：

整體字體與顏色統一：用 SCSS 變數管理。

Header 區塊藍底白字，導覽列橫向排列。

每個 Section 有標題下劃線，讓結構更清楚。

Aside（聯絡資訊）有邊框與背景，看起來像卡片。

Footer 變深色底白字，區隔頁面結尾。

小心踩雷（常見誤用範例）

1. 用 控版面

很多人會用 來「撐出間距」。

錯誤：

正確： 用 CSS 控制間距。

2. 重複寫顏色值

初學者常在每個地方硬寫顏色，維護超痛苦。

錯誤：

h1 { color: #007bff; }
h2 { color: #007bff; }
a { color: #007bff; }

正確：

$accent-color: #007bff;
h1, h2, a { color: $accent-color; }

3. 忘記 reset 預設樣式

不同瀏覽器有不同預設 margin/padding，如果沒處理，排版常會跑掉。

正確：

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

下一步（Day 3 預告）

明天我們會開始用 TypeScript，學習如何讓網站更有互動性：

讓按鈕能點擊

用程式控制文字內容

幫履歷網站加上「一點點智慧」