关于 CSS Reset

看看上一篇文章,竟然是半个月前的了,看了一下谷歌分析,在 Kayo 没有更新的半个月里,来看 Kayo 的童鞋竟然还在增多,对不起那些童鞋了,最近不明不白就开始忙起来了,关键是在南方忽冷忽热的天气折腾下, Kayo 感冒了,天气反复,所以博友们也要保重啊!

 

现在一切回复正常,继续回到博客生活中了,今天想介绍一下 CSS reset ,最近帮朋友解决一些 CSS 方面的问题,弄了好久仍然无果,几乎什么办法都试过了问题依旧,可以说是百思不得其解,突然灵光一闪才想起了可能是没有 CSS reset 的原因,一看果然如此。

 

相信对 CSS 使用有一定经验的童鞋应该都听过 CSS reset 这个概念,想腾讯等大型网站的 CSS 文件中也必定要一段 reset ,那么 CSS reset 究竟是什么呢?

 

CSS reset 不是一种技术,而且一段 CSS ,正如它的名字那样,重置样式。 HTML 标签在浏览器里是有默认的样式,例如 a 标签会有下划线,p 标签会有上下边距,而且这些标签的默认样式在不同的浏览器中可能是不同的,比如 ui 标签默认会有缩进, IE 是利用 margin 实现的,而 Firefox 和 chrome 是利用 padding 实现的。因此在前端开发的过程中这种不统一的默认样式会给开发者带来很多麻烦,因此需要写一段 CSS reset 的样式覆盖了原本不统一的默认样式。

 

CSS reset 可以根据自身的情况自定义,只要能实现统一样式的效果就行了,写出一段完整、高效的 CSS 后就可以应用于自己开发的所有项目了,下面分享一下 Kayo 的 CSS reset:

 

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; text-align: left; }
ol,ul{list-style: none; }
blockquote,q{quotes: none; }
blockquote: before,blockquote: after,q: before,q: after{content: ''; content: none; }
: focus {outline: 0; }
ins{text-decoration: none; }
del{text-decoration: line-through; }
table{border-collapse: collapse; border-spacing: 0; }

 

在这段 CSS reset 里,对各种容器,表格等标签设定 padding 和 margin 为 0, font-size 为 100% ,这些都是为了统一样式,这个也是 CSS reset 的核心。

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/about-css-reset.html

评论列表

  • 评论者头像
    回复

    等我学学再说

    • 评论者头像
      回复

      @软件盒子 reset使用起来还是比较简单的,参考文中的reset再根据自己的网站稍作更加就行了!

  • 评论者头像
    回复

    因為koyo是神人啊,大家才追隨 :mrgreen:

  • 评论者头像
    回复

    不懂CSS的飘过 :mrgreen:

  • 评论者头像
    回复

    不明真相…CSS小白飘过 :-?

  • 评论者头像
    回复

    bug反馈:回复评论时表情无法显示 :mrgreen:

    • 评论者头像
      回复

      @瘦腿精油 这个不是网站的问题了,最近很多国外服务器的图片资源都会出现读取不了的情况,一会没事,一会不行~挺郁闷的!

1 2

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O