我的 reset.css 是這麼寫的

  • 日期:
  • 留言數:2
  • 標籤:

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

我的 reset 語法

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

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

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
2 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
omgezero
omgezero
3 years ago

您好,最近在學習css的相關事情也查了不少文章,所以想請問一下。 關於Reset的部分,是不是只需要重置自己常使用到的標籤呢? 還是有些標籤就算沒使用到也有重置的必要?

muki
3 years ago
Reply to  omgezero

你好,我建議是重製自己會用到的標籤就好。
但 reset.css 並不是一份不可變動的檔案,假設現在 A 標籤沒用到,未來用到了,就再把 A 標籤加入你的 reset.css 這樣就好囉~~^^

粉絲團