杰晶网络

目前比较全的CSS reset重设方法总结
网页制作 2024/11/24 佚名
3 2

在当今网页设计/开发实践中，使用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, 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;}  

　　好了，CSS重设目前先总结到这里，这15套重设方法其实都是有共同点的，也许有的实现方法不同，但大部分都是同一个目的，就是为了让更多的浏览器能显示同样的效果。有了这些CSS重设作为资料和参考，也许会对你的工作有所帮助甚至提高效率，但是，毕竟这些重设都是别人写的，你完全也可以为自己量身定制一套CSS重设。

标签：
CSS重设,reset
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“目前比较全的CSS reset重设方法总结”
暂无“目前比较全的CSS reset重设方法总结”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网