css reset重置样式有那么重要吗?

标签: css reset | 发表时间:2015-09-14 13:02 | 作者:风雨过后见彩虹
出处:http://segmentfault.com/blogs

在以前写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; }

这样的写法是极不推荐的。
现在来看重置表发现:

  1. div标签默认有 margin值吗?有 padding值吗?怎么会想到应用 div{margin:0; padding:0;}属性呢?答案肯定没有。

  2. dt标签有默认的 marginpadding值就是 0,什么还要使用呢?

  3. li标签默认有 margin值吗?有 padding值吗?没有!

  4. code标签是个属于 inline水平的元素,居然也扯到 marginpadding的重置,没有必要。

  5. 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。在后面文章里把它的用法等再列出来。

相关 [css reset] 推荐:

CSS Reset的历史(一)

- sprite.evan - 黑客志
当艺术家开始准备创作一幅新的画作时,他们不会先去拿镉红或是酞菁蓝的颜料,而是会首先准备好一张新的画布,为什么. 因为对于他们来说,首先需要确保新画布足够平展并且洁净. 许多Web设计师也喜欢使用CSS Reset来”准备“他们的浏览器画布,以确保他们的设计能够在不同的浏览器和系统下拥有同样的呈现. 这篇文章是关于CSS reset的系列文章的第一篇.

CSS Reset是什麼? 能吃嗎?

- 達 - 黑暗執行緒
世上最遙遠的距離不是生與死,而是網頁在不同瀏覽器差了1個pixel,怎麼調都搞不定. 不少網頁設計人員應該都有過經驗,設計得好好的網頁,換個瀏覽器檢視,排版就出現問題. 例如: 用<div>圖檔與背景圖擋的位置精算位移接合圖檔,在Firefox下密合得天衣無綘,但換到IE、Safari檢視,卻左右相差一個Pixel,甚至在IE的不同版本顯示結果也不盡相同,為了一個Pixel,調來調去調成仇,搞到設計人員想跳樓.

Eric Meyer又更新reset css了

- lostsnow - 走走停停看看
前几天Eric Meyer又思考了一下reset.css的问题,于是有所更新,具体为何要这样做,请看原文Reset Revisited.

为什么css 会使用重置 reset 样式

- - 收集分享互联网资源!
我们知道不同的浏览器客户端默认对css的解析会有区别,这种区别是内置到浏览器中的,也就是浏览器客户端会有其本身的一套css来解析默认的页面,如果 IE/Firefox/Chrome 每个版本的默认样式表都是一致的,那么我们的重置样式可以基于这些浏览器内置的样式,理论上将是不是渲染速度会更快一些呢. 实际情况可能并不是这样子,包括IE 他们的不同版本的默认css也是不一样的.如下:.

css reset重置样式有那么重要吗?

- - SegmentFault 最新的文章
在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下:. 但是最近在网上看了看网络文章,也感觉有些重置是没有用的. CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准,而这个基准更多的就是“清零”. 有时候看到别人网站站的一些重置是这样的:. div{margin:0; padding:0;}属性呢.

select的最佳预设(reset)

- - 携程UED
    我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要 外形CSS属性的支持,打造全兼容select.     我对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况:height.100.padding.0、height.no.padding.100、no.height.no.padding,结果如  链接图片各浏览器DEMO外观.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.