• css的reset和常用的html标签的默认样式整理


      先看下常用的这些标签浏览器的默认样式有哪些:

        

    body{ margin: 8px;}
    hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em;}
    blockquote{margin: 16px 1em;}
    ul{list-style-type: disc;padding-left:40px;margin: 1em 0;}
    ol{list-style-type: decimal; padding-left:40px; margin:1em 0;}
    dl{ margin: 1em 0;}
    dd{ margin-left:40px;}
    
    pre{ margin: 1em 0;}
    
    fieldset{margin: 0 2px; border: 2px groove threedface;border-image: initial;padding:.35em .75em .625em;}
    input,textarea,select,button{font: 400 13.333px Arial;}
    button{padding:1px 6px;border:2px outset buttonface; background-color:buttonface;color:buttontext;}
    input{ padding:1px 0;border:2px inset initial;}
    textarea{padding:2px; border:1px solid rgb(169,169,169); resize:auto;}
    th,td{padding:1px;}
    
    h1,h2,h3,h4,h5,h6{font-weight:bold;}
    h1{ font-size:2em;margin:.67em 0;}
    h2{ font-size:1.5em; margin:.83em 0;}
    h3{ font-size:1.17em; margin: 1em 0;}
    h4{ margin: 1.33em 0;}
    h5{ font-size:.83em; margin: 1.67em 0;}
    h6{ font-size:.67em; margin: 2.33em 0;}

      当然这里列举的都是常用的标签,那些不常用的或者是已经快被淘汰的就没列出来。

      根据上面的默认样式,我们就可以有目标的去写reset里面需要重置哪些样式:

        1,body的margin

        2,ul,ol 的margin和padding

        3,dl, dd 的margin

        4,pre的margin ,这里pre还有一点要注意,就是它的font-size默认是13px,也可以重置下

        5,fieldset的margin

        6,input,textarea,select,button的font, border ,    textarea的resize, 

        7,th,td的padding

        8, h1-h6我觉得不用重写,默认的font-weight和font-size设定的很好,margin上面可写可不写,我觉得设定的也没问题。

    由此 ,我便生成了自己的 reset.css,很简洁,没有使用通配符 *  。

        

    body,ul,ol,dl,dd,pre,fieldset{
        margin:0;
    }
    ul,ol{
        padding:0;
        list-style:none;
    }
    input,textarea,select,button{
        font-family:'Helvetica Neue',Tahoma,Arial,PingFangSC-Regular,'Hiragino Sans GB','Microsoft Yahei',sans-serif;
        font-size:100%;
        box-sizing:border-box;
    }
    pre{
        font-size:1em;
    }
    table{
        border-collapse: collapse;
        border-spacing: 0;
    }
    a{
        text-decoration: none;
    }
    a:hover{
        text-decoration: underline;
    }

    当然,这只是我自己习惯用的reset,比如有些人就是喜欢把 box-sizing设置为border-box, 觉得那样计算起来很方便,我这里就没有使用通配符给所有元素都设置, 只给了几个表单元素。

    这就是萝卜白菜各有所爱了,当时间长后,你肯定会生成自己的reset。 

  • 相关阅读:
    还是火柴排队(补一下归并排序的锅)
    火柴排队(NOIP2013)(附树状数组专题讲解(其实只是粗略。。。))
    转圈游戏(NOIP2013)
    接口和多态
    HttpClient-传入url得到json字符串( PostMethod method = new PostMethod(url)是个好方法)
    url和资源的再理解
    每天进步一点点- 资源与URI(吐血精华总结)
    每天进步一点点-一切皆对象/一次编写,到处运行/bean工厂
    java黑魔法-反射机制-02-通过Java反射调用其他类方法
    java黑魔法-反射机制-01
  • 原文地址:https://www.cnblogs.com/wjyz/p/10489910.html
Copyright © 2020-2023  润新知