Css Reset(复位)整理

Css Reset是什么? 有些同行叫 “css复位”,有些可能叫 “默认css”…..
相信看完全文您会对Css Reset有个重新的认识

原文地址: http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
?

PS:

  1. *?{ ??
  2. ?padding:?0; ??
  3. ?margin:?0; ??
  4. ?}?

这就是最常用的Css Reset,但是这里会有很多问题。

原文前部分说了很多关于Css,以及各浏览器的css规则的不同,而制定”Css Reset”也是为了兼容与统一,
正确有效的使用”Css Reset”可以在某种程度上节约时间与金钱.

转载注明出处:https://www.html.cn/article.asp?id=500

非常感谢Perishable的整理与归纳

下面是关于几类Css Reset的简单介绍,本人能力有限.只能理解大概意思,还请各位看官见谅
_________________________

Minimalistic Reset [ Version 1 ]
相信这一段你经常看到.而且也是我们经常用到的

?

引用内容 引用内容
?
CSS代码
  1. *?{ ??
  2. ?padding:?0; ??
  3. ?margin:?0; ??
  4. ?}??

Minimalistic Reset [ Version 2 ]
border:0的设计有些不靠谱了

?

引用内容 引用内容
CSS代码
  1. *?{ ??
  2. ?padding:?0; ??
  3. ?margin:?0; ??
  4. ?border:?0; ??
  5. ?} ??

Minimalistic Reset [ Version 3 ]
当然这个也是不推荐的.会跟某些默认样式有冲突

?

引用内容 引用内容
CSS代码
  1. *?{ ??
  2. ?outline:?0; ??
  3. ?padding:?0; ??
  4. ?margin:?0; ??
  5. ?border:?0; ??
  6. ?} ??

_________________________

Condensed Universal Reset
这是作者当前比较钟意的一种写法.保证了相对普遍浏览器样式的统一性.

?

引用内容 引用内容
?
CSS代码
  1. *?{ ??
  2. ?vertical-align😕baselinebaseline; ??
  3. ?font-weight:?inherit; ??
  4. ?font-family:?inherit; ??
  5. ?font-style:?inherit; ??
  6. ?font-size:?100%; ??
  7. ?border:?0?none; ??
  8. ?outline:?0; ??
  9. ?padding:?0; ??
  10. ?margin:?0; ??
  11. ?}??

_________________________

Poor Man’s Reset
其实这也是我们常用的一类Css Reset.对字体的大小复位,以及图片链接的边框处理.
也经常在某些站点看到

?

引用内容 引用内容
CSS代码
  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:?0; ??
  13. ?} ??

_________________________

Shaun Inman’s Global Reset
作者认为Shaun写这类的Css Reset是有某种目的性.
而且这类规则是针对的是某些重要的常用浏览器.
比如ie,firefox等

?

引用内容 引用内容
JavaScript代码
  1. body,?div,?dl,?dt,?dd,?ul,?ol,?li,?h1,?h2,?h3,?h4,?h5,?h6,?pre,? ??
  2. form,?fieldset,?input,?p,?blockquote,?table,?th,?td,?embed,?object?{ ??
  3. ?padding:?0; ??
  4. ?margin:?0;? ??
  5. ?} ??
  6. table?{ ??
  7. ?border-collapse:?collapse; ??
  8. ?border-spacing:?0; ??
  9. ?} ??
  10. fieldset,?img,?abbr?{ ??
  11. ?border:?0; ??
  12. ?} ??
  13. address,?caption,?cite,?code,?dfn,?em,? ??
  14. h1,?h2,?h3,?h4,?h5,?h6,?strong,?th,?var?{ ??
  15. ?font-weight:?normal; ??
  16. ?font-style:?normal; ??
  17. ?} ??
  18. ul?{ ??
  19. ?list-style:?none; ??
  20. ?} ??
  21. caption,?th?{ ??
  22. ?text-align:?left; ??
  23. ?} ??
  24. h1,?h2,?h3,?h4,?h5,?h6?{ ??
  25. ?font-size:?1.0em; ??
  26. ?} ??
  27. q:before,?q:after?{ ??
  28. ?content:?; ??
  29. ?} ??
  30. a,?ins?{ ??
  31. ?text-decoration:?none; ??
  32. ?} ??

_________________________

Yahoo CSS Reset
yahoo这帮家伙写的Reset个人觉得可以推荐

?

引用内容 引用内容
CSS代码
  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td?{? ??
  2. ?padding:?0; ??
  3. ?margin:?0; ??
  4. ?} ??
  5. table?{ ??
  6. ?border-collapse😕collapse; ??
  7. ?border-spacing:?0; ??
  8. ?} ??
  9. fieldset,img?{? ??
  10. ?border:?0; ??
  11. ?} ??
  12. address,caption,cite,code,dfn,em,strong,th,var?{ ??
  13. ?font-weight😕normal; ??
  14. ?font-style😕normal; ??
  15. ?} ??
  16. ol,ul?{ ??
  17. ?list-style😕none; ??
  18. ?} ??
  19. caption,th?{ ??
  20. ?text-align😕left; ??
  21. ?} ??
  22. h1,h2,h3,h4,h5,h6?{ ??
  23. ?font-weight😕normal; ??
  24. ?font-size:?100%; ??
  25. ?} ??
  26. q:before,q:after?{ ??
  27. ?content:; ??
  28. ?} ??
  29. abbr,acronym?{?border:?0; ??
  30. ?} ??

_________________________

Erik Meyer’s CSS Reset
作者将Erik Meyer的代码重新整理了.但功能上还是一样的
这套Css Reset是业内是使用最多的

?

引用内容 引用内容
CSS代码
  1. html,?body,?div,?span,?applet,?object,?iframe,?table,?caption,?tbody,?tfoot,?thead,?tr,?th,?td,? ??
  2. del,?dfn,?em,?font,?img,?ins,?kbd,?q,?s,?samp,?small,?strike,?strong,?sub,?sup,?tt,?var,? ??
  3. h1,?h2,?h3,?h4,?h5,?h6,?p,?blockquote,?pre,?a,?abbr,?acronym,?address,?big,?cite,?code,? ??
  4. dl,?dt,?dd,?ol,?ul,?li,?fieldset,?form,?label,?legend?{ ??
  5. ?vertical-align😕baselinebaseline; ??
  6. ?font-family:?inherit; ??
  7. ?font-weight:?inherit; ??
  8. ?font-style:?inherit; ??
  9. ?font-size:?100%; ??
  10. ?outline:?0; ??
  11. ?padding:?0; ??
  12. ?margin:?0; ??
  13. ?border:?0; ??
  14. ?} ??
  15. /*?remember?to?define?focus?styles!?*/??
  16. :focus?{ ??
  17. ?outline:?0; ??
  18. ?} ??
  19. body?{ ??
  20. ?background😕white; ??
  21. ?line-height:?1; ??
  22. ?color😕black; ??
  23. ?} ??
  24. ol,?ul?{ ??
  25. ?list-style😕none; ??
  26. ?} ??
  27. /*?tables?still?need?cellspacing=”0″?in?the?markup?*/??
  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. /*?remove?possible?quote?marks?(“)?from?<q>?&?<blockquote>?*/??
  37. blockquote:before,?blockquote:after,?q:before,?q:after?{ ??
  38. ?content:?”“; ?
  39. ?} ?
  40. blockquote,?q?{ ?
  41. ?quotes:?”“?”“; ??
  42. ?} ??

_________________________

Condensed Meyer Reset
总的来说这是对Erik Meyer的Css 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. ?} ??

最后有份关于Css Reset的使用者调查
http://css-tricks.com/poll-results-what-css-reset-do-you-use/

赞(0) 打赏
未经允许不得转载:WEB前端开发 » Css Reset(复位)整理

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    你这IE下的兼容也是醉了……

    kousuke4年前 (2015-07-08)回复
    • 嘎嘎,没特的去兼容ie,

      4年前 (2015-07-08)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏