[ 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
阿榮 | 前端 ~ 互動藝術程式
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
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
vocus 最具指標性的創作者社群──「野格團」, 2026 年春季,這支充滿專業、熱情的團隊再次擴編,迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇,他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。
Thumbnail
vocus 最具指標性的創作者社群──「野格團」, 2026 年春季,這支充滿專業、熱情的團隊再次擴編,迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇,他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。
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
電腦有些功能很可愛,其中一個就是「系統還原點」。每當開啟一台新的電腦,看電腦屏幕,敲打鍵盤輸入文字,接駁連上網際網絡,久而久之,電腦一定會出現或多或少的偏差問題,到最後甚至「荒腔走板」需要調整更正,最惱人的大概要數網上「中毒」這種倒楣事,於是有了「將電腦還原至較早的時間點」這樣的功能。 所
Thumbnail
每個HTML元素都會有預設的CSS設定,但由於各家瀏覽器預設值沒有統一,就可能導致同樣的程式碼在不同瀏覽器呈現結果不同,比如在Chrome排版看起來正常,但到Safari看起來卻跑版了。因此,Reset CSS與Normalize.css都是為了解決上述問題衍生出來的方法。 Reset CSS
Thumbnail
每個HTML元素都會有預設的CSS設定,但由於各家瀏覽器預設值沒有統一,就可能導致同樣的程式碼在不同瀏覽器呈現結果不同,比如在Chrome排版看起來正常,但到Safari看起來卻跑版了。因此,Reset CSS與Normalize.css都是為了解決上述問題衍生出來的方法。 Reset CSS
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News