请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

模板之家 首页 教程频道 查看内容

reset css是什么

模板之家 2021-5-16 16:30

分享至 : QQ空间
收藏

reset css是指reset.css重置浏览器标签的样式表,其作用就是将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式,也就是把浏览器提供的默认样式覆盖掉。

reset css是指reset.css重置浏览器标签的样式表,其作用就是将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式,也就是把浏览器提供的默认样式覆盖掉。

本文操作环境:windows7系统、CSS3版,DELL G3电脑

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

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是根据个人需求不同可以按需自定义的。

推荐学习:《css视频教程》

以上就是reset css是什么的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章!


路过

雷人

握手

鲜花

鸡蛋
来自: 网络收集
文章评论0人参与
热门频道
  • ecshop成人用品商城网站源源码模板 微信小
  • ecshop微信小程序代生成服务 可选购小程序
  • 【可选购小程序】ecshop生鲜食品蔬菜水果特
  • 【可选购小程序】ecshop医药品保健药房网站
  • ecshop百货超市日用品网站 免费生成微信小
  • ecshop办公用品文具耗材设备 免费生成微信
  • 【可选购小程序】ecshop家居家纺床上用品源
  • 【可选购小程序】ecshop户外运动体育用品健
  • ecshop整站数据打包 带数据 适合申请支付、
  • ecshop跨境购海淘微信分销商城网站源码模板
    推荐文章
  • 热门
  • 最新
返回顶部