zoukankan      html  css  js  c++  java
  • css重设样式_清除浏览器的默认样式

    由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一。

    收集的默认样式的链接地址:

    1.eric-meyer-reset-css
    http://cssreset.com/scripts/eric-meyer-reset-css/
    2.html-5-reset-stylesheet
    http://html5doctor.com/html-5-reset-stylesheet/
    3.yahoo-css-reset-yui-3
    http://cssreset.com/scripts/yahoo-css-reset-yui-3/
    4/universal-selector-css-reset
    http://cssreset.com/scripts/universal-selector-css-reset/
    5normalize-css
    http://cssreset.com/scripts/normalize-css/

     

    下面介绍几个主流的CSS Reset代码: 

    1、Eric Meyer:

    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, 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, 
    article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
    } 
    /* HTML5 display-role reset for older browsers */ 
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section { 
    display: block; 
    } 
    body { 
    line-height: 1; 
    } 
    ol, ul { 
    list-style: none; 
    } 
    blockquote, q { 
    quotes: none; 
    } 
    blockquote:before, blockquote:after, 
    q:before, q:after { 
    content: ''; 
    content: none; 
    } 
    table { 
    border-collapse: collapse; 
    border-spacing: 0; 
    }

    2、YUI  

    /* 
    YUI 3.4.1 (build 4118) 
    Copyright 2011 Yahoo! Inc. All rights reserved. 
    Licensed under the BSD License. 
    http://yuilibrary.com/license/ 
    */ 
    /* 
    TODO will need to remove settings on HTML since we can't namespace it. 
    TODO with the prefix,should I group by selector or property for weight savings? 
    */ 
    html { 
    color:#000; 
    background:#FFF; 
    } 
    /* 
    TODO remove settings on BODY since we can't namespace it. 
    */ 
    /* 
    TODO test putting a class on HEAD. 
    - Fails on FF. 
    */ 
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 
    } 
    table { 
    border-collapse:collapse; 
    border-spacing:0; 
    } 
    fieldset,img { 
    border:0; 
    } 
    /* 
    TODO think about hanlding inheritence differently,maybe letting IE6 fail a bit... 
    */ 
    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; 
    font-variant:normal; 
    } 
    /* to preserve line-height and selector appearance */ 
    sup { 
    vertical-align:text-top; 
    } 
    sub { 
    vertical-align:text-bottom; 
    } 
    input,textarea,select { 
    font-family:inherit; 
    font-size:inherit; 
    font-weight:inherit; 
    } 
    /*to enable resizing for IE*/ 
    input,textarea,select { 
    *font-size:100%; 
    } 
    /*because legend doesn't inherit in IE */ 
    legend { 
    color:#000; 
    }

    资源网站搜索大全https://55wd.com

     

    3、csslab  

    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, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 
    article, aside, dialog, figure, header, footer, hgroup, menu, nav, section, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    } 
    article, aside, nav, section, dialog, figure, header, footer, hgroup { 
    display:block; 
    } 
    legend { 
    display:none; 
    } 
    :focus { 
    outline: 0; 
    } 
    table { 
    border-collapse: collapse; 
    border-spacing: 0; 
    } 
    caption, th, td { 
    text-align: left; 
    font-weight: normal; 
    } 
    a img, iframe { 
    border: none; 
    } 
    ul { 
    list-style: none; 
    } 
    input, textarea, select, button { 
    font-size: 100%; 
    font-family: inherit; 
    } 
    input, select { 
    vertical-align:middle; 
    } 
    select { 
    margin: inherit; 
    } 
    button { 
    border: 0; 
    padding: 0; 
    background: transparent; 
    cursor: pointer; 
    } 
    /* 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;}

    需要说明的是CSS Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。  

  • 相关阅读:
    c++ tinyxml
    fmod简单播放mp3
    D3DXVec3TransformCoord 函数 D3DXVec3TransformNormal 函数
    D3DXMATRIX
    OpenGL FBO
    Opengl Freeimage 保存屏幕像素到图片
    fmod播放mp3 vs2010测试通过
    Hermite与Bezier曲线绘制方法研究
    D3DXVECTOR3
    c++ windows下创建文件夹和删除文件夹
  • 原文地址:https://www.cnblogs.com/ypppt/p/13229212.html
Copyright © 2011-2022 走看看