关于 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 发表,本文链接:https://kayosite.com/about-css-reset.html

评论列表

  • 评论者头像
    回复

    CSS小白路过

  • 评论者头像
    回复

    我也是小白,来学习下

  • 评论者头像
    回复

    CSS是相当的烦人啊。。到现在一直都搞不懂~欢迎光临所谓刚子,希望能互相交流!希望能互相交流!

  • 评论者头像
    回复

    这个显示代码的插件挺好的!

  • 评论者头像
    回复

    CSS RESET很深奥,应该把相关文章也贴过来,才看得系统~
    平时懒得写,就用YUI的RESET

    • 评论者头像
      回复

      @独自流浪 具体的含义有点复杂,不过这次懒惰了,没有把具体的方法解释清楚,看来得再写一篇补充了!

  • 评论者头像
    回复

    太高深鸟 :idea:

    • 评论者头像
      回复

      @小年 嘻嘻,虽说就这样看比较难理解,不过CSS reset 还是很重要的,了解一下无妨!

  • 评论者头像
    回复

    我一直不懂为什么要把字体设置成100%,可否解释一下 :wink:

    • 评论者头像
      回复

      @西门 。原因有二,都是为了方便自定义字体大小:1.h1,h2这类标签有默认的字体大小,重置后覆盖这些默认大小方便自定义;2.设置为100%可以让子元素继承父元素的字体大小,这样可以统一子元素字体大小,再对额外的某些元素设置不同的字体大小会更加方便。

  • 评论者头像
    回复

    啊。。。好高深。。。没明白TAT~~

    • 评论者头像
      回复

      @鳳梨果凍 其实就是一段css,用来统一默认的html样式,这样会不会好些?

  • 评论者头像
    回复

    CSS reset必须的。不然后面处理起来很肿的。

    • 评论者头像
      回复

      @Demon 嗯,不做reset,后面的开发会遇到一个又一个奇怪的问题!

  • 评论者头像
    回复

    小白路过+1
    这个RESET还是第一次听说…
    又学东西了…我来这是偷知识的..呵呵

    • 评论者头像
      回复

      @kkStx 欢迎欢迎,好知识就是需要分享的。其实应该每个WP主题的css里都会有一段reset,只是名字很多人就不清楚了!

  • 评论者头像
    回复

    原来叫这个名字啊。。。只知道用。。。

    • 评论者头像
      回复

      @小呆 很多网站都有css reset了,只是用了还不知道,嘻嘻,这篇文章算是推广一下reset了!

  • 评论者头像
    回复

    话说我第一次听说这个东西

  • 评论者头像
    回复

    等我学学再说

    • 评论者头像
      回复

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

  • 评论者头像
    回复

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

  • 评论者头像
    回复

    不懂CSS的飘过 :mrgreen:

1 2

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail