zoukankan      html  css  js  c++  java
  • 我最近使用的css reset

    是将一个css框架的reset部分精简了一下(其实精简了很多),使用基本无问题

    /*reset*/
    /**
        * @section CSS-Normalisation Module
        */
    
        /* (en) Global reset of paddings and margins for all HTML elements */
        * { margin:0; padding:0; }
    
        li { list-style:none;}
    
        body {
            /* (en) Fix for rounding errors when scaling font sizes in older versions of Opera browser */
            font-size:100%;
    
            /* (en) Standard values for colors and text alignment */
            background:#fff;
            color:#000;
            text-align:left; /* LTR */
        }
    
        /* (en) Clear borders for <fieldset> and <img> elements */
        fieldset, img { border:0 solid; }
    
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
    
    /*reset end*/
    
    html,body
    {
        height:100%;
    }
    
    body
    {
        font-family:Arial,宋体, 微软雅黑;
    }
    
    a
    {
        outline:none;
        *blr:expression(this.onFocus=this.blur()); /*去掉a标签的边框(兼容古代浏览器)*/
    }

    注意“reset end”位置

    2013-12-18
    现在网上比较流行的观点是说用 * { margin:0; padding:0; } 过于简单,性能消耗大
    我本来觉得*的性能问题应该不是很大,且应该由浏览器去解决(既然定义了这个语法,不就是给人用的么),但浏览器的世界比较扭曲,实际上reset的存在本身就是这种扭曲存在的证明,话说如果大家的标准一致,根本不需要reset代码了。另一方面*确实有点一棍子打死所有标签的感觉,好处是有新的标签,不用再加了,坏处是有的标签不需要被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;
    }

    fieldset, img { border:0 solid; }/*自己加的*/



    有的人说要打造自己的reset,有的人说高手根本不需要reset,说的都很有道理,但如果你不想陷入浏览器css细节海洋的话,先找一个好的reset,理解它并且适应它,尽可能的用标准的方式使用html和css代码,基本上在各个浏览器上的表现差异不会太大(ie6,7确实需要额外的工作),而这不就是我们的目的所在么,找这方面资料的时候看到过一句话说的很贴切,暂时找不到了,以后补上


  • 相关阅读:
    linux 读写文件 open write lseek的API和应用
    gdb 常用命令
    makefile
    c/c++ 动态库与静态库的制作和使用
    linux 常用命令
    c/c++ 网络编程 陈硕老师视频理解之ttcp
    emacs 高亮
    初识HMTL标签
    Java集合基于JDK1.8的ArrayList源码分析
    Java提高篇——equals()与hashCode()方法详解
  • 原文地址:https://www.cnblogs.com/breeze05/p/2740578.html
Copyright © 2011-2022 走看看