Day 10:為網頁上妝 (CSS)：設計一個清晰的開發者工具介面

2025 iThome 鐵人賽

DAY 10

Modern Web

Web Bluetooth API 實戰：30 天打造通用 BLE 偵錯工具系列第 10 篇

17th鐵人賽

jklu7limj

2025-09-24 20:10:24

60 瀏覽

分享至

昨天，我們用 HTML 親手搭建了 BLE 工具的「骨架」，為我們所有的功能提供了一個堅實的附著點。現在，當你在瀏覽器中打開 index.html，你看到的是一個結構完整、但樣貌樸素的頁面——就像一棟蓋好了框架，卻還沒粉刷、沒裝潢的毛胚屋。

一個好的工具，不僅要功能強大，介面也要清晰、直觀、不干擾。一個雜亂無章的介面會讓開發者感到煩躁，而一個設計精良的介面則能提升工作效率。

今天，我們的任務就是扮演「室內設計師」的角色，學習網頁的第二種語言——CSS (Cascading Style Sheets)。我們將為昨天的 HTML 骨架「上妝」，透過調整顏色、間距、字體和排版，將這個樸素的頁面，打造成一個看起來專業、簡潔，符合開發者審美習慣的工具介面。

1. CSS 是如何運作的？

CSS 的運作邏輯非常直觀，只有兩個核心部分：

選擇器 (Selector)：告訴瀏覽器，「你要對誰動手？」。你可以選擇一個標籤 (如 h1)、一個 ID (如 #scanButton)，或一個類別。
宣告區塊 (Declaration Block)：用大括號 {...} 包起來，告訴瀏覽器，「要怎麼動手？」。裡面是一條條的「屬性: 值;」規則。

語法結構：

/* 選擇 h1 標籤 */
h1 {
  /* 宣告 1: 將顏色屬性設定為深藍色 */
  color: #2c3e50;
  /* 宣告 2: 將字體大小屬性設定為 32 像素 */
  font-size: 32px;
}

/* 選擇 ID 為 scanButton 的元素 */
#scanButton {
  background-color: #3498db;
  color: white;
}

如何將 CSS 加入 HTML？

有三種方法，但我們只推薦最後一種最佳實踐：

行內樣式 (Inline Style)：直接在 HTML 標籤裡寫 style 屬性。(不推薦，難以管理) <h1 style="color: blue;">標題</h1>
內部樣式表 (Internal Style Sheet)：在 HTML 的 <head> 裡用 <style> 標籤包起來。(適合小型單頁專案)
外部樣式表 (External Style Sheet)：建立一個獨立的 .css 檔案，然後在 HTML 的 <head> 裡用 <link> 標籤引入。（最推薦！結構與樣式分離！）

我們將採用第三種方法，這是所有專業網站開發的標準做法。

2. 建立並連結我們的 `style.css`

在你的專案資料夾中，和 index.html 放在一起，建立一個新檔案，命名為 style.css。
打開你的 index.html 檔案，在 <head> 區塊中，加入下面這行 <link> 標籤：

<head>
    <meta charset="UTF-8">
    <title>Web BLE 通用偵錯工具</title>
    <link rel="stylesheet" href="style.css">
</head>

link：告訴 HTML 我們要連結一個外部資源。
rel="stylesheet"：rel 是 relationship (關係) 的縮寫。這是在說明，連結進來的這個檔案，是一個「樣式表 (stylesheet)」。
href="style.css"：href 是 hyperlink reference (超連結參照) 的縮寫。這是在指定檔案的路徑。

好了！現在 index.html 和 style.css 已經成功「連線」，我們可以在 style.css 裡寫的所有樣式，都會自動套用到 index.html 上。

3. 動手設計！撰寫 `style.css`

現在，打開你空白的 style.css 檔案，讓我們一步步把樣式加進去。

A. 全局與版面樣式 (美化 `<body>`)

我們先為整個頁面設定一個基調：乾淨的背景、易讀的字體，並讓內容集中，不要在寬螢幕上無限延伸。

/* style.css */

/* 選擇整個 body 標籤 */
body {
  /* 設定字體，瀏覽器會從左到右依次尋找，找到電腦裡有的第一個就用 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* 設定基本文字顏色為深灰色，比純黑更柔和 */
  color: #333;

  /* 設定背景顏色為非常淺的灰色，增加質感 */
  background-color: #f4f7f6;
  
  /* 設定內容最大寬度為 800px */
  max-width: 800px;

  /* 透過設定左右 margin 為 auto，讓內容區塊水平置中 */
  margin: 0 auto;

  /* 在內容周圍留出一些內邊距，避免文字直接貼到瀏覽器邊緣 */
  padding: 20px;
}

margin: 元素與元素之間的「外邊距」，像社交距離。
padding: 元素邊框與內容之間的「內邊距」，像衣服的厚度。

B. 美化控制項 (按鈕與狀態)

接著，我們來美化最重要的「掃描按鈕」和狀態文字。

/* style.css */ 

/* ... (接著上面的程式碼寫) ... */

/* 選擇 ID 為 scanButton 的元素 */
#scanButton {
  background-color: #007BFF; /* 藍色背景 */
  color: white;             /* 白色文字 */
  border: none;               /* 移除預設邊框 */
  border-radius: 5px;       /* 5px 的圓角 */
  padding: 10px 15px;       /* 上下 10px，左右 15px 的內邊距 */
  font-size: 16px;            /* 字體大小 */
  cursor: pointer;          /* 滑鼠移上去時，顯示為「可點擊」的手指圖示 */
  transition: background-color 0.2s; /* 為背景顏色變化增加 0.2 秒的過渡動畫 */
}

/* :hover 是一種「偽類」，用來設定滑鼠懸停在元素上時的樣式 */
#scanButton:hover {
  background-color: #0056b3; /* 滑鼠移上去時，背景變深藍色 */
}

/* 選擇 ID 為 statusText 的元素 */
#statusText {
  font-weight: bold; /* 設定字體為粗體 */
  color: #555;
}

C. 規劃 GATT 容器樣式

最後，我們為未來要顯示 GATT 資訊的容器 gattContainer 預先設定好樣式。

/* style.css */

/* ... (接著上面的程式碼寫) ... */

/* 選擇 ID 為 gattContainer 的元素 */
#gattContainer {
  background-color: #ffffff; /* 白色背景 */
  border: 1px solid #ddd;   /* 1px 寬的淺灰色實線邊框 */
  border-radius: 5px;         /* 5px 圓角 */
  padding: 20px;              /* 20px 內邊距 */
  margin-top: 20px;           /* 和上面的分隔線保持 20px 的上外邊距 */
  min-height: 200px;          /* 設定最小高度，即使沒內容也不會塌陷 */
}

現在，儲存你的 style.css 檔案，然後重新整理瀏覽器中的 index.html。見證奇蹟的時刻！我們原本樸素的頁面，現在應該已經變成一個看起來非常清爽、專業的工具介面了。

今天我們成功為我們的應用程式「穿上了衣服」。至此，我們已經完成了第一階段：工具箱的準備。我們掌握了 JS 的核心、設計了資料藍圖、搭建了 HTML 骨架，並用 CSS 美化了外觀。
從明天開始，我們將正式進入專案的第二階段：與真實世界互動。理論將化為實踐，我們將寫下第一行真正與藍牙溝通的程式碼，按下「掃描」按鈕，讓它真正地動起來！
那麼今天的內容就到這邊，感謝你能看到這裡，在這邊祝你早安、午安、晚安，我們明天見。