简单介绍几个CSSReset的方法

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

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

程序代码

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

这也是一款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: ;

    margin: ;

    }

    table {

    border-collapse: collapse;

    border-spacing: ;

    }

    fieldset,img {

    border: ;

    }

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

    }

    q:before,q:after {

    content:"";

    }

    abbr,acronym { border: ;

    }

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

    padding: ;

    border: ;

    outline: ;

    font-weight: inherit;

    font-style: inherit;

    font-size: %;

    font-family: inherit;

    vertical-align: baseline;

    }

    :focus { outline: ;}

    a, a:link, a:visited, a:hover, a:active{text-decoration:none}

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

    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: %;font-family: inherit;}

    select {margin: inherit;}

    hr {margin: ;padding: ;border: ;color: #;background-color: #;height: 1px}

Chris Poteet’s Reset CSS

    * {

    vertical-align: baseline;

    font-family: inherit;

    font-style: inherit;

    font-size: %;

    border: none;

    padding: ;

    margin: ;

    }

    body {

    padding: 5px;

    }

    h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {

    margin: 20px ;

    }

    li, dd, blockquote {

    margin-left: 40px;

    }

    table {

    border-collapse: collapse;

    border-spacing: ;

    }

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

    outline: ;

    padding: ;

    margin: ;

    border: ;

    }

    :focus {

    outline: ;

    }

    body {

    background: white;

    line-height: ;

    color: black;

    }

    ol, ul {

    list-style: none;

    }

    table {

    border-collapse: separate;

    border-spacing: ;

    }

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

    a img,:link img,:visited img { border:none }

    address { font-style:normal }

Christian Montoya Reset CSS

程序代码

    html, body, form, fieldset {

    margin: ;

    padding: ;

    font: %/% Verdana, Arial, Helvetica, sans-serif;

    }

    h1, h2, h3, h4, h5, h6, p, pre,

    blockquote, ul, ol, dl, address {

    margin: 1em ;

    padding: ;

    }

    li, dd, blockquote {

    margin-left: 1em;

    }

    form label {

    cursor: pointer;

    }

    fieldset {

    border: none;

    }

    input, select, textarea {

    font-size: %;

    font-family: inherit;

    }

Rudeworks Reset CSS

    * {

    margin: ;

    padding: ;

    border: none;

    }

    html {

    font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;

    text-shadow: # 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:   1em ;

    }

    cite, em, dfn {

    font-style: italic;

    }

    sup {

    position: relative;

    bottom: .3em;

    vertical-align: baseline;

    }

    sub {

    position: relative;

    bottom: -.2em;

    vertical-align: baseline;

    }

    li, dd, blockquote {

    margin-left: 1em;

    }

    code, kbd, samp, pre, tt, var, input[type='text'], textarea {

    font-size: %;

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

    }

    abbr, acronym {

    text-transform: uppercase;

    font-size: %;

    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: .8em;

    }

    h3 {

    font-size: .6em;

    }

    h4 {

    font-size: .4em;

    }

    h5 {

    font-size: .2em;

    }

    h6 {

    font-size: 1em;

    }

    a, a:link, a:visited, a:hover, a:active {

    outline: ;

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

    padding: ;

    border: ;

    outline: ;

    font-weight: normal;

    font-style: normal;

    font-size: %;

    font-family: inherit;

    vertical-align: baseline

    }

    body {

    line-height:

    }

    :focus {

    outline:

    }

    ol, ul {

    list-style: none

    }

    table {

    border-collapse: collapse;

    border-spacing:

    }

    blockquote:before, blockquote:after, q:before, q:after {

    content: “”

    }

    blockquote, q {

    quotes: “” “”

    }

    input, textarea {

    margin: ;

    padding:

    }

    hr {

    margin: ;

    padding: ;

    border: ;

    color: #;

    background-color: #;

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

    padding: ;

    border: ;

    outline: ;

    font-weight: inherit;

    font-style: inherit;

    font-size: %;

    font-family: inherit;

    vertical-align: baseline;

    }

    :focus {

    outline: ;

    }

    table {

    border-collapse: separate;

    border-spacing: ;

    }

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

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

    clear: both;

    visibility: hidden;

    }

    .clearfix {display: inline-block;}

    * html .clearfix {height: %;}

    .clearfix {display: block;}

巴特西

简单介绍几个CSSReset的方法

最新文章

热门文章