zoukankan      html  css  js  c++  java
  • CSS Reset

    CSS Reset是什么?

    在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset

    为什么要重置它?

    因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如<button>标签,在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的,所以,通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。

    最简单的CSS Reset内容寥寥几行就能完成

    * { padding: 0; margin: 0; border: 0; }
    这个方法让所有的选择器的padding、margin和border都设置成0。也有内容更多的,比如YUI的CSS Reset内容:
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
    form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    fieldset,img {
    border: 0;
    }
    address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
    }
    ol,ul {
    list-style: none;
    }
    caption,th {
    text-align: left;
    }
    h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    }
    q:before,q:after {
    content:'';
    }
    abbr,acronym { border: 0;
    }

    以及国外名人Eric Meyer的CSS Reset V1.0|200802内容:

    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, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before,blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    /* remember to define focus styles! */
    :focus {
    outline: 0;}
    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
  • 相关阅读:
    LaTeX下的表格处理
    accumulate函数用法的坑
    将博客搬至CSDN
    linux; 文件名乱码;问价名出现问号
    vim打开多窗口、多文件之间的切换
    关于ssh-server
    更改Ubuntu gcc、g++默认编译器版本
    Elasticsearch nest实现类似Contains和Like功能
    Redis大幅性能提升之Batch批量读写
    Ext.NET 4.1 系统框架的搭建(后台) 附源码
  • 原文地址:https://www.cnblogs.com/riskyer/p/3291985.html
Copyright © 2011-2022 走看看