zoukankan      html  css  js  c++  java
  • 【集】reset.css 收藏

    * { 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;}
    KISSY CSS Reset

    代码
    /*
    KISSY CSS Reset
    理念:清除和重置是紧密不可分的
    特色:1.适应中文 2.基于最新主流浏览器
    维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
    */

    /* 清除内外边距 */
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
    /* structural elements 结构元素 */
    dl, dt, dd, ul, ol, li,
    /* list elements 列表元素 */
    pre,
    /* text formatting elements 文本格式元素 */
    fieldset, lengend, button, input, textarea,
    /* form elements 表单元素 */
    th, td
    { /* table elements 表格元素 */
    margin
    : 0;
    padding
    : 0;
    }

    /* 设置默认字体 */
    body,
    button, input, select, textarea
    { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font
    : 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
    }

    h1
    { font-size: 18px; /* 18px / 12px = 1.5 */ }
    h2
    { font-size: 16px; }
    h3
    { font-size: 14px; }
    h4, h5, h6
    { font-size: 100%; }

    address, cite, dfn, em, var
    { font-style: normal; } /* 将斜体扶正 */
    code, kbd, pre, samp, tt
    { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
    small
    { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */

    /* 重置列表元素 */
    ul, ol
    { list-style: none; }

    /* 重置文本格式元素 */
    a
    { text-decoration: none; }
    a:hover
    { text-decoration: underline; }

    abbr[title], acronym[title]
    { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
    border-bottom
    : 1px dotted;
    cursor
    : help;
    }

    q:before, q:after
    { content: ''; }

    /* 重置表单元素 */
    legend
    { color: #000; } /* for ie6 */
    fieldset, img
    { border: none; } /* img 搭车:让链接里的 img 无边框 */
    /* 注:optgroup 无法扶正 */
    button, input, select, textarea
    {
    font-size
    : 100%; /* 使得表单元素在 ie 下能继承字体大小 */
    }

    /* 重置表格元素 */
    table
    {
    border-collapse
    : collapse;
    border-spacing
    : 0;
    }

    /* 重置 hr */
    hr
    {
    border
    : none;
    height
    : 1px;
    }

    /* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
    html
    { overflow-y: scroll; }
    测试页面在这里:CSS Reset Test.

  • 相关阅读:
    Django的FBV和CBV
    爬虫-----selenium模块自动爬取网页资源
    python摸爬滚打之day33----线程
    python摸爬滚打之day032 管道 数据共享 进程池
    python摸爬滚打之day030----进程
    爬虫重复请求超时
    指定页面刷新时间前端
    requests post请求,加上会话功能 以及url 编码问题
    爬虫常用mysql
    python操作excel以及word文档,pdf文档
  • 原文地址:https://www.cnblogs.com/5tao/p/1791726.html
Copyright © 2011-2022 走看看