15套css reset重设方法实例详解

发布时间:2020-08-06编辑:脚本学堂
有关css reset重设方法的例子,15套css reset重设方法的实现代码,包括最简化的css reset重设,浓缩实用型CSS Reset重设等,需要的朋友参考下。

15套css reset重设方法

css重设就是由于各种浏览器解释css样式的初始值有所不同,导致设计师在没有定义某个css属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以要先定义好一些css样式,来让所有浏览器都按照同样的规则解释css,这样就能避免发生这种问题。

一、最简化的css reset(重设) :
 

复制代码 代码示例:
* {  
      padding: 0;  
      margin: 0;  

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

复制代码 代码示例:
* {  
padding: 0;  
margin: 0;  
border: 0;  

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

复制代码 代码示例:
* {  
outline: 0;  
padding: 0;  
margin: 0;  
border: 0;  

 

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

二,浓缩实用型css reset(重设):
 

复制代码 代码示例:
* {  
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:
 

复制代码 代码示例:
html, body {   
padding: 0;   
margin: 0;   
}  
html {  
font-size:1em;  
}   
body {  
font-size:100%;  
}   
a img, :link img, :visited img {  
border:0px;  
}  
 

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

四,siolon’s global reset
 

复制代码 代码示例:
* {   
    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: 20px 0;  
}  
li, dd, blockquote {   
    margin-left: 40px;  
}   
table {   
    border-collapse: collapse;   
    border-spacing: 0;   

五.Shaun Inman’s 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 {   
    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
 

复制代码 代码示例:
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:
 

复制代码 代码示例:
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
 

复制代码 代码示例:
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
 

复制代码 代码示例:
* {   
    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: 20px 0;   
}   
li, dd, blockquote {   
    margin-left: 40px;   
}   
table {   
    border-collapse: collapse;   
    border-spacing: 0;