问题
这篇文章适合所有人阅读,也不需要具备程序开发的功底。如果你是前端开发人员,那么你可能会听过Reset,或者已经在用了。如果你是一个对前端感兴趣的人,也可以快速窥视一个前端开发工程师是如何优化自己的代码,进行代码艺术创造的。
下面简短介绍这张图,左边的红色块是由HTML+CSS编写的。
<style type="text/css">
div{border:1px solid red;width: 100px;height: 100px;background-color: red;float: right;}
</style>
<body>
<div></div>
</body>
右边是开发者工具,可以看到蓝色框上面那段字:element.style;翻译过来是默认样式。用通俗的话来讲,这是控制那个div(红色块)与整个页面(body)之间的上下左右间隔为8px的间隔。
程序员在开发的过程中,难免会遇到诸如此类的问题,那么,程序员是如何解决的呢?Reset.CSS就是一种解决方案。
2:介绍一些全局变量样式,不同浏览器样式不同,有很多样式我们不需要。
为什么要Reset?
从产品角度看,有些样式不需要,那么就需要覆盖掉,如果一个个覆盖,会有大量的冗余代码要写,会有大量的开发量。
什么是Reset
- 清除默认样式
- 进行全局样式定义
那么怎么进行reset?
既然浏览器通过标签设置样式,那么我们也通过标签来设置样式,用来覆盖原先我们并不需要的样式。
两个注意点
- 初期的时候,就要把这个reset定好。因为reset是全局的属性,假如说项目开发初期的时候没有定好,到了项目中后期,你的css已经写了很多东西了,这样就会导致牵一发动全身。或者说到了项目维护阶段,再去改css,你的回归工作就变得非常繁杂,根据项目设计,把绝大多数样式用标签设置好
- 在引入css 文件的时候,一定要在第一位。
如果是内嵌的样式,reset也要写在第一位,如果不按照顺序,就会起不到作用。
我的Reset
这个reset方案并不是全能的,因为产品需求不同。所以应该根据自己的产品,制定自己的reset.
/*Reset*/
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body{min-width:1280px;}
a,a:hover{color:#333;}