技术分享 调用CSS Reset重设浏览器样式

开发 前端
你对CSS Reset的概念和使用是否熟悉,CSS Reset即重设浏览器的样式。在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。

本文向大家描述一下CSS Reset的使用,CSS Reset即重设浏览器的样式,但并不是所有的浏览器都使用一样的数值,所以,有了CSS Reset,以让网页的样式在各浏览器中表现一致。

CSS Reset

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

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

viewsourceprint?

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

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

viewsourceprint?

  1. 01body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,  
  2.  
  3. 02form,fieldset,input,textarea,p,blockquote,th,td{  
  4.  
  5. 03padding:0;   
  6. 04margin:0;
  7.  
  8. 05}   
  9. 06   
  10. 07table   
  11. 08{  
  12.  
  13. 09border-collapse:collapse;  
  14.  
  15. 10border-spacing:0;  
  16. 11}   
  17. 12   
  18. 13fieldset,img   
  19. 14{   
  20. 15border:0;   
  21. 16}   
  22. 17   
  23. 18address,caption,cite,code,dfn,em,strong,th,var  
  24.  
  25. 19{   
  26. 20font-weight:normal;  
  27.  
  28. 21font-style:normal;  
  29.  
  30. 22}   
  31. 23   
  32. 24ol,ul   
  33. 25{  
  34.  
  35. 26list-style:none;  
  36.  
  37. 27}   
  38. 28   
  39. 29caption,th   
  40. 30{   
  41. 31text-align:left;   
  42. 32}   
  43. 33   
  44. 34h1,h2,h3,h4,h5,h6  
  45.  
  46. 35{   
  47. 36font-weight:normal;  
  48.  
  49. 37font-size:100%;  
  50.  38}   
  51. 39   
  52. 40q:before,q:after  
  53. 41{  
  54.  
  55. 42content:'';   
  56. 43}   
  57. 44   
  58. 45abbr,acronym   
  59. 46{   
  60. 47border:0;  
  61. 48} 

OK,相信你也已经了解了CSS Reset的目的,或许你也可以根据自己的喜好,写一个自己的CSS Reset系统,毕竟大家的需求和习惯的不同的。
 

【编辑推荐】

  1. 主流浏览器CSS Reset的方法
  2. 八个困扰新手的DIV CSS网页布局问题
  3. 全面解析CSS优先级规则
  4. 专家推荐 10款优秀CSS框架
  5. 实例解析清除CSS float浮动的三种方法

 

 

责任编辑:佚名 来源: nowamagic.net
相关推荐

2010-09-08 11:11:50

CSS样式CSS

2010-08-19 15:47:34

CSS Reset浏览器

2010-09-15 15:39:03

CSS hack

2010-09-15 16:19:17

IECSS hack

2013-01-14 10:58:51

傲游云浏览器

2010-09-16 13:48:15

CSS Hack

2011-06-16 11:15:04

2010-08-19 09:09:53

FirefoxIECSS

2022-07-07 08:43:05

HoudiniAPICSS

2010-09-15 16:29:20

CSS hackIE8

2010-09-14 14:18:09

CSS跨浏览器开发

2010-06-23 13:24:00

CSSCSS选择器

2015-06-12 11:26:02

CSS浏览器 CSS Hac

2013-01-25 13:37:09

傲游云浏览器

2012-03-20 11:07:08

2022-05-30 07:58:52

浏览器插件

2010-08-20 14:11:26

IE火狐浏览器

2012-03-20 11:31:58

移动浏览器

2012-03-19 17:25:22

2012-03-20 11:41:18

海豚浏览器
点赞
收藏

51CTO技术栈公众号