什么是css初始化
时间:2021-04-19
来源:互联网
今天PHP爱好者给大家带来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爱好者其它相关文章!
-
剑与远征启程装备铸造石获取方法装备铸造石怎么得 时间:2024-08-28
-
光遇2024年8月23日每日任务完成方法 时间:2024-08-28
-
去远方游戏第二章主线攻略介绍 时间:2024-08-28
-
原神8月16日礼包兑换码2024 时间:2024-08-28
-
无限暖暖什么时候上线 时间:2024-08-28
-
探探猫大作战游戏礼包码合集一览 时间:2024-08-28
今日更新
- Excel公式不能自动更新数据的解决方法
阅读:25
- css怎么隐藏内容
阅读:21
- css怎么设置行高
阅读:22
- css怎么去掉a的下划线
阅读:21
- css怎么实现内容不可选
阅读:20
- javascript怎么写
阅读:20
- css怎么设置图片不平铺
阅读:21
- css怎么设置div边框
阅读:26
- 纯CSS如何实现图片轮播
阅读:21
- css的盒模型有哪些
阅读:21