在当今网页设计/开发实践中,使用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;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;}五.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重设。