CSS重置文档/reset.css

前言

reset.css文档就是一个普通的层叠样式表文档，就是css文档，一个网站通常会用三种css文档来设定网站的样式。重置样式(reset.css)(重置默认的css样式)；公共样式 (common.css)(一系列页面共用共享的样式，如：头部底部样式)；独立样式(每一个页面单独使用的样式，如index.css)。
在这里具体讲得就是重置样式，其余两种样式就是因项目而定的没有太多的规定设定可讲。

目录

• 为何要用reset.css
• 怎么用
• reset.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文档。这个文档最好最好在项目的开始就要先写好。若是问这个文档是否是必须的，我能够说不是，你本身在一个样式表内看到哪一个属性就写哪一个属性先也行，可是写了这个文档能够帮助你节省时间，可让你的代码更优秀。谢谢！

• 回到顶部