一些好用的CSS Reset

Css Reset也就Reset Css ,就是重置一些标签样式，或者说默认的样式。前端开发工作中有一款好的、统一的Css Reset将提高开发效率，提高样式代码的重用，减少重复代码，减少维护成本。 现

发表于：2009-03-21 17:18 分类：首页 > 网站重构 > CSS+XHTML > , 标签: CSS

Css Reset也就Reset Css ,就是重置一些标签样式，或者说默认的样式。前端开发工作中有一款好的、统一的Css Reset将提高开发效率，提高样式代码的重用，减少重复代码，减少维护成本。

现在分享一些老外的Css Reset，供大家参考；

1.Ateneu Popular CSS Reset

查看：Ateneu Popular

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 :  baseline baseline ;
 }
 :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

查看：Chris Poteet’s

CSS代码

 * {
      vertical-align :  baseline baseline ;
      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

查看： Yahoo （YUI）

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

查看：Eric Meyer

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 :  baseline baseline ;
      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

查看： Tantek Celik

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,:visited img {  border : none  }
 address {  font-style : normal  }

6.Christian Montoya Reset CSS

查看：Christian Montoya

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

查看：Rudeworks

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 ;
      bottom bottom : 0.3em;
      vertical-align :  baseline baseline ;
 }
 sub  {
      position :  relative ;
      bottom bottom : -0.2em;
      vertical-align :  baseline baseline ;
 }
 li, dd, blockquote {
      margin-left : 1em;
 }
 code , kbd, samp,  pre , tt, var, input[type=‘text’], textarea {
      font-size : 100%;
      font-family : monaco,  "Lucida Console" , 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 - right right  {
      float :  right right ;
 }
 body {
      text-align :  center ;
 }
 #wrappe r {
      margin : 0  auto ;
      text-align :  left ;
 }

8.Anieto2K Reset CSS

查看： Andrés Nieto

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 :  baseline baseline
 }
 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

查看：CSSLab

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 :  baseline baseline ;
 }
 :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 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 ;}

 

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-tricks站的调查Eric Meyer Reset CSS（也就是上面的第4个）使用人数最多，点击查看http://css-tricks.com/poll-results-what-css-reset-do-you-use/ 。

再来看看国内一个前端开发工程师自己整理的 CSS Reset:

绣财：http://54xc.cn/?p=57

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;}
 ul li{ 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 : 'lucida grande' ,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 ;}

个人认为Css Reset的整理还是要从自身网站出发，合适自己的才是做好的。