日期:2014-02-13 浏览次数:21317 次
在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加款式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完满世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相反的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完满的世界,理想中发生的失窃却总是恰恰相反,很多CSS款式在不同的浏览器中有着不同的解释和呈现。
相关CSS文章:YaHoo方法:CSS Reset重设浏览器的款式
当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以本人的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题。更糟的是,有的浏览器完全无视CSS的一些声明和属性。
正由于上述冲突和问题仍然存在于这个”不完满的世界”,所以一些设计师想到了一种避免浏览器兼容性问题的方法,那就是CSS Reset,什么是CSS Reset?我们可以把它叫做CSS重设,也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS款式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照本人的默认值来为没有定义的款式赋值,所以我们要先定义好一些CSS款式,来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。
今天爱易网任务室总结收集了15套CSS重设实例,您可以在前端开发任务中进行参考和使用,有些是很简化的CSS Reset,有些则是非常复杂非常全面的CSS Reset,至于使用哪套,全看您的爱好或需求。
爱易网任务室会经常更新前端开发/网页设计等相关技术及教程文章,欢迎订阅本博客来及时浏览本博客的最新教程及资源。
* {
padding: 0;
margin: 0;
}
这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解这两个属性默认值上的”分歧”。
* {
padding: 0;
margin: 0;
border: 0;
}
这是在上一个重设的基础上添加了对border属性的重设,初始值为0的确能避免一些问题。
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
在前两个的基础上添加了outline属性的重设,防止一些冲突。
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
该CSS重设方法出自Perishable Press,这是他常用的方法。
html, body {
padding: 0;
margin: 0;
}
html {
font-size:1em;
}
body {
font-size:100%;
}
a img, :link img, :visited img {
border:0px;
}
这个重设方法将html和body下元素的padding和margin都设为0,并分别为html标签和body标签下的所有元素设置了初始的字体大小,最重要的是把有链接的图片的默认边框去掉了。
* {
vertical-align: baseline;
font-family: inherit;
fo
nt-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;