什么是css reset.?
reset,重置。顾名思义,css reset就是重置样式。
为什么需要css reset?
众所周知,现在所使用的主流浏览器对一些标签的默认属性上并没有做到统一,所以我们偶尔会发现,某个页面在chrome浏览器上很正常,到了firefox上面却有意想不到的偏差。当然编程人员不喜欢这样的兼容性问题的,而reset.css就是解决默认样式不兼容问题的办法之一。
css reset发展历程
第一份css reset:Tantek 的undohtml.css
风靡一时的reset书写方式:*{ margin:0; padding:0; }
(很简单有木有,但是很遗憾的是这种方式加载极慢,所以后来遭到编程人员的摒弃)
现在常用的reset书写方式:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”
}
blockquote, q {
quotes: “” “”
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}}
以上css reset代码载自网络,一个很全面的reset.css
对css reset的思考
看到了比较完整的reset.css不知道朋友们在想些什么,是在想"每一个项目中都导入一个这样的reset.css,妈妈再也不用担心浏览器默认样式影响到我啦"或则是在想"什么鬼...",先不管这些,我说说自己的看法。
CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准,而这个基准一般认为就是“清零”,但是我们真的需要对这么多标签进行设置吗?显然不是。这样虽然全面,却没有考虑到代码的冗余,毕竟不是每一个项目都需要重置怎么多的标签。所以最好不要想也不想,把全面的reset复制粘贴到自己的style目录下,应该仔仔细细选择一翻,留下有用的,没用的和不必要的就不要让它们白白增加css的大小了!
最后引用张鑫旭的一句话:
- 武侠的最高境界是什么? – 无招胜有招
- 设计的最高境界是什么? – 减少设计
- 最少的CSS代码,最少的渲染,最少的重置就是最好的CSS样式代码,这反应了您的CSS层次。说句不好听的话,CSS reset是用来让那些CSS菜鸟,对CSS不太了解的人准备的。