css reset
最近偶然发现了一篇总结css reset 的文章，拿出来给大家一起分享。
最近看到一个词叫css reset。什么叫做css reset呢？我理解为重置css，也就是重置默认样式。我在HTML下的默认样式中讲到，一些标签元素在HTML下有一个默认属性值，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式（cssreset）。
CssReset也就Reset Css ,就是重置一些标签样式，或者说默认的样式。前端开发工作中有一款好的、统一的CssReset将提高开发效率，提高样式代码的重用，减少重复代码，减少维护成本。
1.Ateneu Popular CSS Reset
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, 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-weight:inherit;
font-style: inherit;
font-size: 100%;
font-family:inherit;
vertical-align:baselinebaseline;
}
:focus { outline:0;}
a, a:link, a:visited,a:hover, a:active{text-decoration:none}
table { border-collapse:separate;border-spacing: 0;}
th, td {text-align: left;font-weight: normal;}
img, iframe {border:none; text-decoration:none;}
ol, ul {list-style:none;}
input, textarea, select,button {font-size: 100%;font-family: inherit;}
select {margin:inherit;}
hr {margin: 0;padding:0;border: 0;color: #000;background-color: #000;height: 1px}
-----------------------------------------------------------------------------------
2.Chris Poteet’s Reset CSS
CSS代码
* {
vertical-align: baselinebaseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6,p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
----------------------------------------------------------------------------------
3.Yahoo’s（YUI） CSS Reset
CSS代码
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td{
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var{
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
----------------------------------------------------------------------------------
4.Eric Meyer Reset CSS
CSS代码
html, body, div, span,applet, object, iframe, table, caption,
tbody, tfoot, thead, tr,th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small,strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6,p, blockquote, pre, a, abbr,
acronym, address, big,cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label,legend {
vertical-align: baselinebaseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before,blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=----------------------------------
5.Tantek Celik Reset CSS
CSS代码
:link,:visited {text-decoration:none }
ul,ol { list-style:none}
h1,h2,h3,h4,h5,h6,pre,code{ font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0}
a img,:link img,:visitedimg { border:none }
address {font-style:normal }
-----------------------------------------------------------------------------------
6.Christian Montoya Reset CSS
CSS代码
html, body, form,fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica,sans-serif;
}
h1, h2, h3, h4, h5, h6,p, pre,
blockquote, ul, ol, dl,address {
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea{
font-size: 100%;
font-family: inherit;
}
-----------------------------------------------------------------------------------
7.Rudeworks Reset CSS
CSS代码
* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% "Lucida Grande",Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6,p, pre,
blockquote, ul, ol, dl,address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottombottom: 0.3em;
vertical-align: baselinebaseline;
}
sub {
position: relative;
bottombottom: -0.2em;
vertical-align: baselinebaseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt,var, input[type=‘text’], textarea {
font-size: 100%;
font-family: monaco, "LucidaConsole", courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited,a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus,select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-rightright {
float: rightright;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}
---------------------------------------------------------------------------------
8.Anieto2K Reset CSS
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, dl, dt, dd, ol, ul, li,
fieldset, form, label,legend,
table, caption, tbody,tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baselinebaseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before,blockquote:after, q:before, q:after {
content: ""
}
blockquote, q {
quotes: "" ""
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}
--------------------------------------------------------------------------------
9.CSSLab CSS Reset
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, 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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baselinebaseline;
}
:focus {
outline: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ol, ul {
list-style: none;
}
input, textarea, select,button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
/* Fixes incorrectplacement 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;}
----------------------------------------------------------------------------------
10.Condensed Meyer Reset
CSS代码
body, div, dl, dt, dd,ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset,input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
fieldset, img {
border: 0;
}
table {
border-collapse:collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
address, caption, cite,code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6{
font-weight: normal;
font-size: 100%;
}
q:before, q:after {
content: ”;
}
abbr, acronym {
border: 0;
}
----------------------------------------------------------------------------------
国内一个前端开发工程师自己整理的CSS Reset:
CSS代码
/*reset 全局定义 注释可去掉*/
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;}
fieldset,img{border:0;}
ulli{list-style:none;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
/* body标记样式定义全局的字体颜色、背景色和文本对齐设置 */
body{color: #000;background: #fff; text-align: left; font-size:75.00%; font-
family:'lucidagrande',taho,verdana,'trebuchet ms',sans-serif;}
/* hx系列 */
h1, h2, h3, h4, h5, h6{font-weight: bold; }
h1{ font-size: 200%;}
h2{ font-size: 166.67%;}
h3{ font-size: 150%;}
h4{ font-size: 133.33%;}
h5{ font-size: 116.67%;}
h6{font-size: 116.67%;font-style: italic;}
/* 着重标记 */
cite, blackquote, em, i{font-style: italic; }
strong, b{ font-weight:bold; }
/* 预格式标记 */
pre, code{font-family:monospace; font-size: 1.1em;}
/* 缩写标记 */
acronym,abbr{border-bottom: 0.1em dashed #c00;cursor: help;letter-spacing: .07em;}
/* 定义默认的链接样式 */
a:link,a:visited{color:#0065FF; text-decoration: none;}
a:hover{text-decoration:underline;}
/* 清除溢出，浮动 */
.clearing, .HackBox{border-top:1px solid transparent !important; clear:both;
visibility: hidden;}
/* 不需要额外增加元素的清理浮动的类使用:after伪类来实现浮动清理 */
.wrapfix:after{ content:"."; display: block; height: 0; clear: both;visibility:
hidden;}
/* IE7 hack */
.wrapfix {display: inline-block;}
/* IE-mac, IE5, IE6*/
* html .wrapfix {height:1%;}
.wrapfix {display:block;}
/*隐藏元素*/
.invisible{visibility:hidden;}
/* 从页面布局上隐藏元素*/
.hidden{display:none;}
/* 通用容器 */
.wrapper{clear: both;overflow: hidden;}
/*--框架--*/
#main{width:950px;margin:0 auto; overflow:hidden;}
--------------------------------------------------------------------------------------------------
淘宝 （www.taobao.com ）：
html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td{
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:"";
}
-------------------------------------------------------------------------------------------------
百度有啊 (www.youa.com )：（架构基本上是模仿YUI来做的）
body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input,textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}
-------------------------------------------------------------------------------------------------
在《超越css》 一书中建议我们做网站开始重置所有默认样式：
/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{ margin:0;padding:0}
/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size:100%}
/* Removes list-style from lists */
ol,ul { list-style:none }
/* Normalizes font-size and font-weight to normal */
address,caption,cite,code,dfn,em,strong,th,var { font-size:normal;font-weight:normal }
/* Removes list-style from lists */
table { border-collapse:collapse; border-spacing:0 }
/* Removes border from fieldset and img */
fieldset,img { border:0 }
/* Left-aligns text in caption and th */
caption,th { text-align:left }
/* Removes quotation marks from q */
q:before,q:after { content:''}
那我们实际写代码的时候该怎么来css reset呢？
我个人推荐使用（Eric Meyer 和YUI ）的 css reset
