在开发网站或应用程序时，CSS是关键技术之一。它可以使您的网站看起来更美观和专业。但是，每个浏览器都有自己的默认样式，造成了我们开发者难以控制所谓样式的问题。为了降低浏览器样式之间的差异，需要重置样式表，这时候CSS Reset就变得非常有用。本文将会回顾CSS Reset的历史，并提供CSS Reset的解决方案。
什么是CSS Reset？
CSS Reset是一系列预定义的样式表规则，这些规则将Web浏览器强制为不含有任何样式，这些样式在每个浏览器之间是一致的。适当的使用CSS Reset可以确保在所有浏览器和设备上都可以编辑Web页面并保持相同样式。
CSS Reset的历史
尽管没有明确的创建者，但CSS Reset的历史可以追溯到2007年，这时 Eric Meyer 开发了第一个CSS Reset并包含在他的CSS框架“Blueprint”中。这个CSS Reset非常基础，主要清除了文本和列表的样式，并定义了一些默认样式，例如选择内容，链接的颜色，等等。
此后，许多其他开发者也创建了他们自己的CSS Reset。其中最流行的CSS Reset可能是Normalize.css，由 Nicolas Gallagher 和 Jonathan Neal 开发并基于Eric Meyer's Reset。Normalize.css专注于保持现代浏览器的一致性，并为常用元素提供了合理的样式。
CSS Reset的示例
每个CSS Reset都有其不同之处，这取决于你选择哪一个。以下是Eric Meyer和Normalize.css的样例：
Eric Meyer CSS Reset
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ -
Normalize.css
-- -------------------- ---- ------- -- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- --------------------- ----- -- - -- ---------------------------- ------------ - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- ------------ ---------- -------------- ------------------- ------ ---- ------- ------- ---------- ------ ----------- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ----- -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - ---------------- --------- ------- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------ ------- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- ----- ---- ---- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - --- - --- --- ------- ---- ---- -- --- --------- -- ----- - ---------- ---- - --- - ------- ----- --- ----- -------- ---- --------- --- ---- ------ -- - --- --------- -- ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ------- ------- - --- - ---- ------ - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------------ ----- -- - -- ------- -- -- - -- - --- - ---- --- -------- -- --- - -- ---- --- -------- -- ----- -- ------- ----- - -- - -- --------- -------- - --- - ------ --- ----------- -- ---- --------- -- ----- -------- --- --- - -- ------ --- ----------- -- ---- --------- -- -------- -- ------- ------ - -- - -- --------------- ----- - --- - ------- --- --------- -- ----- ------- -- --- --- ------- -- ------- ---------------- --------------- --------------- - ------------------- ------- - --- - ------ --- ----- ------ --- ------- -- -------- -- ------------------ - ------------- ----- -------- -- - --- - ------- --- ----- ------ ----- -- --- -------- ----- -- --------------- - -------- --- ------ ----------- - --- - ------ --- ---------- - ----------- ------ -- -------- -- ---------------- - ----------- ----- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- ---- --- -------- -- ------- - -------- ------ - -- - --- --- ------- ------ -- ----- -- ---- --- ------- -- ------- - -------- ---------- - -- ---- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- ---- -- -------- - -------- ----- - --- - --- --- ------- ---------------- -- ------- -------- --- ------ -- -------- - -------- ----- -
这两个CSS Reset都可以自定义和修改，但二者的目的是相同的，即移除浏览器默认的样式和设置元素的公共属性。选择和使用CSS Reset还取决于个人站点的需求和开发者的风格。
CSS Reset解决方案
虽然Eric Meyer的Reset和Normalize.css是两种广泛使用的CSS Reset，但仍有一些其他的解决方案可供选择。以下是其中一些：
YUI Reset
YUI Reset是一种混合Reset和Normalize.css，具有更多的样式复位，使YUI框架可以跨多种浏览器风格保持一致。
Reboot
Reboot是Bootstrap的CSS Reset，提供基础的排版，包括断点和排版标准。
HTML5 Boilerplate
HTML5 Boilerplate是一个大而全的CSS Reset，旨在为您提供一个完整的HTML CSS JS模板，包括响应式模板和框架构建。
总结
选择正确的CSS Reset可以使我们节省时间和精力。它可以确保我们的样式在不同浏览器和设备上的一致性，并最大限度地限制不必要的默认样式。不同的CSS Reset有很多特点，您可以根据自己的需求和开发风格选择使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6487e52448841e989467018e