现阶段较为全的CSS reset更改方式总结

日期:2020-10-20 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

在现今网页页面设计方案/开发设计实践活动中,应用CSS来为词义化的(X)HTML标识加上款式设计风格是关键的重要。在设计方案师们的理想中都存在着这样的1个完善全球:全部的访问器都可以了解和可用多有CSS标准,而且展现同样的视觉效果实际效果(沒有适配性难题)。可是,大家并沒有日常生活在这个完善的全球,实际中产生的失窃却一直刚好相反,许多CSS款式在不一样的访问器中拥有不一样的解释和展现。

  现今时兴的访问器(如:Firefox、Opera、Internet Explorer、Chrome、Safari这些)中,有1些全是以自身的方法去了解CSS标准,这就会致使有的访问器对CSS的解释与设计方案师的CSS界定初衷相矛盾,使得网页页面的模样在一些访问器下能正确依照设计方案师的念头显示信息,但一些访问器却并沒有依照设计方案师要想的模样显示信息出来,这就致使访问器的适配性难题。更糟的是,有的访问器彻底疏忽CSS的1些申明和特性。

  正由于上述矛盾和难题仍然存在于这个”有缺憾的全球”,因此1些设计方案师想起了1种防止访问器适配性难题的方式,那便是CSS Reset,甚么是CSS Reset?大家能够把它叫做CSS更改,也是有人叫做CSS复位、默认设置CSS、CSS重设等。CSS更改便是因为各种各样访问器解释CSS款式的原始值有一定的不一样,致使设计方案师在沒有界定某个CSS特性时,不一样的访问器会依照自身的默认设置值来为沒有界定的款式取值,因此大家要先界定好1些CSS款式,来让全部访问器都依照一样的标准解释CSS,这样就可以防止产生这类难题。

1.最简化的CSS Reset(更改) :

CSS Code拷贝內容到剪贴板
  1. * {   
  2.       padding: 0;   
  3.       margin: 0;   
  4. }  

  这是最广泛最简易的CSS更改,将全部元素的padding和margin值都设为0,能够防止1些访问器在了解这两个特性默认设置值上的”矛盾”。

CSS Code拷贝內容到剪贴板
  1. * {   
  2.        padding: 0;   
  3.        margin: 0;   
  4.        border: 0;   
  5. }  

  这是在上1个更改的基本上加上了对border特性的更改,原始值为0确实能防止1些难题。

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

  在前两个的基本上加上了outline特性的更改,避免1些矛盾。


2.浓缩好用型CSS Reset(更改):

CSS Code拷贝內容到剪贴板
  1. * {   
  2.        vertical-alignbaselinebaseline;   
  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,这是他常见的方式。

3.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标识下的全部元素设定了原始的字体样式尺寸,最关键的是把有连接的照片的默认设置边框去掉了。

4.Siolon’s Global Reset

CSS Code拷贝內容到剪贴板
  1. * {    
  2.     vertical-alignbaselinebaseline;   
  3.     font-family: inherit;   
  4.     fo   
  5.   
  6. nt-style: inherit;   
  7.     font-size: 100%;   
  8.     bordernone;   
  9.     padding: 0;   
  10.     margin: 0;    
  11. }   
  12. body {   
  13.     padding5px;   
  14. }    
  15. h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {   
  16.     margin20px 0;   
  17. }   
  18. li, dd, blockquote {    
  19.     margin-left40px;   
  20. }    
  21. table {    
  22.     border-collapsecollapse;    
  23.     border-spacing: 0;    
  24. }  

5.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-collapsecollapse;   
  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-weightnormal;   
  15.     font-stylenormal;   
  16. }   
  17. ul {   
  18.     list-stylenone;   
  19. }   
  20. caption, th {   
  21.     text-alignleft;   
  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-decorationnone;   
  31. }  

6.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-collapsecollapse;    
  8.     border-spacing: 0;    
  9. }    
  10. fieldset,img {    
  11.     border: 0;    
  12. }    
  13. address,caption,cite,code,dfn,em,strong,th,var {    
  14.     font-weightnormal;    
  15.     font-stylenormal;    
  16. }    
  17. ol,ul {    
  18.     list-stylenone;    
  19. }    
  20. caption,th {    
  21.     text-alignleft;    
  22. }    
  23. h1,h2,h3,h4,h5,h6 {    
  24.     font-weightnormal;    
  25.     font-size: 100%;    
  26. }    
  27. q:before,q:after {    
  28.     content:”;    
  29. }    
  30. abbr,acronym {    
  31.     border: 0;    
  32. }  

7.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-alignbaselinebaseline;    
  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.     backgroundwhite;    
  22.     line-height: 1;    
  23.     colorblack;    
  24. }    
  25. ol, ul {    
  26.     list-stylenone;    
  27. }    
  28. table {    
  29.     border-collapseseparate;    
  30.     border-spacing: 0;    
  31. }    
  32. caption, th, td {    
  33.     font-weightnormal;    
  34.     text-alignleft;    
  35. }    
  36. blockquote:before, blockquote:after, q:before, q:after {    
  37.     content: “”;    
  38. }    
  39. blockquote, q {    
  40.     quotes: “” “”;    
  41. }  

8.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-collapsecollapse;   
  11.     border-spacing: 0;   
  12. }   
  13. ol, ul {   
  14.     list-stylenone;   
  15. }   
  16. address, caption, cite, code, dfn, em, strong, th, var {   
  17.     font-weightnormal;   
  18.     font-stylenormal;   
  19. }   
  20. caption, th {   
  21.     text-alignleft;   
  22. }   
  23. h1, h2, h3, h4, h5, h6 {   
  24.     font-weightnormal;   
  25.     font-size: 100%;   
  26. }   
  27. q:before, q:after {   
  28.     content: ”;   
  29. }   
  30. abbr, acronym {    
  31.     border: 0;   
  32. }  

9.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-alignbaselinebaseline;    
  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-collapseseparate;   
  25.     border-spacing: 0;   
  26. }    
  27. th, td {   
  28.     text-alignleft;   
  29.     font-weightnormal;   
  30. }    
  31. img, iframe {   
  32.     bordernone;   
  33.     text-decoration:none;   
  34. }    
  35. ol, ul {   
  36.     list-stylenone;   
  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.     height1px  
  52. }  

10.Chris Poteet’s Reset CSS

CSS Code拷贝內容到剪贴板
  1. * {    
  2.     vertical-alignbaselinebaseline;    
  3.     font-family: inherit;    
  4.     font-style: inherit;    
  5.     font-size: 100%;    
  6.     bordernone;    
  7.     padding: 0;    
  8.     margin: 0;    
  9. }    
  10. body {    
  11.     padding5px;    
  12. }    
  13. h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {    
  14.     margin20px 0;    
  15. }    
  16. li, dd, blockquote {    
  17.     margin-left40px;    
  18. }    
  19. table {    
  20.     border-collapsecollapse;    
  21.     border-spacing: 0;    
  22. }  

101.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 }  

102.Christian Montoya Reset CSS

CSS Code拷贝內容到剪贴板
  1. html, body, form, fieldset {    
  2.     margin: 0;    
  3.     padding: 0;    
  4.     font: 100%/120% VerdanaArialHelveticasans-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.     cursorpointer;    
  16. }    
  17. fieldset {    
  18.     bordernone;    
  19. }    
  20. input, select, textarea {    
  21.     font-size: 100%;    
  22.     font-family: inherit;    
  23. }  

103.Rudeworks Reset CSS

CSS Code拷贝內容到剪贴板
  1. * {    
  2.     margin: 0;    
  3.     padding: 0;    
  4.     bordernone;    
  5. }    
  6. html {    
  7.     font: 62.5% “Lucida Grande”, Lucida, Verdanasans-serif;    
  8.     text-shadow#000 0px 0px 0px;    
  9. }    
  10. ul {    
  11.     list-stylenone;    
  12.     list-style-typenone;    
  13. }    
  14. h1, h2, h3, h4, h5, h6, p, pre,    
  15. blockquote, ul, ol, dl, address {    
  16.     font-weightnormal;    
  17.     margin: 0 0 1em 0;    
  18. }    
  19. cite, em, dfn {    
  20.     font-styleitalic;    
  21. }    
  22. sup {    
  23.     positionrelative;    
  24.     bottombottom: 0.3em;    
  25.     vertical-alignbaselinebaseline;    
  26. }    
  27. sub {    
  28.     positionrelative;    
  29.     bottombottom: -0.2em;    
  30.     vertical-alignbaselinebaseline;    
  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-decorationline-through;    
  41. }    
  42. ins, dfn {    
  43.     border-bottom1px solid #ccc;    
  44. }    
  45. small, sup, sub {    
  46.     font-size: 85%;    
  47. }    
  48. abbr, acronym {    
  49.     text-transformuppercase;    
  50.     font-size: 85%;    
  51.     letter-spacing: .1em;    
  52.     border-bottom-style: dotted;    
  53.     border-bottom-width1px;    
  54. }    
  55. a abbr, a acronym {    
  56.     bordernone;    
  57. }    
  58. sup {    
  59.     vertical-alignsuper;    
  60. }    
  61. sub {    
  62.     vertical-alignsub;    
  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-decorationnone;    
  85. }    
  86. a img {    
  87.     bordernone;    
  88.     text-decorationnone;    
  89. }    
  90. img {    
  91.     bordernone;    
  92.     text-decorationnone;    
  93. }    
  94. label, button {    
  95.     cursorpointer;    
  96. }    
  97. input:focus, select:focus, textarea:focus {    
  98.     background-color#FFF;    
  99. }    
  100. fieldset {    
  101.     bordernone;    
  102. }    
  103. .clear {    
  104.     clearboth;    
  105. }    
  106. .float-left {    
  107.     floatleft;    
  108. }    
  109. .float-rightright {    
  110.     floatrightright;    
  111. }    
  112. body {    
  113.     text-aligncenter;    
  114. }    
  115. #wrapper {    
  116.     margin: 0 auto;    
  117.     text-alignleft;    
  118. }  

104. 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-weightnormal;    
  15.     font-stylenormal;    
  16.     font-size: 100%;    
  17.     font-family: inherit;    
  18.     vertical-alignbaselinebaseline    
  19. }    
  20. body {    
  21.     line-height: 1    
  22. }    
  23. :focus {    
  24.     outline: 0    
  25. }    
  26. ol, ul {    
  27.     list-stylenone    
  28. }    
  29. table {    
  30.     border-collapsecollapse;    
  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.     height1px    
  50. }  

105.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-alignbaselinebaseline;    
  16. }    
  17. :focus {    
  18.     outline: 0;    
  19. }    
  20. table {    
  21.     border-collapseseparate;    
  22.     border-spacing: 0;    
  23. }    
  24. caption, th, td {    
  25.     text-alignleft;    
  26.     font-weightnormal;    
  27. }    
  28. a img, iframe {    
  29.     bordernone;    
  30. }    
  31. ol, ul {    
  32.     list-stylenone;    
  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.     displayblock;    
  47.     height: 0;    
  48.     clearboth;    
  49.     visibilityhidden;    
  50. }    
  51. .clearfix {displayinline-block;}    
  52. * html .clearfix {height: 1%;}    
  53. .clearfix {displayblock;}  

  好了,CSS更改现阶段先总结到这里,这15套更改方式实际上全是有相互点的,或许有的完成方式不一样,但绝大多数全是同1个目地,便是以便让更多的访问器能显示信息一样的实际效果。有了这些CSS更改做为材料和参照,或许会对你的工作中有一定的协助乃至提升高效率,可是,终究这些更改全是他人写的,你彻底还可以为自身量身定做1套CSS更改。