HTML5 新元素标签系列：HTML5 页面中用的重设样式表（CSS）

所有浏览器对它们“知道”的元素都有默认的设定——元素有多少留白padding和边距margin，它是显示为块还是行内元素？除非用CSS重写这些设定，不然它们就会默认生效。

以下的CSS可以帮助你清除这些默认样式，使你能够按照自己的方式定制样式。

几点说明：

1， 移除了  <acronym>, <center>  <big> 等 HTML5 不再支持的元素。

2，添加了新的 HTML5 元素标签。

3，给应该显示为块的元素显式的添加了 display:block 。（不然的话，一些新的HTML5标签可能在不同浏览器出现奇怪问题）

4，给 <abbr> 和 <dfn> 这两个 HTML5 新元素添加了属性选择，这样的话，只有当它们有 Title 属性时，样式才起作用。

 

/* 

html5doctor.com Reset Stylesheet

v1.6.1

Last Updated: 2010-09-17

Author: Richard Clark - http://richclarkdesign.com 

Twitter: @rich_clark

*/



html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

abbr, address, cite, code,

del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var,

b, i,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {

    margin:0;

    padding:0;

    border:0;

    outline:0;

    font-size:100%;

    vertical-align:baseline;

    background:transparent;

}



body {

    line-height:1;

}



article,aside,details,figcaption,figure,

footer,header,hgroup,menu,nav,section { 

    display:block;

}



nav ul {

    list-style:none;

}



blockquote, q {

    quotes:none;

}



blockquote:before, blockquote:after,

q:before, q:after {

    content:'';

    content:none;

}



a {

    margin:0;

    padding:0;

    font-size:100%;

    vertical-align:baseline;

    background:transparent;

}



/* change colours to suit your needs */

ins {

    background-color:#ff9;

    color:#000;

    text-decoration:none;

}



/* change colours to suit your needs */

mark {

    background-color:#ff9;

    color:#000; 

    font-style:italic;

    font-weight:bold;

}



del {

    text-decoration: line-through;

}



abbr[title], dfn[title] {

    border-bottom:1px dotted;

    cursor:help;

}



table {

    border-collapse:collapse;

    border-spacing:0;

}



/* change border colour to suit your needs */

hr {

    display:block;

    height:1px;

    border:0;   

    border-top:1px solid #cccccc;

    margin:1em 0;

    padding:0;

}



input, select {

    vertical-align:middle;

}