再谈CSS 让你的网页更标准

        之前，青华互联青岛网站建设给大家介绍过，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编写网页时，我们会经常遇到这些问题，究竟效率怎么样，我们应该从实践去发现，这样才能有更好的理解。

扫描二维码手机查看该文章