如何给你的博客提速（2）：优化css
精简你的css文件
请先看图片，这是一个class为test的div元素。
一般我们都会用dreamweaver来编辑网页。用dreamweaver作出右图的效果，原始的css代码是这样的：
.test { margin: 2px; padding: 2px; height: 300px; width: 400px; border-top-style: dotted; border-right-style: double; border-bottom-style: groove; border-left-style: dashed; border-top-color: #F00; border-right-color: #F00; border-bottom-color: #F00; border-left-color: #F00; }
上面的css代码，每设定一个样式，就会使用一个css标记。其实这样是很浪费的。
先看css标记的结构，是这样的：父样式-子样式-子子样式-……。其实在样式不太复杂的情况下，只需要按照一定的格式定义父样式，相应的效果就会赋予到对应的子样式上。是不是说得很差劲呢？举个例子。
一下是一个class为test2的元素的css
.test2 { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; }
其实我们可以精简成这样
.test2 { border-top-width: 1px dotted; }
border-top-width、border-right-width等字样式都整合进父样式border里了，是不是简单了很多呢？还不了解的童鞋可以把下面的文本保存成html格式，然后替换.test部分看一下。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- .test2 { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; } --> </style> </head> <body> <div class="test2">此处显示 class "test2" 的内容</div> </body> </html>
嗯，现在可以说回图片的例子了，刚才那段css是不是看着都头晕呢？我们可以改成这样。
.test { margin: 2px; padding: 2px; height: 300px; width: 400px; border-style: dotted double groove dashed; border:#F00; }
这里css比较复杂，因此要分开定义border的线性和颜色。我们再变一下，把css改成下面这样子，看会有什么效果。
.test { margin: 2px; padding: 2px; height: 300px; width: 400px; border-style: dotted double groove dashed; border-color:#F00 #0F0 #00F #000; }
你是否已经弄清楚定义四条边的顺序？其实定义ul、li、a等块状元素都是差不多的，举一反三吧。
忘了说主题。根据我的观察，相当多一部分修改过css的博主是没有精简过css，这样css文件就徒增了不少体积，页面打开就慢了。把能精简的都精简掉，简洁不简单，才是技术。
我来了，沙发是我的。
你可以做个专题，针对常用的分类，ul li em dd dt div 这些用的多。
@LAONB
其实都是差不多的，都是那几句css
关键是在DW里 如果设置css就自动成这样了。
以前知道一个小工具，可以使css横向排列！
CSS没多大
关键是图片
精简一下还是好，毕竟多了的话，还是可以提高些速度的，虽然依然比较小。
一说CSS就头晕。嗯。。
以最少的语句完成最多的效果.
哈哈..貌似最近软件测试看多了^!^
我看了之后很迷失……@_@
看不懂哦看不懂。
看了还真有点头晕啊。要不我把我的css文件发给你，你帮我改一下？哈哈哈哈
没见谁分开写的，都是大小样式颜色等等写在一起的呀，这个一般人都懂吧
呃，一走进来发现菜单栏错位了，博主肯定还在修改吧
border:1px dotted #000;
这样的更简单呀
@kerby
没有错位，是我正在做的新效果
@wulinfo
有四种不同的线性，各自还有不同的颜色呢，混起来写的话好像会显示不出应有的效果
@seri CSS合并可以提高速度，是真的吗？
@我想想
）
真的啊，用Yslow测试的结果大多都在多个css文件加载速度不一致，而导致网页速度慢，
如果合并了，就可以一起加载，提高一倍啊以上！
（再就减少js的输出，控制图片大小。完毕！=w=
还有上次bolo指出我的主题图片没有整合也是一个影响载入速度的因素哦~~
@bolo那就补充 border-top right left bottom
下载 速度加快！！
多折腾，呵呵！！
回一个，真的不错
太猛了