分享一些老外的CSS Reset

2009-03-26 分类：HTML+CSS 阅读(10284) 评论(0)

以前有过《Css Reset（复位）整理》：https://www.html.cn/archives/541

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. } ??
  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😕#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的整理还是要从自身网站出发，合适自己的才是做好的。

赞(0) 打赏
未经允许不得转载：WEB前端开发 » 分享一些老外的CSS Reset

相关推荐

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

置顶推荐

最近文章

热门标签

JavaScript (324)ES6 (222)代码片段 (188)实用代码 (182)jquery (61)css3 (54)css (48)ES2015 (28)jQuery插件 (26)React (26)前端招聘 (25)前端开发工具 (24)webpack (23)招聘 (20)npm (20)Babel (20)箭头函数 (19)Map (19)ES7 (18)Web Development (17)let (16)Chrome DevTools (16)async (16)IE6 BUG (15)前端开发 (15)Promise (14)const (14)ES2017 (14)Flexbox (14)Sass (14)

最新评论

分类目录

热门文章

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏