CSS Reset是什么

2016-08-18 08:39:20 什么是CSS Reset ?HTML标签在浏览器中都有默认的样式,例如p标签有上下边距,strong标签有字体加粗样式等。

什么是CSS ResetHTML标签在浏览器中都有默认的样式,例如p标签有上下边距,strong标签字体加粗样式等。不同浏览器的默认样式之间存在差别,例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉,这就是CSS reset。

在本文最后HTML8为大家整理一套包括CSS和HTML的初始化模板。

CSS reset这段代码很成熟,推荐大家使用。YUI的CSS reset主要做了下面几点:

白色背景,黑色字体
margin和padding设为0
去掉table的边框
去掉列表样式(ol,ul,dl)
所有文字字号设为100%
font-style和font-weight设为normal
更好(但不完全)的表格字体继承
减小sup和sub对line-height的影响
YUI3的CSS reset内容如下

  1. html {color:#000;background:#FFF;}
  2. body,div,dl,dt,dd,ul,ol,li, 
  3. h1,h2,h3,h4,h5,h6, 
  4. pre,code,form,fieldset,legend, 
  5. input,textarea,p,blockquote,th,td{margin:0;padding:0;} 
  6. table {border-collapse:collapse;border-spacing:0;} 
  7. fieldset,img {border:0;} 
  8. address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;} 
  9. li {list-style:none;} 
  10. caption,th {text-align:left;} 
  11. h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} 
  12. q:before,q:after {content:'';} 
  13. abbr,acronym {border:0;font-variant:normal;} 
  14. sup {vertical-align:text-top;} 
  15. sub {vertical-align:text-bottom;} 
  16. input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;} 
  17. input,textarea,select {*font-size:100%;} 
  18. legend {color:#000;} 

reset.css 代码:

  1. html{color:#000;background:#FFF;}
  2. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
    {margin:0;padding:0;}
  3. table{border-collapse:collapse;border-spacing:0;}
  4. fieldset,img{border:0;}
  5. address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
  6. li{list-style:none;}
  7. caption,th{text-align:left;}
  8. h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
  9. q:before,q:after{content:'';}
  10. abbr,acronym{border:0;font-variant:normal;}
  11. sup{vertical-align:text-top;}
  12. sub{vertical-align:text-bottom;}
  13. input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
  14. input,textarea,select{*font-size:100%;}legend{color:#000;} 

reset-min.css

  1. html{color:#000;background:#FFF;}
  2. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
    {margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}
  3. fieldset,img{border:0;}
  4. address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
  5. li{list-style:none;}
  6. caption,th{text-align:left;}
  7. h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
  8. q:before,q:after{content:'';}
  9. abbr,acronym{border:0;font-variant:normal;}
  10. sup{vertical-align:text-top;}
  11. sub{vertical-align:text-bottom;}
  12. input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
  13. input,textarea,select{*font-size:100%;}legend{color:#000;} 

当然以上是HTML8网络整理的,以上reset代码还不够简便,HTML8自己整理一套简单的HTML8初始化模板,包括了CSS文件+HTML文件,只需要下载拷贝在此初始化模板基础上进行开发DIV CSS即可,兼容各大浏览器。进入《HTML8初始化模板

更新