做好CSS全局定义 减少灵异事件发生

2016-6-1 17:43 来自本站原创 Web前端 16,164 8 7
[摘要]

做好CSS全局定义能够有效的避免不同浏览器下对默认样式表达不同导致的布局差异,减少开发者的返工时间,本文整理了常用的全局定义CSS样式。

说到CSS全局定义,前端老鸟们肯定烂记于心,但是对于很多初入门的同学,大多时候写样式表就直接写选择器样式了。而忽略CSS全局定义的后果就是各种灵异事件的发生,特别是在IE6 IE7下,它们不如chrome、Firefox这类现代浏览器那么智能,结果就是各种换行、各种奇形怪状。

做好CSS全局定义 减少灵异事件发生

所谓CSS全局定义就是对CSS一些基础的标签进行定义,比如body、div、ul、li等等,首先对其边距、颜色、边框等样式做一个全面的定义,让其听从你的指挥。因为不同浏览器对这些标签默认的样式有不同的表达,所以如果不做全局定义,就会很容易出现奇葩现象。

有一个很典型的现象就是<a></a>标签内<img></img>标签的宽度在IE下要比你想要的要宽,如果不做定义,那么你在做排序布局的时候就很容易乱掉。

一般全局定义代码直接丢在CSS最前面,笔者整理了比较实用的全局定义样式,以飨读者。

  1. /* 
  2. 常见实用的全局定义CSS样式  
  3. 雅兮网整理,本文地址:http://www.iyaxi.com/2016-06-01/1007.html 
  4. */  
  5. /* 全局CSS定义 */  
  6. body { font-family:"Microsoft Yahei"margin:0 autopadding:0; font-size:12pxcolor:#333;  }  
  7. div, form, ul, ol, li, span, p, dl, dt, dd { margin:0; padding:0; border:0; }  
  8. img, a img { border:0; margin:0; padding:0; }  
  9. h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-size:12px; }  
  10. ul, ol, li { list-style:none }  
  11. table, td, input { font-size:12pxpadding:0; font-family:inherit; }  
  12. img{ vertical-aligntop;}  
  13. .clear{clear:both;}  
  14. .nomagin{margin:0;}  
  15.   
  16. /* 默认链接颜色 */  
  17. a { outline-style:nonecolor:#333text-decoration:none }  
  18. a:hover { color:#c00text-decoration:underline; }  

如果认为本文对您有所帮助请赞助本站

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属雅兮网所有,欢迎转载,但务请注明出处;
    8 条回复
    加载中...
    1. 好书推荐 6个月前 (06-05)
      6楼

      现在代码越来越精简了

    2. 工作与时日 6个月前 (06-04)
      5楼

      看见CSS就头疼

    3. 纯洁博客 6个月前 (06-04)
      4楼

      博客主题真漂亮

    4. 夏日博客 6个月前 (06-03)
      板凳

      必须要有一个全局的定义,否则整个网页代码会很乱,而且不利于控制。

    5. Koolight 6个月前 (06-03)
      椅子

      学习了,CSS添加特效,的确很不错的说!

    6. boke112导航 6个月前 (06-01)
      沙发

      这个好像一般的博客网站都有这个全局CSS,不过有些CSS代码不兼容,这个是最头疼的

      • 飞鸟
        闫广冉 6个月前 (06-02)

        @boke112导航: 大多数主题肯定都是会写全局的,但写页面的可不只有WordPress啊,很多时候都是从零开始写的 :smile:

    发表评论

    疑问调皮难过抠鼻吓微笑可爱坏笑惊讶发呆疑问大兵偷笑咒骂发怒白眼鼓掌得意擦汗亲亲大哭呲牙晕强

    Top