[ CSS ] 什麼是 CSS Reset？
閱讀時間約 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
留言0
查看全部
你可能也想看
Google News 追蹤
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
CSS 的繼承性是開發網頁樣式時的一個重要概念，它使得樣式設計更加靈活和高效，有助於提高程式碼的可讀性、一致性和可重用性，並加快開發速度，從而提供更好的開發體驗。
什麼是 CSS 預處理器
CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。
為什麼使用 CSS 預處
透過案例分析，探討舊網站改版的必要性和目標，以及成功改版的關鍵包括網站設計、功能優化、SEO優化、響應式設計和內容優化。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
你是否覺得自己的網站看起來雜亂無章，不夠吸引人？
你是否擔心這樣的網站會讓你的客戶望而卻步？
如果你有這樣的想法，那麼今天要來分享如何進行網站大掃除，讓你的網站煥然一新，人氣狂飆！
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
CSS 的繼承性是開發網頁樣式時的一個重要概念，它使得樣式設計更加靈活和高效，有助於提高程式碼的可讀性、一致性和可重用性，並加快開發速度，從而提供更好的開發體驗。
什麼是 CSS 預處理器
CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。
為什麼使用 CSS 預處
透過案例分析，探討舊網站改版的必要性和目標，以及成功改版的關鍵包括網站設計、功能優化、SEO優化、響應式設計和內容優化。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
你是否覺得自己的網站看起來雜亂無章，不夠吸引人？
你是否擔心這樣的網站會讓你的客戶望而卻步？
如果你有這樣的想法，那麼今天要來分享如何進行網站大掃除，讓你的網站煥然一新，人氣狂飆！
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。