目前比较全的CSS reset重设方法总结

时间:2021-05-08

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

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

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

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

CSS Code复制内容到剪贴板
  • *{
  • padding:0;
  • margin:0;
  • }
  •   这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

    CSS Code复制内容到剪贴板
  • *{
  • padding:0;
  • margin:0;
  • border:0;
  • }
  •   这是在上一个重设的基础上添加了对border属性的重设,初始值为0的确能避免一些问题。

    CSS Code复制内容到剪贴板
  • *{
  • outline:0;
  • padding:0;
  • margin:0;
  • border:0;
  • }
  •   在前两个的基础上添加了outline属性的重设,防止一些冲突。


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

    CSS Code复制内容到剪贴板
  • *{
  • vertical-align:baselinebaseline;
  • 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:

    CSS Code复制内容到剪贴板
  • html,body{
  • padding:0;
  • margin:0;
  • }
  • html{
  • font-size:1em;
  • }
  • body{
  • font-size:100%;
  • }
  • aimg,:linkimg,:visitedimg{
  • border:0px;
  • }
  •   这个重设方法将html和body下元素的padding和margin都设为0,并分别为html标签和body标签下的所有元素设置了初始的字体大小,最重要的是把有链接的图片的默认边框去掉了。

    四.Siolon’s Global Reset

    CSS Code复制内容到剪贴板
  • *{
  • vertical-align:baselinebaseline;
  • 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:20px0;
  • }
  • li,dd,blockquote{
  • margin-left:40px;
  • }
  • table{
  • border-collapse:collapse;
  • border-spacing:0;
  • }
  • 五.Shaun Inman’s Global Reset

    CSS Code复制内容到剪贴板
  • 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:

    CSS Code复制内容到剪贴板
  • 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{
  • font-weight:normal;
  • font-style:normal;
  • }
  • ol,ul{
  • list-style:none;
  • }
  • caption,th{
  • text-align:left;
  • }
  • h1,h2,h3,h4,h5,h6{
  • font-weight:normal;
  • font-size:100%;
  • }
  • q:before,q:after{
  • content:”;
  • }
  • abbr,acronym{
  • border:0;
  • }
  • 七.Eric Meyer’s CSS Reset

    CSS Code复制内容到剪贴板
  • html,body,div,span,applet,object,iframe,table,caption,
  • tbody,tfoot,thead,tr,th,td,del,dfn,em,font,img,ins,
  • kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,
  • h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
  • acronym,address,big,cite,code,dl,dt,dd,ol,ul,li,
  • fieldset,form,label,legend{
  • vertical-align:baselinebaseline;
  • font-family:inherit;
  • font-weight:inherit;
  • font-style:inherit;
  • font-size:100%;
  • outline:0;
  • padding:0;
  • margin:0;
  • border:0;
  • }
  • :focus{
  • outline:0;
  • }
  • body{
  • background:white;
  • line-height:1;
  • color:black;
  • }
  • ol,ul{
  • list-style:none;
  • }
  • table{
  • border-collapse:separate;
  • border-spacing:0;
  • }
  • caption,th,td{
  • font-weight:normal;
  • text-align:left;
  • }
  • blockquote:before,blockquote:after,q:before,q:after{
  • content:“”;
  • }
  • blockquote,q{
  • quotes:“”“”;
  • }
  • 八.Condensed Meyer Reset:

    CSS Code复制内容到剪贴板
  • 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;
  • }
  • fieldset,img{
  • border:0;
  • }
  • table{
  • border-collapse:collapse;
  • border-spacing:0;
  • }
  • ol,ul{
  • list-style:none;
  • }
  • address,caption,cite,code,dfn,em,strong,th,var{
  • font-weight:normal;
  • font-style:normal;
  • }
  • caption,th{
  • text-align:left;
  • }
  • h1,h2,h3,h4,h5,h6{
  • font-weight:normal;
  • font-size:100%;
  • }
  • q:before,q:after{
  • content:”;
  • }
  • abbr,acronym{
  • border:0;
  • }
  • 九.Ateneu Popular CSS Reset

    CSS Code复制内容到剪贴板
  • html,body,div,span,applet,object,iframe,h1,h2,h3,
  • h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
  • address,big,cite,code,del,dfn,em,font,img,ins,
  • kbd,q,s,samp,small,strike,strong,sub,sup,tt,
  • var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
  • table,caption,tbody,tfoot,thead,tr,th,td{
  • margin:0;
  • padding:0;
  • border:0;
  • outline:0;
  • font-weight:inherit;
  • font-style:inherit;
  • font-size:100%;
  • font-family:inherit;
  • vertical-align:baselinebaseline;
  • }
  • :focus{
  • outline:0;
  • }
  • a,a:link,a:visited,a:hover,a:active{
  • text-decoration:none
  • }
  • table{
  • border-collapse:separate;
  • border-spacing:0;
  • }
  • th,td{
  • text-align:left;
  • font-weight:normal;
  • }
  • img,iframe{
  • border:none;
  • text-decoration:none;
  • }
  • ol,ul{
  • list-style:none;
  • }
  • input,textarea,select,button{
  • font-size:100%;
  • font-family:inherit;
  • }
  • select{
  • margin:inherit;
  • }
  • hr{
  • margin:0;
  • padding:0;
  • border:0;
  • color:#000;
  • background-color:#000;
  • height:1px
  • }
  • 十.Chris Poteet’s Reset CSS

    CSS Code复制内容到剪贴板
  • *{
  • vertical-align:baselinebaseline;
  • font-family:inherit;
  • font-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:20px0;
  • }
  • li,dd,blockquote{
  • margin-left:40px;
  • }
  • table{
  • border-collapse:collapse;
  • border-spacing:0;
  • }
  • 十一.Tantek Celik Reset CSS

    CSS Code复制内容到剪贴板
  • :link,:visited{text-decoration:none}
  • ul,ol{list-style:none}
  • h1,h2,h3,h4,h5,h6,pre,code{font-size:1em;}
  • ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
  • {margin:0;padding:0}
  • aimg,:linkimg,:visitedimg{border:none}
  • address{font-style:normal}
  • 十二.Christian Montoya Reset CSS

    CSS Code复制内容到剪贴板
  • html,body,form,fieldset{
  • margin:0;
  • padding:0;
  • font:100%/120%Verdana,Arial,Helvetica,sans-serif;
  • }
  • h1,h2,h3,h4,h5,h6,p,pre,
  • blockquote,ul,ol,dl,address{
  • margin:1em0;
  • padding:0;
  • }
  • li,dd,blockquote{
  • margin-left:1em;
  • }
  • formlabel{
  • cursor:pointer;
  • }
  • fieldset{
  • border:none;
  • }
  • input,select,textarea{
  • font-size:100%;
  • font-family:inherit;
  • }
  • 十三.Rudeworks Reset CSS

    CSS Code复制内容到剪贴板
  • *{
  • margin:0;
  • padding:0;
  • border:none;
  • }
  • html{
  • font:62.5%“LucidaGrande”,Lucida,Verdana,sans-serif;
  • text-shadow:#0000px0px0px;
  • }
  • ul{
  • list-style:none;
  • list-style-type:none;
  • }
  • h1,h2,h3,h4,h5,h6,p,pre,
  • blockquote,ul,ol,dl,address{
  • font-weight:normal;
  • margin:001em0;
  • }
  • cite,em,dfn{
  • font-style:italic;
  • }
  • sup{
  • position:relative;
  • bottombottom:0.3em;
  • vertical-align:baselinebaseline;
  • }
  • sub{
  • position:relative;
  • bottombottom:-0.2em;
  • vertical-align:baselinebaseline;
  • }
  • li,dd,blockquote{
  • margin-left:1em;
  • }
  • code,kbd,samp,pre,tt,var,input[type='text'],textarea{
  • font-size:100%;
  • font-family:monaco,“LucidaConsole”,courier,mono-space;
  • }
  • del{
  • text-decoration:line-through;
  • }
  • ins,dfn{
  • border-bottom:1pxsolid#ccc;
  • }
  • small,sup,sub{
  • font-size:85%;
  • }
  • abbr,acronym{
  • text-transform:uppercase;
  • font-size:85%;
  • letter-spacing:.1em;
  • border-bottom-style:dotted;
  • border-bottom-width:1px;
  • }
  • aabbr,aacronym{
  • border:none;
  • }
  • sup{
  • vertical-align:super;
  • }
  • sub{
  • vertical-align:sub;
  • }
  • h1{
  • font-size:2em;
  • }
  • h2{
  • font-size:1.8em;
  • }
  • h3{
  • font-size:1.6em;
  • }
  • h4{
  • font-size:1.4em;
  • }
  • h5{
  • font-size:1.2em;
  • }
  • h6{
  • font-size:1em;
  • }
  • a,a:link,a:visited,a:hover,a:active{
  • outline:0;
  • text-decoration:none;
  • }
  • aimg{
  • border:none;
  • text-decoration:none;
  • }
  • img{
  • border:none;
  • text-decoration:none;
  • }
  • label,button{
  • cursor:pointer;
  • }
  • input:focus,select:focus,textarea:focus{
  • background-color:#FFF;
  • }
  • fieldset{
  • border:none;
  • }
  • .clear{
  • clear:both;
  • }
  • .float-left{
  • float:left;
  • }
  • .float-rightright{
  • float:rightright;
  • }
  • body{
  • text-align:center;
  • }
  • #wrapper{
  • margin:0auto;
  • text-align:left;
  • }
  • 十四. Anieto2K Reset CSS

    CSS Code复制内容到剪贴板
  • html,body,div,span,applet,object,iframe,
  • h1,h2,h3,h4,h5,h6,p,
  • blockquote,pre,a,abbr,acronym,address,big,
  • cite,code,del,dfn,em,font,img,
  • ins,kbd,q,s,samp,small,strike,
  • strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,
  • fieldset,form,label,legend,
  • table,caption,tbody,tfoot,thead,tr,th,td,
  • center,u,b,i{
  • margin:0;
  • padding:0;
  • border:0;
  • outline:0;
  • font-weight:normal;
  • font-style:normal;
  • font-size:100%;
  • font-family:inherit;
  • vertical-align:baselinebaseline
  • }
  • body{
  • line-height:1
  • }
  • :focus{
  • outline:0
  • }
  • ol,ul{
  • list-style:none
  • }
  • table{
  • border-collapse:collapse;
  • border-spacing:0
  • }
  • blockquote:before,blockquote:after,q:before,q:after{
  • content:“”
  • }
  • blockquote,q{
  • quotes:“”“”
  • }
  • input,textarea{
  • margin:0;
  • padding:0
  • }
  • hr{
  • margin:0;
  • padding:0;
  • border:0;
  • color:#000;
  • background-color:#000;
  • height:1px
  • }
  • 十五.CSSLab CSS Reset

    CSS Code复制内容到剪贴板
  • html,body,div,span,applet,object,iframe,h1,h2,h3,
  • h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,
  • big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,
  • small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,
  • fieldset,form,label,legend,table,caption,tbody,tfoot,
  • thead,tr,th,td{
  • margin:0;
  • padding:0;
  • border:0;
  • outline:0;
  • font-weight:inherit;
  • font-style:inherit;
  • font-size:100%;
  • font-family:inherit;
  • vertical-align:baselinebaseline;
  • }
  • :focus{
  • outline:0;
  • }
  • table{
  • border-collapse:separate;
  • border-spacing:0;
  • }
  • caption,th,td{
  • text-align:left;
  • font-weight:normal;
  • }
  • aimg,iframe{
  • border:none;
  • }
  • ol,ul{
  • list-style:none;
  • }
  • input,textarea,select,button{
  • font-size:100%;
  • font-family:inherit;
  • }
  • select{
  • margin:inherit;
  • }
  • ol{margin-left:2em;}
  • .clearfix:after{
  • content:“.”;
  • display:block;
  • height:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix{display:inline-block;}
  • *html.clearfix{height:1%;}
  • .clearfix{display:block;}
  •   好了,CSS重设目前先总结到这里,这15套重设方法其实都是有共同点的,也许有的实现方法不同,但大部分都是同一个目的,就是为了让更多的浏览器能显示同样的效果。有了这些CSS重设作为资料和参考,也许会对你的工作有所帮助甚至提高效率,但是,毕竟这些重设都是别人写的,你完全也可以为自己量身定制一套CSS重设。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章