绵阳梓潼网站制作公司

有哪些CSSreset重设方法

本篇内容主要讲解“有哪些CSS reset重设方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“有哪些CSS reset重设方法”吧!

创新新互联，凭借10多年的成都网站制作、成都做网站经验，本着真心·诚心服务的企业理念服务于成都中小企业设计网站有上千案例。做网站建设，选创新互联。

一.最简化的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. h2, h3, h4, h5, h6, h7, 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, h2, h3, h4, h5, h6, h7, 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. h2, h3, h4, h5, h6, h7, 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. h2, h3, h4, h5, h6, h7 {   

  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,h2,h3,h4,h5,h6,h7,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. h2,h3,h4,h5,h6,h7 {    

  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. h2, h3, h4, h5, h6, h7, 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, h2, h3, h4, h5, h6, h7,    

  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. h2, h3, h4, h5, h6, h7 {   

  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, h2, h3, h4,    

  2. h5, h6, h7, 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. h2, h3, h4, h5, h6, h7, 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. h2,h3,h4,h5,h6,h7,pre,code { font-size:1em; }    

  4. ul,ol,li,h2,h3,h4,h5,h6,h7,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. h2, h3, h4, h5, h6, h7, 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. h2, h3, h4, h5, h6, h7, 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. h2 {    

  65.     font-size: 2em;    

  66. }    

  67. h3 {    

  68.     font-size: 1.8em;    

  69. }    

  70. h4 {    

  71.     font-size: 1.6em;    

  72. }    

  73. h5 {    

  74.     font-size: 1.4em;    

  75. }    

  76. h6 {    

  77.     font-size: 1.2em;    

  78. }    

  79. h7 {    

  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. h2, h3, h4, h5, h6, h7, 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, h2, h3, h4,    

  2. h5, h6, h7, 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 reset重设方法”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


分享名称：有哪些CSSreset重设方法
标题链接：http://myzitong.com/article/jgppjg.html

其他资讯