`

一些好用的CSS Reset

CSSYUIIEHTMLYahoo 
阅读更多

Css Reset也就Reset Css ,就是重置一些标签样式，或者说默认的样式。前端开发工作中有一款好的、统一的Css Reset将提高开发效率，提高样式代码的重用，减少重复代码，减少维护成本。 现

发表于：2009-03-21 17:18 分类：首页 > 网站重构 > CSS+XHTML > , 标签: CSS

Css Reset也就Reset Css ,就是重置一些标签样式，或者说默认的样式。前端开发工作中有一款好的、统一的Css Reset将提高开发效率，提高样式代码的重用，减少重复代码，减少维护成本。

现在分享一些老外的Css Reset，供大家参考；

1.Ateneu Popular CSS Reset

查看：Ateneu Popular

CSS代码
  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 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 }     

2.Chris Poteet’s Reset CSS

查看：Chris Poteet’s

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

3.Yahoo’s（YUI） CSS Reset

查看： Yahoo （YUI）

CSS代码
  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. }    

4.Eric Meyer Reset CSS

查看：Eric Meyer

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

5.Tantek Celik Reset CSS

查看： Tantek Celik

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. a img,:link img,:visited img {  border : none  }      
  7. address {  font-style : normal  }  

6.Christian Montoya Reset CSS

查看：Christian Montoya

CSS代码
  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. }    

7.Rudeworks Reset CSS

查看：Rudeworks

CSS代码
  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.      bottom bottom : 0.3em;      
  25.      vertical-align :  baseline baseline ;      
  26. }      
  27. sub  {      
  28.      position :  relative ;      
  29.      bottom bottom : -0.2em;      
  30.      vertical-align :  baseline 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,  "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 - right right  {      
  110.      float :  right right ;      
  111. }      
  112. body {      
  113.      text-align :  center ;      
  114. }      
  115. #wrappe r {      
  116.      margin : 0  auto ;      
  117.      text-align :  left ;      
  118. }    

8.Anieto2K Reset CSS

查看： Andrés Nieto

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

9.CSSLab CSS Reset

查看：CSSLab

CSS代码
  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 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. 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 ;}    

 

10.Condensed Meyer Reset

CSS代码
  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. }   
  33.   

css-tricks站的调查Eric Meyer Reset CSS（也就是上面的第4个）使用人数最多，点击查看http://css-tricks.com/poll-results-what-css-reset-do-you-use/ 。

再来看看国内一个前端开发工程师自己整理的 CSS Reset:

绣财：http://54xc.cn/?p=57

CSS代码
  1. /*reset 全局定义 注释可去掉*/   
  2. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre , code   
  3. ,form,fieldset,legend,input,textarea,p,blockquote,th,td   
  4. { margin :0; padding :0;}   
  5. fieldset,img{ border :0;}   
  6. ul li{ list-style : none ;}   
  7. input,textarea,select{ font-family :inherit; font-size :inherit; font-weight :inherit;}   
  8. input,textarea,select{* font-size :100%;}   
  9. /* body标记样式定义全局的字体颜色、背景色和文本对齐设置 */   
  10. body{ color :  #000 ;  background :  #fff ;  text-align :  left ;  font-size :75.00%;  font-family : 'lucida grande' ,taho, verdana , 'trebuchet ms' , sans-serif ;}   
  11. /* hx系列 */   
  12. h1, h2, h3, h4, h5, h6{  font-weight :  bold ; }   
  13. h1{  font-size : 200%; }   
  14. h2{  font-size : 166.67%; }   
  15. h3{  font-size : 150%; }   
  16. h4{  font-size : 133.33%; }   
  17. h5{  font-size : 116.67%; }   
  18. h6{ font-size : 116.67%;  font-style :  italic ;}   
  19. /* 着重标记 */   
  20. cite, blackquote, em, i{  font-style :  italic ; }   
  21. strong, b{  font-weight :  bold ; }   
  22. /* 预格式标记 */   
  23. pre ,  code { font-family :  monospace ;  font-size : 1.1em;}   
  24. /* 缩写标记 */   
  25. acronym, abbr{ border-bottom : 0.1em  dashed   #c00 ; cursor :  help ; letter-spacing : .07em;}   
  26. /* 定义默认的链接样式 */   
  27. a:link, a:visited{ color : #0065FF ;  text-decoration :  none ;}   
  28. a:hover{ text-decoration :  underline ;}   
  29. /* 清除溢出，浮动 */   
  30. .clearing, .HackBox{  border-top : 1px   solid   transparent  ! important ;  clear : both ;  visibility :  hidden ;}   
  31. /* 不需要额外增加元素的清理浮动的类使用:after伪类来实现浮动清理 */   
  32. .wrapfix:after{  content :  "." ;  display :  block ;  height : 0;  clear :  both ; visibility :  hidden ;}   
  33. /* IE7 hack */   
  34. .wrapfix { display :  inline - block ;}   
  35. /* IE-mac, IE5, IE6 */   
  36. * html .wrapfix { height : 1%;}   
  37. .wrapfix { display :  block ;}   
  38. /*隐藏元素*/   
  39. .invisible{ visibility : hidden ;}   
  40. /* 从页面布局上隐藏元素*/   
  41. . hidden { display :  none ;}   
  42. /* 通用容器 */   
  43. .wrapper{ clear :  both ;  overflow :  hidden ;}   
  44. /*--框架--*/   
  45. #main { width : 950px ;  margin :0  auto ;  overflow : hidden ;}   

个人认为Css Reset的整理还是要从自身网站出发，合适自己的才是做好的。

分享到：
| 99款高质量免费(X)HTML/CSS模板(转自blog ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Reset_CSS css样式重置文件

    CSS Reset即是对浏览器...现在这里提供一个比较流行的方案，大家可以下载去研究一下，到底所谓的CSS Reset是怎么一回事，当然你也可以在一些Reset方案的基础上进行优化和改良，整理出一个更加适合自身需要的Reset文件。

    一个微小的现代CSSreset

    一个微小的现代CSS reset

    cssreset-min.css

    比如 li ，这个元素默认的样式在IE和Firefox中就不一样。Css Reset 就是为了消除这种不同元素在...<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

    CSS Reset 样式重置的实现示例.pdf

    CSS Reset 样式重置的实现示例

    响应式手机端css reset

    手机端css reset方便进行手机端的开发工作

    通用的css reset

    通用的css全局定义变量 css rest 适合多人协同工作时用

    base.css/css reset

    自己总结的css reset, 参考了雅虎和书本上的. 希望对html开发者有点用.

    css reset默认设置

    css reset，导入该css文件，给一些标签添加相同的默认设置，防止在不同的浏览器中出现差异

    CSS Tools: Reset CSS

    The goal of a reset stylesheet is to reduce browser inconsistencies in ... Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.

    CSS中常用的 reset.css文件

    CSS中常用的 reset.css文件，用于重置html默认样式

    CSS RESET个人总结

    我在HTML下的默认样式中讲到，一些标签元素在HTML下有一个默认属性值，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式（css reset）。

    清空默认样式reset.min.css

    清空默认样式reset.min.css

    CSSreset文件

    对css属性初始化，减少部分的浏览器效果不同引起的问题

    1.1css重置样式文件reset.css

    css重置样式文件reset.css

    Reset CSS研究

    Reset CSS研究,你知道世界上第一份reset.css在哪么？ * { margin: 0; padding: 0 }人品很坏吗？ Eric Meyer和YUI是情侣吗？ Google有用reset.css吗？ No CSS Reset的口号是谁最先提出来的？

    css reset初始化设置.docx

    关于一些css reset的初始化程序，方便使用。

    css reset框架

    本框架结合了YUI 等优秀框架进行综合整理取其精华。这是我工作3年来的经验总结吧，呵呵。 完美支持html5，可以让开发工作变得轻松顺利。

    reset.css下载

    亲测 可用 在HTML标签在浏览器里有默认的样式，例如 p 标签有... 但是不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的

    浏览器CSS Reset的十种方法

    在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使 用一样的数值，所以，有了CSS Reset，以让网页的样式在各浏览器中表现一致。 正在使用CSS的你...

    reset.css & normalize.css 下载

    reset.css & normalize.css 下载

Magicbox
Global site tag (gtag.js) - Google Analytics