css reset重置基础代码


cssreset,即重置css,也就是重置默认样式。在不同浏览器,HTML中标签的默认样式有一个默认属性值,渲染出来的效果不尽相同,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式,以方便统一,从而提高开发效率,提高样式代码的重用,减少重复代码,减少维护成本。


一般调页面的时候都写个:


*{margin:0;padding:0;}

方便简洁,但是实际的项目就不要这么写了,因为“*”是全局的意思,即全部标签都要运行这么一句东西,这样开销就大了,一般是采用按所需标签陈列的方式,你用哪些就写哪些,如下:

body,form,div,span,ul,ol,li{margin:0;padding:0;}


下面的是我目前用到的reset

body,form,div,span,ul,ol,li,p,pre,dl,dt,dd,h1,h2,h3,h4,h5,h6,em,a,fieldset,legend,address,label,textarea,select,input,figure,table,th,td,b,i{margin:0;padding:0;}
fieldset,img{border:0;}
ul,li{list-style:none;}
em,i{font-style:normal;}
table{border-collapse:separate;border-spacing:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus,input,button,select,textarea{outline:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-variant:normal;}
input,select,img{vertical-align:middle;}
legend{display:none;}
textarea{resize:none;}
.clear{clear:both;}
.clearfix{zoom:1;}
.clearfix:after{clear:both;content:"";display:block;height:0;line-height:0;visibility:hidden;}


下面是EricMeyer的

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:"""";
}

 

 

下面是Yahoo’s(YUI)CSSReset

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;
}


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3