初學者指南：CSS Reset 介紹與用法
更新日期： 2024 年 10 月 21 日
在網頁設計和開發過程中，你可能會發現同樣的網頁，在不同瀏覽器中顯示效果不一樣。
這是因為每個瀏覽器都有自己的默認樣式表，它們為 HTML 元素賦予了預設的樣式，這些樣式可能因瀏覽器的不同而有所差異。
為了解決這個問題，我們通常會使用CSS Reset，它能幫助我們在不同瀏覽器中，清除這些預設樣式，從而提供一致的顯示效果。
本文將為新手介紹什麼是 CSS Reset，為什麼需要它，以及如何正確使用它。
什麼是 CSS Reset？
CSS Reset 是一段用於清除或重置瀏覽器默認樣式的 CSS 樣式表。
它的目的是將所有 HTML 元素的樣式歸零，讓所有瀏覽器對 HTML 元素的顯示，從同樣的基礎開始，這樣開發者可以完全控制樣式。
不同的瀏覽器對於標籤如 h1、p、ul、li 等的默認樣式各不相同。
例如，一些瀏覽器可能會為 h1 設置較大的間距，而有些則設置稍小的。
通過使用 CSS Reset，我們可以清除這些預設樣式，避免因瀏覽器差異而造成的顯示不一致。
常見的 CSS Reset 方法
有多種方式可以實現 CSS Reset，一些開發者會使用自己的自定義樣式重置，而一些則使用現有的知名方案，如 Eric Meyer 的 CSS Reset 或 Normalize.css。
以下介紹幾種常見的 CSS Reset 方法。
Eric Meyer 的 CSS Reset
Eric Meyer 的 CSS Reset 是最早也是最受歡迎的重置樣式之一，它會將幾乎所有 HTML 元素的預設樣式清除，讓你從零開始設計。
範例：
/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* 設定 HTML5 的 display 類型為 block */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* 設定表格的邊界 */
table {
border-collapse: collapse;
border-spacing: 0;
}這段代碼的作用是清除所有標籤的預設樣式，並將所有元素的 margin、padding、border 設置為 0，確保它們不會有任何預設的間距。
Normalize.css
相較於 Eric Meyer 的 CSS Reset，Normalize.css 採取的是一種更溫和的方式。
它並不是完全清除所有樣式，而是保留了一些必要的瀏覽器樣式，同時使不同瀏覽器之間的顯示更加一致。
這樣你可以在享有一致性的同時，保留一些有用的默認樣式，如表單元素的樣式。
範例：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">只需要引入這個外部連結即可使用 Normalize.css，它會對多個 HTML 標籤進行微調，達到跨瀏覽器的一致顯示。
自定義的 CSS Reset
有時候你可能只需要重置某些特定的元素，而不是完全清除所有的樣式。
在這種情況下，你可以根據項目需求編寫自定義的 CSS Reset。例如：
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}這種方式適合那些想要部分重置樣式的開發者，保持頁面某些標籤的預設樣式不被影響。
如何使用 CSS Reset
使用 CSS Reset 非常簡單，你只需要在樣式表的開頭加入相關的重置代碼，這樣瀏覽器的預設樣式就會被清除或重置。
一般來說，CSS Reset 應該是樣式表中的第一部分，這樣確保所有的後續樣式都是基於重置後的樣式來設計的。
範例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Reset 範例</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World</h1>
<p>這是一段測試文字。</p>
</body>
</html>在這個範例中，我們首先引入了 reset.css，然後再引入自己的 style.css。
這樣可以確保所有樣式都是在清除瀏覽器默認樣式的基礎上應用的。
結語
CSS Reset 是網頁設計中一個重要的工具，它能幫助我們消除瀏覽器之間的樣式差異，讓開發者能夠從一致的基礎開始設計網頁。
無論是使用現有的 Reset 樣式表，還是根據需求自定義樣式重置，了解並合理使用 CSS Reset 都能讓你的網頁樣式更加一致和可控。
在實際開發中，你可以根據項目需求選擇使用 Eric Meyer 的 CSS Reset、Normalize.css，或者是自定義的重置樣式。
每種方法都有其適用場景，重點是找到最適合你的解決方案。