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并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。  

  • 相关阅读:
    text-overflow white-space word-break word-wrap word-spacing line-clamp 傻傻分不清楚0.0=>文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法
    jq 操作表单中 checkbox 全选 单选
    用 pdf.js兼容部分安卓显示PDF在线预览 时,a标签直接链接参数文件不能含中文的解决办法
    通过form实现enter事件
    小白随笔之数组的方法
    引用类型之Array
    Reset
    js常用事件
    让女朋友能懂的网络技术篇之动态代理
    图论之Dijkstra算法
  • 原文地址:https://www.cnblogs.com/ypppt/p/13229212.html
Copyright © 2011-2022 走看看