zoukankan      html  css  js  c++  java
  • CSS Reset

    正在使用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- 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;}

    像你看到的,这些都大同小异,需求不同,方法也就不同。我自己偏向于喜欢Yahoo的CSS Reset,也用了Yahoo的代码。你,有自己的CSS Reset体系吗?或许可以分享出来!


    本文来源于 站码ZMOOL(www.zmool.com),转载请注明,谢谢!
    原文地址:http://zmool.com/web2html/csstuts/201002/csstuts_0225253R0102538.html

  • 相关阅读:
    C# 正则表达式学习笔记(三)
    由于WEB服务器上的"ISAP"和"CGI"限制列表设置,无法提供您请求的页面——错误解决
    用户IIS APPOOL\Classic.NET AppPool 登陆失败——错误解决
    silverlight 学习笔记 (二): silverlight的开发模式
    CAB学习():使用SCSF创建shell的过程
    关于css及安全配置的注意事项
    silverlight 学习笔记 (四): MVVM+WCF Ria开发架构
    silverlight 学习笔记 (三): silverlight中的数据绑定
    软件开发了10年,迷茫了
    silverlight 学习笔记 (五): MVVM Light Toolkits 之 RealCommand
  • 原文地址:https://www.cnblogs.com/leejersey/p/2334167.html
Copyright © 2011-2022 走看看