CSS reset重置
HTML5学堂：为防止不同浏览器默认样式对于网页布局样式造成的影响，通常我们在HTML文件的头部引入上面这段重置代码，将一些浏览器所不同的样式以及部分标签的默认样式清除掉，具体代码如下。
示例代码
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5Course - HTML5学堂</title>
-
<style>
-
.wrap {
-
background-color: skyblue;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="wrap">
-
<ul>
-
<li>独行冰海-刘国利</li>
-
<li>梦幻雪冰-陈能堡</li>
-
<li>路过心上-林河钦</li>
-
<li>尹小芃槑-尹 鹏</li>
-
<li>扶、公子-扶俊冰</li>
-
<li>HTML5学堂</li>
-
</ul>
-
<h1>独行冰海-刘国利</h1>
-
<h2>梦幻雪冰-陈能堡</h2>
-
<h3>路过心上-林河钦</h3>
-
<h4>尹小芃槑-尹 鹏</h4>
-
<h5>扶、公子-扶俊冰</h5>
-
<h6>HTML5学堂</h6>
-
<strong>HTML5学堂</strong>
-
<em>HTML5学堂</em>
-
</div>
-
</body>
-
</html>
标签未清除浏览器默认样式
标签清除浏览器默认样式
为何要引入CSS重置文件
在HTML标签在浏览器里有默认的样式，例如 html，body标签有上下边距。不同浏览器的默认样式之间也会有差别。在制作页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
CSS重置文件代码
-
@charset 'utf-8';
-
/* CSS reset */
-
html{color:#000;background:#FFF;font-family:Arial,'Microsoft YaHei','宋体';}
-
/*清除默认的内边距和外边距等*/
-
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,'宋体';}
-
table{border-collapse:collapse;border-spacing:0;}
-
/*清除默认边框*/
-
fieldset,img{border:0;}
-
a{text-decoration:none; color:#00c; outline:none;}/*此处待添加默认链接颜色*/
-
var,em,strong{font-style:normal;}
-
address,caption,cite,code,dfn,em,strong,th,var, optgroup{font-style:inherit;font-weight:inherit;}
-
del,ins{text-decoration:none;}
-
li{list-style:none;}
-
caption,th{text-align:left;}
-
/*清除默认的字体大小和文字粗细*/
-
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
-
q:before,q:after{content:'';}
-
abbr,acronym{border:0;font-variant:normal;}
-
sup{vertical-align:baseline;}
-
sub{vertical-align:baseline;}
-
legend{color:#000;}
-
input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}
-
input,button,textarea,select{*font-size:100%;}
-
body{-webkit-user-select:none;-webkit-text-size-adjust:none;}
-
/*去除移动端点击事件出现的背景框*/
-
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
-
/*清除浮动*/
-
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
-
/*清除浮动的兼容IE*/
-
.clearfix { *zoom:1; }
相关文章推荐
CSS引入方式
link和@import的区别
CSS important
CSS文件中url的路径含义及使用
CSS选择器优先级
欢迎沟通交流~HTML5学堂
极客编程技术分享
