zoukankan      html  css  js  c++  java
  • 关于 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 后就可以应用于自己开发的所有项目了,下面分享一下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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 的核心。

  • 相关阅读:
    office 2007
    关于网站爬虫的爬取
    华为交换机默认密码大合集
    一些不错的网站工具箱
    HDU 2023 求平均成绩
    HDU 2056 Rectangles
    HDU 2022 海选女主角
    HDU 2045 不容易系列之(3)—— LELE的RPG难题
    HDU 2042 不容易系列之二
    HDU 2044 一只小蜜蜂...
  • 原文地址:https://www.cnblogs.com/ginikeer/p/3653129.html
Copyright © 2011-2022 走看看