前言

昨天我們已經使用 HTML 建立了醫療資訊小系統的第一個頁面。

不過如果直接打開昨天的網頁，會發現畫面其實非常簡單。

有標題、有文字、有表格，但是看起來比較像一個最基本的 HTML 練習。

所以今天要讓它進化一點。

今天的主角就是：

CSS。

⸻

CSS 是什麼？

CSS 的全名是：

Cascading Style Sheets

中文通常稱為「階層式樣式表」。

如果說 HTML 是負責建立網頁的骨架，那 CSS 就是負責幫網頁設計外觀。

例如：

• 字體大小
• 文字顏色
• 背景
• 表格樣式
• 間距
• 寬度
• 邊框
• 按鈕外觀

都可以使用 CSS 來控制。

簡單來說：

HTML 決定網頁有什麼，CSS 決定網頁長什麼樣子。

⸻

先建立 CSS 檔案

在原本的專案中新增：

style.css

然後在 index.html 裡加入：

這樣 HTML 就可以使用我們寫在 style.css 裡面的樣式。

⸻

先修改整個頁面

我們可以先讓整個網頁有基本的間距：

body {
margin: 0;
padding: 30px;
font-family: Arial, sans-serif;
background-color: #f5f7fa;
}

這裡做了幾件事情。

margin 和 padding 可以控制頁面的間距。

font-family 可以設定文字使用的字體。

而：

background-color

則可以設定背景顏色。

原本白白的網頁，現在就會有比較明顯的區隔。

⸻

設計系統標題

接著幫我們的主要標題加上一點樣式：

h1 {
margin-bottom: 10px;
font-size: 28px;
}

這樣標題和下面的內容就不會全部擠在一起。

⸻

美化病患資料表格

昨天建立了病患資料表格：

今天可以幫它加上 CSS。

table {
width: 100%;
border-collapse: collapse;
background-color: white;
}
th,
td {
padding: 12px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #eeeeee;
}

這樣表格就會變得比較整齊。

其中：

border-collapse: collapse;

可以讓表格的邊框合併，看起來比較乾淨。

而：

padding: 12px;

則是讓儲存格裡面的文字不要緊貼著邊框。

⸻

為什麼醫療系統需要注意介面？

這次雖然只是練習，但在設計醫療資訊系統時，我覺得介面其實也很重要。

因為使用者可能需要在短時間內找到資料。

如果所有資訊都擠在一起，即使功能是正確的，使用起來也會很不方便。

所以之後除了把功能做出來，我也希望慢慢讓這個系統的介面變得更加清楚。

⸻

目前的系統

做到今天，我們的架構變成：

index.html
↓
HTML 建立結構
↓
style.css
↓
CSS 控制外觀

目前還沒有真正的資料庫，也還沒有 JavaScript。

所以現在的病患資料依然只是測試資料。

但是這沒關係。

因為接下來我們會一步一步把它變成真正可以互動的系統。

⸻

今天的小結

今天第一次正式使用 CSS，讓昨天建立的 HTML 頁面從「可以顯示」變成「稍微好看、比較容易使用」。

目前學到的東西還很基礎，但這些都是之後製作完整網頁時會一直使用到的內容。

接下來，我們會開始加入 JavaScript，讓這個原本只能看的網頁開始可以「動起來」。

Day 5，完成！