重置 CSS ( Reset CSS )

重置 CSS ( Reset CSS ) 可以清除 HTML 元素自带的默认样式，让这些元素在不同浏览器中会有一致的显示效果，甚至也可以让整份 CSS 文件更加精简，这篇教学会引导大家撰写重置 CSS 的程序码，并提供另外两种常用的重置 CSS 方法。

请先阅读：使用 Icon Font ( 图示字体 )

快速导览：

• 认识重置 CSS ( Reset CSS )
• 需要重置的 CSS 样式
• 撰写自己的重置 CSS
• 使用 Eric Meyer 版本重置 CSS
• 使用 normalize.css 重置 CSS

认识重置 CSS ( Reset CSS )

HTML 为了让编辑网页时可以立刻看到效果，许多 HTML 元素会有“默认样式”，但这些默认样式在不同浏览器会有些微不同的呈现样貌，因此往往不受网页设计师青睐，所以一些 CSS 专家在撰写正式的 CSS 之前，替元素加入一些样式覆盖默认样式，达到在不同浏览器中或在不同排版状况下，仍然会有一致的呈现结果，这就是“重置 CSS ( Reset CSS )”的由来，除了部分表单元素需要针对特定浏览器进行处理处理，大多数默认样式都可透过标准的 CSS 覆盖或重设样式。

需要重置的 CSS 样式

浏览器为了让“没有样式”的网页能够正常显示，各个元素除了默认样式，浏览器还会额外替元素添加例如行高、间距、边框等样式，因为是浏览器所添加的默认值，所以部分样式有可能会不同 ( 例如字体、行高等 )，下方会列出通常都需要重置 CSS 的样式：

除了上述的样式，HTML 的 input、button 等“表单”元素，各家浏览器会额外提供背景色、边框、边距、内距等独立样式，这些样式有时还必须使用厂商开头的特殊样式属性才能修改 ( 例如 -webkit-、-moz- )，因此在操作重置 CSS 也必须注意是否有更动到相关样式，下方使用四种不同的浏览器打开同一个网页，网页中从上而下分别是 h1、h2、h3、input、button、select 和 table，可以发现各家浏览器使用默认值看到的结果都不太相同，这也是为什么需要重置 CSS 的原因。

撰写自己的重置 CSS

理解各种 HTML 元素的默认值后，就可以开始撰写“自己专属”的重置 CSS，下方范例因为使用了重置 CSS，使用四种浏览器打开后，就会呈现较为一致的样貌 ( 如果有他样式就需要自行撰写测试 )，需要注意不同的浏览器对于“表单元素”的样式都有所不同，如果真的要完全一致，仍然必须多次测试。

线上展示：https://codepen.io/oxxo/pen/qEBPQBM

<!-- HTML 程式碼 -->
<h1>Apple</h1>
<h2>Banana</h2>
<h3>OXXO</h3>
<h4>Orange</h4>
<form>
  <input name="user"> <button type="submit">送出</button> <button type="reset">清空</button>
</form>
<form>
  <select>
    <optgroup label="iPhone" multiple>
      <option value="14p">iPhone 14 Pro</option>
      <option value="14" selected>iPhone 14</option>
      <option value="13p" disabled>iPhone 13 Pro</option>
    </optgroup>
  </select>
</form>
<ul><li>apple</li><li>banana</li><li>cat</li></ul>
<table>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  /* font 相關樣式都有繼承特性，加上網頁元素使用 em 尺寸，只要寫在 html 裡就可以套用 */
  /* 因為表單元素本身自帶瀏覽器樣式，必須獨立撰寫覆蓋 */
  html, form, input, button, select, label, textarea {
    font-family: arial, sans-serif;
    font-size: 16px;
    line-height: 1.1;
  }
  /* margin、padding 等樣式沒有繼承特性，因此使用 * 讓網頁中所有元素都套用 */
  * {
    box-sizing: padding-box;
    position: relative;
    padding: 0;
    margin: 0;
  }
  /* 部分表單元素會使用瀏覽器樣式，需要獨立撰寫 */
  input, button, select {
    border: 1px solid #000;
    background: none;
  }
  /* 表格元素有其獨立樣式，需要獨立撰寫 */
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  /* 清單元素有其獨立樣式，需要獨立撰寫 */
  ol, ul {
    list-style: none;
  }
</style>

使用 Eric Meyer 版本重置 CSS

Eric Meyer 是知名“CSS 大全”书籍的作者，许多人也会套用其所撰写的重置 CSS，下方程序码为 Eric Meyer 的重置 CSS，但由于强制设定了文字尺寸，导致所有元素文字大小都相同，且并没有针对表单元素进行设定，因此需要额外处理表单元素，使用时要特别注意。

参考：https://meyerweb.com/eric/tools/css/reset/

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
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;          /* 需要 border 的元素需要額外設定 */
  font-size: 100%;    /* 標題元素就需要額外設定處理 */
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

使用 normalize.css 重置 CSS

normalize.css 是另外颇具盛名的重置 CSS，内容主要是针对表单、特殊文字样式进行重置，但整体太过针对特定文字样式，使用时比较没有“重置”的感受，仍然必须要自己转写许多样式辅助。

参考：https://necolas.github.io/normalize.css/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}
body{ margin: 0;}
main{display: block;}
h1{
  font-size: 2em;
  margin: .67em 0;
}
hr{
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre{
  font-family: monospace,monospace;
  font-size: 1em
}
a{background-color:transparent}
abbr[title]{
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,strong{font-weight: bolder}
code,kbd,samp{
  font-family: monospace,monospace;
  font-size: 1em;
}
small{font-size: 80%;}
sub,sup{
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub{bottom: -.25em;}
sup{top: -.5em;}
img{border-style: none;}
button,input,optgroup,select,textarea{
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,input{overflow: visible;}
button,select{text-transform: none;}
[type=button],[type=reset],[type=submit],button{
  -webkit-appearance:button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{
  border-style:none;
  padding:0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline: 1px dotted ButtonText;}
fieldset{padding: .35em .75em .625em;}
legend{
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress{vertical-align: baseline;}
textarea{overflow: auto;}
[type=checkbox],[type=radio]{
  box-sizing: border-box;
  padding: 0;
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
  height: auto;
}
[type=search]{
  -webkit-appearance: textfield;
  outline-offset: -2px
}
[type=search]::-webkit-search-decoration{
  -webkit-appearance: none
}
::-webkit-file-upload-button{
  -webkit-appearance: button;
  font: inherit;
}
details{display: block;}
summary{display: list-item;}
template{display: none;}
[hidden]{display: none;}
/*# sourceMappingURL=normalize.min.css.map */

小结

透过重置 CSS 的方式，可以让重新设定网页元素的默认样式，也能让后续开发跨浏览器的页面样式更为一致，不论使用哪种方法，都建议稍微了解元素本身的样式，如此一来会更容易处理重置 CSS。

意见反馈