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: baseline;
       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: baseline;
    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: baseline; 
    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: baseline; 

: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;
    
    height: 1px
}

十.Chris Poteet’s Reset CSS

* { 
    vertical-align: baseline; 
    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; 
}

十一.Tantek Celik Reset CSS

: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 } 
a img,:link img,:visited img { border:none } 
address { font-style:normal }

十二.Christian Montoya Reset CSS

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: 1em 0; 
    padding: 0; 

li, dd, blockquote { 
    margin-left: 1em; 

form label { 
    cursor: pointer; 

fieldset { 
    border: none; 

input, select, textarea { 
    font-size: 100%; 
    font-family: inherit; 
}

十三.Rudeworks Reset CSS

* { 
    margin: 0; 
    padding: 0; 
    border: none; 

html { 
    font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif; 
    text-shadow: #000 0px 0px 0px; 

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: 0 0 1em 0; 

cite, em, dfn { 
    font-style: italic; 

sup { 
    position: relative; 
    bottom: 0.3em; 
    vertical-align: baseline; 

sub { 
    position: relative; 
    bottom: -0.2em; 
    vertical-align: baseline; 

li, dd, blockquote { 
    margin-left: 1em; 

code, kbd, samp, pre, tt, var, input[type=‘text‘], textarea { 
    font-size: 100%; 
    font-family: monaco, “Lucida Console”, courier, mono-space; 

del { 
    text-decoration: line-through; 

ins, dfn { 
    border-bottom: 1px solid #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; 

a abbr, a acronym { 
    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; 

a img { 
    border: none; 
    text-decoration: none; 

img { 
    border: none; 
    text-decoration: none; 

label, button { 
    cursor: pointer; 

input:focus, select:focus, textarea:focus { 
     

fieldset { 
    border: none; 

.clear { 
    clear: both; 

.float-left { 
    float: left; 

.float-right { 
    float: right; 

body { 
    text-align: center; 

#wrapper { 
    margin: 0 auto; 
    text-align: left; 
}

十四. Anieto2K Reset CSS

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: baseline 

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; 
     
    height: 1px 
}

十五.CSSLab 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: baseline; 

:focus { 
    outline: 0; 

table { 
    border-collapse: separate; 
    border-spacing: 0; 

caption, th, td { 
    text-align: left; 
    font-weight: normal; 

a img, iframe { 
    border: none; 

ol, ul { 
    list-style: none; 

input, textarea, select, button { 
    font-size: 100%; 
    font-family: inherit; 

select { 
    margin: inherit; 

/* Fixes incorrect placement of numbers in ol’s in IE6/7 */ 
ol { margin-left:2em; } 
/* == clearfix == */ 
.clearfix:after { 
    content: “.”; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 

.clearfix {display: inline-block;} 
* html .clearfix {height: 1%;} 
.clearfix {display: block;}

(转自 http://www.cnblogs.com/hnyei/archive/2011/10/04/2198779.html)

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。