CSS全局样式在使用中的一点小建议

俗话说"细节决定成败"。

reset的意义,不是让你全部去掉,而是让各种浏览器尽量起点一样。

牛顿是站在巨人伽利略的肩膀上的,我们也可以这么做。通过高手们的经验,下面两个细节需要注意。你可以检查一下你设计网站或者博客的全局CSS。

不建议用:*{margin:0;padding:0;}

不建议用:* {margin:0;padding:0;}的原因:

*这个感觉不是很好,肯定会影响效率的,尽管不能被肉眼察觉

性能的消耗是其中一个因素,个人认为会带来的最大弊端还是对表单元素的影响。比如checkbox、radio、button之类的标签,被定义后在浏览器上的显示很别扭,需要针对性重写代码,消耗的是更多的代码量和代码时间。

但是针对一些简单得页面,标签元素单一且简单得话,就可以大胆地使用。

建议使用:img {border:0 none;}

原因是为了兼容,因为border边框属性在不同浏览器中的渲染方式不同。

比如FF和IE中,仅仅使用img {border:0;}的话,那么在两个浏览器中border-width都是为0的,但是border-style和border-color两个属性会存在差异。

reset.css样本

  1. body, div, dl, dt, dd, ul, ol, li, 
  2. h1, h2, h3, h4, h5, h6precode
  3. form, fieldset, legend, input, button, 
  4. textarea, p, blockquote, th, td { 
  5.     margin0
  6.     padding0
  7. fieldset, img { 
  8.     border0 none
  9. /* remember to define focus styles! */ 
  10. :focus { 
  11.     outline0
  12. address, caption, cite, code, dfn, 
  13. em, strong, th, var, optgroup { 
  14.     font-stylenormal
  15.     font-weightnormal
  16. h1, h2, h3, h4, h5, h6 { 
  17.     font-size100%
  18.     font-weightnormal
  19. abbr, acronym { 
  20.     border0
  21.     font-variantnormal
  22. input, button, textarea, 
  23. select, optgroup, option { 
  24.     font-family: inherit; 
  25.     font-size: inherit; 
  26.     font-style: inherit; 
  27.     font-weight: inherit; 
  28. code, kbd, samp, tt { 
  29.     font-size100%
  30. To enable resizing for IE */ 
  31. For IE6-Win, IE7-Win */ 
  32. input, button, textarea, select { 
  33.     *font-size100%
  34. body { 
  35.     line-height1.5
  36. ol, ul { 
  37.     list-stylenone
  38. /* tables still need 'cellspacing="0"' in the markup */ 
  39. table { 
  40.     border-collapsecollapse
  41.     border-spacing0
  42. caption, th { 
  43.     text-alignleft
  44. sup, sub { 
  45.     font-size100%
  46.     vertical-alignbaseline
  47. /* remember to highlight anchors and inserts somehow! */ 
  48. :link, :visited , ins { 
  49.     text-decorationnone
  50. blockquote, q { 
  51.     quotesnone
  52. blockquote:before, blockquote:after, 
  53. q:before, q:after { 
  54.     content''
  55.     contentnone

转载请注明:代码家园 » CSS全局样式在使用中的一点小建议

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)