• CSS Reset浏览器样式重置


    1. css Reset为什么存在?

    只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对css的解析效果呈现各异,导致您所期望的效果跟浏览器的“理解”效果有偏差,今天提到的css reset就是用来重置(复位)元素在不同核心浏览器下的默认值,尽量保证元素在不同浏览器下的同一“起跑线”。——引用自关于CSS Reset

    2. CSS Reset该怎么写?

    CSS reset(css重置)基本上是不需要的,至少可以说80%的的CSS reset都是没有必要的,反而增加了页面CSS的重写,尤其像*{margin:0;}的做法更是要不得(反而破坏了很多UI的兼容性,比如说单复选框等)。我不是一概鄙弃CSS reset,有些常用标签我也是会简单重置一下的,而且会避免overwrite(样式重写),以保证样式最精简,渲染最高效——摘录自张鑫旭的这篇文章我是如何对网站CSS进行架构的

    3. CSS Reset 示例

    3.1 tmall,淘宝商城

    body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,
    form,fieldset,legend,button,input,textarea,th,td  {margin:0;padding:0;}
    body,button,input,select,textarea{font:12px/1.5     tahoma,arial,5b8b4f53;}
    h1,h2,h3,h4,h5,h6{font-size:100%;}
    address,cite,dfn,em,var{font-style:normal;}
    code,kbd,pre,samp{font-family:courier new,courier,monospace;}
    small{font-size:12px;
    ul,ol{list-style:none;}
    a{text-decoration:none;}
    a:hover{text-decoration:underline;}
    sup{vertical-align:text-top;}
    sub{vertical-align:text-bottom;}
    legend{color:#000;}
    et,img{border:0;}
    button,input,select,textarea{font-size:100%;}
    table{border-collapse:collapse;border-spacing:0;}

    3.2 tudou,土豆网

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
    fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
    body{color:#000;background:#fff;font-size:12px;line-    height:1.25;font-family:tahoma,arial,5b8b4f53,sans-serif}
    th,td{text-align:left;vertical-align:top}
    h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:normal}
    p{margin:0 0 1em 0}
    blockquote{margin:0 0 1em 0
    a{color:#14647d;text-decoration:none;font-family:tahoma,arial,5b8b4f53,sans-serif;_font-family:arial,sans-serif}
    a:hover{text-decoration:underline}
    img{display:block;border:0}
    li{list-style:none}
    ol{padding:0 0 0 2em}
    input,label,select,option,textarea,button,fieldset,legend{font-size:1em;font-family:tahoma,arial,5b8b4f53,sans-serif;_font-family:Arial,sans-serif}
    input[type=text],textarea{-webkit-appearance:none;-webkit-border-radius:0;outline:none}
    input.text{color:#444;border-color:#9f9f9f #dcdcdc #dcdcdc #9f9f9f;border-style:solid;border-1px;padding:3px 2px;height:14px}
    input.radio,input.checkbox{margin-right:2px;vertical-align:-2px}
    input.radio,input.checkbox{margin-left:-2px}
    label.radio,label.checkbox{margin-right:5px}

    电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

    3.3 sohu,搜狐网

    /* 全局CSS定义 */
    body{font-family:’宋体';text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;}
    body > div{text-align:center;margin-right:auto;margin-left:auto;
    div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}
    img,a img{border:0;margin:0;padding:0;}
    h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;
    ul,ol,li{list-style:none}
    table,td,input{font-size:12px;padding:0}
    /* 默认链接颜色 */
    a{outline-style:none;color:#333;text-decoration:none}
    a:hover{color:#c00;text-decoration:underline;}
  • 相关阅读:
    博客迁移.
    win10不能睡眠问题
    我多希望没有遇见你
    打印队列 UVA12100
    理科工具——数值分析计算相关软件及下载地址
    用原生js完成鼠标点击显示滑入滑出效果
    javascript:用原生js模拟贪吃蛇游戏练习
    阅读css官方参考手册的关键点
    翻滚吧骰子!——flex布局加css3动画综合练习
    flexible box布局微博客户端发现页面练习
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13808724.html
Copyright © 2020-2023  润新知