首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

目前比较全的CSS reset重设方法总结

所属分类： 网页制作 / CSS 阅读数： 1114
收藏 0 赞 0 分享

在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。

　　当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。

　　正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset，什么是CSS Reset？我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

一.最简化的CSS Reset(重设) :

CSS Code复制内容到剪贴板
  1. * {   
  2.       padding: 0;   
  3.       margin: 0;   
  4. }  

　　这是最普遍最简单的CSS重设，将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

CSS Code复制内容到剪贴板
  1. * {   
  2.        padding: 0;   
  3.        margin: 0;   
  4.        border: 0;   
  5. }  

　　这是在上一个重设的基础上添加了对border属性的重设，初始值为0的确能避免一些问题。

CSS Code复制内容到剪贴板
  1. * {   
  2.        outline: 0;   
  3.        padding: 0;   
  4.        margin: 0;   
  5.        border: 0;   
  6. }  

　　在前两个的基础上添加了outline属性的重设，防止一些冲突。


二.浓缩实用型CSS Reset(重设):

CSS Code复制内容到剪贴板
  1. * {   
  2.        vertical-align: baselinebaseline;   
  3.        font-weight: inherit;    
  4.        font-family: inherit;    
  5.        font-style: inherit;   
  6.        font-size: 100%;   
  7.        outline: 0;   
  8.        padding: 0;   
  9.        margin: 0;   
  10.        border: 0;   
  11. }  

　　该CSS重设方法出自Perishable Press，这是他常用的方法。

三.Poor Man 的CSS Reset:

CSS Code复制内容到剪贴板
  1. html, body {    
  2.        padding: 0;    
  3.        margin: 0;    
  4. }   
  5. html {   
  6.        font-size:1em;   
  7. }    
  8. body {   
  9.        font-size:100%;   
  10. }    
  11. a img, :link img, :visited img {   
  12.        border:0px;   
  13. }   

　　这个重设方法将html和body下元素的padding和margin都设为0，并分别为html标签和body标签下的所有元素设置了初始的字体大小，最重要的是把有链接的图片的默认边框去掉了。

四.Siolon’s Global Reset

CSS Code复制内容到剪贴板
  1. * {    
  2.     vertical-align: baselinebaseline;   
  3.     font-family: inherit;   
  4.     fo   
  5.   
  6. nt-style: inherit;   
  7.     font-size: 100%;   
  8.     border: none;   
  9.     padding: 0;   
  10.     margin: 0;    
  11. }   
  12. body {   
  13.     padding: 5px;   
  14. }    
  15. h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {   
  16.     margin: 20px 0;   
  17. }   
  18. li, dd, blockquote {    
  19.     margin-left: 40px;   
  20. }    
  21. table {    
  22.     border-collapse: collapse;    
  23.     border-spacing: 0;    
  24. }  

五.Shaun Inman’s Global Reset

CSS Code复制内容到剪贴板
  1. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {   
  2.     padding: 0;   
  3.     margin: 0;    
  4. }   
  5. table {   
  6.     border-collapse: collapse;   
  7.     border-spacing: 0;   
  8. }   
  9.     fieldset, img, abbr {   
  10.     border: 0;   
  11. }   
  12. address, caption, cite, code, dfn, em,    
  13. h1, h2, h3, h4, h5, h6, strong, th, var {   
  14.     font-weight: normal;   
  15.     font-style: normal;   
  16. }   
  17. ul {   
  18.     list-style: none;   
  19. }   
  20. caption, th {   
  21.     text-align: left;   
  22. }   
  23. h1, h2, h3, h4, h5, h6 {   
  24.     font-size: 1.0em;   
  25. }   
  26. q:before, q:after {   
  27.     content: ”;   
  28. }   
  29. a, ins {   
  30.     text-decoration: none;   
  31. }  

六.Yahoo(YUI) CSS Reset:

CSS Code复制内容到剪贴板
  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 {    
  31.     border: 0;    
  32. }  

七.Eric Meyer’s CSS Reset

CSS Code复制内容到剪贴板
  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. }  

八.Condensed Meyer Reset:

CSS Code复制内容到剪贴板
  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. }  

九.Ateneu Popular CSS Reset

CSS Code复制内容到剪贴板
  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 {   
  18.     outline: 0;   
  19. }    
  20. a, a:link, a:visited, a:hover, a:active{   
  21.     text-decoration:none  
  22. }    
  23. table {   
  24.     border-collapse: separate;   
  25.     border-spacing: 0;   
  26. }    
  27. th, td {   
  28.     text-align: left;   
  29.     font-weight: normal;   
  30. }    
  31. img, iframe {   
  32.     border: none;   
  33.     text-decoration:none;   
  34. }    
  35. ol, ul {   
  36.     list-style: none;   
  37. }    
  38. input, textarea, select, button {   
  39.     font-size: 100%;   
  40.     font-family: inherit;   
  41. }    
  42. select {   
  43.     margin: inherit;   
  44. }    
  45. hr {   
  46.     margin: 0;   
  47.     padding: 0;   
  48.     border: 0;   
  49.     color: #000;   
  50.     background-color: #000;   
  51.     height: 1px  
  52. }  

十.Chris Poteet’s Reset CSS

CSS Code复制内容到剪贴板
  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. }  

十一.Tantek Celik Reset CSS

CSS Code复制内容到剪贴板
  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 }  

十二.Christian Montoya Reset CSS

CSS Code复制内容到剪贴板
  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. }  

十三.Rudeworks Reset CSS

CSS Code复制内容到剪贴板
  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. }  

十四. Anieto2K Reset CSS

CSS Code复制内容到剪贴板
  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. }  

十五.CSSLab CSS Reset

CSS Code复制内容到剪贴板
  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
更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

　出处：当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

　　png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利! 　　但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

　　css对文字的布局上没有靠容器底部对齐的参数，目前使用的一个不错的方法也比较好.就是用position属性来解决，看下面的代码，用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近的距离还可以精确到像素，自己可以调节，是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

　　这个问题是别人提出的，因为css对文字的布局上没有靠容器底部对齐的参数，（或许有但是我没有发现）不过目前我使用的一个不错的方法也比较好．就是用position属性来解决，看下面的代码，我用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

　　这个效果实现的是，在B页面里有两个层，一个显示层，我们暂定名c层，一个是隐藏层，我们暂定名d层，单独进B页面的时候，c层显示，d层隐藏，然而从A页面连接到B页面的时候，则是让d层显示，c层隐藏，我觉得这个效果对网页设计者以后会有很大帮助，现在把代码发出来，
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的：二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解３个参数：createElement、createTextNode、appendChild。这３个js参数分别是创建元素、创建字符、追加节点。代码原理：循环页面段落标签<p>，创建连接元素<a>，创建要显示的连接字符，用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后，我们时常会看到两种不同的网页的声明，一个是Dhtml，一个是Xhtml。如下所示： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22