一些好用的CSS Reset

本文介绍了 CSS Reset 的概念及其在前端开发中的重要性,并分享了多种不同的 CSS Reset 实现方案,包括 Ateneu Popular、Chris Poteet、Yahoo YUI 等知名作者的版本。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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代码
  1. html, body, div, span, applet, object, iframe, h1, h2, h3,      
  2. h4, h5, h6, p, blockquote,  pre , a, abbr, acronym,      
  3. address, big, cite,  code , del, dfn, em,  font , img, ins,      
  4. kbd, q, s, samp,  small , strike, strong,  sub , sup, tt,      
  5. var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,      
  6. table,  caption , tbody, tfoot, thead, tr, th, td {      
  7. margin : 0;      
  8. padding : 0;      
  9. border : 0;      
  10. outline : 0;      
  11. font-weight : inherit;      
  12. font-style : inherit;      
  13. font-size : 100%;      
  14. font-family : inherit;      
  15. vertical-alignbaseline baseline ;      
  16. }      
  17. :focus {  outline : 0;}      
  18. a, a:link, a:visited, a:hover, a:active{ text-decoration : none }      
  19. table {  border-collapseseparate ; border-spacing : 0;}      
  20. th, td { text-alignleftfont-weightnormal ;}      
  21. img, iframe { bordernonetext-decoration : none ;}      
  22. ol, ul { list-stylenone ;}      
  23. input, textarea, select, button { font-size : 100%; font-family : inherit;}      
  24. select { margin : inherit;}      
  25. hr { margin : 0; padding : 0; border : 0; color#000 ; background-color#000 ; height1px }     

2.Chris Poteet’s Reset CSS

查看:Chris Poteet’s

CSS代码
  1. * {      
  2.      vertical-alignbaseline baseline ;      
  3.      font-family : inherit;      
  4.      font-style : inherit;      
  5.      font-size : 100%;      
  6.      bordernone ;      
  7.      padding : 0;      
  8.      margin : 0;      
  9. }      
  10. body {      
  11.      padding5px ;      
  12. }      
  13. h1, h2, h3, h4, h5, h6, p,  pre , blockquote, form, ul, ol, dl {      
  14.      margin20px  0;      
  15. }      
  16. li, dd, blockquote {      
  17.      margin-left40px ;      
  18. }      
  19. table {      
  20.      border-collapsecollapse ;      
  21.      border-spacing : 0;      
  22. }    

3.Yahoo’s(YUI) CSS Reset

查看: Yahoo (YUI)

CSS代码
  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre ,      
  2. form,fieldset,input,textarea,p,blockquote,th,td {      
  3.      padding : 0;      
  4.      margin : 0;      
  5. }      
  6. table {      
  7.      border-collapsecollapse ;      
  8.      border-spacing : 0;      
  9. }      
  10. fieldset,img {      
  11.      border : 0;      
  12. }      
  13. address, caption ,cite, code ,dfn,em,strong,th,var {      
  14.      font-weightnormal ;      
  15.      font-stylenormal ;      
  16. }      
  17. ol,ul {      
  18.      list-stylenone ;      
  19. }      
  20. caption ,th {      
  21.      text-alignleft ;      
  22. }      
  23. h1,h2,h3,h4,h5,h6 {      
  24.      font-weightnormal ;      
  25.      font-size : 100%;      
  26. }      
  27. q:before,q:after {      
  28.      content : '' ;      
  29. }      
  30. abbr,acronym {  border : 0;      
  31. }    

4.Eric Meyer Reset CSS

查看:Eric Meyer

CSS代码
  1. html, body, div, span, applet, object, iframe, table,  caption ,      
  2. tbody, tfoot, thead, tr, th, td, del, dfn, em,  font , img, ins,      
  3. kbd, q, s, samp,  small , strike, strong,  sub , sup, tt, var,      
  4. h1, h2, h3, h4, h5, h6, p, blockquote,  pre , a, abbr,      
  5. acronym, address, big, cite,  code , dl, dt, dd, ol, ul, li,      
  6. fieldset, form, label, legend {      
  7.      vertical-alignbaseline baseline ;      
  8.      font-family : inherit;      
  9.      font-weight : inherit;      
  10.      font-style : inherit;      
  11.      font-size : 100%;      
  12.      outline : 0;      
  13.      padding : 0;      
  14.      margin : 0;      
  15.      border : 0;      
  16. }      
  17. :focus {      
  18.      outline : 0;      
  19. }      
  20. body {      
  21.      backgroundwhite ;      
  22.      line-height : 1;      
  23.      colorblack ;      
  24. }      
  25. ol, ul {      
  26.      list-stylenone ;      
  27. }      
  28. table {      
  29.      border-collapseseparate ;      
  30.      border-spacing : 0;      
  31. }      
  32. caption , th, td {      
  33.      font-weightnormal ;      
  34.      text-alignleft ;      
  35. }      
  36. blockquote:before, blockquote:after, q:before, q:after {      
  37.      content"" ;      
  38. }      
  39. blockquote, q {      
  40.      quotes""   "" ;      
  41. }    

5.Tantek Celik Reset CSS

查看: Tantek Celik

CSS代码
  1. :link,:visited {  text-decoration : none  }      
  2. ul,ol {  list-style : none  }      
  3. h1,h2,h3,h4,h5,h6, pre , code  {  font-size :1em; }      
  4. ul,ol,li,h1,h2,h3,h4,h5,h6, pre ,form,body,html,p,blockquote,fieldset,input      
  5. margin :0;  padding :0 }      
  6. a img,:link img,:visited img {  border : none  }      
  7. address {  font-style : normal  }  

6.Christian Montoya Reset CSS

查看:Christian Montoya

CSS代码
  1. html, body, form, fieldset {      
  2.      margin : 0;      
  3.      padding : 0;      
  4.      font : 100%/120%  VerdanaArialHelveticasans-serif ;      
  5. }      
  6. h1, h2, h3, h4, h5, h6, p,  pre ,      
  7. blockquote, ul, ol, dl, address {      
  8.      margin : 1em 0;      
  9.      padding : 0;      
  10. }      
  11. li, dd, blockquote {      
  12.      margin-left : 1em;      
  13. }      
  14. form label {      
  15.      cursorpointer ;      
  16. }      
  17. fieldset {      
  18.      bordernone ;      
  19. }      
  20. input, select, textarea {      
  21.      font-size : 100%;      
  22.      font-family : inherit;      
  23. }    

7.Rudeworks Reset CSS

查看:Rudeworks

CSS代码
  1. * {      
  2.      margin : 0;      
  3.      padding : 0;      
  4.      bordernone ;      
  5. }      
  6. html {      
  7.      font : 62.5%  "Lucida Grande" , Lucida,  Verdanasans-serif ;      
  8.      text-shadow#000   0px   0px   0px ;      
  9. }      
  10. ul {      
  11.      list-stylenone ;      
  12.      list-style-typenone ;      
  13. }      
  14. h1, h2, h3, h4, h5, h6, p,  pre ,      
  15. blockquote, ul, ol, dl, address {      
  16.      font-weightnormal ;      
  17.      margin : 0 0 1em 0;      
  18. }      
  19. cite, em, dfn {      
  20.      font-styleitalic ;      
  21. }      
  22. sup {      
  23.      positionrelative ;      
  24.      bottom bottom : 0.3em;      
  25.      vertical-alignbaseline baseline ;      
  26. }      
  27. sub  {      
  28.      positionrelative ;      
  29.      bottom bottom : -0.2em;      
  30.      vertical-alignbaseline baseline ;      
  31. }      
  32. li, dd, blockquote {      
  33.      margin-left : 1em;      
  34. }      
  35. code , kbd, samp,  pre , tt, var, input[type=‘text’], textarea {      
  36.      font-size : 100%;      
  37.      font-family : monaco,  "Lucida Console" , courier, mono-space;      
  38. }      
  39. del {      
  40.      text-decorationline-through ;      
  41. }      
  42. ins, dfn {      
  43.      border-bottom1px   solid   #ccc ;      
  44. }      
  45. small , sup,  sub  {      
  46.      font-size : 85%;      
  47. }      
  48. abbr, acronym {      
  49.      text-transformuppercase ;      
  50.      font-size : 85%;      
  51.      letter-spacing : .1em;      
  52.      border-bottom -style:  dotted ;      
  53.      border-bottom - width1px ;      
  54. }      
  55. a abbr, a acronym {      
  56.      bordernone ;      
  57. }      
  58. sup {      
  59.      vertical-alignsuper ;      
  60. }      
  61. sub  {      
  62.      vertical-alignsub ;      
  63. }      
  64. h1 {      
  65.      font-size : 2em;      
  66. }      
  67. h2 {      
  68.      font-size : 1.8em;      
  69. }      
  70. h3 {      
  71.      font-size : 1.6em;      
  72. }      
  73. h4 {      
  74.      font-size : 1.4em;      
  75. }      
  76. h5 {      
  77.      font-size : 1.2em;      
  78. }      
  79. h6 {      
  80.      font-size : 1em;      
  81. }      
  82. a, a:link, a:visited, a:hover, a:active {      
  83.      outline : 0;      
  84.      text-decorationnone ;      
  85. }      
  86. a img {      
  87.      bordernone ;      
  88.      text-decorationnone ;      
  89. }      
  90. img {      
  91.      bordernone ;      
  92.      text-decorationnone ;      
  93. }      
  94. label, button {      
  95.      cursorpointer ;      
  96. }      
  97. input:focus, select:focus, textarea:focus {      
  98.      background-color#FFF ;      
  99. }      
  100. fieldset {      
  101.      bordernone ;      
  102. }      
  103. . clear  {      
  104.      clearboth ;      
  105. }      
  106. . float - left  {      
  107.      floatleft ;      
  108. }      
  109. . float - right right  {      
  110.      floatright right ;      
  111. }      
  112. body {      
  113.      text-aligncenter ;      
  114. }      
  115. #wrappe r {      
  116.      margin : 0  auto ;      
  117.      text-alignleft ;      
  118. }    

8.Anieto2K Reset CSS

查看: Andrés Nieto

CSS代码
  1. html, body, div, span, applet, object, iframe,      
  2. h1, h2, h3, h4, h5, h6, p,      
  3. blockquote,  pre , a, abbr, acronym, address, big,      
  4. cite,  code , del, dfn, em,  font , img,      
  5. ins, kbd, q, s, samp,  small , strike,      
  6. strong,  sub , sup, tt, var, dl, dt, dd, ol, ul, li,      
  7. fieldset, form, label, legend,      
  8. table,  caption , tbody, tfoot, thead, tr, th, td,      
  9. center , u, b, i {      
  10.      margin : 0;      
  11.      padding : 0;      
  12.      border : 0;      
  13.      outline : 0;      
  14.      font-weightnormal ;      
  15.      font-stylenormal ;      
  16.      font-size : 100%;      
  17.      font-family : inherit;      
  18.      vertical-alignbaseline baseline      
  19. }      
  20. body {      
  21.      line-height : 1     
  22. }      
  23. :focus {      
  24.      outline : 0     
  25. }      
  26. ol, ul {      
  27.      list-stylenone      
  28. }      
  29. table {      
  30.      border-collapsecollapse ;      
  31.      border-spacing : 0     
  32. }      
  33. blockquote:before, blockquote:after, q:before, q:after {      
  34.      content""      
  35. }      
  36. blockquote, q {      
  37.      quotes""   ""      
  38. }      
  39. input, textarea {      
  40.      margin : 0;      
  41.      padding : 0     
  42. }      
  43. hr {      
  44.      margin : 0;      
  45.      padding : 0;      
  46.      border : 0;      
  47.      color#000 ;      
  48.      background-color#000 ;      
  49.      height1px      
  50. }    

9.CSSLab CSS Reset

查看:CSSLab

CSS代码
  1. html, body, div, span, applet, object, iframe, h1, h2, h3,      
  2. h4, h5, h6, p, blockquote,  pre , a, abbr, acronym, address,      
  3. big, cite,  code , del, dfn, em,  font , img, ins, kbd, q, s, samp,      
  4. small , strike, strong,  sub , sup, tt, var, dl, dt, dd, ol, ul, li,      
  5. fieldset, form, label, legend, table,  caption , tbody, tfoot,      
  6. thead, tr, th, td {      
  7.      margin : 0;      
  8.      padding : 0;      
  9.      border : 0;      
  10.      outline : 0;      
  11.      font-weight : inherit;      
  12.      font-style : inherit;      
  13.      font-size : 100%;      
  14.      font-family : inherit;      
  15.      vertical-alignbaseline baseline ;      
  16. }      
  17. :focus {      
  18.      outline : 0;      
  19. }      
  20. table {      
  21.      border-collapseseparate ;      
  22.      border-spacing : 0;      
  23. }      
  24. caption , th, td {      
  25.      text-alignleft ;      
  26.      font-weightnormal ;      
  27. }      
  28. a img, iframe {      
  29.      bordernone ;      
  30. }      
  31. ol, ul {      
  32.      list-stylenone ;      
  33. }      
  34. input, textarea, select, button {      
  35.      font-size : 100%;      
  36.      font-family : inherit;      
  37. }      
  38. select {      
  39.      margin : inherit;      
  40. }      
  41. /* Fixes incorrect placement of numbers in ol's in IE6/7 */      
  42. ol {  margin-left :2em; }      
  43. /* == clearfix == */      
  44. .clearfix:after {      
  45.      content"." ;      
  46.      displayblock ;      
  47.      height : 0;      
  48.      clearboth ;      
  49.      visibilityhidden ;      
  50. }      
  51. .clearfix { displayinline - block ;}      
  52. * html .clearfix { height : 1%;}      
  53. .clearfix { displayblock ;}    

 

10.Condensed Meyer Reset

CSS代码
  1. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,   
  2. pre , form, fieldset, input, textarea, p, blockquote, th, td {   
  3. padding : 0;   
  4. margin : 0;   
  5. }   
  6. fieldset, img {   
  7. border : 0;   
  8. }   
  9. table {   
  10. border-collapsecollapse ;   
  11. border-spacing : 0;   
  12. }   
  13. ol, ul {   
  14. list-stylenone ;   
  15. }   
  16. address,  caption , cite,  code , dfn, em, strong, th, var {   
  17. font-weightnormal ;   
  18. font-stylenormal ;   
  19. }   
  20. caption , th {   
  21. text-alignleft ;   
  22. }   
  23. h1, h2, h3, h4, h5, h6 {   
  24. font-weightnormal ;   
  25. font-size : 100%;   
  26. }   
  27. q:before, q:after {   
  28. content : ”;   
  29. }   
  30. abbr, acronym {   
  31. border : 0;   
  32. }   
  33.   

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代码
  1. /*reset 全局定义 注释可去掉*/   
  2. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre , code   
  3. ,form,fieldset,legend,input,textarea,p,blockquote,th,td   
  4. { margin :0; padding :0;}   
  5. fieldset,img{ border :0;}   
  6. ul li{ list-style : none ;}   
  7. input,textarea,select{ font-family :inherit; font-size :inherit; font-weight :inherit;}   
  8. input,textarea,select{* font-size :100%;}   
  9. /* body标记样式定义全局的字体颜色、背景色和文本对齐设置 */   
  10. body{ color#000background#ffftext-alignleftfont-size :75.00%;  font-family : 'lucida grande' ,taho, verdana , 'trebuchet ms' , sans-serif ;}   
  11. /* hx系列 */   
  12. h1, h2, h3, h4, h5, h6{  font-weightbold ; }   
  13. h1{  font-size : 200%; }   
  14. h2{  font-size : 166.67%; }   
  15. h3{  font-size : 150%; }   
  16. h4{  font-size : 133.33%; }   
  17. h5{  font-size : 116.67%; }   
  18. h6{ font-size : 116.67%;  font-styleitalic ;}   
  19. /* 着重标记 */   
  20. cite, blackquote, em, i{  font-styleitalic ; }   
  21. strong, b{  font-weightbold ; }   
  22. /* 预格式标记 */   
  23. precode { font-familymonospacefont-size : 1.1em;}   
  24. /* 缩写标记 */   
  25. acronym, abbr{ border-bottom : 0.1em  dashed   #c00 ; cursorhelp ; letter-spacing : .07em;}   
  26. /* 定义默认的链接样式 */   
  27. a:link, a:visited{ color : #0065FFtext-decorationnone ;}   
  28. a:hover{ text-decorationunderline ;}   
  29. /* 清除溢出,浮动 */   
  30. .clearing, .HackBox{  border-top : 1px   solid   transparent  ! importantclear : bothvisibilityhidden ;}   
  31. /* 不需要额外增加元素的清理浮动的类使用:after伪类来实现浮动清理 */   
  32. .wrapfix:after{  content"."displayblockheight : 0;  clearboth ; visibilityhidden ;}   
  33. /* IE7 hack */   
  34. .wrapfix { displayinline - block ;}   
  35. /* IE-mac, IE5, IE6 */   
  36. * html .wrapfix { height : 1%;}   
  37. .wrapfix { displayblock ;}   
  38. /*隐藏元素*/   
  39. .invisible{ visibility : hidden ;}   
  40. /* 从页面布局上隐藏元素*/   
  41. . hidden { displaynone ;}   
  42. /* 通用容器 */   
  43. .wrapper{ clearbothoverflowhidden ;}   
  44. /*--框架--*/   
  45. #main { width : 950pxmargin :0  autooverflow : hidden ;}   

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值