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

    什么是css初始化

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

    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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css初始化
    上一篇:css能做什么 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• jquery怎么移除css样式• jquery怎么删除css• css怎么设置图片不平铺• 纯CSS如何实现图片轮播• css怎么实现超出两行显示省略
    1/1

    PHP中文网