CSS Reset是什么?
在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。
为什么要重置它?
因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如<button>标签,在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的,所以,通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。
CSS Reset的内容是什么?
/*表示定义CSS文件的字符编码格式为"utf-8";*/
@charset 'utf-8';
/*为html元素定义如下样式:字体颜色为黑色,背景颜色为白色,字体类型为“微软雅黑、sans-serif、Arial”三种;*/
html{color:#000;background:#FFF;font-family:'Microsoft YaHei',sans-serif,Arial;}
/*为body、div等一系列元素设置字体类型为“微软雅黑、sans-serif、Arial”三种*/
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',sans-serif,Arial;}
/*为table标签设置:合并单元格之间的边框,边框间距为0*/
table{border-collapse:collapse;border-spacing:0;}
/*为img标签设置0像素的边框(img标签在a标签当中时,默认会有蓝色边框)*/
img{border:0;}
/*为a标签设置初始样式,没有下划线,字体颜色为#000(黑色),在点击a标签时没有外侧的高亮线(outline)*/
a{text-decoration:none; color:#000; outline:none;}
/*为a标签的hover状态设置样式,出现下划线*/
a:hover{text-decoration:underline;}
/*为var、em、strong元素设置字体样式为“正常”*/
var,em,strong{font-style:normal;}
/*为em、strong、th、var元素设置字体样式为“继承”,字体粗细为“继承”(第8、9行的设置方式,相当于是先将网页中的所有的var、em、strong标签的字体样式去除,之后,再设置样式继承父级样式,这样能够保证其他标签中的var、em、strong标签的样式与其父级元素相同)*/
em,strong,th,var{font-style:inherit;font-weight:inherit;}
/*为li去除列表项的小标志*/
li{list-style:none;}
/*为caption、th设置左对齐*/
caption,th{text-align:left;}
/*为h1~h6的标签设置字体大小,均为父级元素的字体大小,且不做加粗处理(默认状态下不同的标题类元素大小不同,且均具有加粗效果)*/
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
/*为input、button、textarea等元素设置字体类样式,字体的各种样式均继承父级样式*/
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style: inherit;font-weight:inherit;}
/*为input、button、textarea、select设置hack,在IE6~7下字体为父级的100%*/
input,button,textarea,select{*font-size:100%;}
/*after伪元素清浮动兼容IE*/
.clearfix {*zoom:1}
/*after伪元素清浮动的语句*/
.clearfix:after {content:'\200B';clear:both;display:block;height:0px}