第二部分：視覺前端設計師 CSS

Ray 貓

12 Jun 2024 • 15 min read

📅 發布時間: 2024-06-12 🏷️ 標籤: CSS, HTML, 前端設計

歡迎再次回到我們的網頁開發課程，今天我們將進一步學習網頁設計中的另一個重要部分 - CSS。CSS，即層疊樣式表 (Cascading Style Sheets)，是用來控制網頁的外觀和排版的語言。透過 CSS，我們可以讓網頁變得更加美觀和易於使用。

今天的目標

什麼是 CSS？
如何在 HTML 中使用 CSS？
CSS 基本語法
常見的 CSS 屬性與範例

基礎介紹

💻 什麼是 CSS？

🎯 學習目標:了解 CSS 控制 HTML 呈現方式的作用透過內聯 style 修改文字顏色使用 RGB 值精確指定顏色

步驟 1: 什麼是 CSS？

<h1>這是一個大標題</h1>

圖: CSS 用來設定文字顏色、字體、間距等，讓 HTML 內容更有樣式

步驟 2: 我們可以在元素中加入 style 的屬性

// 前面的程式碼保持不變
<h1 style="color: red;">這是一個紅色大標題</h1>  // [新增] style 屬性直接修改顏色為紅色，因為內聯樣式簡單快速，能立即看到效果而不需外部檔案

圖: 直接在 HTML 標籤內指定樣式

步驟 3: 當然，你可以用更複雜的三原色比例色值調整顏色

// 前面的程式碼保持不變
<h1 style="color: rgb(255, 128, 0);">這是一個橘色大標題</h1>  // [修改] color 值改為 rgb(255, 128, 0)，因為 RGB 允許精確混合紅(255)、綠(128)、藍(0)來產生橘色，提供更多顏色控制

圖: 使用 RGB 三原色比例自訂顏色

如何在 HTML 中使用 CSS？

有三種方式可以在 HTML 中使用 CSS：

💻 如何在 HTML 中使用 CSS 與基本語法

🎯 學習目標:掌握內聯、內部、外部三種 CSS 使用方式理解 CSS 選擇器與宣告塊語法使用 class 類別選擇器重複套用樣式

步驟 1: 內聯樣式 (Inline Styles)

<p style="color: blue;">這是一段藍色文字。</p>

圖: 直接在標籤中使用 style 屬性

步驟 2: 內部樣式 (Internal Styles)

<head>
    <style>
        p { color: blue; }  // [新增] 在 <head> 使用 <style> 定義全域 p 元素顏色為藍色，因為內部樣式適用單一 HTML 檔案，方便管理
    </style>
</head>

<body>
    <p>這是一段藍色文字。</p>
</body>

圖: 在 HTML head 內定義樣式

步驟 3: 外部樣式 (External Styles)

// styles.css 檔案
p {
    color: blue;  // [新增] 外部 CSS 檔案獨立定義，讓樣式可重複使用於多個 HTML
}

// index.html 主檔案
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">  // [新增] 使用 <link> 引用外部 CSS，因為這是最佳實踐，便於維護大型專案
</head>

<body>
    <p>這是一段藍色文字。</p>
</body>

圖: 分離 CSS 檔案並引用

步驟 4: CSS 的語法很簡單

p {
    color: blue;
}

圖: 選擇器 (p) + 宣告塊 (color: blue)，目標所有 p 元素變藍色

步驟 5: 多屬性宣告

// 前面的程式碼保持不變
p {
    color: blue;
    font-size: 24px;  // [新增] 同時設定字體大小，因為多屬性可累加控制元素外觀
}

圖: 藍色文字加大至 24px

步驟 6: 使用 class 類別

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .blue-text {
        color: blue;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <p>這是一段一般的文字</p>
    <p class="blue-text">這是一段藍色的文字</p>  <!-- [新增] class="blue-text" 選擇特定元素，因為 class 可重複使用，提高樣式效率 -->
  </body>
</html>

圖: 只套用 class 的 p 變藍色加大

步驟 7: CSS class 選擇器語法

.blue-text {
    color: blue;
    font-size: 24px;
}

類別選擇器以 . 開頭，自訂名稱 (英文與 - )

步驟 8: HTML 中使用 class

<p class="blue-text">這是一段藍色的文字</p>  <!-- 注意無 `.`，直接指定 class 名稱 -->

圖: HTML 標籤內的 class 屬性

常見的 CSS 屬性與範例

💻 常見 CSS 屬性應用

🎯 學習目標:應用 color, font-size, text-align 等基本屬性掌握背景、邊框、padding、margin 佈局控制設定 height/width 調整元素尺寸

步驟 1: color

p {
    color: red;
}

圖: 設定文字顏色為紅色

步驟 2: font-size

// 前面的程式碼保持不變
p {
    color: red;
    font-size: 32px;  // [新增] 加大字體，因為這能改善可讀性與視覺強調
}

圖: 紅色文字加大至 32px

步驟 3: text-align

// 前面的程式碼保持不變
p {
    color: red;
    font-size: 32px;
    text-align: center;  // [新增] 置中對齊，因為這是常見的排版需求
}

圖: 文字置中

步驟 4: text-align: right

// 前面的程式碼保持不變
p {
    color: red;
    font-size: 32px;
    text-align: right;  // [修改] 改為右對齊，測試不同對齊效果
}

圖: 文字置右

步驟 5: background-color

// 前面的程式碼保持不變
p {
    color: red;
    font-size: 32px;
    text-align: right;
    background-color: lightgray;  // [新增] 背景色，因為這能區分元素區塊
}

圖: 淺灰背景

步驟 6: background-image

// 前面的程式碼保持不變
p {
    color: red;
    font-size: 32px;
    text-align: right;
    background-image: url('example.jpg');  // [新增] 背景圖片，提供視覺豐富度
}

圖: 圖片背景

步驟 7: border

// 前面的程式碼保持不變
p {
    color: red;
    font-size: 32px;
    text-align: right;
    background-image: url('example.jpg');
    border: 10px solid black;  // [新增] 邊框，因為這定義元素邊界
}

圖: 粗黑邊框

步驟 8: border-radius

// 前面的程式碼保持不變
p {
    color: red;
    font-size: 32px;
    text-align: right;
    background-image: url('example.jpg');
    border: 1px solid black;  // [修改] 細邊框
    border-radius: 50%;  // [新增] 圓角，因為這創造圓形效果，提升美觀
}

圖: 圓形邊框

步驟 9: padding

// 前面的程式碼保持不變
p {
    color: red;
    font-size: 32px;
    text-align: right;
    background-image: url('example.jpg');
    border: 1px solid black;
    border-radius: 50%;
    padding: 128px;  // [新增] 內距，避免文字貼邊，因為 padding 控制內容與邊框距離
}

圖: 增加內部空間

步驟 10: 完整 HTML 範例（兩個元素）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        color: red;
        font-size: 32px;
        text-align: right;
        background-image: url("example.jpg");
        border: 1px solid black;
        border-radius: 50%;
        padding: 128px;
      }
    </style>
  </head>
  <body>
    <p>這是一個大貓貓</p>
    <p>這是一個大貓貓</p>
  </body>
</html>

圖: 兩個相同樣式的 p 元素

步驟 11: margin

// 前面的程式碼保持不變，在 style 的 p 中
p {
    color: red;
    font-size: 32px;
    text-align: right;
    background-image: url("example.jpg");
    border: 1px solid black;
    border-radius: 50%;
    padding: 128px;
    margin: 128px;  // [新增] 外距，調整元素間距離，因為 margin 控制元素與其他元素間隔
}

圖: 元素間增加間距

步驟 12: height

// 前面的程式碼保持不變，在 style 的 p 中
p {
  height: 200px;  // [新增] 固定高度，因為這讓元素有明確尺寸，便於佈局控制
  background-color: lightgray; 
}

圖: p 元素高度固定為 200px

步驟 13: width

// 前面的程式碼保持不變，在 style 的 p 中
p {
  height: 200px;
  width: 200px;  // [新增] 固定寬度，因為結合 height 可產生方形元素
}

圖: p 元素變成 200x200 正方形

常用的排版方法

他可以讓我們簡單的規定各個元素的位置

💻 Flexbox 彈性佈局

🎯 學習目標:使用 display: block/inline/flex 控制元素排列透過 justify-content 與 align-items 調整 x/y 軸位置flex-direction 切換橫/直向排列及反轉

步驟 1: 預設 block 排版

<p>這是一個大貓貓</p>
<p style="display: block">大家默認都是 block</p>
<div>這是一個大貓貓</div>
<p>這是一個大貓貓</p>

圖: 每個元素獨占一行

步驟 2: display: inline

// 前面的程式碼保持不變
<div>
    <div style="display: inline">這是一個大貓貓</div>  // [新增] display: inline，讓子 div 同列排列，因為 inline 不換行
    <div style="display: inline">這是一個大貓貓</div>
    <div style="display: inline">這是一個大貓貓</div>
</div>

圖: div 元素同列顯示

步驟 3: 更複雜排列需求

// 前面的程式碼保持不變，使用 inline 的範例

圖: inline 無法輕易置右或平均分散

步驟 4: display: flex（預設橫向）

// 前面的程式碼保持不變
<div style="display: flex;">  // [新增] display: flex，讓子元素彈性排列在同一行，因為 flex 專為現代佈局設計
    <div>這是一個大貓貓</div>
    <div>這是一個大貓貓</div>
    <div>這是一個大貓貓</div>
</div>

圖: 子元素自動橫向排列

步驟 5: flex 容器仍占一行

// 前面的程式碼保持不變
<div>這是一個大貓貓</div>  <!-- flex 容器本身仍是 block，占一行 -->

圖: flex 只影響子元素

步驟 6: justify-content: end

// 前面的程式碼保持不變
<div style="display: flex; justify-content: end;">  // [新增] justify-content: end，將子元素推到右端，因為這控制主軸 (x 軸) 對齊
    <div>這是一個大貓貓</div>
    <div>這是一個大貓貓</div>
    <div>這是一個大貓貓</div>
</div>

圖: 子元素置右

步驟 7: justify-content: start

// 前面的程式碼保持不變
<div style="display: flex; justify-content: start;">  // [修改] start 推到左端 (預設行為)

圖: 子元素置左

步驟 8: justify-content: space-between

// 前面的程式碼保持不變
<div style="display: flex; justify-content: space-between;">  // [新增] space-between，平均分散無邊距空間

圖: 子元素平均分布

步驟 9: justify-content: space-evenly

// 前面的程式碼保持不變
<div style="display: flex; justify-content: space-evenly;">  // [修改] space-evenly，包括邊緣空間

圖: 包含邊緣的均勻間距

步驟 10: 加入顏色與高度觀察

<div
    style="
    display: flex;
    justify-content: space-evenly;
    background: blue;
    height: 200px;  // [新增] 高度固定，因為這提供觀察空間
    "
>
    <div style="background: red; height: 30px">這是一個大貓貓</div>
    <div style="background: red; height: 90px">這是一個大貓貓</div>
    <div style="background: red; height: 60px">這是一個大貓貓</div>
</div>

圖: 不同高度子元素

步驟 11: align-items: end

// 前面的程式碼保持不變，在 style 中
align-items: end;  // [新增] align-items: end，所有子元素底部對齊，因為這控制交叉軸 (y 軸)

圖: 子元素底部一致

步驟 12: align-items: center

// 前面的程式碼保持不變，在 style 中
align-items: center;  // [修改] 垂直置中

圖: 子元素垂直對齊中間

步驟 13: align-items: start

// 前面的程式碼保持不變，在 style 中
align-items: start;  // [修改] 頂部對齊

圖: 子元素頂部一致

步驟 14: flex-direction: column

// 前面的程式碼保持不變，在 style 中
flex-direction: column;  // [新增] 切換為垂直排列，因為這讓 flex 適用欄位佈局

<div style="background: red; height: 30px">這是一個大貓貓</div>  <!-- 子元素顏色區分 -->
<div style="background: green; height: 90px">這是一個大貓貓</div>
<div style="background: orange; height: 60px">這是一個大貓貓</div>

圖: y 軸排列

步驟 15: flex-direction: column-reverse

// 前面的程式碼保持不變，在 style 中
flex-direction: column-reverse;  // [修改] 垂直反轉，紅色移到底

圖: 順序反轉

步驟 16: flex-direction: row

// 前面的程式碼保持不變，在 style 中
flex-direction: row;  // [修改] 橫向 (預設)

圖: x 軸排列

步驟 17: flex-direction: row-reverse

// 前面的程式碼保持不變，在 style 中
flex-direction: row-reverse;  // [修改] 橫向反轉