【转】CSS重置文档/reset.css
原文:https://juejin.cn/post/6844903918686699534
前言
reset.css文档就是一个普通的层叠样式表文档,就是css文档,一个网站一般会用三种css文档来设定网站的样式。重置样式(reset.css)(重置默认的css样式);公共样式 (common.css)(一系列页面共用共享的样式,如:头部底部样式);独立样式(每个页面单独使用的样式,如index.css)。
在这里具体讲得就是重置样式,其他两种样式就是因项目而定的没有太多的规定设定可讲。
目录
为什么要用reset.css
因为在不同的浏览器中,HTML标签会有一些默认的属性值,但是各个浏览器会渲染出各不一样的效果,例如边距不一致、字体颜色大小行高不一样等等。为了防止出现这种情况,其实主要是为了减少代码的重复定义,提高代码复用率,提高开发效率,重设各个浏览器的默认样式,还可以解决其引起的耦合问题。
总结就是高复用,低耦合,文件小。
怎么用
独立新建一个css文档来储存重置样式,就是reset.css里面只存放重置样式,其他样式可以根据前言分类分开存放css属性。这里有一个是本人参考了各大网站的reset.css整理写的reset.css,文档没有绝对标准性的,很多都是根据项目的具体需求写,我总结的只是一些非常常用的重置样式,可以适用大部分项目,当然最好是理解了,每次自己根据项目需求对reset.css进行编写。
reset.css说明
@charset 'utf-8';
/*这些元素都建议重新初始化*/
body,div,dl,dt,dd,ul,ol,li,tr,td,th,
h1,h2,h3,h4,h5,h6,hr,br,img,table,
input,form,a,p,textarea{
padding:0;
margin:0;
font-family:Arial,'Microsoft YaHei','宋体';
}
/*去掉列表默认排列*/
ul,ol,li{
list-style:none;
}
/*去掉底部横线*/
/*把a元素更改设置成块级元素,这个根据实际情况决定要不要*/
a{
text-decoration:none;
display:block;
}
/*img标签要清除border。*/
/*display设为block设置为块级元素,默认为display:inline;
存在下边线多出4px状况,所以一般设为block*/
img{
border:0;
display:block;
}
/*清除浮动破坏带来的塌陷问题*/
/*清除浮动的兼容IE*/
.clearfloat {
zoom: 1;
}
.clearfloat:after {
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
复制代码
总结
为了更规范,为了更好的与人合作,就有了reset.css文档。这个文档最好最好在项目的开始就要先写好。如果问这个文档是不是必须的,我可以说不是,你自己在一个样式表内看到哪个属性就写哪个属性先也行,但是写了这个文档可以帮助你节省时间,可以让你的代码更优秀。谢谢!