reset.css是什么

reset.css是重置浏览器标签的样式表,其作用就是重新定义标签样式,覆盖浏览器的CSS默认属性,也就是指把浏览器提供的默认样式覆盖掉。推荐:《css视频教程》reset.css 重置浏览器标签的样

reset.css是重置浏览器标签的样式表,其作用就是重新定义标签样式,覆盖浏览器的CSS默认属性,也就是指把浏览器提供的默认样式覆盖掉。

推荐:《css视频教程》

reset.css 重置浏览器标签的样式表。

在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。

所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

重置作用

因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如<button>标签,在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的,所以,通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。

内容

最简单的CSS Reset内容寥寥几行就能完成:

* { padding: 0; margin: 0; border: 0; }

(但由于性能较低,不推荐使用)

这个方法让所有的选择器的padding、margin和border都设置成0。也有内容更多的,比如YUI的CSS Reset内容:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}table {border-collapse: collapse;border-spacing: 0;}fieldset,img {border: 0;}address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}ol,ul {list-style: none;}caption,th {text-align: left;}h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;}q:before,q:after {content:'';}abbr,acronym { border: 0;}以及国外名人Eric Meyer的CSS Reset V1.0|200802内容:html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before,blockquote:after,q:before, q:after {content: '';content: none;}/* remember to define focus styles! */:focus {outline: 0;}/* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;}/* tables still need 'cellspacing="0"' in the markup */table {border-collapse: collapse;border-spacing: 0;}Eric Meyer V2.0|20110126[1] html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6,  p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em,  img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,  dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption,  tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output,  ruby, section, summary,time, mark, audio, video {  margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;  }  /* HTML5 display-role reset for older browsers */  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  display: block;}body {line-height: 1;  }  ol, ul {list-style: none;  }blockquote, q {quotes: none;}  blockquote:before, blockquote:after,  q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}

大家可以看得出来,这些内容方法不同,但功能大同小异,都是起到重置的作用,所以说CSS Reset是根据个人需求不同可以按需自定义的。

关于作者: 营销实力派

为您推荐

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注