zoukankan      html  css  js  c++  java
  • 简单介绍几个CSSReset的方法

    对于小型的网站来说,用这个并不会带来大的资源浪费,但如果是像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- 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;}
  • 相关阅读:
    VMware workstation安装Windows Server 2012 R2步骤详解(附下载链接)
    英文系统下Oracle SQL Developer 汉化
    C# .NET Core Linux、Windows统一文件路径解决方法
    C# DataTable 转JSON、List 转DataTable、DataTable转List
    IIS无法启动计算机上"."的服务W3SVC(World Wide Web 发布服务)正在停止
    SQLServer 数据库变成单个用户后无法访问的解决方法
    C# webform中无法获取修改后的textbox值
    SqlServer try catch 捕获触发器存储过程异常,结合 transaction 事务
    DataTable.Select筛选过滤数据返回DataRow[]转为DataTable添加到DataSet
    easyui datagrid checkbox复选框取消单击选中事件、初始全选全不选等问题解决
  • 原文地址:https://www.cnblogs.com/aobingyan/p/3775266.html
Copyright © 2011-2022 走看看