简单介绍几个CSSReset的方法

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

对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，必须要有选择地进行CSS重设，以减少资源浪费。

正在使用CSS的你，用过CSS Reset吗？当然，或许你用了，却不知道正在用，比如你可能经常用到：

程序代码

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

这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。

这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。

对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。

下面是Yahoo的CSS重设代码，也是受最多人喜爱的CSS Reset方法，YUI选择的方法是：

程序代码

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

OK，相信你也已经了解了CSS重设的目的，或许你也可以根据自己的喜好，写一个自己的CSS重设系统，毕竟大家的需求和习惯的不同的。而你可以参照下面的几款：

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;background-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;
    }
    Eric Meyer Reset CSS
    程序代码
    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: "" "";
    }

程序代码

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 {
    background-color: #FFF;
    }
    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;
    background-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;}