---
# System prepended metadata

title: HTML、CSS 觀念筆記

---

# HTML、CSS 觀念筆記
> CSS權重規則：先看權重在看順序
> HTML 標籤 1 xp
> 類別選擇器 10 xp
> id 選擇器 100 xp #永遠不要用id，寫CSS樣式不需要id。讓後端工程師綁template樣版有時會用到id，或是用Javascript做指定樣式
> elemant 1000 xp #寫在HTML裡的style樣式，做Banner或是輪播效果可能會需要，後端做到前端的時機以及Javascript
> !important 10000 xp ex: h1 { color: black !important;}
### HTML vs 類別選擇器
```
<p class="title1 title2">猜猜看</p>
```
```css=
<!--  CSS -->
p{
 color: pink;
 }
.title1{
 color: pink;
}
.title2{
 color: blue;
}
```
> Answer：先看權重在看順序，顏色一樣是blue
### 相同類別選擇器
```
<p class="title2 title1">猜猜看</p>
```
```css=
<!--  CSS -->
.title1{
 color: pink;
}
.title2{
 color: blue;
}
```
> Answer： p標籤內的title1 title2對調顏色一樣是blue

### ID vs 類別選擇器
```
<h1 id="Thetitle" class="title1 title2">猜猜看</h1>
```
```css=
<!--  CSS -->
#Thetitle{
 color: green;
}
.title1{
 color: pink;
}
.title2{
 color: black
}
```
>Answer: id權重大於類別選擇器
