HTML5学堂-码匠 HTML5学堂

您当前位于:HTML+CSS ——> CSS reset,样式重置

CSS reset,样式重置

2015/05/29 21:21:55 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS | 关键词:CSS,样式重置,默认样式

CSS reset重置

HTML5学堂:为防止不同浏览器默认样式对于网页布局样式造成的影响,通常我们在HTML文件的头部引入上面这段重置代码,将一些浏览器所不同的样式以及部分标签的默认样式清除掉,具体代码如下。

示例代码

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - HTML5学堂</title>
  6.     <style>
  7.         .wrap {
  8.             background-color: skyblue;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <div class="wrap">
  14.         <ul>
  15.             <li>独行冰海-刘国利</li>
  16.             <li>梦幻雪冰-陈能堡</li>
  17.             <li>路过心上-林河钦</li>
  18.             <li>尹小芃槑-尹 鹏</li>
  19.             <li>扶、公子-扶俊冰</li>
  20.             <li>HTML5学堂</li>
  21.         </ul>
  22.         <h1>独行冰海-刘国利</h1>
  23.         <h2>梦幻雪冰-陈能堡</h2>
  24.         <h3>路过心上-林河钦</h3>
  25.         <h4>尹小芃槑-尹 鹏</h4>
  26.         <h5>扶、公子-扶俊冰</h5>
  27.         <h6>HTML5学堂</h6>
  28.         <strong>HTML5学堂</strong>
  29.         <em>HTML5学堂</em>
  30.     </div>
  31. </body>
  32. </html>

标签未清除浏览器默认样式

HTML5学堂 CSS重置 h5course

标签清除浏览器默认样式

HTML5学堂 CSS重置 h5course

为何要引入CSS重置文件

在HTML标签在浏览器里有默认的样式,例如 html,body标签有上下边距。不同浏览器的默认样式之间也会有差别。在制作页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。

CSS重置文件代码

  1. @charset 'utf-8';
  2. /* CSS reset */
  3. html{color:#000;background:#FFF;font-family:Arial,'Microsoft YaHei','宋体';}
  4. /*清除默认的内边距和外边距等*/
  5. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,strong{padding:0;margin:0;font-family:'Microsoft YaHei',Arial,'宋体';}
  6. table{border-collapse:collapse;border-spacing:0;}
  7. /*清除默认边框*/
  8. fieldset,img{border:0;}
  9. a{text-decoration:none; color:#00c; outline:none;}/*此处待添加默认链接颜色*/
  10. var,em,strong{font-style:normal;}
  11. address,caption,cite,code,dfn,em,strong,th,var, optgroup{font-style:inherit;font-weight:inherit;}
  12. del,ins{text-decoration:none;}
  13. li{list-style:none;}
  14. caption,th{text-align:left;}
  15. /*清除默认的字体大小和文字粗细*/
  16. h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
  17. q:before,q:after{content:'';}
  18. abbr,acronym{border:0;font-variant:normal;}
  19. sup{vertical-align:baseline;}
  20. sub{vertical-align:baseline;}
  21. legend{color:#000;}
  22. input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}
  23. input,button,textarea,select{*font-size:100%;}
  24. body{-webkit-user-select:none;-webkit-text-size-adjust:none;}
  25. /*去除移动端点击事件出现的背景框*/
  26. *{-webkit-tap-highlight-color:rgba(0,0,0,0);}
  27. /*清除浮动*/
  28. .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
  29. /*清除浮动的兼容IE*/
  30. .clearfix { *zoom:1; }

相关文章推荐

CSS引入方式

link和@import的区别

CSS important

CSS文件中url的路径含义及使用

CSS选择器优先级

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端