導讀：這篇文章聚焦於「CSS 自學 筆記」，幫你快速掌握重點。
繼上一篇介紹完HTML的架構，這篇要介紹CSS的概念喔! 如果有還沒看過上一篇的可以回去看喔!
認識CSS
(Cascading style sheet , CSS)，簡單來說是負責視覺性的編輯，也是設計風格發散的開始。根據顏色、排版、字型大小等等的方式來呈現視覺上的差異。
其中，編寫網頁的順序必須先寫html再編寫CSS。舉例來說，html就像蓋房子的鋼筋，先打好網頁的架構以及主要內容，需要視覺傳遞的文字、圖片等資訊。隨後，加上CSS就像在鋼筋中間填滿水泥、貼上磁磚，讓這些架構更加豐富，也更能夠讓訪客了解這間房子的樣貌。
套用CSS
套用CSS的方式有3種，分別為:
| 套用方式 | 說明 |
|---|---|
| ⾏內套⽤ (inline css) | 在 HTML 標籤直接宣告樣式 |
| 嵌入套⽤ (embedded css) | 嵌入於 HTML ⽂件的 <style> 標籤內 |
| 外部連接 (External Link css) | 外部 CSS 檔案 (附檔名 .css) |
通常會寫好主要風格樣式後存放在一個style.css檔，隨後每個分頁都能導入這個CSS以達到大部分相同風格的效果。隨後再使用嵌入套用的方式進行該分頁的微調。
Normalize.css
因為原先的html有預設一些樣式，例如ul會默認有圓形符號，h1、h2等會有固定行高等等。因此藉由normalize.css的導入可以排除這些預設的問題。建議在之後的每支程式都先導入，會減少很多麻煩。
選擇器(selector)
主要在使用CSS的時候，必須告訴電腦要改變style的部分在哪裡，可以根據屬性、名字等等（完整說明請見 MDN CSS 選擇器）。主要選擇器類型如下:
| 選擇器類型 | 語法 | 說明 |
|---|---|---|
| 屬性選擇器 | 元素名稱 { } | 以 HTML 標籤名稱選取所有同類元素 |
| Class 選擇器 | .class名稱 { } | 以 class 屬性選取，可重複使用於多處 |
| ID 選擇器 | #ID名稱 { } | 以 ID 屬性選取，頁面唯一 |
| 後代選擇器 | 父層 子層 { } | 以巢狀結構選取深層元素 |
屬性選擇器
html內的標籤即為相對應屬性，在CSS檔案中宣告要改變樣式的屬性。
Class選擇器
在html裡面，當有很多相同標籤出現，但只想要改變特定的時候，可以給予標籤class命名，並在CSS檔案中以"."+class名稱宣告要改變樣式的部分。
ID選擇器
與class選擇器相同，可以給予標籤ID命名，值得注意的是，同一個標籤可以命名多個class而ID就只能有一個，隨後在CSS檔案中以"#"+名稱宣告要改變樣式的部分。
(選取了class_selector的div內容文字顏色改為紅色，因此ID_selector沒有被更動；而ID選擇器則選到ID_selector的div內容文字大小改為32px)
後代選擇器
當想改變特定部分時，除了能使用class,ID選擇器以外，也能透過巢狀結構的特性，利用父層子層的關係來找到特定區域。
父層子層、繼承與取代
若以A標籤夾住B標籤，則A為父層，B為子層。相當於A裡面的B。通常CSS的特性會有繼承的效果。也就是說，透過改變父層的樣式，子層的狀態也會跟著改變。
此外，因為電腦閱讀方式是從上到下，在CSS檔案中若同樣設定A標籤的內容，則較下方提到的改變會取代掉先前的更動。
切記能夠盡量減少後代選擇的層數，在例子中，雖然能夠以div ul li #first的方式選到"a"。
但事實上，使用#first的方式就可以直接達到同樣效果。然而後者的電腦運算方式會快得多。若在SEO或優化網頁的過程中，這部分是主要影響速度的一部份。
Box Model
在網頁排版的時候，事實上是被裁切成許多不同的塊狀（盒狀 / Box Model）。試著把html寫好的內容想像成一個個盒子。把巢狀結構想像成俄羅斯娃娃一樣，大的盒子裡面可以裝許多小盒子。
但是在排版的時候，如果想要改變盒子的大小，以及彼此之間的間距應該怎麼辦呢?
在排版過程中，大多使用的是box model ，透過宣告盒子間的間距、盒子高度跟寬度等等來達到想要的效果。
padding : 下圖中黑線以內，綠色區域就是padding的區域，透過改變padding可以把這個區塊中的物件向中心推擠。(若物件靠左則會右推，靠上則往下)。
margin : 下圖中黑線以外，紅色區域為margin，透過改變margin來將物件遠離此區塊。(物件在左則會向左推開)。
| 寫法 | 範例 | 說明 |
|---|---|---|
| 寫法1 | padding/margin: 5px; | 上下左右都推開5px |
| 寫法2 | padding/margin: 5px 3px; | 上下推開5px；左右推開3px |
| 寫法3 | padding/margin: 5px 3px 1px; | 上推開5px，左右推開3px，下推開1px |
| 寫法4 | padding/margin: 5px 3px 1px 3px; | 上5px，右3px，下1px，左3px |
#使用padding/margin: 0 auto的方式可以將區塊置中
border : 事實上border同樣也會占版面。可以透過px solid/dot color來選擇邊框的粗細 實虛線以及顏色
另外，border也時常被用來除錯以及將區塊可視化。
Box sizing: border box
在排版的過程中，假如為了要將大盒子內的物件分開而使用了padding，這會造成整體的大小超出原本預期排版的間隔配置。這時候可以使用box sizing: border box的方式，可以解決超出版面、區塊的問題。
後記
如果你喜歡這樣解說的方式的話，幫我按讚拍手分享! 如果你覺得有疑問或者有錯誤的話，歡迎在下面留言告訴我 !
