---
# System prepended metadata

title: DAY4 - CSS Reset - 清空瀏覽器預設樣式
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章']

---

# DAY4 - CSS Reset - 清空瀏覽器預設樣式 

### 我們為什麼需要這個工具?

- 其實瀏覽器，都有自動寫好的標籤 css 如下所示:

  我有一個大標題，打開 chrome 「右鍵」 > 「檢查」

```
<h1>這是一個測試標題</h1>
```

![](https://i.imgur.com/GOSBar7.png)

- 此時呢，可以發現到: 其實這個 h1 本身就帶有 chrome 所預設的樣式，其實這些都是可以透過自己撰寫 css **來去覆蓋掉**。

### 觀察覆蓋前後：

1. 這是一開始預設的樣子:

![](https://i.imgur.com/xHadmlM.png)

2. 覆蓋後，我撰寫了 `h1 {margin:0;}`
   發現標籤離上面的間距給縮短了。

![](https://i.imgur.com/DQEAPn5.png)

---

### 套用 CSS Reset 

- [CSS Tools: Reset CSS by meyerweb](https://meyerweb.com/eric/tools/css/reset/)

- 將網址裡面撰寫好的 CSS 語法 給 copy 到自身的樣式檔案(.css)中:

![](https://i.imgur.com/0fM3Ajo.png)

1. 神奇的事情發生了，原本的 h1 標題甚至是直接縮小，也更加的貼合在網頁邊邊上。

### 觀察 css reset 寫了什麼?

```
// 裡頭做了滿多重置的語法，最關鍵的是這部分，
   像是 margin padding 等推擠效果都給予歸零，這也難怪，h1 會移動到最邊界了。

{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
```

### 使多個標籤，類別都套用到樣式可以用 , 來隔開選擇器。
![](https://i.imgur.com/92HolyT.png)


### CSS 語法渲染 HTML 時，會優先吃到最後面的設定。


###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章`


