## CSS 是什麼？ CSS（Cascading Style Sheets，階層式樣式表）是用來控制網頁「外觀與版面」的語言。HTML 負責網頁的內容與結構，而 CSS 負責呈現方式，例如： - 文字顏色、大小與字型 - 背景顏色或圖片 - 邊框、間距與尺寸 - 元素的排列與位置 - 網頁在不同螢幕上的響應式版面 例如，HTML 可以定義一段文字： ```html <p>這是一段文字</p> ``` 而 CSS 可以指定這段文字要顯示成什麼顏色、大小或字型。 --- ## CSS 的基本語法 CSS 通常由「屬性」和「值」組成： ```css 屬性: 值; ``` 例如： ```css color: blue; font-size: 20px; ``` - `color` 是屬性，代表文字顏色 - `blue` 是值，代表藍色 - `font-size` 是屬性，代表文字大小 - `20px` 是值，代表 20 像素 - 每個設定通常以分號 `;` 結尾 --- ## Inline CSS 是什麼？ Inline CSS（行內 CSS）是直接將 CSS 寫在 HTML 元素的 `style` 屬性中，只會套用到該元素。 基本寫法： ```html <標籤 style="屬性: 值;"> 內容 </標籤> ``` 例如： ```html <p style="color: red;">這是一段紅色文字</p> ``` 這段程式會將 `<p>` 裡的文字顯示為紅色。 --- ## 使用 `color` 設定文字顏色 ```html <p style="color: blue;">這是藍色文字</p> ``` 也可以使用色碼： ```html <p style="color: #ff6600;">這是橘色文字</p> ``` 或使用 RGB： ```html <p style="color: rgb(255, 0, 0);">這是紅色文字</p> ``` 常見的顏色表示方式包括： ```css color: red; color: #ff0000; color: rgb(255, 0, 0); ``` --- ## 使用 `font-size` 設定文字大小 ```html <p style="font-size: 24px;">這是 24 像素的文字</p> ``` 常見單位有： - `px`：像素 - `em`：相對於父元素的文字大小 - `rem`：相對於根元素的文字大小 - `%`：百分比 例如： ```html <p style="font-size: 1.5em;">這是較大的文字</p> ``` --- ## 同時設定多個 CSS 屬性 多個屬性可以寫在同一個 `style` 屬性中，並用分號分隔： ```html <p style="color: green; font-size: 20px;"> 綠色且較大的文字 </p> ``` 還可以加入其他常見屬性： ```html <h1 style=" color: purple; font-size: 32px; background-color: #eeeeee; text-align: center; "> 網頁標題 </h1> ``` 上述設定會讓標題： - 顯示為紫色 - 字體大小為 32 像素 - 擁有淺灰色背景 - 文字置中 --- ## Inline CSS 的優缺點 ### 優點 - 寫法直接、容易理解 - 適合快速測試樣式 - 只會影響指定的單一元素 ### 缺點 - HTML 和 CSS 混在一起，程式碼較難維護 - 若多個元素使用相同樣式，需要重複撰寫 - 不適合大型網站 因此，Inline CSS 適合少量或特殊的樣式設定；較大型的網站通常會使用內部 CSS 或外部 CSS 檔案，讓樣式與 HTML 結構分離。