再谈CSS 让你的网页更标准

发布时间:2011-10-24 发布者:新锐传媒 查阅 [2853] 评论 [0]

  之前,青岛新锐网站建设给大家介绍过,DIV+CSS设计已经成为网站建设,网站设计的一个大趋势,并在做设计 怎能不会CSS文中为大家介绍了一些CSS的相关语法和标签的定义。本期,我们将继续这个话题,教您如何写出高效的CSS代码,让你的网页更标准。

  一、尽量使用 link 引入外部样式表

  为了对老版本浏览更好的提供支持,在编写CSS代码时尽量使用 link 引入外部样式表的方来代替 @import导入样式的方式.

  @import和link在使用上会有一些区别, 利用二者之间的差异,可以在实际运用中进行权衡。

  二、使用外联样式替代行间样式或者内嵌样式

  高效CSS样式:

  Example Source Code

  < /head>

  三、尽量少的使用 !important

  慎用写法

  #news { background: #ddd !important; }

  特定情况下可以使用以下方式提高权重级别

  #container #news { background: #ddd; }

  body #container #news { background: #ddd; }

  四、使用多重选择器

  例如以下两CSS代码

  低效率的

  h1 { color: #236799; }

  h2 { color: #236799; }

  h3 { color: #236799; }

  h4 { color: #236799; }

  高效的避免了重复代码,使代码更加简洁,明了

  h1, h2, h3, h4 { color: #236799; }

  五、使用多重声明

  例如:

  低效率的

  p { margin: 0 0 1em; }

  p { background: #ddd; }

  p { color: #666; }

  高效的

  p { margin: 0 0 1em; background: #ddd; color: #666; }

  六、使用简记属性

  高效CSS代码:

  body { font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0; padding: 10px; border: 1px solid red; color: #222; }

  七、使用继承

  例如以下两个效率的对比

  低效率的

  p{ font-family: arial, helvetica, sans-serif; }

  #container { font-family: arial, helvetica, sans-serif; }

  #navigation { font-family: arial, helvetica, sans-serif; }

  #content { font-family: arial, helvetica, sans-serif; }

  #sidebar { font-family: arial, helvetica, sans-serif; }

  h1 { font-family: georgia, times, serif; }

  高效的

  body { font-family: arial, helvetica, sans-serif; }

  body { font-family: arial, helvetica, sans-serif; }

  h1 { font-family: georgia, times, serif; }

  在使用DIV+CSS编写网页时,我们会经常遇到这些问题,究竟效率怎么样,我们应该从实践去发现,这样才能有更好的理解。

      免责声明 | 新锐观点 | 网站运营 | 网站推广 | 联系我们 | 网站地图