了解HTML以後，CSS也一定要熟悉一下！
CSS用來定義文件的樣式、佈局，甚至可以做出簡單的動畫。
今天就來認識幾個基本常用的語法。

基本架構

先來解說CSS的結構：

p {
font-size：14px；
color：#000000；
}

開頭的p是指針對HTML裡所有p元素做CSS宣告，
我們可以稱此為選擇器，
後面一定都用 { } 括弧。
{ } 裡我們會放樣式的宣告，
宣告中以：接上想要的樣式，後面用；做結尾。

{ } 前面選擇器怎麼選

選擇器可以有不同的形式：

1. HTML原生標籤
   指定HTML裡所有元素，直接接大括弧

body { 
font-family：Roboto；
}

2. ID選擇器
   控制id名稱的標籤，名稱前加上＃

<p id="first_paragraph">...</p>
#first_paragraph {
color：#000000；
}

3. Class選擇器
   控制class有相同名稱的元素，名稱前加上 .

<h2 class="small-title"></h2>
.small-title {
font-size：14px；
font-weight：600； 
}

4. 屬性選擇器
   控制特定屬性的元素，屬性放在 [ ] 裏面

<input type="text">
<input type="checkbox">
input [ type = checkbox ] { 
border: 1px solid green ;
}

以上就只會對type是checkbox的input做樣式的設置

5. 特定情況下的選擇器
   控制某些情況下的樣式，把：放在選定元素的後面

button：hover {
background-color：blue；
}

hover代表滑鼠在button上時的狀態，移走的話這項樣式又會消失。

大小距離位置

1. width 寬度、height 長度
   以上也可以設定最小、最大值，
   分別是min-width、min-height、max-width、max-height。
   常見是使用長度單位 em、rem、px、％ 或 auto（讓瀏覽器自動設定）
   那以下順便介紹CSS裡常見的單位們

2. CSS常見長度單位
   em：每個 "子元素" 乘__倍 "父元素" 的px值
   ％：每個 "子元素" 用百分比乘上 "父元素" 的px值
   rem：每個 "元素" 乘__倍 "根元素" 的px值
   px：裝置螢幕中每個點（pixel）
   vw：螢幕寬度的比例，最大是100vw
   vh：螢幕高度的比例，最大是100vh

3. display 顯示狀態
   常見的參數設定：

   • block：物件以區塊排列，會換行、預設使用整個寬度
   • inline：物件在同一行排列
   • flex：這個是個很好用的東西

4. margin 外邊界距離
   物件上下左右與其他物件的距離，所以不會有物件本身的顏色，
   搭配上面的長度單位來設定。
   如果只要特定一邊距離，可以用margin-top、margin-bottom、margin-left、margin-right。

5. padding 內邊界距離
   物件上下左右的留白，
   在border(邊框)跟物件的中間，
   會保留物件的顏色，但是絕不會讓物件跑到這個區域。
   搭配上面的長度單位來設定。
   這是很常用的功能，因為物件太靠近邊框會有壓迫感。
   它也一樣可以設定特定邊：padding-top、padding-bottom、padding-left、padding-right。

顏色相關

1. 顏色的表示
   • 十六進位表示法
     3或6位數字組成的
     例如：黑色 #000000 、白色 #ffffff
   • 十進位
     兩種方式
     rgb(red,green,blue) 裡面放上紅綠藍的數值
     rgba(red,green,blue,alpha) 裡面是上紅綠藍及透明度的數值
     其實很多選擇
     上次提到的figma也可以找到顏色的表示法
2. background-color 背景顏色
3. color 常用於字型顏色
4. border 邊界
   物件的邊界，在margin跟padding中間
   會加上粗細、樣式、顏色

div {
   border： solid 2px #000000；
}

5. outline 外圍輪廓
   不同於border，他是外圍輪廓的顏色，不佔據空間。

字體相關

1. font-family 字型
2. font-size 字體大小
3. font-weight 字
4. letter-spacing 字與字的距離
5. line-height 行高
6. text-align 段落靠齊方向
7. text-decorations 字的裝飾
   常見的是 <a></a> 超連結，
   本身預設有下底線，就是用這項參數。

以上若有需要，W3School都有更詳盡的說明，
接下來的教學也會適時用上！