最近發了 月餅 的圖，朋友問我「退休和財富自由是一樣的嗎？」
我說：財富自由也可以不退休呀，退不退休可以是個人興趣選擇～（不過財富不自由可能就退不了休了）
欸等等，我的月餅圖讓人看了想退休嗎？
於是我做了一個小統計，先來看完 CSS 介紹再分享結果吧 Ψ(￣∀￣)Ψ
階層式樣式表（ Cascading Style Sheets ，縮寫： CSS ）又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表。是一種用來為結構化文件（如 HTML 文件或 XML 應用）添加
樣式（字型、間距和顏色等）的電腦語言，由 W3C 定義和維護。 CSS3 現在已被大部分現代瀏覽器支援，而下一版的 CSS4 仍在開發中。
CSS 不僅可以
靜態地修飾網頁，還可以配合各種手稿語言動態地對網頁各元素進行 格式化 。
能夠對網頁中元素位置的排版進行像素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。
CSS 由多組 規則 組成。每個規則由選擇器（selector）、屬性（property）和值（value）組成：
選擇器（Selector）：多個選擇器可以半形逗號（,）隔開。屬性（property）：CSS1、CSS2、CSS3規定了許多的屬性，目的在控制選擇器的樣式。值（value）：指屬性接受的設定值，多個關鍵字時大都以空格隔開。
屬性和值之間用半形冒號（:）隔開，屬性和值合稱為 特性 。多個特性間用「;」隔開，最後用「{ }」括起來。
格式是這樣的：
選取器{
屬性: 值;
}
範例：
h1{
color: red;
}
意思是把 <h1> 標籤都設定顏色為紅色
內嵌式
有發現什麼嗎？
CSS 是不能獨立存在的，需跟 HTML 搭配一起使用。
這是一個未加入 CSS 樣式的 HTML 檔
<body>
<h1>中秋節吃月餅大賽</h1>
<p>你喜歡月餅、喜歡吃嗎？或者很會吃嗎？歡迎來挑戰！</p>
</body>
第 1 種方式：直接在 HTML 標籤上加 style 屬性
<body>
<h1 style="color: orange;">中秋節吃月餅大賽</h1>
<p style="background-color: orange;">你喜歡月餅、喜歡吃嗎？或者很會吃嗎？歡迎來挑戰！</p>
</body>
第 2 種方式：在上方 <head> 標籤中加上 <style> 標籤，指定各別的樣式
<head>
<style>
h1{
color: orange;
}
p{
background-color: orange;
}
</style>
</head>
<body>
<h1>中秋節吃月餅大賽</h1>
<p>你喜歡月餅、喜歡吃嗎？或者很會吃嗎？歡迎來挑戰！</p>
</body>
第 3 種方式：使用 <link> 標籤引入 CSS 檔
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>中秋節吃月餅大賽</h1>
<p>你喜歡月餅、喜歡吃嗎？或者很會吃嗎？歡迎來挑戰！</p>
</body>
開另外一個檔案，叫做 style.css，放入以下內容
h1{
color: orange;
}
p{
background-color: orange;
}
第 4 種是第 3 種方式的延伸，想知道的話再自行進階學習喔 ヽ(✿ﾟ▽ﾟ)ノ
老闆說，今年的中秋節要跟上潮流，把顏色改成大部分年輕人都會喜歡的 黑色！
1. 行內樣式：在 <body> 標籤中，找到要改的標籤屬性，一個一個改
2. 內嵌式：到上方 <head> 標籤，找到要改的選取器做修改
3. 引入 CSS 檔：不用開 HTML 檔案，開啟 CSS 檔案找到要改的選取器做修改
老闆又說，不行不行黑色太不吉利了，把顏色改成喜氣的 紅色！
範例的 <h1> 和 <p> 只有一個，但現實中好幾個分頁都會有 <h1>
每一頁的 <p> 萬一有 100 個，甚至更多呢？
接著老闆又說，嗯紅色好刺眼不方便看，把顏色改成讓人平靜的 藍色！然後把字調大一點、標題加個邊框線、內文加個下底線、全部改成直向排列、靠右對齊 ...
老闆最後說，算了算了我覺得藍色好沒過節的氣氛，把顏色改回來原本溫暖的 橘色！剛剛加的都拿掉
自學指引：
色彩網站推薦：
Google 套件推薦：
我的月餅圖讓人看了想退休嗎？ 想吃 、想退休 二擇一
朋友的調查結果比例為 3：7 ๐•ᴗ•๐
月餅勾起大家的夢想了。
感謝閱讀，我們明天見囉～～～ 
iThome鐵人賽
看影片追技術