有朋友問我，要怎麼製作 reset.css？
我才想到原來我一直沒有釋出 reset.css 的檔案給大家，所以我決定把自己在用的 reset.css 分享給大家，順便簡單說明我是怎麼設定的 🙂

我的 reset 語法

我有將這份 reset.css 放在 GitHub上，之後如果有修正也會隨時更新，有需要的朋友可以在 GitHub 追蹤更新資訊。你也可以直接抓取以下的css語法：

在這個重製表裡頭，我主要的設定就是將整張網頁，包含圖層、表格、項目符號…等的邊界都設成「0」，為的是讓所有瀏覽器在初始條件下完全相等。

此外還有把每個人的字體都調成100%，同樣是讓瀏覽器環境相等。

接著是網頁的按鈕元素，在字體大小、顏色、樣式….等地方我都設定了inherit這個繼承屬性，他可以用來繼承父元素的設定。如果不懂繼承的概念，可以參考CSS 選擇器說明裡頭第四點：子選擇器，有稍微提到繼承的意思。

第一行可以用 * {margin: 0; padding: 0;} 取代嗎

最近有朋友在問，第一行落落長的 tag reset 是否可以用* {margin: 0; padding: 0;}取代？

就語法上看好像沒甚麼問題，畢竟*表示 HTML 所有的標籤，但是就因為他代表全部，我個人覺得風險太大所以我不建議這種作法。(就像是你要選擇清空所有資料(有風險)，還是寧願一個一個去砍資料(麻煩但沒風險))。

而這個做法同樣也有兩派人馬在討論，有興趣的朋友可以參考關於CSS RESET，關於*{margin:0;padding:0}的整理文，裡面有正反兩方的討論串。

結論

重製表主要就是要解決瀏覽器之間的不同，所以我做的設置大概是這樣。

重製表的製作很簡單，只要抓住一個概念，他是為了要讓網頁在一開始，在所有瀏覽器都長得一模一樣。只要抓住這個原則就好了~

有關其他重製表的介紹，可以參考以下兩篇文章：
1. 快速寫好 css 的五種方法 (在第一點有提到 css 重置)
2. 打造自己的 reset.css

1

發生錯誤。

更多 CSS 相關文章

如何讓使用 CDN 的 Tailwind CSS 也能在 VS Code 啟用 Tailwind CSS Intellisense 套件

2023-12-06

如何讓使用 CDN 的 Tailwind CSS 也能在 VS Code 啟用 Tailwind CSS Intellisense 套件

HTML/CSS

vw 進化了！更好用的 CSS 自適應字體大小

2023-10-13

vw 進化了！更好用的 CSS 自適應字體大小

HTML/CSS

CSS 表單樣式分享：Material UI 的 Label 標籤浮動縮放

2023-09-13

CSS 表單樣式分享：Material UI 的 Label 標籤浮動縮放

HTML/CSS

透過 img object-fit 屬性取代 CSS 的 background 語法，輕鬆實現圖片背景的效果

2023-06-26

透過 img object-fit 屬性取代 CSS 的 background 語法，輕鬆實現圖片背景的效果

HTML/CSS

用 CSS 製作垂直滾動的跑馬燈

2023-04-13

用 CSS 製作垂直滾動的跑馬燈

HTML/CSS

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

2022-11-22

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

HTML/CSS