`

一些好用的CSS Reset

CSSYUIIEHTMLYahoo 
阅读更多

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-align :  baseline baseline ;      
  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 :  baseline baseline ;      
  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 :  baseline 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.      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.      bottom bottom : 0.3em;      
  25.      vertical-align :  baseline baseline ;      
  26. }      
  27. sub  {      
  28.      position :  relative ;      
  29.      bottom bottom : -0.2em;      
  30.      vertical-align :  baseline 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-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 - right right  {      
  110.      float :  right right ;      
  111. }      
  112. body {      
  113.      text-align :  center ;      
  114. }      
  115. #wrappe r {      
  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 :  baseline baseline      
  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 :  baseline baseline ;      
  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的整理还是要从自身网站出发，合适自己的才是做好的。

分享到：
| 99款高质量免费(X)HTML/CSS模板(转自blog ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Reset_CSS css样式重置文件

    CSS Reset即是对浏览器...现在这里提供一个比较流行的方案，大家可以下载去研究一下，到底所谓的CSS Reset是怎么一回事，当然你也可以在一些Reset方案的基础上进行优化和改良，整理出一个更加适合自身需要的Reset文件。

    一个微小的现代CSSreset

    下面是一些关于CSS Reset的关键知识点： 1. **默认样式差异**：不同的浏览器对HTML元素应用的默认样式可能会有所不同，例如字体大小、行高、内边距和外边距等，CSS Reset的目的是消除这些差异。 2. **常见的CSS ...

    css reset框架

    接着是`index.css`，这是一个基础样式文件，通常包含一些通用的样式规则，如全局字体设置、布局结构、色彩定义等。开发者可以根据项目需求在此基础上扩展和定制，以构建符合设计要求的界面风格。 `test.htm`是测试...

    通用的css reset

    ### 通用的CSS Reset知识点详解 #### CSS Reset简介 CSS Reset是一种常见的前端开发技术，用于清除浏览器默认样式，实现跨浏览器的一致性显示效果。在多人协作项目中尤为重要，能够帮助团队成员避免因浏览器默认...

    CSS RESET个人总结

    2. Normalize.css：不同于传统的重置，Normalize.css是一种标准化的方法，它保留了一些有用的默认样式，同时修复了跨浏览器的样式问题，更注重可访问性和语义化。 3. CSS Reset Reset：一个较新的、更全面的CSS ...

    Css Reset 复位相关资料整理

    CSS Reset，也被称作CSS复位，是前端开发中经常使用的一项技术。它的主要目的是为了重置各浏览器对于HTML元素默认的CSS样式，以消除不同浏览器之间的样式差异，使得网页在不同浏览器中能有一致的显示效果。通过使用...

    cssreset-min.css

    比如 li ，这个元素默认的样式在IE和Firefox中就不一样。Css Reset 就是为了消除这种不同元素在...<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

    CSS Reset 样式重置的实现示例.pdf

    《CSS Reset 样式重置的实现》 在网页设计中，CSS Reset（样式重置）是一项基础且至关重要的工作，其目的是消除不同浏览器之间的默认样式差异，确保跨平台、跨浏览器的一致性。默认情况下，每个浏览器都有自己的...

    CSS中常用的 reset.css文件

    因此，在使用`reset.css`时，最好结合`normalize.css`或现代的CSS重置方法，如`Eric Meyer Reset`或`sanitize.css`，它们不仅重置样式，还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中，可以将`...

    CSS Tools: Reset CSS

    The goal of a reset stylesheet is to reduce browser inconsistencies in ... Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.

    浏览器CSS Reset的十种方法

    在实际应用中，还可以考虑使用 Normalize.css 或者 Reset.css（如Normalize.css是另一种更为现代的重置方法，它不仅重置样式，还保持一些基本的语义化元素的默认样式）。无论选择哪种方法，关键在于确保网页在各种...

    响应式手机端css reset

    手机端css reset方便进行手机端的开发工作

    Reset CSS研究

    一些开发者开始提倡"No CSS Reset"的理念，认为在某些情况下，仅重置必要的样式或者根据项目需求定制重置可能更为合理。例如，Google的首页就是一个例子，它没有使用任何CSS Reset，而是保持了极简的样式。 CSS ...

    reset.css & normalize.css 下载

    以下是一些reset.css可能会包含的关键规则： 1. 通用选择器`*`用于清除所有元素的内外边距和边框： ```css * { margin: 0; padding: 0; border: 0; } ``` 2. 清除列表项的缩进： ```css ul, ol { list-style: ...

    base.css/css reset

    自己总结的css reset, 参考了雅虎和书本上的. 希望对html开发者有点用.

    reset.css下载

    亲测 可用 在HTML标签在浏览器里有默认的样式，例如 p 标签有... 但是不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的

    css reset默认设置

    css reset，导入该css文件，给一些标签添加相同的默认设置，防止在不同的浏览器中出现差异

    css reset初始化设置.docx

    ### CSS Reset 初始化设置详解 #### 一、引言 在前端开发中，浏览器之间的样式差异是常见的问题之一。为了确保跨浏览器的一致性，并且使页面样式更加可控，CSS Reset 成为了一种广泛采用的技术手段。本文将详细...

    web前端重置样式表normalize.css+reset.css

    `reset.css`用于清除大部分默认样式，而`normalize.css`则负责保持一些必要的默认行为，以优化可访问性和可读性。这样的组合使用方式可以提供更好的跨浏览器一致性，同时避免过度重置导致的潜在问题。 在实际项目中...

Magicbox
Global site tag (gtag.js) - Google Analytics