css3技术

css reset重置基础代码_div+css教程

字号+ 作者:H5之家 来源:H5之家 2015-09-16 15:18 我要评论( )

css reset重置基础代码,学习css reset重置基础代码,css reset重置基础代码,查看css reset重置基础代码,css reset,即重置css,也就是重置默认样式。在不同浏览器

css reset,即重置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;}


下面是Eric Meyer的

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) 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{    
    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;    

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评