---
# System prepended metadata

title: HTML(2/10) Day 5 五倍紅寶石(第八屆共筆)(2021/7/02)
tags: [CSS, HTML]

---

# HTML(2/10) Day 5 五倍紅寶石(第八屆共筆)(2021/7/02)
## CSS：
稱做階層式樣式表，是一款電腦語言，不是程式語言，用來裝飾文件。

style要放哪邊都行，一般建議放在head裡面，不要放在body後面，
網頁會從上至下讀取，先讀到CSS再讀HTML可以讓使用者進入網頁時不會看到脫皮的狀況。

出錯時可以去開發者工具檢查哪邊發生錯誤，
找到相對應地方可以看到是寫在第幾行。
![](https://i.imgur.com/A52Bh1F.png)

## 選取器：
選取器 = 我要選取他，
接著利用{ }裡面的屬性跟值，去更改我本體的樣式。
選取器有以下幾種：
1. 元素 Tag 
2. class .  (就像貼貼紙或是分類帽一樣用來分類的、首字不能為數字!、一個物件可以有多個class，用空格分開)
3. ID #  (ID名稱不可重複、一個物件不可有兩個ID)
4. 屬性 [ ]  (選取特定屬性或裡面的值)
5. 僞元素 ::
6. 僞類別 :

### 優先權：
1. 越獨特的越優先
2. 如為同樣選取器同樣名稱，後面寫的會蓋掉前面的

!important(不建議用) > inline style > ID > class = 僞類別 = 屬性 > Tag = 僞元素 > * >繼承 

## CSS reset 調整預設樣式：
why?
各家瀏覽器打開HTML後樣式都會有些許不同，想把他設定成一樣的形狀。
- CSS reset：超over版reset，字體大小、間距都變成一模模一樣樣。(目前都還是先用這個練習)
- CSS normalize：只把各家瀏覽器的預設設定成一樣的，其他CSS不動。

## CSS指令：
- display:
  - inline：沒有寬高，可以跟其他有inline值的物件並排。
  - block：可以設定寬高，會佔掉一整排，整排空間都給他用，不能跟其他物件並排。
  - inline-block：可以設定寬高，能跟其他有inline值的物件並排，無法跟block並排。(使用inline-block排版時，物件之間會產生4~5px的空白字元，可以用word-spacing:-5px解決)
- margin auto：把剩餘空間分配到指定位置。
- flex：對父層使用flex，可以**讓下一層有block特性且排在同一行**，並利用其他屬性控制下一層主次軸走向。
![](https://i.imgur.com/vX7MxKh.png)
CSS指令原檔：https://www.xmind.net/m/ZjBmFV

###### tags: `HTML` `CSS` 