CSS Reset的历史(一)
- sprite.evan - 黑客志当艺术家开始准备创作一幅新的画作时,他们不会先去拿镉红或是酞菁蓝的颜料,而是会首先准备好一张新的画布,为什么. 因为对于他们来说,首先需要确保新画布足够平展并且洁净. 许多Web设计师也喜欢使用CSS Reset来”准备“他们的浏览器画布,以确保他们的设计能够在不同的浏览器和系统下拥有同样的呈现. 这篇文章是关于CSS reset的系列文章的第一篇.
在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下:
@charset "utf-8";
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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img { border:0;}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ol, ul { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 {
font-size:200%;
font-weight:normal;
}
:focus { outline: 0;}
a{ text-decoration:none;}
a:hover img{ border:none;}
a:active{noOutline:expression(this.onFocus=this.blur());}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
html .clearfix { height: 1%;}
.clearfix {display: block;}
*html img.png{
_background-image: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "http://i0.itc.cn/20101019/848_0a785a7b_1118_4825_85dc_e8696988c94b_0.gif");
}
但是最近在网上看了看网络文章,也感觉有些重置是没有用的。为什么呢?
重置的作用究竟是什么?
CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准,而这个基准更多的就是“清零”!
有时候看到别人网站站的一些重置是这样的:
*{ margin:0; padding:0; }
这样的写法是极不推荐的。
现在来看重置表发现:
div
标签默认有 margin
值吗?有 padding
值吗?怎么会想到应用 div{margin:0; padding:0;}
属性呢?答案肯定没有。
dt
标签有默认的 margin
与 padding
值就是 0
,什么还要使用呢?
li
标签默认有 margin
值吗?有 padding
值吗?没有!
code
标签是个属于 inline
水平的元素,居然也扯到 margin
与 padding
的重置,没有必要。
fieldset
, l egend
这两个90年代的标签你的网站上使用了吗?使用概率不足1%的标签也拿来重置,也没必要。
css真的重置也就那么几个常用的标签而已,你的页面一般都用到什么标签?
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}
ol,ul{margin:0; padding:0;}
这样的CSS reset才是高效的,简洁的,其他一些标签都可以去掉的,没有必要。
当然css重置的优点,缺点都不说了,估计心里都非常有数的,还是要根据实际项目来。
后来主管给我推荐了一款替代 reset.css
重置的替代方案,那就是用 Normalize.css
。在后面文章里把它的用法等再列出来。