从输入中删除所有默认样式 - CSS

在开发网页时，通常会发现元素的默认样式会干扰我们所设定的样式。因此，这时候就需要 Remove Default Styles（删除默认样式）来确保最终呈现效果与我们所期望的一致。

如何删除所有默认样式？

通常来说，删除默认样式有两种方法：一种是手动覆盖所有的默认样式，另一种是将默认样式重置。

手动覆盖所有的默认样式

手动覆盖所有的默认样式比较繁琐，因为不同的浏览器对于同一元素的默认样式可能会有所不同。所以，要想手动覆盖所有浏览器的默认样式，就需要在 CSS 文件中添加大量的样式，这个过程非常耗时。

下面是一个例子，用于展示如何覆盖所有默认样式：

/* Remove all default styles */
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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

这个例子中，我们对所有元素的 margin、padding、border 属性等进行了覆盖。虽然这个方法比较麻烦，但是它确保了所有的浏览器都得到了相同的样式。

重置默认样式

为了避免手动编写大量的样式表，我们可以使用 CSS Reset（CSS 重置）来清除默认样式。CSS Reset 是一种特殊的样式表，它通过为所有 HTML 元素设置相同的样式来实现删除默认样式的效果。

以下是一个很好的 CSS Reset 示例：

/* Reset all default styles */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

在这个 CSS Reset 中，我们使用通用选择器 * 来为所有 HTML 元素设置相同的样式。这样可以确保所有元素都被重置为相同的样式，避免了手动编写大量样式表的麻烦。

总结

删除默认样式是网页开发中的一个必要步骤，因为它能确保网页最终呈现效果的一致性。无论是手动覆盖所有的默认样式，还是使用 CSS Reset，开发人员都需要了解如何删除默认样式，并根据需要选择最适合自己的方法。