html重置css样式,CSS重置(CSS Reset) 让网页样式在各浏览器中表现一致

CSS Reset是指重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以有了CSS Reset，以让网页的样式在各浏览器中表现一致。

下面介绍几个主流的CSS Reset代码：

1、Eric Meyer

复制代码代码如下:

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, 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,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

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

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

2、YUI

复制代码代码如下:

/*

YUI 3.4.1 (build 4118)

Copyright 2011 Yahoo! Inc. All rights reserved.

Licensed under the BSD License.

http://yuilibrary.com/license/

*/

/*

TODO will need to remove settings on HTML since we can't namespace it.

TODO with the prefix,should I group by selector or property for weight savings?

*/

html {

color:#000;

background:#FFF;

}

/*

TODO remove settings on BODY since we can't namespace it.

*/

/*

TODO test putting a class on HEAD.

- Fails on FF.

*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {

margin:0;

padding:0;

}

table {

border-collapse:collapse;

border-spacing:0;

}

fieldset,img {

border:0;

}

/*

TODO think about hanlding inheritence differently,maybe letting IE6 fail a bit...

*/

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:100%;

font-weight:normal;

}

q:before,q:after {

content:'';

}

abbr,acronym {

border:0;

font-variant:normal;

}

/* to preserve line-height and selector appearance */

sup {

vertical-align:text-top;

}

sub {

vertical-align:text-bottom;

}

input,textarea,select {

font-family:inherit;

font-size:inherit;

font-weight:inherit;

}

/*to enable resizing for IE*/

input,textarea,select {

*font-size:100%;

}

/*because legend doesn't inherit in IE */

legend {

color:#000;

}

3、csslab

复制代码代码如下:

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, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, dialog, figure, header, footer, hgroup, menu, nav, section, time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

}

article, aside, nav, section, dialog, figure, header, footer, hgroup {

display:block;

}

legend {

display:none;

}

:focus {

outline: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

a img, iframe {

border: none;

}

ul {

list-style: none;

}

input, textarea, select, button {

font-size: 100%;

font-family: inherit;

}

input, select {

vertical-align:middle;

}

select {

margin: inherit;

}

button {

border: 0;

padding: 0;

background: transparent;

cursor: pointer;

}

/* Fixes incorrect placement of numbers in ol's in IE6/7 */

ol { margin-left:2em; }

/* ========================================= clearfix == */

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}

.clearfix {display: block;}

需要说明的是CSS Reset并不是一成不变的，具体还需要根据项目的不同需求做适当的修改，以达到浏览器的兼容和操作上的便利性。