css Reset

浏览数：32 / 时间：2015年06月09日

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