在昨天 HTML 的語義化標籤後，我們已經為網頁打好了「骨架」。但是光有骨架，看起來就像是一棟沒有裝潢的空屋，雖然能住人，但沒有任何美感或舒適度。CSS 是專為定義網頁版面設計（layout）而發明，透過 CSS，我們能指定文件中各項 HTML 元件的視覺樣式。CSS 全名是 Cascading Style Sheets，階層樣式表。階層式（cascading）指的是，我們可在同一個元件上套用不同樣式，而樣式與樣式間則存在相對的階層關係， CSS就像是幫房子加上油漆、裝潢和家具，讓網站從單純的結構，變成真正能吸引人使用、願意停留的作品，是創建網站不可或缺的工具。

CSS 的角色：讓內容變好看

HTML 的任務是描述「這是什麼」：標題、段落、表格、表單；而 CSS 則負責描述「它看起來如何」：顏色、大小、字體、間距、排版。將外觀美化成獨特的樣子，吸引更多使用者使用或停留，這就是 CSS 存在的價值。

CSS 的基本語法

CSS 的語法很直觀，通常由「選擇器」和「屬性」組成：
選擇器 {
屬性: 值;
}
比如：
h1 {
color: blue;
font-size: 24px;
}
這代表所有的 標題都會變成藍色、字體大小 24px。
常見的選擇器有：

• 元素選擇器（直接針對 、 等元素）
• class 選擇器（.classname，常用來重複套用樣式）
• id 選擇器（#idname，針對單一元素）
  屬性則有很多，例如：
• 顏色(Color): RGB、HEX、HSL等。這個屬性可以用於設定文字、背景或其他元素的顏色。
• 字體(Font): font-size用於設定字體大小，font-family用於選擇字體種類。
• 背景(Background): background-color用於設定背景色，background-image用於設定背景圖片。
• border：邊框
• text-align：文字對齊方式
  雖然一開始會覺得屬性很多，但只要常用幾個就能讓網頁煥然一新。

CSS 的三種寫法

1.行內樣式（直接在元素裡加 style）：
內嵌於 style 屬性
<p style=”color: red; font-size: 10pt;”>一段文字</p>
這種宣告方式只會影響到這一個標籤，而不是所有的 。這是一個很簡便的作法，但 CSS 宣告混合在 HTML 結構中，無法進行管理。
2.內部樣式表（在style區塊寫 CSS）：
適合小型專案或練習。
3.外部樣式表：
link是一種「後設元素」(meta element)只能放在標頭裡，他可以載入外部檔案。所以瀏覽器讀取到這一行時，就會自動載入 CSS 文件的全部內容。
這是最專業的方式，方便維護與多人協作。

註解 (Comment)

要小心 CSS 的註解方式跟 HTML 不一樣，CSS 的註解是用 /* 與 */ 來包圍：

學習心得
剛接觸 CSS 時，我常常不知道要怎麼讓欄位對齊，文字和輸入框看起來亂七八糟，按鈕也很小或背景單調。第一次看到加上 CSS 的表單瞬間變得整齊、美觀，我真的超有成就感！這讓我發現，CSS 不只是寫程式，它可以讓網頁變成「可以欣賞的作品」
CSS 的好處就是：學一點點，就能看到很大的差別。當我第一次讓表單看起來漂亮時，那種成就感讓我更想繼續學下去。
重點總結

1. HTML 是骨架，CSS 是裝潢，兩者搭配才能成就一個完整的網頁。
2. 學會基本的選擇器與屬性，就能做出乾淨清爽的網頁。
3. CSS 的屬性很多，但不用一次背完，常用的先掌握就能上手。
4. 當畫面從黑白變得有設計感時，會非常有成就感，也能更吸引用戶。

學 CSS 之後，我才真正感受到「程式碼不只是冷冰冰的文字，它能變成一個漂亮的作品」。這讓我對未來的 Modern Web 學習更有動力，也期待接下來深入學習排版（像 Flexbox、Grid）和互動效果（像動畫、hover 效果），一步步把網頁做得更專業。