金魚都能懂的 CSS 必學屬性：網頁設計必備寶典（iT邦幫忙鐵人賽系列書）

李建杭（Amos Li）
一個熱血的斜槓開發者，過去從事視覺設計師，後來轉職成為前端工程師，同時也是國內知名的前端技術講師及技術研討會講者，熟悉HTML、CSS、Bootstrap、RWD、CSS3等技術，2018年開始成為Youtuber，致力於使用簡單易懂的方式，讓新手學習前端網頁製作相關技術。

連續三年在iT邦幫忙鐵人賽獲得三個冠軍、一個優選、一個佳作
♚冠軍 《金魚都能懂的網頁設計入門》
♚冠軍 《金魚都能懂的CSS選取器》
♚冠軍 《金魚都能懂的Bootstrap5網頁框架開發》
♚優選 《金魚都能懂的CSS必學屬性》
♚佳作 《金魚都能懂的這個網頁畫面怎麼切》

【Youtube頻道】
https://www.youtube.com/c/csscoke

【部落格】
http://csscoke.com

【臉書粉絲專頁】
https://www.facebook.com/cssCoke

【Line生活圈】
使用Line搜尋「＠CSScoke」即可找到

|Chapter 01| 你需要知道的CSS一些事
1.1 CSS真的這麼難學嗎？
1.2 CSS2、CSS3是什麼？那CSS4？
1.3 什麼是瀏覽器支援度？
1.4 如何查詢瀏覽器對CSS的支援度
1.5 -webkit-或-moz-是什麼意思？
1.6 CSS中的常見單位
1.7 CSS函式一覽

|Chapter 02| 文字與段落
2.1 font-family字型設定
2.2 網路字型的應用
2.3 文字尺寸（font-size）
2.4 文字粗細（font-weight）
2.5 文字樣式（font-style）
2.6 文字裝飾（text-decoration）
2.7 文字行高（line-height）
2.8 文字色彩（color）
2.9 首行縮排（text-indent）
2.10 文字水平對齊（text-align）
2.11 字元間距（letter-spacing）
2.12 方向（direction）
2.13 空白字元（word-spacing）
2.14 font字體設定

|Chapter 03| 背景
3.1 背景色彩（background-color）
3.2 背景圖片（background-image）
3.3 背景線性漸層（linear-gradient）
3.4 放射性 / 圓形漸層（radial-gradient）
3.5 角度 / 圓錐形漸層（conic-gradient）
3.6 背景位置（background-position）
3.7 背景重複（background-repeat）
3.8 背景尺寸（background-size）
3.9 背景圖固定方式（background-attachment）
3.10 background背景簡寫

|Chapter 04| 清單
4.1 清單（list-style）

|Chapter 05| 邊框、外框、內外距、容器尺寸
5.1 邊框線與外框線（border & outline）
5.2 寬與高（width & height）
5.3 min-width & max-width 以及min-height & max-height
5.4 外距與內距（margin & padding）
5.5 盒尺寸（box-sizing）

|Chapter 06| Display屬性及Flex、Grid排版
6.1 Display屬性
6.2 彈性排版（Flex）
6.3 網格排版（Grid）

|Chapter 07| 定位
7.1 定位（position）
7.2 上右下左距離設定（top、right、bottom、left）
7.3 前後層級控制（z-index）

|Chapter 08| 邏輯屬性
8.1 邏輯屬性（Logical propertices）
8.2 CSS邏輯屬性分類及作用
8.3 邏輯屬性的使用情境

|Chapter 09| 其他重點
9.1 變形（transform）
9.2 濾鏡效果（filter）
9.3 不透明度（opacity）
9.4 溢位（overflow）
9.5 陰影
9.6 圓角（border-radius）
9.7 動畫