【转】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文档。这个文档最好最好在项目的开始就要先写好。如果问这个文档是不是必须的,我可以说不是,你自己在一个样式表内看到哪个属性就写哪个属性先也行,但是写了这个文档可以帮助你节省时间,可以让你的代码更优秀。谢谢!

posted @ 2022-05-05 22:17  tc310  阅读(3271)  评论(0编辑  收藏  举报