zoukankan      html  css  js  c++  java
  • reset.css

    关于reset.css

    reset.css用于清除不同浏览器的差异。
    1.{margin:0; padding:0; } 不推荐, 导致CSS渲染引擎在渲染CSS的时候,使用*遍历整个DOM 树,影响性能渲染性能。
    2.永远不存在万能解决方案,只有适合项目的解决方案。因此在使用的时候根据具体需求,适量裁剪和修改后再使用。比如针对淘宝,可以在 reset.css 的基础上,修改为 reset-taobao.css.如果是个人博客,一个方案是:reset-blog.css. 真实使用时,请用压缩后的版本:reset-min.css.

    参考 玉伯和正淳的reset,并有删减

    /* 清除内外边距 */
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section /*html5中的结构元素*/
    dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
    pre, /* text formatting elements 文本格式元素 */
    fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
    th, td { /* table elements 表格元素 */
        margin: 0;
        padding: 0;
        font: inherit;
        vertical-align: baseline;
        background:transparent;
    }
    article,aside,canvas,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section,summary { 
        display:block;
    }
    
    /* 设置默认字体 */
    body,
    button, input, select, textarea { /* for ie */
        /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
        font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
    }
    
    h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
    h2 { font-size: 16px; }
    h3 { font-size: 14px; }
    h4, h5, h6 { font-size: 100%; }
    
    address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
    code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
    small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
    
    /* 重置列表元素 */
    ul, ol { list-style: none; }
    
    /* 重置文本格式元素 */
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
    
    abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
        border-bottom: 1px dotted;
        cursor: help;
    }
    
    q:before, q:after { content: ''; }
    
    /* 重置表单元素 */
    legend { color: #000; } /* for ie6 */
    fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */
    /* 注:optgroup 无法扶正 */
    button, input, select, textarea {
        font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
        vertical-align:middle;
    }
    
    /* 重置表格元素 */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    /* 重置 hr */
    hr {
        border: none;
        height: 1px;
    }
    
    /* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
    html { overflow-y: scroll; }
    

    HTML5 reset css

    /* 
    html5doctor.com Reset Stylesheet
    v1.4.1 
    2010-03-01
    Author: Richard Clark - http://richclarkdesign.com
    */
    
    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
    }
    
    body {
        line-height:1;
    }
    
    :focus {
    	outline: 1;
    }
    
    article,aside,canvas,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section,summary { 
        display:block;
    }
    
    nav ul {
        list-style:none;
    }
    
    blockquote, q {
        quotes:none;
    }
    
    blockquote:before, blockquote:after,
    q:before, q:after {
        content:'';
        content:none;
    }
    
    a {
        margin:0;
        padding:0;
        border:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
    }
    
    ins {
        background-color:#ff9;
        color:#000;
        text-decoration:none;
    }
    
    mark {
        background-color:#ff9;
        color:#000; 
        font-style:italic;
        font-weight:bold;
    }
    
    del {
        text-decoration: line-through;
    }
    
    abbr[title], dfn[title] {
        border-bottom:1px dotted #000;
        cursor:help;
    }
    
    table {
        border-collapse:collapse;
        border-spacing:0;
    }
    
    hr {
        display:block;
        height:1px;
        border:0;   
        border-top:1px solid #cccccc;
        margin:1em 0;
        padding:0;
    }
    
    input, select {
        vertical-align:middle;
    }
    			
    

    Web页面字体设置

    网页安全字体

    Google:  font-family: arial,sans-serif;
    Yahoo:  font: 13px/1.25 "Helvetica Neue",Helvetica,Arial;
    Apple:  font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    
    Baidu:  font: 12px arial;
    Weibo:  font: 12px/1.125 Arial,Helvetica,sans-serif;
    QQ:     font: 12px "宋体","Arial Narrow",HELVETICA;
    Sina:   font-family: "SimSun","宋体","Arial Narrow";
    163 :   font:12px/1.5 5b8b4f53,Arial,sans-serif;
    zhihu:  font-family: 'Helvetica Neue',Helvetica,Arial,Sans-serif;</
    
    img{ border:none; display:block; max-100%; }
    a:foucus{ outline:none; /*  清除IE8- 浏览器 点击虚线边框 */
    

    YUI reset.css
    张鑫旭 HTML5 reset css
    其他参考

  • 相关阅读:
    由typedef和函数指针引起的危机
    从JVM角度看Java多态
    C语言中判断字符串str1是否以str2开始或结束
    Linux下利用json-c从一个json数组中提取每一个元素中的部分字段组成一个新json数组
    C语言中的条件编译
    学会 Python 到底能干嘛?我们整理出了 7 大工作方向……
    新手指南:我应该学哪种编程语言?
    盘点:2019年最赚钱的10种编程语言
    11个提升编程能力的小方法
    收好这份 Vue 升级图,假期偷偷上个钻
  • 原文地址:https://www.cnblogs.com/aoxiaoqiang/p/4998016.html
Copyright © 2011-2022 走看看