993

五

7

2009

一些好用的CSS Reset

发布者: seasun

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-align: baselinebaseline;
  16. }
  17. :focus { outline: 0;}
  18. a, a:link, a:visited, a:hover, a:active{text-decoration:none}
  19. table { border-collapse: separate;border-spacing: 0;}
  20. th, td {text-align: left; font-weight: normal;}
  21. img, iframe {border: none; text-decoration:none;}
  22. ol, ul {list-style: none;}
  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;height: 1px}

2.Chris Poteet’s Reset CSS

查看：Chris Poteet’s

CSS代码
  1. * {
  2. vertical-align: baselinebaseline;
  3. font-family: inherit;
  4. font-style: inherit;
  5. font-size: 100%;
  6. border: none;
  7. padding: 0;
  8. margin: 0;
  9. }
  10. body {
  11. padding: 5px;
  12. }
  13. h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
  14. margin: 20px 0;
  15. }
  16. li, dd, blockquote {
  17. margin-left: 40px;
  18. }
  19. table {
  20. border-collapse: collapse;
  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-collapse: collapse;
  8. border-spacing: 0;
  9. }
  10. fieldset,img {
  11. border: 0;
  12. }
  13. address,caption,cite,code,dfn,em,strong,th,var {
  14. font-weight: normal;
  15. font-style: normal;
  16. }
  17. ol,ul {
  18. list-style: none;
  19. }
  20. caption,th {
  21. text-align: left;
  22. }
  23. h1,h2,h3,h4,h5,h6 {
  24. font-weight: normal;
  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-align: baselinebaseline;
  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. background: white;
  22. line-height: 1;
  23. color: black;
  24. }
  25. ol, ul {
  26. list-style: none;
  27. }
  28. table {
  29. border-collapse: separate;
  30. border-spacing: 0;
  31. }
  32. caption, th, td {
  33. font-weight: normal;
  34. text-align: left;
  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% Verdana, Arial, Helvetica, sans-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. cursor: pointer;
  16. }
  17. fieldset {
  18. border: none;
  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. border: none;
  5. }
  6. html {
  7. font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
  8. text-shadow: #000 0px 0px 0px;
  9. }
  10. ul {
  11. list-style: none;
  12. list-style-type: none;
  13. }
  14. h1, h2, h3, h4, h5, h6, p, pre,
  15. blockquote, ul, ol, dl, address {
  16. font-weight: normal;
  17. margin: 0 0 1em 0;
  18. }
  19. cite, em, dfn {
  20. font-style: italic;
  21. }
  22. sup {
  23. position: relative;
  24. bottombottom: 0.3em;
  25. vertical-align: baselinebaseline;
  26. }
  27. sub {
  28. position: relative;
  29. bottombottom: -0.2em;
  30. vertical-align: baselinebaseline;
  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-decoration: line-through;
  41. }
  42. ins, dfn {
  43. border-bottom: 1px solid #ccc;
  44. }
  45. small, sup, sub {
  46. font-size: 85%;
  47. }
  48. abbr, acronym {
  49. text-transform: uppercase;
  50. font-size: 85%;
  51. letter-spacing: .1em;
  52. border-bottom-style: dotted;
  53. border-bottom-width: 1px;
  54. }
  55. a abbr, a acronym {
  56. border: none;
  57. }
  58. sup {
  59. vertical-align: super;
  60. }
  61. sub {
  62. vertical-align: sub;
  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-decoration: none;
  85. }
  86. a img {
  87. border: none;
  88. text-decoration: none;
  89. }
  90. img {
  91. border: none;
  92. text-decoration: none;
  93. }
  94. label, button {
  95. cursor: pointer;
  96. }
  97. input:focus, select:focus, textarea:focus {
  98. background-color: #FFF;
  99. }
  100. fieldset {
  101. border: none;
  102. }
  103. .clear {
  104. clear: both;
  105. }
  106. .float-left {
  107. float: left;
  108. }
  109. .float-rightright {
  110. float: rightright;
  111. }
  112. body {
  113. text-align: center;
  114. }
  115. #wrapper {
  116. margin: 0 auto;
  117. text-align: left;
  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-weight: normal;
  15. font-style: normal;
  16. font-size: 100%;
  17. font-family: inherit;
  18. vertical-align: baselinebaseline
  19. }
  20. body {
  21. line-height: 1
  22. }
  23. :focus {
  24. outline: 0
  25. }
  26. ol, ul {
  27. list-style: none
  28. }
  29. table {
  30. border-collapse: collapse;
  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. height: 1px
  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-align: baselinebaseline;
  16. }
  17. :focus {
  18. outline: 0;
  19. }
  20. table {
  21. border-collapse: separate;
  22. border-spacing: 0;
  23. }
  24. caption, th, td {
  25. text-align: left;
  26. font-weight: normal;
  27. }
  28. a img, iframe {
  29. border: none;
  30. }
  31. ol, ul {
  32. list-style: none;
  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. display: block;
  47. height: 0;
  48. clear: both;
  49. visibility: hidden;
  50. }
  51. .clearfix {display: inline-block;}
  52. * html .clearfix {height: 1%;}
  53. .clearfix {display: block;}

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-collapse: collapse;
  11. border-spacing: 0;
  12. }
  13. ol, ul {
  14. list-style: none;
  15. }
  16. address, caption, cite, code, dfn, em, strong, th, var {
  17. font-weight: normal;
  18. font-style: normal;
  19. }
  20. caption, th {
  21. text-align: left;
  22. }
  23. h1, h2, h3, h4, h5, h6 {
  24. font-weight: normal;
  25. font-size: 100%;
  26. }
  27. q:before, q:after {
  28. content: ”;
  29. }
  30. abbr, acronym {
  31. border: 0;
  32. }

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: #000; background: #fff; text-align: left; font-size:75.00%; font-family:‘lucida grande’,taho,verdana,‘trebuchet ms’,sans-serif;}
  11. /* hx系列 */
  12. h1, h2, h3, h4, h5, h6{ font-weight: bold; }
  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-style: italic;}
  19. /* 着重标记 */
  20. cite, blackquote, em, i{ font-style: italic; }
  21. strong, b{ font-weight: bold; }
  22. /* 预格式标记 */
  23. pre, code{font-family: monospace; font-size: 1.1em;}
  24. /* 缩写标记 */
  25. acronym, abbr{border-bottom: 0.1em dashed #c00;cursor: help;letter-spacing: .07em;}
  26. /* 定义默认的链接样式 */
  27. a:link, a:visited{color:#0065FF; text-decoration: none;}
  28. a:hover{text-decoration: underline;}
  29. /* 清除溢出，浮动 */
  30. .clearing, .HackBox{ border-top:1px solid transparent !important; clear:both; visibility: hidden;}
  31. /* 不需要额外增加元素的清理浮动的类使用:after伪类来实现浮动清理 */
  32. .wrapfix:after{ content: “.”; display: block; height: 0; clear: both;visibility: hidden;}
  33. /* IE7 hack */
  34. .wrapfix {display: inline-block;}
  35. /* IE-mac, IE5, IE6 */
  36. * html .wrapfix {height: 1%;}
  37. .wrapfix {display: block;}
  38. /*隐藏元素*/
  39. .invisible{visibility:hidden;}
  40. /* 从页面布局上隐藏元素*/
  41. .hidden{display: none;}
  42. /* 通用容器 */
  43. .wrapper{clear: both; overflow: hidden;}
  44. /*–框架–*/
  45. #main{width:950px; margin:0 auto; overflow:hidden;}

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

您可能会感兴趣的其他文章

转载请标注编辑来源：一些好用的CSS Reset

我想网 板凳 编辑

Tags: , ,

分享
QQ书签
百度搜藏
Del.icio.us
Google书签
和讯网摘
天极网摘

发布于 2010年5月9日 ，目录 Design, WEB。 您可以 留言, 或者 trackback。

«
»

留言