为什么要初始化CSS样式

来源:互联网 发布:淘宝中专毕业证复印件 编辑:程序博客网 时间:2024/05/17 18:44

因为浏览器的兼容性,每个浏览器设计时都有自己的特性,因此在解析标签的时候就产生一些差异,因此显示页面的时候就会出现微小的差异。常见的初始化如下: 

本人常用的常见初始化如下:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {          padding:0;    margin:0; }ol, ul {     list-style:none; }a {     text-decoration:none; }a:hover {     text-decoration:underline; }fieldset, img {     border:0; }h1, h2, h3, h4, h5, h6{     font-size:100%; }button, input, select, textarea {     font-size:100%; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

淘宝的样式初始化如下:

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; } 
CSS重置的优点:

    1.避免重复定义他们,提高样式代码的重用。

    2.设置自己的风格,字体,颜色。

    3.减少代码,减少维护成本。

    4.可以提供完全空白的画布,然后你就可以自己定义相应的样式了。

    5.开发更加有逻辑性:你只是添加样式而不是移除和修改。

     6.浏览器的兼容性问题可以降到最小。

CSS重置的缺点:

      1.增加页面的大小。

      2.不同浏览器渲染页面的不确定性,尽量少修改浏览器的东西。

     3.大多数网站都在用默认css。

原创粉丝点击