嗨~，今天打算來把主頁、表單跟結果表格來做初步的CSS美化。
下面會先寫出通常基礎會用到的CSS程式碼，後面再實做看看！

首先要創建一個style.css的檔案。

常用的CSS屬性

我們分為：

1. 文字相關
2. 背景與邊框
3. 大小與間距
4. 排版

四個部分，去美化我們的頁面。

文字相關

• color：字的顏色
• font-size：字的大小
• font-weight：粗體 ( normal / bold )
• text-align：對齊方式 ( left / center / right )

背景與邊框

• background-color：背景顏色
• border：邊框 ( 粗細 / 線條 / 顏色)
• border-radius：圓角 ( 像是按鈕 )

大小與間距

• width / height：元素大小
• margin：外距 ( 元素與外邊東西的距離 )
• padding：內距 ( 內容與邊框的距離 )

排版

• display：控制元素呈現方式 ( block / inline / flex )
• flex：彈性排版，像是水平或垂直
• text-align：center：文字或inline元素置中
• margin：0 auto：區塊元素水平置中

其他

線的款式

• solid：實線
• dashed ：虛線
• dotted ：點線
• double ：雙線

cursor ( 讓使用者知道可點擊)

• default → 一般箭頭
• pointer → 手指（可點擊）
• text → 文字選取游標（像在文字框裡會出現的直線）
• move → 四向箭頭（表示元素可以拖曳）
• not-allowed → 圈圈叉叉（禁止）

疑問

1. 多個頁面CSS如何判斷？

   之前寫CSS的時候其實都不太懂：如果我有很多個頁面，那在style.css裡，我指定了h1 該怎麼知道是在指index的頁面還是record頁面呢？

   今天仔細了解後才知道這是一個「選擇器」的概念，因為頁面們都連到同一個style.css ，只要在裡面指定到的相同元素，CSS規則都會生效。

   我以前沒搞懂這些東西到底怎麼寫的啦><，AI真的太厲害了…。

2. 如果想指定特定元素的h1 ( 範例 )，怎麼辦？

   通常有兩個方式：

   • id

     <h1 id="index-title">首頁</h1>
     <h1 id="record-title">填寫紀錄</h1>
     

     #index-title {
       color: darkblue;
     }
     
     #record-title {
       color: green;
     }
     

   • class

   <h1 class="page-title index">首頁</h1>
   <h1 class="page-title record">填寫紀錄</h1>
   

   .page-title {
     font-weight: bold;
   }
   
   .page-title.index {
     color: darkblue;
   }
   
   .page-title.record {
     color: green;
   }
   

   實作預覽畫面

   由於CSS程式碼比較多，而且只是基礎練習，所以今天就放網頁呈現的改變。

   index頁面

   改了導覽欄的配色，與下面的排版
   

   report頁面

   這邊只有更新到全域設定的部分，像是字體。
   

   record頁面

   這部分變化比較明顯，調整了表單的排版、格式與按鈕顏色，也加上了鼠標放上去會變色的樣式。