網頁樣式跟想像中不一樣,你 CSS Reset 了嗎?

當透過 CSS 切完網頁版面後,發現網頁跟自己想像或是設計稿上顯示的有落差,是發生了什麼事情?

CSS Reset 出現與存在意義

之所以會有 CSS Reset 出現,是因為早期瀏覽器在渲染 HTML 的 CSS 樣式標準不一,導致同一段語法在不同家瀏覽器所渲染出的結果不一樣,為了統一各家瀏覽器的預設渲染樣式,因此出了 CSS Reset 讓預設網頁樣式在各家瀏覽器是一樣的狀態。

網頁跟想像中的不一樣:先確認 CSS Reset 了沒

所以回到上述問題,以 chrome 瀏覽器為例,預設 body 的 margin 就設定 8px 了,所以如果沒有事先清除瀏覽器已經設定好的元素樣式,就會造成網頁排版跟想像中有落差。

我該如何使用 CSS Reset

這裡介紹目前最知名的兩個 CSS Reset 及其差異:

  • meyerweb
    • 將所有瀏覽器預設樣式清除一乾二淨
    • 高度客製化可使用
  • Normalize
    • 會保留一些網頁樣式,不會全部清除
    • Bootstrap 目前使用此 CSS Reset

以上 CSS Reset 都可以進去直接複製並貼到自己的樣式表。當然如果你夠熟,也可以自己設計一個 CSS Reset!

建立 CSS Reset 環境

進入 meyerweb 後,自然就會看到 CSS Reset 整串語法;至於 Normalize 則是在點擊 Download 按鈕後會進入它的 CSS 檔。

  • 直接將整串複製下來,放到 CSS 檔案開頭
  • 下載回來後獨立一支檔案,網頁由上到下讀取時,要先讀取 CSS Reset

從上述不論是哪一種方法,CSS Reset 必須先放在所有自行設定之 CSS 檔案前面,預設網頁檔案才會是清空的,否則可能會使效果不如預期,甚至是 CSS Reset 覆蓋了自行設定的樣式。


希望我的文章能夠幫助到你,有任何問題或是想與我討論交流,歡迎透過留言與我分享你的觀點。

如果你喜歡我的文章,想支持我繼續撰寫更多文章,歡迎你:

  1. 將我的部落格加入書籤,隨時造訪部落格。
  2. 將我的文章分享給你的親朋好友。
  3. 透過 LikeButton 幫我按 5 下讚。
  4. 每月贊助 LikeCoin 請我喝杯咖啡。(雖然我不喝咖啡啦 XD)