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

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

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

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

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


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

### 觀察覆蓋前後：

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


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


---

### 套用 CSS Reset

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

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


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

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

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

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

### 使多個標籤，類別都套用到樣式可以用 , 來隔開選擇器。

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

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