首页前端开发CSS什么是css初始化

什么是css初始化

时间2024-01-27 22:24:03发布访客分类CSS浏览792
导读:收集整理的这篇文章主要介绍了什么是css初始化,觉得挺不错的,现在分享给大家,也给大家做个参考。CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现...
收集整理的这篇文章主要介绍了什么是css初始化,觉得挺不错的,现在分享给大家,也给大家做个参考。

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初始化的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: css中em什么意思下一篇:css能做什么猜你在找的CSS相关文章 css怎么控制按钮不可用2022-05-17css3中transform属性实现的4种功能2022-04-13纯CSS3实现div按照顺序出入效果2022-04-13CSS实现隐藏搜索框功能(动画正反向序列)2022-04-13使用CSS3实现按钮悬停闪烁动态特效代码2022-04-13CSS3 Tab动画实例之背景切换动态效果2022-04-13CSS实现两列布局的N种方法2022-04-13CSS 实现Chrome标签栏的技巧2022-04-13css实现两栏布局左侧固定宽右侧自适应的多种方法2022-04-13从QQtabBar看css命名规范BEM的详细介绍2022-04-13 其他相关热搜词更多phpjavapython程序员

若转载请注明出处: 什么是css初始化
本文地址: https://pptw.com/jishu/588796.html
css能做什么 常见的css框架有哪些

游客 回复需填写必要信息