zoukankan      html  css  js  c++  java
  • css样式重置方案 -解决浏览器差异

    1.http://meyerweb.com/eric/tools/css/reset/

    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */
    
    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.http://yuilibrary.com/yui/docs/cssreset/

    /*
    YUI 3.18.1 (build f7e7bcb)
    Copyright 2014 Yahoo! Inc. All rights reserved.
    Licensed under the BSD License.
    http://yuilibrary.com/license/
    */
    
    html{color:#000;background:#FFF}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}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}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
    

    Getting Started

    Include Dependencies

    To use CSS Reset, include the following source file in your web page:

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

    Global vs. Contextual

    YUI's CSS resources apply rules to HTML elements directly (using type selectors). An alternate version of the resource is available that target elements by context only. This contextual -context.css version selects HTML elements only when they descend from the .yui3-cssreset classname.

    Here is how to include the contextual version of CSS Reset:

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset-context/cssreset-context-min.css">

    Using CSS Reset

    Using CSS Reset Globally

    CSS Reset is easy to use. When CSS Reset is loaded it removes the inconsistent styling of HTML elements provided by browsers. Now, just begin writing the CSS rules your project needs without being burdened by what the browser thinks you need.

    Here is an example page showing HTML elements once CSS Reset has been included in the page globally.

    Using CSS Reset Contextually

    If you're using the contextual version, CSS Reset's rules are only applied to nodes that descend from a node with a class value of .yui3-cssreset. In this example, CSS Reset applies to the h1 in the left column, but does not impact the h1 in the right column:

    <div>
    	<div id="left-column" class="yui3-cssreset"><h1>Lorem Ipsum</h1></div>
    	<div id="right-column"><h1>Lorem Ipsum</h1></div>
    </div>

    Here is an example page where only a portion of the page is impacted because it is being used contextually.

     3.

    /* undohtml.css */
    /* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
    /*   http://creativecommons.org/licenses/by/2.0                   */
    /* This style sheet is licensed under a Creative Commons License. */
    
    /* Purpose: undo some of the default styling of common (X)HTML browsers */
    
    
    /* link underlines tend to make hypertext less readable, 
       because underlines obscure the shapes of the lower halves of words */
    :link,:visited { text-decoration:none }
    
    /* no list-markers by default, since lists are used more often for semantics */
    ul,ol { list-style:none }
    
    /* avoid browser default inconsistent heading font-sizes */
    /* and pre/code too */
    h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
    
    /* remove the inconsistent (among browsers) default ul,ol padding or margin  */
    /* the default spacing on headings does not match nor align with 
       normal interline spacing at all, so let's get rid of it. */
    /* zero out the spacing around pre, form, body, html, p, blockquote as well */
    /* form elements are oddly inconsistent, and not quite CSS emulatable. */
    /*  nonetheless strip their margin and padding as well */
    ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
    { margin:0; padding:0 }
    
    /* whoever thought blue linked image borders were a good idea? */
    a img,:link img,:visited img { border:none }
    
    /* de-italicize address */
    address { font-style:normal }
    
    /* more varnish stripping as necessary... */
    

      

      

      

  • 相关阅读:
    apache 页面压缩技术mod_deflate安装和配置
    获取指定目录下的所有文件名和路径(包括子目录)
    ThinkPHP框架项目开发专题自动验证
    hd cdnServer 51cdn / ChinaCache / ATS / Apache Traffic Server
    js calendar / wannianli
    OS + Unix Solaris / openSolaris
    project web architecture
    OS + Unix HPUX
    逻辑左移
    桂林游览2
  • 原文地址:https://www.cnblogs.com/sybboy/p/5508298.html
Copyright © 2011-2022 走看看