<pre class="brush:css;">    *{margin:0;padding:0}
body {
    line-height: 1.5;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ol, ul {
    list-style: none;
}
```
<p>
	下面我么看下具体情况：</p>
<p>
	目前比较流行的有Eric Meyer的重置样式和YUI的重置样式。另外还有有Condensed Meyer Rese，但它是简化了Eric Meyer。有趣的是，Eric的重置样式也是源于YUI的。而那份简化版又把Eric的样式简化回YUI的样式了 。</p>
<h4>
	1.基础</h4>
<p>
	大家都还熟悉reset.css开始的那段代码吧，因为很好理解在这就不具体介绍了。</p>
<p>
	代码如下：</p>
<pre class="brush:css;">    * { margin: 0; padding: 0; }
```
<p>
	<b>2.默认色彩(color)</b></p>
<p>
	代码如下：</p>
<pre class="brush:css;">    html {
    color: #000;
    background: #FFF;
}
```
<p>
	对于默认颜色这块YUI和Eric有着不同的看法。</p>
<p>
	YUI重置背景色为白色而文字颜色为黑色。而Eric在当前最新版中让所有颜色为透明，他认为透明才是最原始的颜色。在这里我们没有必要争论谁对谁错。至于背景色我本人的观点是：视具体情况而定，当你的页面要求是背景色为白色，字颜色为黑色时，那么你就采用YUI的设置方法，反之，也是。个人观点：不要把重置背景色样式写在reset.css中。因为背景色要视情况而定，不是所有的地方都用到要设置背景色这块的。</p>
<p>
	至于字体的颜色，原则上也是不需要设置的，但是IE中的表单元素中legend这个对象比较特别，跟主题结合的比较紧密。legend会默认有自己的颜色（跟当前的主题有关）而不会继承父元素的颜色（即便设了color:inherit;）。从某种角度看，可以想当然地认为设置字体颜色人数远小于设置背景色的人数；以及认为就算设置了背景色，人们看到legend元素是黑色的也不会觉得奇怪。因此，YUI在其reset中设置了legend {color: #000;}是无可厚非的。</p>
<p>
	但从另外一个角度上看：把这个放到typography.css或者form.css里岂不是更好？不同的页面设计，其对legend的色彩要求很可能是不同的，放在reset.css里重复定义是没有必要的。因此这条CSS规则可以作为在reset.css之后首先应当设置的规则。</p>
<h4>
	3.padding和margin</h4>
<p>
	Eric Meyer代码如下：</p>
<pre class="brush:css;">    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%;
    vertical-align: baseline;
    background: transparent;
}
```
<p>
	YUI代码如下：</p>
<pre class="brush:css;">    body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
```
<p>
	本人比较喜欢YUI的做法，这样写的好处是可以避免给一些无关元素带上不必要的样式。导致元素过多时的性能下降。当然使用那个要看个人的爱好了。</p>
<h4>
	4. 边框</h4>
<p>
	YUI代码如下：</p>
<pre class="brush:css;">    fieldset, img {
    border: 0;
}
abbr, acronym {
    border: 0;
    font-variant: normal;
}
```
<p>
	Eric Meyer在上面的第三条中已经把边框这条给重置过了。</p>
<h4>
	5.字体样式(font style/weight/size/variant)</h4>
<p>
	YUI代码如下：</p>
<pre class="brush:css;">    address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
    font-style: inherit;
    font-weight: inherit;
}
 
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
abbr, acronym {
    border: 0;
    font-variant: normal;
}
 
input, button, textarea,
select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
 
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
    *font-size: 100%;
}
```
<p>
	Eric代码如下：</p>
<pre class="brush:css;">    body{*font-size: 100%;}
```
<p>
	但通常情况下，我认为还是重置一下这些样式好，比如strong元素，很多时候只是语义而已，并非希望他真的加粗。可能会有背景色或者其他方式来强调。而之所以这里都用了inherit这个继承属性而不是定义 font-weight: normal; 这是为了防止——父元素字体加粗了，而没有一个子元素继承加粗属性（因为设置了normal）——这种情况的发生。所以把YUI中设置h1-h6的样式以及abbr和acronym的两句样式都改成inherit会比较好。</p>
<p>
	对于h1-h6的字体大小定义，建议放到专门的typography.css里，不建议放在reset.css里。所以这里我同样爱好YUI的方法，全部重置。</p>
<h4>
	6.行高(line-height)</h4>
<div>
	对于行高YUI没有给出重置定义，而Eric的重置代码如下：</div>
<div>
	<pre class="brush:css;">    	body {
    line-height: 1;
}
```
</pre></div>
<p>
	行高默认所有元素都会继承的，所以给body设置行高为1就足够了。通常行高设为1时候，英文照常阅读，但中文就无法阅读了，由于行间距过于紧密可能会容易看错行。通常在中文环境下得设置1.4到1.5才能是用户正常阅读。这里我建议是1.5，这样算出来的值也是整数。比如字体大小12px的时候行高是18px，字体大小16px时行高24px。看起来也会比较舒服。此外，还有一个不设置成1的重要原因是：IE下，行高为1时，中文字顶部会被削掉几像素，字体加粗时尤为明显。所以，重置的原则是好的，但切不可重置为1。</p>
<h4>
	7，表格元素</h4>
<h4>
	<span class="Apple-style-span" style="font-weight: normal; ">在表格方面，YUI和Eric的重置方法都是一样，代码如下：</span></h4>
<div>
	<pre class="brush:css;">    	/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
```
	<p>
		YUI此外还设置了：</p>
	<pre class="brush:css;">    	caption, th {
    text-align: left;
}
```
</pre></pre></div>
<p>
	<span class="Apple-style-span" style="font-weight: bold; ">8，列表样式</span></p>
<div>
	YUI代码：</div>
<div>
	<pre class="brush:css;">    	li {
    list-style: none;
}
```
	Eric代码：
	<pre class="brush:css;">    	ol, ul {
    list-style: none;
}
```
</pre></pre></div>
<p>
	本人推荐使用Eric代码。</p>
<h4>
	9.上下标以及baseline</h4>
<div>
	YUI代码：</div>
<div>
	<pre class="brush:css;">    	sup {
    vertical-align: baseline;
}
 
sub {
    vertical-align: baseline;
}
```
</pre></div>
<p>
	YUI代码：</p>
<p>
	sup, sub {</p>
<p>
	&nbsp;</p>
<div>
	&nbsp;&nbsp; &nbsp;font-size: 100%;</div>
<div>
	&nbsp;&nbsp; &nbsp;vertical-align: baseline;</div>
<div>
	}</div>
<div>
	本人推荐YUI方法。</div>
<div>
	&nbsp;</div>
<h4>
	10.引用元素的引号</h4>
<div>
	某些浏览器中，q或者blockquote前后会出现引号。这个并不是谁都喜欢的。所以需要重置他。</div>
<div>
	YUI的比较简单，只重置了q代码如下：</div>
<div>
	<div>
		<pre class="brush:css;">    		q:before,
q:after {
    content: '';
}
```
		<p>
			而Eric则比较周到，把q和blockquote都重置了。</p>
		<p>
			代码如下：</p>
		<div>
			<pre class="brush:css;">    			blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
```
			<p>
				推荐使用Eric。</p>
			<div>
				<pre class="brush:css;">    				* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
```
				<h4>
					11.插入和删除(ins/del)</h4>
				<div>
					对于这个问题，YUI直接清除了ins的下划线和del的删除线,代码如下：</div>
				<div>
					<pre class="brush:css;">    					del, ins {
    text-decoration: none;
}
```
					<p>
						Eric保留了删除线，代码如下：</p>
					<pre class="brush:css;">    					* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
```
					<h4>
						12.链接</h4>
					<p>
						代码如下：</p>
					<pre class="brush:css;">    					:link, :visited {
    text-decoration: none;
}
```
					<h4>
						13.下面的reset.css仅供参考</h4>
					<p>
						代码如下：</p>
					<pre class="brush:css;">    					/*
Copyright (c) 2009, Shawphy(shawphy.com). All rights reserved.
http://shawphy.com/2009/03/my-own-reset-css.html
Based on YUI http://developer.yahoo.com/yui/reset/
and Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html 
Licensed under the BSD License:
http://creativecommons.org/licenses/BSD/
version: 1.1 | 20090303
*/
 
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
fieldset, img {
    border: 0;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
    font-style: normal;
    font-weight: normal;
}
 
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
abbr, acronym {
    border: 0;
    font-variant: normal;
}
 
input, button, textarea,
select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
code, kbd, samp, tt {
    font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
    *font-size: 100%;
}
body {
    line-height: 1.5;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption, th {
    text-align: left;
}
sup, sub {
    font-size: 100%;
    vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited , ins {
    text-decoration: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
```
				</pre></pre></pre></pre></div>
				<p>
					&nbsp;</p>
				<p>
					感谢：http://shawphy.com/2009/03/my-own-reset-css.html</p>
			</pre></div>
		</pre></div>
	</pre></div>
</div>