主流浏览器CSSReset的方法

本文和大家重点讨论一下主流浏览器CSS Reset的方法,在各种浏览器中,都会对CSS的选择器默认一些数值,有了CSS Reset以后会让网页的样式在各浏览器中表现一致。

主流浏览器CSS Reset的方法

知道CSS Reset是什么吗?通常情况下,它也被写成Reset CSS,即重设浏览器的样式。在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。但并不是所有的浏览器都使用一样的数值,所以,有了CSS Reset,以让网页的样式在各浏览器中表现一致。

正在使用CSS的你,用过CSS Reset吗?当然,或许你用了,却不知道正在用,比如你可能用到:

 
 
 
  1. *{padding:0;margin:0;border:0;}

这也是一款CSS Reset的方法,让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法,也是最简单,最安全的方法,不过,也是最占用资源的方法。对于小型的网站来说,用这个并不会带来大的资源浪费,但如果是像Yahoo这种架构非常大的网站,刚需要有选择地进行CSS重设,以减少资源浪费。下面是Yahoo的CSS重设代码,也是受最多人喜爱的CSS Reset方法,YUI选择的方法是:

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

 #p#OK,相信你也已经了解了CSS重设的目的,或许你也可以根据自己的喜好,写一个自己的CSS重设系统,毕竟大家的需求和习惯的不同的。而你可以参照下面的几款:

 AteneuPopularCSS Reset

 
 
 
  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;
  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}

ChrisPoteet’sReset CSS

 
 
 
  1. *{
  2. vertical-align: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:20px0;
  15. }
  16. li,dd,blockquote{
  17. margin-left:40px;
  18. }
  19. table{
  20. border-collapse:collapse;
  21. border-spacing:0;
  22. }

 #p#EricMeyerReset 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;
  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. }

 TantekCelikReset 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. aimg,:linkimg,:visitedimg{border:none}
  7. address{font-style:normal}

ChristianMontoyaResetCSS

 
 
 
  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:1em0;
  9. padding:0;
  10. }
  11. li,dd,blockquote{
  12. margin-left:1em;
  13. }
  14. formlabel{
  15. cursor:pointer;
  16. }
  17. fieldset{
  18. border:none;
  19. }
  20. input,select,textarea{
  21. font-size:100%;
  22. font-family:inherit;
  23. }

#p#RudeworksResetCSS

 
 
 
  1. *{
  2. margin:0;
  3. padding:0;
  4. border:none;
  5. }
  6. html{
  7. font:62.5%"LucidaGrande",Lucida,Verdana,sans-serif;
  8. text-shadow:#0000px0px0px;
  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:001em0;
  18. }
  19. cite,em,dfn{
  20. font-style:italic;
  21. }
  22. sup{
  23. position:relative;
  24. bottom:0.3em;
  25. vertical-align:baseline;
  26. }
  27. sub{
  28. position:relative;
  29. bottom:-0.2em;
  30. vertical-align: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,"LucidaConsole",courier,mono-space;
  38. }
  39. del{
  40. text-decoration:line-through;
  41. }
  42. ins,dfn{
  43. border-bottom:1pxsolid#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. aabbr,aacronym{
  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. aimg{
  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{
  110. float:right;
  111. }
  112. body{
  113. text-align:center;
  114. }
  115. #wrapper{
  116. margin:0auto;
  117. text-align:left;
  118. }

 #p#Anieto2KReset 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
  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. }

 CSSLabCSS Reset

 
 
 
  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;
  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. aimg,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. /*Fixesincorrectplacementofnumbersinol’sinIE6/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;}

像你看到的,这些都大同小异,需求不同,方法也就不同。我自己偏向于喜欢Yahoo的CSS Reset,也用了Yahoo的代码。你,有自己的CSS Reset体系吗?或许可以分享出来!

CSS Reset代码来源:10TécnicasparaResetCSS

当前题目:主流浏览器CSSReset的方法
文章链接:http://www.shufengxianlan.com/qtweb/news42/316692.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联