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

  • 相关阅读:
    网络基础、多线程、ftp任务铺垫
    文件上传下载、socketserver(并发)、解读socketserver源码
    模拟ssh、黏包、hashlib模块(MD5)
    面向对象多继承(C3算法)/网络编程
    Slideout吐槽
    HDU 1756 Cupid's Arrow 判断点在多边形的内部
    POJ 1584 A Round Peg in a Ground Hole 判断凸多边形,判断点在凸多边形内
    位运算 找出给定的数中其他数都是两个,有两个是一个的数
    NYOJ 1107 最高的奖励(贪心+优先队列)
    POJ 2653 Pick-up sticks (判断线段相交)
  • 原文地址:https://www.cnblogs.com/ypppt/p/13229212.html
Copyright © 2011-2022 走看看