什么是CSS Reset?

初学CSS编码的人可能对CSS Reset并不是太熟悉,总的来说,CSS Reset就是指在你进行网站建设项目样式开发之前,通过一个CSS文件将该项目中所有元素的样式设置为最原始的状态(例如去除margin、padding,去除缩进、加粗、下划线等效果)。

为何要使用CSS Reset?

之所以要这么做的原因在于,网页元素本身就是存在一些样式的,而这些样式在不同浏览器下的渲染效果又大相径庭,所以导致CSS编码人员必须要根据不同浏览器的效果来进行调试,显得过于繁琐。
引入CSS Reset以后,至少将这些样式都恢复了原始状态,然后再通过CSS代码来对其进行样式的设定。
例如你在CSS Reset中将h1h2标签的字体加粗效果去除,然后再通过CSS代码来实现加粗效果,这样就能够保证任意浏览器的渲染效果都是相同的。

如何使用CSS Reset?

使用CSS Reset的方式非常简单,只要你把一个重置元素样式的CSS文件在head标签处引入即可(需要在所有CSS文件之前引入)。
在它之后引入的CSS文件就可以进行自定义样式的编写了。

如何编写自己的CSS Reset?

有一句非常精简有名的CSS Reset代码,就是* { padding: 0; margin: 0; border: 0; }
它的作用在于将所有元素的margin、padding以及border都去除,从而不影响后面对元素的样式结构设定。
当然,更为具体丰富的CSS Reset也有,例如著名前端团队的YUI的CSS Reset,以及在CSS Reset领域颇具知名度的达人Eric Meyer的CSS Reset。

写在最后

只要你掌握CSS Reset的编写方式,就可以结合自身编码的习惯特点定制属于自己的CSS Reset了,具体的CSS Reset可以参考文章结尾的链接。

CSS Reset参考