新闻资讯

精品主题,实战科普,最新行业热点话题,随时掌握云上咨讯。

当前位置:首页 >新闻资讯 >评审奖励
目前比较全的CSS重设(reset)方法总结
来源:中科服    发布时间:2015-07-10    文章分类:评审奖励     分享:

在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。

当今流行的浏览器(:FirefoxOperaInternet ExplorerChromeSafari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题。更糟的是,有的浏览器完全无视CSS的一些声明和属性。

 

正因为上述冲突和问题依然存在于这个”不完美的世界”,所以一些设计师想到了一种避免浏览器兼容性问题的方法,那就是CSS Reset,什么是CSS Reset?我们可以把它叫做CSS重设,也有人叫做CSS复位、默认CSSCSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。

 

今天暴风彬彬总结收集了15CSS重设实例,您可以在前端开发工作中进行参考和使用,有些是很简化的CSS Reset,有些则是非常复杂非常全面的CSS Reset,至于使用哪套,全看您的爱好或需要。

 

Go会经常更新前端开发/网页设计等相关技术及教程文章,欢迎订阅本博客来及时浏览本博客的最新教程及资源。

 

.最简化的CSS Reset(重设) :

* {

      padding: 0;

      margin: 0;

}

 

 

 

这是最普遍最简单的CSS重设,将所有元素的paddingmargin值都设为0,可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

 

* {

       padding: 0;

       margin: 0;

       border: 0;

}

 

 

 

这是在上一个重设的基础上添加了对border属性的重设,初始值为0的确能避免一些问题。

 

* {

       outline: 0;

       padding: 0;

       margin: 0;

       border: 0;

}

 

 

在前两个的基础上添加了outline属性的重设,防止一些冲突。

 

.浓缩实用型CSS Reset(重设):

* {

       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,这是他常用的方法。

 

.Poor Man CSS Reset:

html, body {

       padding: 0;

       margin: 0;

}

html {

       font-size:1em;

}

body {

       font-size:100%;

}

a img, :link img, :visited img {

       border:0px;

}

 

 

 

这个重设方法将htmlbody下元素的paddingmargin都设为0,并分别为html标签和body标签下的所有元素设置了初始的字体大小,最重要的是把有链接的图片的默认边框去掉了。

 

.Siolons Global Reset

{

    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;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

 

 

.Shaun Inmans Global Reset

 

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {

    padding: 0;

    margin: 0;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

    fieldset, img, abbr {

    border: 0;

}

address, caption, cite, code, dfn, em,

h1, h2, h3, h4, h5, h6, strong, th, var {

    font-weight: normal;

    font-style: normal;

}

ul {

    list-style: none;

}

caption, th {

    text-align: left;

}

h1, h2, h3, h4, h5, h6 {

    font-size: 1.0em;

}

q:before, q:after {

    content: ;

}

a, ins {

    text-decoration: none;

}

 

 

 

.Yahoo(YUI) CSS Reset:

 

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,

form,fieldset,input,textarea,p,blockquote,th,td {

    padding: 0;

    margin: 0;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

fieldset,img {

    border: 0;

}

address,caption,cite,code,dfn,em,strong,th,var

返回列表

申请试用

请填写以下信息,我们回尽快与您联系。如有疑问可致电18611229252

你知道你的Internet Explorer是过时了吗?

为了得到我们网站最好的体验效果,我们建议您升级到最新版本的Internet Explorer或选择另一个web浏览器.一个列表最流行的web浏览器在下面可以找到.