[ CSS ] 什麼是 CSS Reset?

阿榮-avatar-img
發佈於前端
更新於 發佈於 閱讀時間約 2 分鐘
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。

CSS Reset 的用途

不同的瀏覽器會有自己的預設樣式,這可能會導致我們的網頁在不同瀏覽器中長不一樣,如果針對每個瀏覽器去微調程式碼,光想就覺得很麻煩,也不好維護和管理。為了解決這個問題,就有了「CSS Reset」這個東東。它讓開發者可以從一個統一的基準開始設計網頁,確保所有元素在所有瀏覽器中都有一致的外觀,這樣可以更準確地控制頁面的排版和樣式。常見的 CSS Reset 有 Reset.css 和 Normalize.css,它們通過覆蓋瀏覽器的預設樣式來達到這個目的。


Reset 和 Normalize 比較

Reset.css

徹底清除瀏覽器的所有預設樣式。使用 CSS Reset 後,所有 HTML 元素在各個瀏覽器中會有一個完全統一的起點,可是這也代表很多基本樣式都需要開發者重新設定。

Normalize.css

旨在使瀏覽器的樣式更加一致,同時保留有用的預設值。Normalize.css 會修正瀏覽器之間的差異,同時保持了標準的 HTML 元素樣式,這使得它在不過度重設的情況下提供一個更好的基礎樣式。

聽起來就很像你要搬進一個新家,其中一個是空空的房子 (Reset.css),一個還有留基本家具 (Normalize.css),有的人喜歡從頭全部自己打造,有的人覺得有基本家具比較方便,沒有絕對的好與壞,端看自己的需求。


其他 CSS Reset

除了上述常見的兩個版本外,主流 CSS 框架也會依照框架的需求設計自己的 CSS Reset,例如:Bootstrap 的 Reboot (基於 Normalize),還有 Tailwind 的 Preflight (基於 modern-normalize ),或者我們也可以依照個人或公司的需求設計自己專屬的 CSS Reset。


參考資料

  • chatgpt
留言
avatar-img
留言分享你的想法!
avatar-img
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記,分享 Creative Coding 相關內容、作品
2024/04/15
2024/04/15
2024/04/12
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
2024/04/12
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
2024/04/10
立即(調用)函式 (簡稱 IIFE,Immediately Invoked Function Expression) 是種在定義完可以馬上執行的函式表達式。
Thumbnail
2024/04/10
立即(調用)函式 (簡稱 IIFE,Immediately Invoked Function Expression) 是種在定義完可以馬上執行的函式表達式。
Thumbnail
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
什麼是 CSS 預處理器 CSS 預處理器是一種工具,使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇,它們通常會提供一些純 CSS 中沒有的功能,例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護,並提高開發效率。 為什麼使用 CSS 預處
Thumbnail
什麼是 CSS 預處理器 CSS 預處理器是一種工具,使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇,它們通常會提供一些純 CSS 中沒有的功能,例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護,並提高開發效率。 為什麼使用 CSS 預處
Thumbnail
透過案例分析,探討舊網站改版的必要性和目標,以及成功改版的關鍵包括網站設計、功能優化、SEO優化、響應式設計和內容優化。
Thumbnail
透過案例分析,探討舊網站改版的必要性和目標,以及成功改版的關鍵包括網站設計、功能優化、SEO優化、響應式設計和內容優化。
Thumbnail
你是否覺得自己的網站看起來雜亂無章,不夠吸引人? 你是否擔心這樣的網站會讓你的客戶望而卻步? 如果你有這樣的想法,那麼今天要來分享如何進行網站大掃除,讓你的網站煥然一新,人氣狂飆!
Thumbnail
你是否覺得自己的網站看起來雜亂無章,不夠吸引人? 你是否擔心這樣的網站會讓你的客戶望而卻步? 如果你有這樣的想法,那麼今天要來分享如何進行網站大掃除,讓你的網站煥然一新,人氣狂飆!
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。
Thumbnail
電腦有些功能很可愛,其中一個就是「系統還原點」。每當開啟一台新的電腦,看電腦屏幕,敲打鍵盤輸入文字,接駁連上網際網絡,久而久之,電腦一定會出現或多或少的偏差問題,到最後甚至「荒腔走板」需要調整更正,最惱人的大概要數網上「中毒」這種倒楣事,於是有了「將電腦還原至較早的時間點」這樣的功能。 所
Thumbnail
電腦有些功能很可愛,其中一個就是「系統還原點」。每當開啟一台新的電腦,看電腦屏幕,敲打鍵盤輸入文字,接駁連上網際網絡,久而久之,電腦一定會出現或多或少的偏差問題,到最後甚至「荒腔走板」需要調整更正,最惱人的大概要數網上「中毒」這種倒楣事,於是有了「將電腦還原至較早的時間點」這樣的功能。 所
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News