• 重置默认样式 css reset


    html { 
    overflow-x:auto; 
    overflow-y:scroll; 

    body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td { 
    font-weight:400; 
    margin:0; 
    padding:0; 

    h1, h2, h3, h4, h4, h5 { 
    margin:0; 
    padding:0; 

    body { 
     
    color:#666666; 
    font-family:Helvetica,Arial,sans-serif; 
    font-size:12px; 
    padding:0 10px; 
    text-align:left; 

    select { 
    font-size:12px; 

    table { 
    border-collapse:collapse; 

    fieldset, img { 
    border:0 none; 

    fieldset { 
    margin:0; 
    padding:0; 

    fieldset p { 
    margin:0; 
    padding:0 0 0 8px; 

    legend { 
    display:none; 

    address, caption, em, strong, th, i { 
    font-style:normal; 
    font-weight:400; 

    table caption { 
    margin-left:-1px; 

    hr { 
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #E4E4E4; 
    border-1px 0; 
    clear:both; 
    height:2px; 
    margin:5px 0; 
    overflow:hidden; 

    ol, ul { 
    list-style-image:none; 
    list-style-position:outside; 
    list-style-type:none; 

    caption, th { 
    text-align:left; 

    q:before, q:after, blockquote:before, blockquote:after { 
    content:""; 

    百度有啊(www.youa.com):(架构基本上是模仿YUI来做的) 
    body { 
    font-family:arial,helvetica,sans-serif; 
    font-size:13px; 
    font-size-adjust:none; 
    font-stretch:normal; 
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal; 
    line-height:1.4; 
    text-align:center; 

    body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td { 
    margin:0; 
    padding:0; 

    h1, h2, h3, h4, h5, h6 { 
    font-size:100%; 
    font-weight:normal; 

    table { 
    font-size:inherit; 

    input, select { 
    font-family:arial,helvetica,clean,sans-serif; 
    font-size:100%; 
    font-size-adjust:none; 
    font-stretch:normal; 
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal; 
    line-height:normal; 

    button { 
    overflow:visible; 

    th, em, strong, b, address, cite { 
    font-style:normal; 
    font-weight:normal; 

    li { 
    list-style-image:none; 
    list-style-position:outside; 
    list-style-type:none; 

    img, fieldset { 
    border:0 none; 

    ins { 
    text-decoration:none; 

    在《超越css》一书中建议我们做网站开始重置所有默认样式: 
    /* Normalizes margin,padding */ 
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0} 
    /* Normalizes font-size for headers */ 
    h1,h2,h3,h4,h5,h6 { font-size:100%} 
    /* Removes list-style from lists */ 
    ol,ul { list-style:none } 
    /* Normalizes font-size and font-weight to normal */ 
    address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal } 
    /* Removes list-style from lists */ 
    table { border-collapse:collapse; border-spacing:0 } 
    /* Removes border from fieldset and img */ 
    fieldset,img { border:0 } 
    /* Left-aligns text in caption and th */ 
    caption,th { text-align:left } 
    /* Removes quotation marks from q */ 
    q:before,q:after { content:''} 
    那我们实际写代码的时候该怎么来css reset呢? 
    我个人推荐使用(Eric Meyer和YUI)的 css reset 
    Eric Meyer's 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, 
    b, u, i, center, 
    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-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 

    body { 
    line-height: 1; 

    ol, ul { 
    list-style: none; 

    blockquote, q { 
    quotes: none; 

    blockquote:before, blockquote:after, 
    q:before, q:after { 
    content: ''; 
    content: none; 

    /* remember to define focus styles! */ 
    :focus { 
    outline: 0; 

    /* remember to highlight inserts somehow! */ 
    ins { 
    text-decoration: none; 

    del { 
    text-decoration: line-through; 

    /* tables still need 'cellspacing="0"' in the markup */ 
    table { 
    border-collapse: collapse; 
    border-spacing: 0; 

    YUI: 
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 

    table { 
    border-collapse:collapse; 
    border-spacing:0; 

    fieldset,img { 
    border:0; 

    address,caption,cite,code,dfn,em,strong,th,var { 
    font-style:normal; 
    font-weight:normal; 

    ol,ul { 
    list-style:none; 

    caption,th { 
    text-align:left; 

    h1,h2,h3,h4,h5,h6 { 
    font-size:100%; 
    font-weight:normal; 

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

    abbr,acronym { border:0; 

    结合他们的css reset写法,再根据自己的实际情况,一定能写出符合自己网站的完美的css reset。 

  • 相关阅读:
    vue jsx 使用指南
    学习typescript(二)
    callback, promise, co/yield, async/await 大混战
    学习typescript(一)
    # bug 查找 (一) 快速记录 IE8 下三个问题
    ShiWangMeSDK Android版接口文档 0.2.0 版
    RbbitMQ基础知识
    SpringMVC集成rabbitMQ
    使用pinyin4j汉字转pinyin
    Maven依赖调解
  • 原文地址:https://www.cnblogs.com/qq735675958/p/7250042.html
Copyright © 2020-2023  润新知