Reset.css 文件用于重置 HTML 的默认样式,自己总结了大概半年,感觉现在还是比较适合自己的,所以就放出来供大家分享,俗话说:"没有最好,只有最适合",所以我只能说这份代码很适合我,大家仅供参考,有什么意见和建议的也可以留言回复我。还有,对于别人的 No CSS Reset 等等,我自己觉得 Reset 对我还是蛮有意义的,减少了很多工作量和后期的 Bug,所以还是仅供参考,自己总结出一份自己的 CSS Reset。

先全部贴出来,然后一一解释,后面也附带下载
@charset "utf-8";
/*
 * AlphaTr CSS Reset version: 1.2 (20120509)
 * Copyright 2012 AlphaTr(Alphatr.com). All rights reserved.
 * Based on YIU and Eric Meyer
 * http://blog.AlphaTr.com/my-own-reset-css.html
 * Licensed under the BSD License:
 * http://creativecommons.org/licenses/BSD/
 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend,  textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    font-size:63%;
}

fieldset, img, iframe {
    border:0;
}

abbr, acronym {
    border:0;
    font-variant:normal;
}

/* remember to define focus styles! */
:focus {
    outline: 0 none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption, th {
    text-align: left;
}

/*
    TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
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;
    clear: both;
}

input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/*to enable resizing for IE*/
input, button, textarea, select, code, kbd, samp, tt {
    *font-size: 100%;
}

del {
    text-decoration: line-through;
}

ul {
    list-style:none;
}

blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: none;
}

:link, :visited {
    text-decoration: none;
}

/* to preserve line-height and selector appearance */
sup {
    vertical-align:text-top;
}
sub {
    vertical-align:text-bottom;
}
sub, sup {
    font-size: 60%;
}

/*because legend doesn't inherit in IE */
legend {
    color:#222;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

这里就简要说明一下和 YUI,Eric Meyer 的区别吧

重置 margin 和 padding
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend,  textarea, p, blockquote, th, td/*input, button,*/ {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

和 Eric Meyer 的比较相像,增加了 background: transparent;,其实都是大同小异,不太认同 YUI 的只重置 margin 和 padding。两种都不错,但绝对不要写 *{margin:0;padding:0;},这样就会破坏一些其他元素的,比如 button 元素。

字号的重置
body {
    font-size:63%;
}

这个是之前使用 em 作为字体大小单位而做的,现在浏览器都有全局缩放,所以基本就没用了。

列表样式

YUI 的样式是li { list-style: none; },而 Eric 是 ul, ol { list-style: none; },自己是 ul { list-style: none; },我认为 ul 一般不需要标记,但使用 ol 时还是大部分需要序号的,所以只重置了 ul。

设置 HTML5 样式
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

这个代码需要配合 JS 代码才能生效。

其他的代码基本都和 YUI,Eric 的差别不大,也很好理解。