• 技术文章 >web前端 >css教程

    什么是css初始化

    青灯夜游青灯夜游2021-04-02 15:04:06原创81

    CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    CSS初始化是指重设浏览器的样式。

    因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

    每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们开发网页内容时更加方便简洁,同时减少CSS代码量,节约网页下载时间。

    css初始化的好处:提高编码质量

    初始化CSS为我们节约网页代码,节约网页下载时间;还会使得我们开发网页内容时更加方便简洁,不用考虑很多。

    如果不初始化,整个页面做完会很糟糕,重复的css样式很多。

    我们在开发比较复杂的网页时候就不会知道自己是否已经设置了此处的CSS属性,是否和前面的CSS属性相同,是否统一整个网页的风格和样式。

    (学习视频分享:css视频教程

    最简单的初始化方法就是: * {padding: 0; margin: 0;} 。有很多人也是这样写的。

    这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签都初始化一遍,这样就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间。

    我们可以直接使用下面的代码初始化css。

    css初始化代码:

    /*css 初始化 */
    html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, 
    form, fieldset, legend, img { margin:0; padding:0; } 
    fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }
    ul, ol { list-style:none; }
    input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
    select, input { vertical-align:middle; }
    select, input, textarea { font-size:12px; margin:0; }
    textarea { resize:none; }
    img {border:0;    vertical-align:middle;}
    table { border-collapse:collapse; }
    body {
        font:12px/150% Arial,Verdana,"\5b8b\4f53";
        color:#666;
        background:#fff
    }
    .clearfix:before,.clearfix:after{ 
        content:""; 
        display:table; 
    } 
    .clearfix:after{clear:both;} 
    .clearfix{ 
        *zoom:1;/*IE/7/6*/ 
    } 
    a{color:#666; text-decoration:none; }
    a:hover{color:#C81623;}
    h1,h2,h3,h4,h5,h6{text-decoration:none;font-weight:normal;}
    s,i,em{font-style:normal;text-decoration:none;}
    .col-red{color: #C81623!important;}
    /*公共类*/
    .w{
        width: 1210px;margin:0 auto;
    }
    .fl {
        float:left
    }
    .fr {
        float:right
    }
    .al {
        text-align:left
    }
    .ac {
        text-align:center
    }
    .ar {
        text-align:right
    }
    .hide {
        display:none
    }

    更多编程相关知识,请访问:编程视频!!

    以上就是什么是css初始化的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css初始化
    上一篇:css能做什么 下一篇:css中em什么意思
    第15期线上培训班

    相关文章推荐

    • jquery怎么移除css样式• jquery怎么删除css• css怎么设置图片不平铺• 纯CSS如何实现图片轮播• css怎么实现超出两行显示省略

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网