专注优质Wordpress企业网站搭建与优化

简化的CSS Reset — 常用CSS重设实例



常用CSS重设实例 - 西米CC

CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题.

在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。

当今流行的浏览器如:Firefox、Opera、Internet Explorer、Chrome、Safari等等，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS 定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。

正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset。什么是CSS Reset？我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

最简化的CSS Reset(重设)

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

这是最普遍最简单的CSS重设，将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

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

这是在上一个重设的基础上添加了对border属性的重设，初始值为0的确能避免一些问题。

  1. * {
  2. outline: 0;
  3. padding: 0;
  4. margin: 0;
  5. border: 0;
  6. }

在前两个的基础上添加了outline属性的重设，防止一些冲突。

浓缩实用型CSS Reset(重设)

  1. * {
  2. vertical-align: baseline;
  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

  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 的 Global CSS Reset

  1. * {
  2. vertical-align: baseline;
  3. font-family: inherit;
  4. fo
  5. nt-style: inherit;
  6. font-size: 100%;
  7. border: none;
  8. padding: 0;
  9. margin: 0;
  10. }
  11. body {
  12. padding: 5px;
  13. }
  14. h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
  15. margin: 20px 0;
  16. }
  17. li, dd, blockquote {
  18. margin-left: 40px;
  19. }
  20. table {
  21. border-collapse: collapse;
  22. border-spacing: 0;
  23. }

Shaun Inman 的 Global Reset

  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-collapse: collapse;
  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-weight: normal;
  15. font-style: normal;
  16. }
  17. ul {
  18. list-style: none;
  19. }
  20. caption, th {
  21. text-align: left;
  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-decoration: none;
  31. }

[ 以下内容您也可能感兴趣 ]

Categories: DIV+CSS重构标准

Tags: ,

Subscribe to Comments

Add a Comment