管理畫面已經置中，今天要讓 ON 與 OFF 一眼就能分辨。

前一天用 CSS 完成基本版面，標題、狀態與按鈕已經集中在畫面中央，但狀態文字還不夠醒目。

今天只處理狀態區，放大文字並設定 .on 與 .off 顏色，讓維護人員快速看出目前號誌輸出狀態。

id 與 class 各有不同用途

Day 19 的狀態元素同时具備 id="status" 與 class="off"，id 固定指向這一個狀態區，適合設定不隨狀態改變的字體大小與間距。

class 則會隨 ON／OFF 切換，因此 .on 與 .off 只處理會改變的顏色，將固定外觀與變動外觀分開後，JavaScript 日後只需替換 class。

同一個元素可以同時受到 ID 與 class 規則影響，#status 提供尺寸、粗體與間距，.on 或 .off 再補上顏色，兩組規則不互相取代，而是共同形成最終外觀。

放大狀態顯示區

在 assets/style.css 中加入以下樣式。

/* 本日新增 */
#status {
  font-size: 3.5rem;
  font-weight: bold;
  margin: 1rem;
}

井字號 # 代表 ID 選擇器，因此 #status 只會套用到 id="status" 的元素，不會影響標題或按鈕。

font-size: 3.5rem 讓狀態文字相對於頁面基準字體放大，font-weight: bold 使用粗體，margin 則在狀態區四周保留間距，避免與標題、按鈕擠在一起。

建立 ON 與 OFF 顏色

接著加入兩個 class 選擇器。

/* 本日新增 */
.on {
  color: #e8a020;
}

.off {
  color: #999;
}

句點 . 代表 class 選擇器，.on 使用橘黃色呈現啟用狀態，.off 使用灰色呈現關閉狀態。

目前 HTML 的狀態區仍為 class="off"，重新整理後應顯示大型灰色 OFF，因為還沒有 JavaScript 自動切換 class。

使用灰色與橘黃色的目的，是讓維護人員在不閱讀細節時也能先辨認關閉與啟用，但顏色不能取代文字，頁面仍保留 ON／OFF，避免只靠顏色傳達狀態。

rem 讓比例較容易維持

rem 是相對於根元素字體大小的單位，與固定像素相比，當瀏覽器或使用者調整基準字體時，狀態文字能保持相對比例。

本篇不需要計算實際像素，只要理解 3.5rem 明顯大於一般文字，適合用來建立管理畫面的主要視覺焦點。

顏色與尺寸都屬於 CSS，不應把 style="color: ..." 直接寫進 HTML，否則後續切換 ON／OFF 時會同時存在多個外觀來源。

手動檢查兩組樣式

先以原本的 class="off" 執行頁面，確認 OFF 為灰色，再暫時將 HTML 改成 class="on" 與文字 ON，重新整理後應變成橘黃色。

這項手動測試只用來確認 CSS 規則可用，測試完成後可恢復 class="off">OFF，因為真正狀態仍要等待 MCU 回報後由 JavaScript 更新。

若文字有放大但顏色不變，先檢查 class 名稱是否與 .on、.off 完全一致，ID 樣式與 class 樣式會同時套用，不需要二選一。

測試完成後恢復 OFF 初始畫面，是因為瀏覽器重新開啟時尚未收到 MCU 回報，今天只能驗證兩組 CSS 可用，不能把手動修改後的 ON 當成硬體真正狀態。

檢查不同視窗尺寸時，狀態文字都應維持為畫面焦點，不會因縮小視窗而被按鈕遮住，若間距過小，應調整 #status 的 margin，而不是在 HTML 中加入大量空白字元，外觀問題仍應留在 CSS 處理。

同時檢查灰色 OFF 與橘黃色 ON 在淺灰背景上都能清楚辨識，避免文字雖有變色，實際對比卻不足，也要確認 ON 與 OFF 的字樣沒有被其他樣式覆蓋。

兩種狀態在不同視窗大小下都應保持清楚可讀，才符合管理畫面的基本需求。

本篇完成內容

• 使用 #status 設定狀態區固定外觀。
• 使用 .on 與 .off 定義兩組顏色。
• 以 rem 建立醒目的文字大小。
• 手動確認 ON／OFF 樣式可以切換。

現在狀態區已能用顏色分辨 ON 與 OFF，但遠端按鈕仍像預設元件，下一篇要補上按鈕尺寸、圓角與按下回饋。

下一篇｜用幾何優化按鈕外觀