Jinwen Say » CSS

在dabr中CSS Sprite背景图片

Jinwen — Tue, 30 Mar 2010 04:41:16 +0000

连续第三篇说dabr的了，因为自己使用起来就不得不想把它折腾得顺心一点。

我们知道在dabr中都会有一组小图标以区分功能，但其实当在查看源码时候我们也能发现作者在这方面其实很不在意，因为他只是很简单的把那些图标一个一个用img 链接出来算了。

虽然这样也没什么不好，反正就是最简单的正确；但是当你在网络环境不理想，尤其在移动设备端使用dabr的时候，那些小图标会因为网速慢而一个一个的浮出来让人很是烦恼；另外一个不好的是，在每一条推上面都至少有四到五个小图标，这样下来，每个版面显示的十来条推上每个图标都要用img 读取重复的图片出来，那效率……可想而知的慢。

所以应该把这种显示背景图片还有链接图标的方法改为CSS Sprite，最大化的优化一下执行效率。

查找twitter.php文件，在最后段有这样一句：

return "";

我们需要做的就是把中间img 的标签去掉，然后把属性链接用CSS 的方法把它定义为可点击区块，并为其添加背景图片，代替原来要显示的图标。问题是怎样区分各个不同链接的样式呢？在这里是要感谢下dabr的作者做了的一件好事，他为我们提供了$text 这个变量。那样我们就利用这个变量区分各个不同链接的样式，把上面的代码改为：

return "";

根据dabr原来对$text 的设定，我们需要在theme.php 文件中再增加各个样式定义：

.AT{background:transparent url(./images/bgs.png) no-repeat 0px 0px;width:15px;height:15px;display:inline-block;} .RE{background:transparent url(./images/bgs.png) no-repeat -15px 0px;width:15px;height:15px;display:inline-block;} .DM{background:transparent url(./images/bgs.png) no-repeat -30px 0px;width:15px;height:15px;display:inline-block;} .DEL{background:transparent url(./images/bgs.png) no-repeat -45px 0px;width:15px;height:15px;display:inline-block;} .FAV{background:transparent url(./images/bgs.png) no-repeat -60px 0px;width:15px;height:15px;display:inline-block;} .UNFAV{background:transparent url(./images/bgs.png) no-repeat -75px 0px;width:15px;height:15px;display:inline-block;} .RT{background:transparent url(./images/bgs.png) no-repeat -90px 0px;width:15px;height:15px;display:inline-block;}

上面的就是对各个链接的样式定义了。这里补充说一下，在dabr原来代码中对回复功能还有回复所有功能的$text 定义为“@”和“REPLY ALL”，为了能在CSS 中正确命名，我们需要在

function theme_action_icons($status)

上面这一个function 中把它们手动改成“AT”和“RE”。改的名称随意，没有规定的。只要能和上上面那一段CSS名称对上就可以了。

接下来就是用Photoshop 做一张整合了所有需要用上图片的背景图，就象下面的一样（这里我顺带把logo也做进去）：

为了省事，我是直接用了twitter 官方的图标。而这里各个小图标的位置就是按照上面代码的位置决定的了，每个小图标的宽度和高度都是15像素，我想大家对照一下图标的位置和相应在CSS中的位置数值，应该很容易看明白的了。

接着就是显示的效果：

再查看更改前后源代码的对比。

更改前如下图，每条推上的图标分别是以标签插入，页面上读取多次图片显示，很不经济。

更改后如下图，源码上看不到图片的读取。因为此时系统只是在加载CSS 样式的时候才读取了一次图片，也就是唯一的一张整合背景图，此时页面的刷新速度加快了不少。

终上述，我是挺满意这样的更改的。反应的不只是页面刷新的速度，还有流量要求的减少。按我观察，现在在手机上刷新一个页面的流量差不多少了1k，效果不错。

有兴趣试用一下这个版本dabr的朋友，可以在这一篇日志中找到更新了的下载链接。

我在WordPress主题中的圆角实现

Jinwen — Tue, 16 Jun 2009 15:54:06 +0000

我也喜欢带点圆角的主题，而在模板设计中要实现圆角有着很多的方法。最简单的是CSS 3的方法，在网上搜索一下也很多介绍，但在旧的浏览器下不支持；还有就是利用js来实现，虽然我自己也喜欢用JQuery实现一些效果，却不知道为什么就是不喜欢把圆角的实现也交予它。我一直以来都是通过小图片来实现的，或者应该说是CSS SPRITES这种实现方法。

因为通过CSS SPRITES这个方法，圆角的图片都是整合到主题所带的背景图片中，所以我觉得它并不浪费，反正一个主题肯定就要带上背景图片的；我也在网上看到过很多说是CSS SPRITES的方法介绍，但我都没有认真看，或者它们所说的跟我一直以来实现的方法相同；尽管这样，我也写写我自己喜欢的圆角实现吧。

首先是在需要实现圆角的部分，添加一组DIV，分别代表左上，右上，左下，右下圆角的位置；而它们的放置位置是你需要实现圆角样式的那一个DIV。比如在我的主题中，紧接的那一个DIV就是我要添加圆角的：

...

添加四角区块，并为它添加一个class："encadre"。

class="encadre">









...

然后在主题的样式文件中添加下面的代码：

#wrapper .tl{background:url(imgs/allbgs.png) no-repeat -582px 0;} #wrapper .tr{background:url(imgs/allbgs.png) no-repeat -591px 0px;} #wrapper .bl{background:url(imgs/allbgs.png) no-repeat -582px -9px;} #wrapper .br{background:url(imgs/allbgs.png) no-repeat -591px -9px;} .encadre{margin:0;padding:0;position:relative;} .encadre .tl,.encadre .tr,.encadre .bl,.encadre .br{font-size:0px;height:9px;line-height:1px;overflow:hidden;position:absolute;width:9px;} .encadre .tl{background-position:left top;left:0;top:0;} .encadre .tr{background-position:right top;right:0;top:0;} .encadre .br{background-position:right top;bottom:0;right:0;} .encadre .bl{background-position:left top;bottom:0;left:0;}

大家从上面红字的height和width数值知道，我要实现的圆角半径是9个px。

接下来要做的是画一下圆角的图片了，利用photoshop，在主题原有的背景图片中（假设你和我一样只使用一张背景图片）或者新建一个背景图片，名字叫：allbgs.png。

在allbgs.png中画上一个半径是9px的圆。这里的圆颜色是你添加圆角所在区域的颜色，如我的模板是白色的，所以圆就是白色；圆外的颜色是你的body或者是你添加圆角区域的外围颜色，如我的背景颜色是#f7f7f7，所以圆外颜色就是#f7f7f7。

最后就是修改一个样式中圆角图片的所在位置，我们需要的是找出四个顶点的位置，并把它们在上面样式代码中表现出来。这一步不难，大家对比一下上面的代码中的数字和下图的关系就知道怎样做了。

我自己比较喜欢这个方法，基本上实现不难；而且在各个浏览器下都不会出现显示的问题。另外因为它本来就附在需要加载的背景图片中，所以也不会产生说什么图片加载太多速度变慢的情况，本来这个小圆角的图片体积就小得可以不计较了，不是吗？

利用JQuery前台切换网站的样式实现

Jinwen — Thu, 11 Jun 2009 19:10:19 +0000

本文说的是在WordPress中怎样利用JQuery在网站的前台切换样式的方法。或者这篇文章的方法大家可能不是太需要，因为我觉得这是解决我被主题样式折腾到差不多分裂的原因及结果的最后手段。但如果你想为网站添加多一些样式，让访客选择；又或者你想调整一下网站的样式，而在决定前让访客先体现的话，这也是一个很好的办法，省去总是切换主题的痛苦。

切换效果参照本站。

1. 切换样式的按钮代码：





Day


Night

上面的按钮代码请根据你的网站设计放置。比如在我这里是放到header.php文件中的。

2. 样式引用代码：

在这里我简单说明一下：

因为在后面的js代码中会于浏览器的cookie部分写入一个cookie记录“style”，所以在这里我会让浏览器根据记录进行样式的调用（这里为两个样式，一个“white”，另一个“black”）。
当浏览器存在“style”的cookie记录，并记录为“black”时候，则先读取black.css文件，这可以说是主样式文件；及后再读取辅助样式（就是供需要切换的样式），white.css。
如果浏览器没有任何“style”的样式cookie记录，或者“style”的样式cookie记录为“white”时候，则主题先读取white.css文件，再读取black.css文件。
在这里需要补充的是，使用PHP的cookie读取会比使用js的cookie读取更为有效。因为我原来是利用js进行cookie的读取动作，但由于js的加载还是需要那么一点时间，所以在切换样式后的页面浏览中并不完美。如果你以前发现选择黑色主题后，再浏览页面，会出现先是一瞬间的白色主题，然后才是黑色主题的现象。这就是我要说明的情况了。现在使用PHP代码则不再存在这个不足。

3. Javascript部分代码：（注意前提是你已经在网站中调用了JQuery库）

(function($) { $(document).ready(function() { $('.styleswitch').click(function() { $('body').append('

');

$('#overlay')

.css({

display: 'none',

position: 'absolute',

top:0,

left: 0,

width: '100%',

height: '2000%',

zIndex: 1000,

background: 'black'

})

.fadeIn(500);

switchStylestyle(this.getAttribute("rel"));

$('#overlay').fadeOut(500);

return false;

});

});

function switchStylestyle(styleName)

{setTimeout(function() {

$('link[@rel*=style][title]').each(function(i)

{

this.disabled = true;

if (this.getAttribute('title') == styleName) this.disabled = false;

});}, 500);

createCookie('style', styleName, 365);

}

})(jQuery);

上面的部分是点击动作部分。我在中间添加了一段#overlay的块样式是为了在切换过程中制作一个灯箱效果，这样会比突然的切换来得更为自然。

然后还需要添加产生cookie记录的功能代码：

function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; }

还有添加删除cookie记录的功能代码：

function eraseCookie(name) { createCookie(name,"",-1); }

到此，完成上面三部后就可以了，希望大家看得明白。

利用JQuery自动为文章内图片添加背景效果

Jinwen — Tue, 24 Mar 2009 22:28:32 +0000

今天闲逛一些设计网站时候，发现一种文章插入图片的背景效果处理：图片居中，然后是图片背景是等宽的区域，无论图片大小。自己觉得这个挺不错，相对我们习惯的图片设置border和padding的样式。我这里上传两张（一竖一横）图片让大家看看这个效果（在RSS阅读器看此文的朋友需要到本站一趟了，否则看不了效果）：

我简单地说一下，上面两张图片只是在WordPress的后台上传插入，没有修改其代码。一般情况下，如果我们只在CSS中设置的样式是很难做出上面的效果的，因为我们虽然能对图片进行居中，加边框，加背景等处理；但对于宽度不一样的图片，我们并不能保证它的背景会一样宽，因为此时它们的padding-left和padding-right的值会不一样；但是，WordPress会很自动地会为每张上传的图片前后加上

标签，而当我们把图片的背景样式应用到这个

标签上，上面的样式就可以解决了。

但是，如果我们每插入一张图片都要切换到xhtml编辑，为每个

都手工添加成如

的话，不是很麻烦吗？这个时候我想到JQuery，如果用它自动搜索到包含的每下个

，然后再自动为这些

添加一个样式“xxx”，不就行了吗？

在JQuery的说明文档中找到如下的两个函数：Selectors/has和Attributes/addClass，具体用法大家都去看下吧，很容易懂的。

我在站内加载的JavaScript中增加如下一句：

$(document).ready(function() { $("#content p:has(img)").addClass("imgbg"); });

上面的语句是通过JQuery自动查找在#content这个div中包含有标签的每一个

，然后为它们添加上样式.imgbg。当然你可以去掉前面的#content，这样就会对全局的

进行检查，但我不知道这样会不会很浪费呢。

然后在CSS文件（style.css）中添加对imgbg样式的设置：

.imgbg { background-color: #F0F0F0; color: #555; border: 1px solid #CECFD0; margin-bottom: 10px; padding-bottom: 6px; padding-top: 10px; text-align: center; }

大功告成！

浅说WordPress自带分页的CSS样式设计

Jinwen — Sat, 07 Mar 2009 21:52:29 +0000

熟悉WordPress的朋友会知道，WordPress是自带分页导航功能的，就是大家都熟悉的“上一页”，“下一页”。其实使用其自带的分页功能也是不错的选择，如果你暂时不想使用如WP-PageNavi这类罗列分页数字的插件。但如果只是简单显示“上一页”及“下一页”的话又过于简单，恰好有朋友问到现在本站的分页样式如何实现，所以我也写一下作为回复。

如上截图，我在传统的“上一页”和“下一页”之间还加上了“返回主页”（home）及“跳至页首”(top)的两个按钮。因为我相信读者阅读至此，这两个按钮还是很方便他们的。

现在先说在index.php内插入的php代码：

HOME | Top

上面代码能用，直接复制插入你的index.php文件内则可，一般位置是页面的底部，也就是footer的对上。

然后其CSS样式代码如下：

.nav-previous a {
float: left;
background: transparent url(imgs/allbgs.png) no-repeat 0px -167px;
padding-left: 14px;
}

.nav-previous a:hover {
float: left;
background: transparent url(imgs/allbgs.png) no-repeat -79px -166px;
padding-left: 14px;
}

.nav-next a{
float: right;
background: transparent url(imgs/allbgs.png) no-repeat 74px -146px;
padding-right: 14px;
}

.nav-next a:hover{
float: right;
background: transparent url(imgs/allbgs.png) no-repeat 74px -184px;
padding-right: 14px;
}

.nav-home {
left: 194px;
position: relative;
top: 18px;
width: 120px;
}

a.top {
background: transparent url(imgs/allbgs.png) no-repeat -138px -197px;
padding-right: 14px;
}

a.top:hover {
background: transparent url(imgs/allbgs.png) no-repeat -56px -196px;
padding-right: 14px;
}

其中红字部分就是用来控制居中显示“home”和“top”的代码，建议增加width的属性，否则最右侧（上一页）的按钮会被遮挡，能显示而不能点击；另外在上面的代码中，我是为各个链接及其激活状态下都设置了背景图片，在你的模板中需要根据实际情况改一下各图片的路径；最后要说的是上述代码还可以整合一下；不过我这样写会比较清楚，刚开始学习CSS的朋友能更好理解。

实战CSS Sprites超详细视频教程

Jinwen — Wed, 18 Feb 2009 21:14:18 +0000

CSS Sprites是网页设计的一个重要技巧，它把网页中一些常用的背景图片整合到一张图片文件中，再利用CSS的“background-position”进行背景定位。利用CSS Sprites的设计网页能很好地减少了网页的https请求，我在WordPress中YSlow测试的A级攻略这篇文章中曾经提过。

可是自己一直没时间写一个简单的教程说说CSS Sprites的实现。最近却发现Exactly How to Use CSS Sprites这篇文章，它说的正是利用CSS Sprites方法进行导航栏的设计，而且说得非常的详细！文章以苹果网站的导航栏为实例，一步一步在视频中解释具体的设计过程。而视频时间长达30分钟！

教程中的实例与上面的苹果原生导航栏样式稍稍不同，具体可以点下面链接查看Demo：

{ CSS Sprites Demo }

教程中所有文件的下载请点下面链接：

{ Download CSS Sprites Files }

查看视频教程如下（英文解说，作者非常耐性，30分钟啊！）

网页导航栏背景图片的一个处理技巧

Jinwen — Mon, 16 Feb 2009 17:04:49 +0000

本篇继续再说说在网页中导航栏背景图片的一个处理技巧。我们能经常看到一些网站的导航栏中，每个链接都有漂亮的背景图片，如使用一些很web 2.0的设计图片。背景图片的运用会让网站的导航栏更为醒目和吸引。但同时你是否也会想到另外一个问题：就是我们并不能保证导航栏中每个链接的文字长度都是一样。譬如，象“about”和“guestbook”这两个常用的链接长度就很不一样了，那我们是不是需要为每一个长度的链接都设定一张背景图片以适应它们间不一样的长度呢？

其实是不需要的。在CSS Navigation Bar With Only 1 Image这篇文章中，作者介绍了一种只使用一张背景图片的设计方法，作个例子如下图示：

上图中“about”和“guestbook”两个按钮的长度不同，假设“guestbook”按钮为最长，我们只需要准备一张与其长度相同的背景图则可。

我们设计导航栏的链接代码如下，一般是在header.php文件中：

About

然后我们对这个链接样式设定背景图片的运用，CSS的样式代码如下：

ul.image li a {
background: url(bg.png) no-repeat top right;
}

ul.image li a span {
background: url(bg.png) no-repeat top left;
}

大家看了上面的两段代码后应该能看出了吧，需要注意的地方我用红色字体标记出了。其实我们是利用在链接中的一个内容为空的标记来定义背景的左侧部分，让背景按上-左（top left）定位；而对于链接再定义一个背景，用的还是同一样背景图片（bg.png），但注意，我们把它按照上-右（top right）定位，这样来定义背景的右侧部分。

还是不太明白？再来一张图：

其中箭头为各自设置背景图片的部分显示。其实就是为一个链接设置两次的背景，第一次取其左侧，第二次取其右侧。

另外上面的代码比较简略，如需详细参照，还是请看介绍原文中的代码部分。

WordPress 2.7 嵌套留言的设计样式补充

Jinwen — Sun, 18 Jan 2009 20:10:23 +0000

WordPress 2.7 已经发布好一段时间了，而我也只是最这两天更新日志主题时候才开始认真看下其新功能的使用。主要还是在留言嵌套回复的样式设计上，在这里我补充一下相关的样式代码，当作记录。

留言嵌套回复的使用在WordPress的官方文档有详细的说明，可能参见这里还有这里；同官方一样是英文详细介绍的看这里；如果想看下中文的介绍可以参考这里。上面的几个链接应该在各位更改模板时候起到一定的帮助。

当更改完成后就需要对留言的样式进行修改，那么应该对那些命名的CSS代码进行修改呢？如下我把可能在修改中用到的样式代码贴出，也是作为参考：

ul.commentlist li div.reply { font-size:11px; color:#000000;background:#000000 none repeat scroll 0 0;border:1px solid #666666;text-align:center;width:90px;font-family:helvetica,arial,sans-serif;font-size:9px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:bold;line-height:1; padding:5px 10px;}
ul.commentlist li div.reply a { font-weight:bold; }
ul.commentlist li ul.children li.depth-2 { margin:0.45em 0.45em 0 1.5em;background:#292E32 none repeat scroll 0 0; }
ul.commentlist li ul.children li.depth-3 { margin:0.45em 0.45em 0 2em;}
ul.commentlist li ul.children li.depth-4 { margin:0 .45em 0 2.5em;background:#292E32 none repeat scroll 0 0;}
ul.commentlist li ul.children li.depth-5 {}
ul.commentlist li div.comment-author { padding:0 170px 0 0; }
ul.commentlist li ul.children li.bypostauthor {}
ul.commentlist li ul.children li.comment-author-admin {background:#777777 none repeat scroll 0 0;}
ul.commentlist li.comment-author-admin {background:#777777 none repeat scroll 0 0;}
ul.commentlist li.pingback {background:#777777 none repeat scroll 0 0;}
ul.commentlist li div.vcard img.photo {}
ul.commentlist li div.vcard img.avatar-32 {}
ul.commentlist li div.vcard img.avatar { border:2px solid #000000; float:left; top:5px; }

其中如下两句可能大家能常用到，就是对网站主人的特定样式定义：

ul.commentlist li ul.children li.comment-author-admin {background:#777777 none repeat scroll 0 0;}
ul.commentlist li.comment-author-admin {background:#777777 none repeat scroll 0 0;}

我不知道对作者的定义是否根据模板的不同而不同，因为上面的两句我在试验后并不生效，结果改成下面则可：

.commentlist li.comment.bypostauthor {border-top:1px solid #FFCC33;}

希望上面的代码和文章链接对大家有用。;)

现用主题通过CSS3和XHTML1.1.的认证

Jinwen — Fri, 28 Nov 2008 11:58:57 +0000

一直都很想把自己做的主题能通过CSS和XHTML的认证，觉得这个东西虽然不是必要的，但也是对自己做的主题的一个检验。再加上现在的主题给弄得比较简单，所以昨晚修改了多个（依然多个）地方后，现在终于能在页脚上打上这两个认证VALID的链接了！

修改主题中也好像是得到一些启示，就想在这里写出来，或者有人日后也会碰到类似的问题。

通过XHTML认证的问题：

1. 我是先看了《xhtml 无法通过W3c认证的7个常见原因》这篇文章，写得很好，里面有基本会出现的问题，建议去看。

2. 但我的主题在XHTML的认证中却有着其它的问题，首先一个是因为我在首页显示的是摘要，而摘要的长短却和认证的通过非常有关系。原因是我的摘要长短是由中文工具箱这个WordPress插件决定的，而对于一些摘要字数过多（大于该插件的指定数）的段落，会提示缺少

这个标记！

我看了其它一些通过认证的blog，基本上都是通过more标签截断首页显示的文章，可能这种办法会比较容易通过。而对于自己的问题，我的解决的办法只能折衷，因为并不想在首页全文输出。我手动在index.php中加入缺失的

标签好了。这样问题是解决了，但必需保证日后的摘要字数均大于插件设定的字数，这样才能保证每个导航页面也能通过认证，所以干脆把插件的设定字数改少。

后补，在这里非常感谢xiaorsz在留言中的回复提醒！在很好的解决了上面的问题：在Shawn的blog上提及过的《WordPress 最简单的首页文章截断输出方式》这一篇文章中，只要我们把：

改为：

post_content)), 0, 120,"......"); ?>

问题解决！代码中的数字“120”为摘要输出的字数，理论学习请浏览该篇文章，厉害

3. 另外个人感觉如果主题的文件采用无BOM的UTF8编码，出现的问题会少很多。

4. 还有会出现的问题是在侧栏显示的列表，因为很多插件在调用时候已经默认了

的加入，所以如果我们在插入代码前还手动加上这些标签，也会提示出错的。

5. 可能还有出现是站内的一些外部链接，如果在新窗口打开，也就是添加“_blank”属性的，或者也不能通过。这个问题我没有遇到，尽管我的链接会是从新窗口中打开，但可能由于我用的是JQuery的修改（方法这里），所以并没有报错吧。

通过CSS3认证的问题：

1. 首先是需要去掉样式中所有对IE的hack－那些* html的样式代码。觉得这个很是为难，因为那IE6真的很可恶，去掉这些hack的代码后，样式的变化很大。这个问题的解决办法只能是重新设计主题有问题部分的样式了，能简单就简单，最后都不能达到预期要求只能更改设计了。经过痛苦修改后，现在的主题已经很好地在IE6，IE7和FF下显示一致了。

2. 另外针对WordPress的留言样式还有一个要提及的，就是一般我们会通过“.alt”，或者“.authorcomment”来区分留言楼层及作者样式（曾经的一篇介绍文章）。但我在这里发现了问题，因为对于没有添加“.alt”或者“.authorcomment”样式的留言楼层，也就是既不是单数楼层又不是作者楼层的，会在CSS的认证中出现错误！解决的办法只好增加代码为缺少样式的楼层重新添加样式了。

以上基本就是我昨晚遇到的问题了，我随便写写，不知道大家有没有碰到类似的。如果你有其它的解决建议，希望能给我留言，因为觉得自己的解决办法总不是太聪明。

WordPress中你的style样式文件有多大

Jinwen — Thu, 24 Jul 2008 00:23:24 +0000

一直在对目前的WordPress主题Js O2进行修改，在完成对comments模块的样式定制后，现在的主题样式基本成型了。但却发现主题的样式文件style.css的大小依然在16k，这个让我很是着烦。究竟样式文件的大小有多大才合适呢？

原本对本主题的设计初衷是简洁，所以我做的样式其实并不花巧，但16k的样式表我觉得并不合格。举些例子：default模板的样式表大小是9.0k，自己做过的简洁主题 Js Paper 2 样式大小是10k，而著名的K2模板样式大小却是22k。虽然没有人规定过样式的大小应该多大才合适，但考虑到其大小将直接影响到网站访问速度的话，自己觉得12k的话会比较平衡。不知道各位的意见如何？你们使用主题的样式表大小又是多少呢？

当然，我们是可以利用 Clean CSS 对style.css进行压缩，但设计源头才是控制样式大小的关键，自己能想到的有如下几点：

各元素样式的命名尽量简洁，能方便自己理解则可。如对侧栏的元素样式名字可取为sb，而不是全名sidebar。
样式代码的书写简化。如颜色代码 "#ffffff" 或 "#ffffcc" 可简写成#fff和#ffc；边距代码 "1em 0 0 0" 则可写成 "1em 0 0"；粗体控制代码 "bold" 写成 "700" 等。有兴趣的可再看看CSS的相关书箱。
设计尽量简单，复杂的样式设计也意味着代码的增多，万一不幸还需要对烦人的IE 6进行hack，那想缩减代码也难。所以建议遇到一些样式需要大量hack的，还不如转变设计思路，换个简单好实现的样式好了。
一些模板的元素样式前都带div的字样，如div#sidebar，div.navi等，我们其实可以把div去掉，只要在浏览器的效果显示一样就可。虽然这个“div”的书写很规范，但为了省些文件大小，能省就省吧。
尽量采用已经定义过的设计样式。譬如，如果已经设计好了文章间的分隔线是红色的，那么在站内其它需要用到分隔线的地方就尽量用回那红色的分隔线，而不是再设计一条蓝色的。当然这一点需要根据设计而定。
如果上面的5点还是不能有效减少你的样式文件，建议参考 How To: Optimize Your CSS Even More 这一篇文章，它介绍了如何利用gzip功能把样式文件进行压缩。其效果很明显，如我那16k的样式经过压缩后就变成4k，厉害吧。

上面几点是我目前能想到的，如果大家有什么更好的提意，说出来让我知道一下，一齐讨论讨论