昨天我們學了圖片與多媒體，網站開始豐富起來了。
但如果你現在打開一個只有 HTML 的網頁，它長什麼樣？──純文字、圖片堆疊在一起，白底黑字，毫無設計感｡ﾟヽ(ﾟ´Д`)ﾉﾟ｡。
CSS 有三種常見的寫法，先從最基礎開始：
直接在標籤裡加上 style 屬性。
<p style="color: red; font-size: 20px;">這是一段紅色文字</p>
缺點：可讀性差，維護超級麻煩，幾乎不會在正式專案用
寫在<head>的 <style> 區塊
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
適合小型頁面練習，但多頁網站維護困難!
將 CSS 寫在獨立檔案，例如: style.css，再用 <link> 引入
<head>
<link rel="stylesheet" href="style.css">
</head>
優點：分離結構與樣式，方便團隊合作、維護性高
但要記得加上備註、註明!!!
h1 {
color: #333;
text-align: center;
}
這就是 CSS 的基本結構，記住「誰（選擇器） → 改什麼（屬性: 值）」(ΦωΦ)!
文字p { color: #555; font-size: 16px; font-weight: bold; }
盒模型 (Box Model)
網頁裡的每個元素其實都是「盒子」，有：
學到這裡，我們已經用 HTML 建立了結構，用 CSS 讓它變得漂亮。
但想像一下，如果網頁只會「靜靜擺在那裡」，是不是有些死板，少了點生命力？
像是：
下一章，我們就要踏入 JavaScript 的世界，看看怎麼讓網頁「動起來」
ξ( ✿＞◡❛)▄︻▇▇〓▄︻┻┳═一
今天開始接觸 CSS，它可以讓原本只有骨架的網站，加顏色、對齊、調整大小，甚至排成整齊的卡片，整個世界瞬間繽紛起來。
CSS 不只是「改字體顏色」的小工具，實際上它很深：
同時，理解 HTML、CSS、JS 三者的關聯 也讓我更清楚：前端並不是零碎學習，而是像搭積木一樣逐步組合。
iThome鐵人賽
看影片追技術
看更多