zoukankan      html  css  js  c++  java
  • 一天搞定CSS: 标签样式初始化(CSS reset)及淘宝样式初始化代码--09

    样式初始化:是指对HTML中某些标签的默认样式进行清除

    样式初始化目的:

    不同浏览器的默认样式不一样,若不清理,会导致相同的代码在浏览器中解析结果不一样,为了避免这种情况,所以需要进行样式初始化。

    这里写图片描述


    代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                /*一、不适用通配符初始化*/
                body,h1,h2,h3,h4,h5,h6,p,dl,dd{
                    margin: 0;
                }
                ul,ol{
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }
                img{
                    border: none;
                    vertical-align: top;
                }
                a{
                    text-decoration: none;
                }
    
    
    
    
    
                /*二、通配符初始化*/
                *{
                    margin: 0;
                    padding: 0;
                }
    
                /*
                 * 通配符的使用争议:
                 * 
                 * 一般都都不建议用通配符
                 *  1、性能问题
                 *  2、浪费问题
                 * 
                 * 若非要用通配符的话:建议
                 *  1、如果网站非常大,内容非常多,就不建议用通配符
                 *  2、如果小网站,内容不多,(比如:单页面)可以用通配符
                 */
            </style>
        </head>
        <body>
            <!--
                标签样式初始化(css reset)
                    原则:但凡页面中要用到的标签,有默认样式,会影响到其它的代码,这个时候就要把清掉。用不到的标签就不用清除
    
                    哪些样式需要重置
                        与盒模型相关的样式
                            margin
                            padding
                            border
                        标签特有的样式
                            ul  li
                            ol  li
            -->
            <a href="">123</a>
            <h1>标题</h1>
            <h2>标题</h2>
            <h3>标题</h3>
            <h4>标题</h4>
            <h5>标题</h5>
            <h6>标题</h6>
            <p>这里可以放一段话</p>
            <strong>强调</strong>
            <em>强调</em>
            <ul>
                <li>ul是无序列表</li>
                <li>li是列表项</li>
                <li>ul的子元素只能是li</li>
                <!--<div>这是一个div</div>-->
            </ul>
            <ol>
                <li>ol是一个有序列表</li>
                <li>li是列表项</li>
                <li>ol的子元素只能是li</li>
                <!--<div>这是一个div</div>-->
            </ol>
            <dl>
                <dt>dl是自定义列表,dt表示列表的标题</dt>
                <dd>dd是列表项</dd>
                <dd>dt只能出现一次,dd可以出现多次</dd>
                <!--<div>这是一个div</div>-->
            </dl>
            <mark>标记</mark>
        </body>
    </html>
    

    淘宝样式初始化代码:

    /*清除样式*/
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,a,p,textarea{
        margin: 0;
        padding: 0;
    }
    
    ul,ol,li{
        list-style: none;
    }
    
    a{
        text-decoration: none;
        display: block; 
    }
    
    img{
        border: none;
        display: block;
    }
    
    /*清除浮动*/
    .clearfloat:after{
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
    }
    .clearfloat{
        zoom: 1;
    }
  • 相关阅读:
    CSS3旋转动画
    CSS3的动画属性
    CSS选择器
    JS事件委托
    js 轮播图效果
    JS事件冒泡和事件捕获
    JS自定义播放器
    js闭包for循环只执行最后一个值得解决方法
    交通红绿灯
    汉明距
  • 原文地址:https://www.cnblogs.com/TCB-Java/p/6853975.html
Copyright © 2011-2022 走看看