深入解析自定义的CSS重置样式

1. 什么是CSS重置?

CSS重置是指在开发网站时,将浏览器默认样式重置为一致的基准状态,并根据需要逐个元素设置自定义的样式。因为不同浏览器对于HTML元素的默认样式表现可能不同,重置可以确保网站在不同浏览器下以一致的样式展示。

1.1 为什么需要CSS重置?

浏览器默认样式是使用者及浏览器制造商各自解读HTML标准对样式的定义而产生的结果。在不同浏览器之间,这些默认样式差异可能很大,这就会引起网站出现显示上的细微差别,比如跨浏览器的间距不能正确控制。通过重置,可以使得网站的基础样式更一致,并且更好的能够控制元素表现。

1.2 重置和normalize.css有何不同?

normalize.css是一个基于重置的CSS库,它在保留一些有用的浏览器默认样式的前提下,仅重置不同浏览器下存在差异的部分,例如HTML5元素的表现。

2. 如何自定义CSS重置样式?

在自定义CSS重置样式的过程中,有一点需要注意的是:不需要为所有元素都设置样式。许多CSS重置的开源项目和指导性文件(例如 normalize.css)都试图进行全面的元素交集(elementarise)匹配。这将导致许多不必要的CSS代码。

2.1 清除默认内外边距

在渲染某些HTML元素时,浏览器会为这些元素设置默认的内外边距。例如,下图显式了Chrome浏览器默认给 <p> 元素设置的外边距。

重置这个元素的部分CSS规则,以去除它的默认内外边距:

p {

margin: 0;

padding: 0;

}

2.2 清除默认字体样式

在渲染某些HTML元素时,浏览器会为这些元素设置默认的字体样式。例如, Chrome浏览器默认给 <li> 元素设置的字体:

重置这个元素的部分CSS规则,以去除它的默认字体样式:

li {

font: inherit;

}

2.3 清除其他默认样式

其他元素的默认样式也可以被清除。例如,<a>, <button>, 和 <input> 等元素都有默认的文本装饰效果。因此,我们需要在样式重置规则中添加一个单独的样式规则来清除他们的默认文本装饰效果。

a,

button,

input,

select,

textarea {

text-decoration: none;

font: inherit;

color: inherit;

border: none;

background-color: transparent;

outline: none;

}

在这个例子中,每个元素被重置为不具有下划线,不具有文本颜色、背景色和边框,文本装饰,以及默认外边距,内边距,边界。

3. 总结

CSS重置是保证我们的网站在不同浏览器下以一致的样式展示的一种有效手段。虽然市面上已经有很多CSS重置的开源项目了,但是在实际使用中,我们也可以根据实际需要制定适合自己的重置方案。