在過去這幾天，我們用HTML搭建出了網頁的「骨架」，不過目前的網頁看起來只有白底黑字、藍色超連結，非常單調，如果用蓋房子來舉例，我們現在只是把鋼筋、水泥與紅磚牆砌好，雖然房子絕對不會垮，但裡面卻沒有任何內部裝飾，沒人會想直接搬進去住。
今天，我們終於要迎來前端最重要的第二部分：CSS（階層式樣式表）
如果說HTML是網頁的骨肉，那麼CSS就是網頁的衣服與化妝，CSS就像是一位神奇的網頁彩妝師，能自由決定文字的顏色與大小、換成賞心悅目的背景圖片，讓原本單調的區塊染上許多色彩，甚至還能精準拉出元件之間的間距、重新設計版面的配置，在現代網頁中，它就是讓網頁從「能看」變成「好看」的魔法，也是打造良好使用者體驗非常重要的東西。
想要讓網頁套用CSS的樣式，我們必須告訴瀏覽器：「我的指南寫在哪裡」在網頁開發的世界中，一共有三種最常見的引入方式，它們各自有不同的應用情境。
直接把樣式當作一種屬性，直接塞在個別HTML的標籤內部，這種做法最為直覺，就像在便利貼上隨手寫下筆記一樣快速，適合在測試單一元件，或是臨時想要微調某行字時使用，但它的缺點非常致命，當網頁元件變多時，整份程式碼會變得非常雜亂，無法重複利用，會讓未來的修改工作變成一場惡夢。
將所有的 CSS 樣式集中寫在網頁開頭的「標頭區」之內(style中間)，優點是成功把結構與視覺稍微分開了，同一個網頁裡的所有相同標籤都能同時套用這個樣式，不用逐行去複製，但缺點是只對「當前這一個網頁」有效，如果你做了一個包含十幾個頁面的大型網站，每個頁面都要複製貼上一遍，依然非常浪費時間(但之後幾天暫時都會用這種，等程式量上去了再改外部樣式)。
把所有的 CSS 樣式單獨寫在一個獨立的 .css 檔案裡，再回到網頁的標頭區中，使用連結標籤把兩者連線起來，這達成了「結構與視覺分離」，不論你的網站有多少個頁面，只要連結到同一個外部檔案，就能直接更換整個網站的風格。這就像是全公司統一穿上制服一樣，非常專業又極其方便維護。
html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day 09：CSS 三種引入方式範例</title>
<link rel="stylesheet" href="style.css">
<style>
h2 {
color: green;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>我是透過「外部樣式表」變色的紫色大標題</h1>
<h2>我是透過「內部樣式表」變色的綠色標題</h2>
<p style="color: blue; font-weight: bold;">我是透過「行內樣式」直接在標籤內單獨變成粗體藍色的文字。</p>
<p>我是一般文字，我只會套用內部樣式表的字體大小，顏色維持預設的黑色。</p>
</body>
</html>
css
h1 {
color: purple;
}
今天我們正式認識了CSS是什麼東西，並且學會了如何透過行內、內部與外部這三種方式將樣式注入網頁中，而在明天，我將會正式介紹css中如何改變顏色與文字。
iThome鐵人賽
看影片追技術