SiteComment

应对信息泛滥

yaoeryi — Thu, 11 Mar 2010 12:26:31 +0000

在写这篇文章的时候我在想，谁会对这个题目感兴趣呢？会有人关心这方面的问题吗？是否每个人都像我这样“贪婪”地去获取迎面扑来的信息呢？在思考的过程中我觉得随着互联网社会化时代的到来肯定会有越来越多的人像我这样对潮水般的信息产生焦虑，除非这些人是不思进取吧？信息在当今的社会已经成为了流动着的智慧。所有的问题都是因为信息的不对称而产生的。从“个人的求职”到“企业的经营”再到“政府的管治”无一不是。我尝试在信息时代面前，将所有的人分成三大类：第一类人他们能够高效地处理信息；第二类人知道自己不能高效处理信息（这类人在挣扎着，他们大多数是很有上进心的）；第三类人他们不知道自己不能高效处理信息（这类人根本不知道信息的重要性）；但我相信第二类人是占绝大多数。那么好吧，我希望通过我的这篇文章能够给第二类人带来一些启示，给第三类人一些警惕。

PS：我要说明的是我是属于第二类人至第三类人之间过渡的“非人类”。

好吧，入正题。首先要说的是什么是“信息泛滥”呢？对于这个词，我不打算针对它的含义给出它的具体解释。但我不得不为第三类人举个例子来说明，长江三峡大家知道吧？这个大坝除了有发电的功能外还有一个功能就是防洪。现在用我们的抽想思维想象一下，洪水是信息，大坝是我们处理信息的工具和技巧，而我们只是下游的一只小船的人们。那么相对应的，第一类人他们能够很好的操控大坝当洪水来临之时他们收小坝口起到防洪的作用好让在下游的小船上的我们能有时间来看清，第二类人他们在学习如何操纵大坝，而第三类人压根不知道大坝的存在和洪水的凶猛，所以说第三类人是最可怕的，他们就是那种不知道自己不知道的人，非常值得同情，但除了同情还有什么呢？

好了从以上的举例我们看到了信息突破口的关键是在大坝，在这里要再提一下的是这里的大坝不仅仅是一个工具，它更是一种技巧，我们需要抽象一些。而我们的任务是学习如何操纵大坝，也就是掌握一些技巧。我打算从虚到实一步步展开，从内到外一步步转变来写这些我认为值得注意的技巧。这些技巧分别涉及观念，吸收信息，处理信息和总结信息这四个方面，注意我会用颜色作区分。

一、认清时间价值

在写技巧之前我想说说时间但我不打算说什么珍惜时间之类的话，这对我们一点用处都没有，我只想改变大家对时间的看法，因为只有这样你才会知道信息的威力。看过《奇特的一生》这本书吗？这是一部真人真事的文献性小说。如果你看过的话你一定知道里面有一个名叫柳比歇夫的苏联昆虫学家。没看过也没关系，我只是像介绍一下这位小说的主人公，详细的可以上网下载这本小说来看。柳比歇夫是一位昆虫学家，但不仅仅是这方面的专家，他从一九一六年元旦开始，便实行一种叫“时间统计法”的方法来指导自己的生活。他每天都要核算自己的时间，一天一小结，每月一大结，年终一总结，直到一九七二年他去世的那一天，五十六年如一日，从不间断。柳比歇夫在短促的一生中取得了丰硕的科学成果，发表了七十来部学术著作，内容涉及昆虫学、科学史、农业遗传学、植物保护、进化论、哲学。。。。。。在这我要说的不是我们要成为什么伟人之类的对成功毫无帮助的话，我只是想说的是，从这个例子里你可以看到人的极限和时间的威力，只要我们坚持专注地对一门学科关注上三年，你就能成为这方面的专家，这是科学统计的成果得出来的，并不是瞎说，而且有柳比歇夫这个活生生的例子。很难想象像柳比歇夫的人会整天无所事事，会在等公车的时候发呆，会用一些无关紧要的事情来消磨时间，对于他来说简直就是罪恶。我总觉得知识是不会随着年龄的增长而增长的，除非你花费时间来思考，这就不难理解我们为什么说一些人比他实际年龄大这一说法了，其实是因为人家在思考，而你在发呆罢了。举个极端一点的例子：如果你一出生，我就把你放在一间暗室里，每天除了定时定候给饭你吃之外，你接触不到任何一样东西，18年后，我们很难说你是18岁。这就是区别，这就是有效利用时间的区别，你难到不感到震惊吗？

二、关注潮流

有些人以“潮流是永远都赶不上”这样的理由来说服别人叫人家不要关注潮流。每每听到我都觉得很好笑，因为这就和以“钱是赚不完的”来叫人家不赚钱一样。除了博得对方内心的一番咒骂外不会起到其它什么的效果。对于潮流我个人认为随着年龄的增长自然会发生变化，每个年龄段有每个年龄段的潮流，但你千万别以为不关自己的事，如果你是要这样认为的话，你为什么不去怀疑中国移动为什么会推出针对年轻人的动感地带这一品牌并且取得成功了呢？你为什么不去质疑zara的经营模式和理念呢？对于一些人来说，潮流这一东西根本上不是你上不上的问题，只是你关不关注罢了，赶不上潮流未必不关注潮流。可别以为拍偶像剧的导演会像十几岁的年轻人一样天天守在电脑前看偶像剧。人家只是关注到年轻人这一市场然后顺应潮流趋势罢了，人家可能在家里看《易经》呢！关注潮流吧，这样能使你拥有更多的机会，很多中小企业的经营不善往往由于老板的不关注潮流。关注潮流吧，关注潮流不是叫你跟，只是叫你去了解，毕竟除了潮流方面我们还有很多东西要去了解要去学习。拿出一点点精力去关注一下，父母拿出一点时间来看一两集偶像剧，企业主拿出一点点时间来走市场和年轻员工交流交流，然后家庭会更和谐，企业会更有活力，何乐而不为呢?

三、精雕细啄选择信息源

我们是否每天都听到别人说事情太多了忙不过来。我也经常有这样的感觉，但当我停下来静心思索的时候我会发现，重要的事情也就那么几项，我们可能被一些突如其来的小事打断了而忘记了重要的事情，又或者在动手干之前没写下要做哪几件事。我怀疑后者居多，将这种情况移到信息处理这个问题上，情况也是一样。在我们处理信息的过程中，事先根本就没有做好分类，没有选择我要接收的信息源，这样的接收太被动了。这样你往往会出现信息过载，影响你一整天的心情。这种情况很平常，前几天才有一个朋友向我埋怨在网上逛了很久，但发现没什么东西看，当我问他你需要什么东西时，他回答的很牵强，那我就更不用问他打算用什么作为他的信息源这个问题了。为了防止这种情况的出现你需要做两方面的工作，第一步确定自己需要什么信息；第二步选择好自己接收的信息源。如果你确实想不到的话，去买一份报纸，这是个不错的选择，记住信息在精不在多。

四、经常思考，养成随记的习惯

不善于处理信息的人都有一个特征，就是他们很懒惰，主要表现在思考方面，因为他们认为思考是一件很痛苦的事情。他们往往一有时间就处在发呆的状态，这种人久而久之就会失去主见然后不能独自思考。而善于处理信息的人呢，他们除了睡觉之外每时每刻都在思考问题，无论这些问题是有趣还是无趣。他们思考的最终目的就是加以总结和归纳，然后为已所用。但根据我的经验思考往往是不够的，关键还是要记下来，想到什么就记下来，用笔用手机用什么工具都没问题，关键是要记下来。为什么要这样做呢？因为当我们不是拥有大段时间静下心坐下来而是在走路过程中，在等公交的间隙思考问题的时候往往是没有条理的，这时的我们往往是跳跃式的思考问题，如果你这时候不马上记下来的话，我相信你会很快就忘记，相信各位都有所体会。再说记下来还可以让你腾出更大的空间来思考呢。额外推荐一下rememberthemilk这个网站，因为我们可以将思考的问题全部记录进去，以便集中处理。

五、弄清完整系统的信息在哪里

很多人很喜欢去逛论坛，上推，看博客，看报纸，当你问他在做什么的时候，他往往会告诉你，自己是在学习。如果这时候你继续具体的问他是学什么的时候，如果他的回答是学心理学，学编程之类的话。那么你可以劝他还是别费那么大劲在网上找来找去了，你可以告诉他干脆到新华书店去找本经典的书来系统的学学吧，如果你不是玩玩而是真的想系统地学习一门知识的话。在这我不排除他们已经在网上作了一次筛选或整理出系统的知识来了，如果是这样的话只能证明你的学习能力超强，一门这么系统的知识在你还没入门的情况下能把它整理出来。但遗憾的是情况往往不是这样，再说你能整理得比人家的经典书籍的作者来得系统吗？在这我不是对网上的知识价值表示怀疑，恰恰相反网上的知识的价值是极高的，不是有一句什么“真正的高手来自民间的话”吗？但我们同时也不得不承认网上的信息也是最杂乱无章的。所以我劝各位在还没弄清一门知识的大体框架的时候不要随便上网去东找西找，就像你很难找到一个博客能够系统地介绍C++或一门心理学一样（当然如果这个博客上能提供免费的盗版电子书下载那另当别论）。

六、利用网络高效处理信息

社会化网络是未来互联网的趋势,整天上门户网站的人有必要知道这一点。社会化网络才是最符合互联网精神的一种网络形式，因为它在于分享，在于互动，所有信息都由网民来创造。我们大可以把社会化网站作为我们的信息处理中枢，将所有的信息收集后然后放进去。当然在国内如果你想做到这一点恐怕很难，所以我推荐用国外的社会化网站，Twitter和google reader/Buzz都是个不错的选择，我们不但可以在其里面收集信息而且更重要的是不用担心信息会不翼而飞，不用担心出现饭否这种情况。当然肯定还有其他工具或者其他方法，记住工具是死的，关键是目的，这里我们的目的很明确，就是把信息放在一个地方集中处理掉，就这么简单。

七、写出来并告诉人家

怎样检验你的信息掌握程度呢？其实这很大一方面是看你对信息的总结归纳的能力。有时候我们想到的事情我们没必能够归纳总结地写下来，写下来又未必能够有条理地说出来，说得出来并不意味你能够做得到。关于这一点相信大家都深有体会。在上一次和别人详细探讨一个问题的时候，你还记得当时的情形吗？如果你还不明白我的意思话，你最好问一下那些老师们，他们是最清楚的。老师们的工作很大一部分体现在他们的备课上，因为他们要在课堂讲授，所以他们的讲出来之前，前面要做的功夫主要是思考和总结并将其写下来形成教案。以前我总觉得老师（当然这里是指负责任的真正的老师）为什么这么厉害，绝大多数同学提的问题他都能够回答出来，为什么呢？为什么他们考虑问题总考虑得比我们全面？其实并不是因为他是老师，所以他考虑问题就应该全面，而是因为他不得不全面。你想一下呀，因为他是要在课堂上讲授的，如果不能将问题的来龙去脉弄得一清二楚，他有信心能使一个对这些问题毫不了解的学生在45分钟里面弄懂吗？所以说写出来吧，你会懂得更多的。就像我写这篇文章一样。

八、应用到现实做出来

可能有些人会问了，既然老师们都那么厉害。他们是不是全都有很的高收入呢？不用我回答你都知道答案是否定的。古往今来高收入的那些都是实干家。那也就是说并不是你写得出讲得出就证明你可以做得出来。因为理论往往是很理想主义的，实际情怳是变化万千。前几天就有一位朋友告诉我，他的朋友在上投资课，这没什么好奇怪的，更奇怪的是，教授他们投资的那位教授被人发现买股票赔个精光，这样的例子很多很多，大学教计算机软件设计的,你叫他去企业担任部门总设计师，他们大多是做不好的；教企业管理的，你如果天真地以为给间企业他管理你的企业就会起死回生的话，我只能笑你太傻太天真了；理论和实际往往存在巨大的鸿沟，怎样跨越呢？很简单嘛，将我们的理论应用到实际检验一下不就知道了，但为什么那么多人做不到呢，我怀疑是人的天性在从中作梗，一个字“懒”。

九、总结

好吧作个总结吧，再回顾一下以上的八点：认清时间价值–》关注潮流–》精雕细啄选择信息源–》经常思考，养成随记的习惯–》弄清完整系统的信息在哪里–》利用网络高效处理信息–》写出来并告诉人家–》应用到现实做出来。就这么八点，不过最后我还得再啰嗦一会儿，可能有些朋友会追问我，你能够你能够直接地给个现成的例子我吗？！我其实也考虑将自己作为一个例子写出来，但我发现其实我的方法和所用的工具未必是最好的，甚至未必是对的，再说每个人有每个人不同的情况，我不想误导你，我也误导不起。但以上的八点，思路我想是正确的，我们又何必执着于别人给你的例子呢，记住我的不一定对，就像韩寒所说的，我只是在探索，我们都在探索，这个世界太多未知了，关键是在信息面前我们要有信心，我们要不断地去思考，生活是没有捷径的。

生活永远没有捷径

yaoeryi — Thu, 11 Mar 2010 11:59:26 +0000

AN EDUCATION

第二个CSS实例

yaoeryi — Wed, 10 Mar 2010 03:54:06 +0000

图一

图二

在不改变xhtml代码的情况下，只要在（图一）的基础上修改CSS代码就可以实现（图二）的显示效果。源代码在这里。

CSS第一个实例

yaoeryi — Tue, 09 Mar 2010 16:15:13 +0000

这段时间在学CSS，根据《变幻之美》完成了第一个实例，虽然简单，但基本了解了CSS布局的大体概念，实例里分首页和内容页，如下图所示：

实例源文件在这里，初学CSS的朋友可以下载下来研究。

Secondhand Lions

yaoeryi — Tue, 09 Mar 2010 12:19:48 +0000

影片最后给我淡淡的感动，在douban我给了

老实说我喜欢玩这种游戏

yaoeryi — Sun, 28 Feb 2010 14:09:48 +0000

游戏下载点这里

这个游戏实在太出名了，但我却实在无法用语言来描述这个游戏的精彩之处，这是一个非常经典的桌面小游戏，总共才50多M，但玩起来却是乐趣无穷。比起网游那种打打杀杀来说，“植物大战僵尸”是一个锻炼智慧的休闲游戏。强烈推荐。

还是再推荐一下这个CSS技巧教程资源大全

yaoeryi — Thu, 25 Feb 2010 13:03:49 +0000

真的很全，忍不住再推荐一遍！转自：帕兰映像

我总是对每一个想学CSS的朋友说: “学CSS真的很简单，一个星期就搞定。” 但真的这么简单吗？魔方也很简单，拿到手里就知道怎么玩了，但最高境界却不是几天或几个月就能修成的，甚至根本就不可能达到，永远需要提高，看似痛苦，同时也享受升华的乐趣，CSS也一样，痛并快乐指的就是这些东西吧。

本文里面收集一些有关CSS的技巧、教程、工具和观点等，其中一些你也许早就运用的炉火纯青，也可能有的你听都没听说过。不管是新手还是高手，大家都继续学习吧。

一，Web 标准

要玩游戏，就得先了解规则。要学CSS，就应该先了解一下Web标准。尽管看上去不是必须的(我在学CSS之前，根本不知道也不想知道Web标准是个啥玩意儿)。应该说，你是否学Web标准，跟你是否能学会CSS没有什么关系，但跟你能写出什么样的CSS，以及Xhtml或其它代码，跟你能做出什么质量的网页有很大的关系。

其实我自己对Web标准也不甚了解，尽管我看过不少关于Web标准的文章和书。(我总是这样，对学术性的概念名词永远都似懂非懂的)，所以每次谈到 Web标准，我头里就会有一堆问号:

Web标准真的有利于seo吗？ Web标准的动机难道就是SEO? 出于SEO动机的Web标准是否会失去一些Web标准真正的本质?
如何才算符合Web标准? 仅仅是通过W3C的代码验证，你就觉得自己符合Web标准了?
Web标准是为了提升用户体验，而一个对用户友好的网站其代码应该写得非常简洁实用，而一个使用简洁实用代码的网站是有利于SEO的。这个逻辑似乎合情合理，但在实际运用中却又总有这样那样的冲突…
…

我们应该把Web标准看成一份”道德约束”还是”法律强制”呢?

我个人比较乐意看成前者，努力靠拢就好了，但没必要为了标准而标准，自己为难自己。

你已经花了50%的时间完成了一个项目的90%，如果余下的10%又需要你花50%的时间去弄，是否值得? 尤其是这种情况发生在: 你的90%已可以让用户在各个浏览器下正可常浏览，而那10%仅仅是为了通过W3C代码验证。这时候你或许该考虑下，你千辛万苦的通过W3C验证是为了符合Web标准还是为了满足自己小小的虚荣心?
特喜欢跟别人争论”DIV+CSS”的说法是错误的，应该是”XHTML+CSS”，你有没有做过类似这样的事儿? 还打心里为自己科学家般严谨的态度而感到自豪。但事实上，叫”DIV+CSS”的人，没有哪个傻到整个页面的元素都使用DIV。这就像当你说”吃饭”时，你也不光是吃白花花的大米。

呃，本来只是想随便写点文章引语，闲扯太多了，还是看看下面这些有关Web标准的东西吧，有助于你了解这个东西。

一些有Web标准的文章

验证HTML，CSS及RSS源的14个免费工具

这篇译文里介绍了14个工具可以方便的验证你的CSS以及HTML和RSS源。你别看我上面说了一堆看似反验证的话，其实我也挺在乎这个东西的，我也每次都玩验证，只是当碰到很难解决无关痛痒的东西时，我不会为难自己。我只是想告诉你，别对自己太苛求了，别让自己太累。

二， CSS布局和定位

我不是什么Web前端观察家，我个人发现的两个可能并不正确的网页布局趋势是: 两栏和水平条。

说两栏是趋势似乎有点唬烂，两栏本身就是最基本最常用的布局，但之所以成为更加流行的网页设计趋势得益于Web 2.0的流行，你很少会看到一个Web 2.0网站把自己做成门户般的杂志型布局，大家都力求简洁。当然，在国内，还是有很大一部份个人站长和企业喜欢把自己的网站挤得密密麻麻，Magazine的非常厉害。这恐怕也不能说谁前卫谁落后，好的Magazine布局确实能让人产生一个感觉或错觉: 这个网站很专业，做的很大，很优。我个人是希望简洁两栏真的能成为趋势，每次进入门户型布局的非门户级网站时，就感觉自己掉进了一堆链接的海洋里。

水平条成为趋势则源于宽屏浏览器的普及，它能让你的网页不管在各种宽屏分辨率下显得协调美观。比如帕兰映像的网页主体是960像素固定宽度，我的电脑分辨率是1440*990像素，如果没有水平条，总感觉网页太空，尽管留白也是一种设计技巧，但并不是这样的留白。尽管还有另一种解决方案是自适应宽度，但我个人觉得，对于大多数网站来说，自适应宽度并不是一个好方法，它解决了宽度的问题，却又让网页产生了很大其它破坏视觉的问题。

还是让我们看一些关于CSS布局的技巧吧。

15款网格布局生成器

网格布局的页面能给人简洁明快、层次分明的感觉。之前帕兰映像里面也介绍过一些网格布局相关的文章: 探索极简派设计 /Minimalist Design，32个网格布局的网页设计欣赏和960网格系统等。如果你也想制作一个网格布局，可以看看这些在线生成器。

9个永不过时的CSS 3栏布局技巧

我喜欢3栏布局的网页设计，尽管时下正火的Web2.0似乎很少采用3栏布局。但没关系，我们是非非非主流。但是3栏布局相对来说就比较复杂，有些难以控制，Noupe发表一篇文章，收集了9个号称永不过时的三栏布局设计技巧(9 Timeless 3 Column Layout Techniques)。

五种方法让CSS实现垂直居中

使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。本文里介绍了使对象垂直集中的5种不同方法，以及它们各自的优缺点。

CSS 布局口诀

网络上有朋友把CSS BUG编成了顺口溜了！是否有效不好说，但至少是蛮有趣的。

使用CSS创建三列固定布局结构

讲解如何通过设计一个HTML/CSS的基本结构，来创造一个简单且常用的三列式固定页面布局。

使用CSS完美实现垂直居中的方法

使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题，作为网页设计师或前端开发工程师，这个垂直居中问题也是必须掌握的技巧之一，一些互联网公司面试题中也会出现这类题目。本文分享一个由aka Yuh?发明完美通过CSS实现垂直居中的方法。

渐进增强式布局探讨（上）、（下）

经典得一塌糊涂的表格布局，在渐进增强面前落花流水——表格布局要求书写HTML代码时，首先考虑布局，而不是内容。不啰嗦，直接枪毙。

CSS布局大全

这份列表收集一些比较优秀的CSS布局，这些布局都免费供个人和商业使用。当然，你使用之前还是得看版权说明，也许会发生许可协议变更。 Layout Gala- 这个网站收集了40多个专业的CSS布局，每个布局都通过了CSS和HTML验证，且不需要Hack，兼容各大主流浏览器。

43个PSD转xHTML+CSS网页布局及导航教程

推荐43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程，在国外也可以叫做PSD2XHTML。如果你是以为网页设计师，可能会对将自己的效果图实现成语义化的xHTML页面感到头痛，还有一些CSS初学者对于xHTML+CSS处于懵懂状态，希望大家通过这43 个”DIV+CSS”实例教程学习到语义化xHTML+CSS布局的精髓，即使你已经成为高手，我也相信其中有你值得学习的地方。

CSS Position

这篇文章详细介绍了CSS定位属性Position的各个值的用法，和一些实例说明，以及相关的绝对定位布局和清除浮动列等CSS技巧。

详解css定位与定位应用

定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。

跨浏览器的CSS固定定位{position:fixed}

使用Position:fixed属性可以实现固定元素于窗口某位置，比如帕兰映像的头部工具栏和底部工具栏就是使用这种效果, 但IE6并不支持这个属性，帕兰映像里使用的方法是利用IE的条件注释让IE6下非固定，显示不同样式。如果你想实现高度统一，可以看看这篇文章教你如何实现。

32个网格布局的网页设计欣赏

这些设计里面，有紧凑型的网格布局设计，同样也有使用大量空白间距的网格布局。

三，CSS Sprites(CSS图片合并技术)

最初知道CSS Sprites的时候，大家都还不知道该如何恰当的翻译这个技术名词，有人称其为CSS妖精，CSS小鬼等，听上去是蛮可爱蛮特别的，但会让人纳闷这倒底是个什么东西。最近发现大家开始把这项CSS技术称为图片合并，感谢还是蛮贴切的。

CSS Sprites目前已经成为非常流行的CSS技术应用，你随便到一个经常逛的著名网站看看，会发现大家都在使用这项技术，比如淘宝、谷歌、豆瓣、土豆等等等等。简单的说，CSS Sprites主要就是提高网页载入速度和防止图片加载延迟，这对于大流量的网站来说是非常重要的。

学习CSS Sprites是件很简单的事情，比较麻烦的是合并图片和写CSS时的定位，更麻烦的后期的维护管理。但不管怎样，做为一项有效实用的CSS技术来说，如果你是一个Web前端开发者，你很有必要掌握这项小技术。

CSS Sprites的一些技巧 | 前端观察

本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使用CSS Sprite的时候的一些最佳实践。

CSS 前景图片合并技术 | 芒果

不只背景图片可以合并，前景图片同样可以合并，本文介绍了Google网页里是如何对两个元素进行定位和溢出截断，来实现前景的图片合并。

P.S 其实才学习CSS Sprites的时候，就想着前景图片也一定是可以合并的，可自己却又一下子想不出来什么方法。看过这篇文章后，才发现是如此的简单，不禁为自己的智商挫败了好几秒

CSS Sprites(CSS图像拼合技术)教程、工具集合

非常非常全面的一篇文章，详细介绍了什么是CSS Sprites, 哪些著名网站使用了CSS Sprites，使用更好的使用CSS Sprites等等。

CSS Sprites + 圆角

我知道现在有成千上万个关于用CSS处理圆角的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。

CSS Sprites, 图片切割与优化技术

这篇文章不是告诉你什么是CSS Spries，也不是告诉你如何使用CSS Sprites，而是 —— 为什么要使用CSS Sprites?

四，CSS优化

我个人对CSS优化的看法是: 在语义化的前提下，对代码进行精简。如果是大型网站，则又考虑CSS的结构化和模块化。所以CSS的优化就包含了命名规范、CSS Reset、语义化、结构化和模块化等等。

至于CSS与SEO一说，倒还真不敢苟同。不过，不管它们是否有关联，你都应该尽量去学着写出一份拥有良好语义并尽量简洁高效的CSS样式表。

8款在线CSS优化工具/组织和压缩 CSS

CSS的优化通常包括两方面: 格式化CSS和精简CSS。精简CSS的办法是把具有相同属性的元素合并在一起，但这会降低代码的可读性，使代码的后期维护很麻烦，稍不注意就出错。格式化CSS一般就是多行模式或单行模式的选择。本文里面介绍了8款工具能让你方便的优化和格式化CSS的在线工具。

CSS代码精简工具和技巧

管通常一个CSS文件占用不了什么带宽, 但之于网页设计, 在不影响整个网页构架与功能的情况下, 网页文件越小越好. 因为更小的网页文件有利于缩短页面的载入时间. 更重要的是, 相同的页面排版和结构, 能用最简洁的代码来实现, 也应该是每个网页设计师对自己的一种要求.

17款加速效率的CSS工具

作为一个网站设计/开发人员，你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的CSS工具可以有效地节省你设计网站的时间。

10个CSS简写技巧让你永远受用

CSS简写就是指将多行的CSS属性声明化成一行，又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小，其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。

注重SEO搜索优化的div+css命名规则 | 知更鸟

CSS的命名规则入手会有意想不到的收获，最基础的就是最有效的。下面从前端设计的角度整理的DIV+CSS的命名规则，就很好地考虑到了搜索引擎的喜好，在页面设计的过程中，尽量做你懂，搜索引擎也懂，何乐而不为呢。

W eb UI 设计(网页设计)命名规范

Web UI设计命名规范，也就是网站用户界面设计(俗称网页设计)命名规范。这套规范并非单纯的CSS、html或javascript命名规范，它涉及了很多使用photoshop这类设计工具进行网页设计过程中的命名规范。

目前比较全的CSS重设(reset)方法总结

收集了15套CSS重设实例，您可以在前端开发工作中进行参考和使用，有些是很简化的CSS Reset，有些则是非常复杂非常全面的CSS Reset，至于使用哪套，全看您的爱好或需要。

CSS代码命名惯例语义化的方法

CSS代码的命名惯例一直是大家热门讨论的话题。本文通过分析一个流行三栏布局中的必要元素，来为大家讲解关于使用语义化方法替代结构化方法来命名 CSS类的建议和指导。

模块化 CSS – 更有效地管理CSS | 幸福收藏夹

关于如何模块化CSS来实现更有效管理CSS的一些见解。

编写具有良好结构的CSS文件

这是一篇关于如何编写具有良好结构的CSS文件的帖子。我已经讲过CSS文件的代码可读性，但在讨论之后，一些更具体的要求被提出（主要是关于一些读者在管理具有大量布局元素CSS文件时的困难之处），所以我决定在这些案例中说明我自己的开发流程。

CSS中属性的书写顺序

我个人是觉得讨论CSS属性的书写顺序有点没意义，或者说即使有意义，一定要弄一套书写顺序去框住自己，实在又是一件自己为难自己的事儿。只要保证每一个属性和值都有用，当冲突时，该前的在前，该后的在后，也就好了。

五，CSS、IE和Hacks

想一想，我们花上一大把的时间去研究CSS Hack，研究IE为何如此的叛逆，做项目时可能就因为某个兼容问题给卡死个半天，这些时间如果用来学一门其它技术，可能早已修炼成该技术的专家了，并且是有用的。而精通Hacks并不是件值得骄傲的事情，而是所有开发者的无奈和悲哀。

没关系，我是这么安慰自己的:当年没有CSS的时候，多少站长花了比现在10倍甚至百倍的辛苦来建站和维护，当有CSS后，他们默默的选择过渡，而不是难过的去自杀。那个不是说了嘛，往往都是事情改变人，人改变不了事情，我们能做的，只能是适应每个过程。

10个实用但IE不支持的CSS属性

本文里面，介绍了10个很实但IE却不支持的CSS属性，列出这些属性并不是为了数落IE(数落也没用), 而是你了解了哪些CSS属性是IE不支持的，就更有针对性的去编写CSS和Hack。

修正IE6的bug的10个技巧

我们知道，IE6可能过不了多久就会消失了，但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗？这里是10个使用有效的HTML 和CSS代码来修正IE6主要问题的方法。

IE6 BUG大全

一个系列文章，包含了很多IE6 BUG的详细介绍，比如IE6中奇数宽度的BUG，PNG Alpha透明，像素BUG的实例，IE6文字溢出BUG等等。

目前非常全面的CSS兼容问题资料汇集

CSS兼容问题一直困扰着CSSer，面对各浏览器，往往感觉束手无策，愁眉不展。CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法，在各浏览器厂商解析CSS没有达成一致前，我们只能用这样的方法来完成这样的任务。本文里面收集了非常详细的CSS兼容问题。

IE6方程式

Web 开发人员的使命就是面对不同的浏览器。自 Web 标准运动的诞生起，有个宿命从 Netscape Navigator 4 开始就被延续着，就是那些过时的浏览器拒绝死亡。它们顽强的存在，阻碍了现代标准的发展。而今天，这个宿命降落到了 Internet Explorer 6 身上。

六，你可能不知道的一些CSS技巧

就像本文开头所说的，CSS像魔方一样，有数不清的玩法，即使你是高手，永远都有你不了解的地方。有一些CSS技巧并不常用，一些CSS技巧完全是实验性质的，还有一些完全甚至是代码写错误打误撞搞出来的结果，比如本站之前介绍的CSS 实现的标签云远视效果。

CSS content, counter-increment 和 counter-reset详解

你很可能没有听过上面这些CSS术语？事实上，我在这之前也不了解，但你可能看到过conten:after和content:before这样的 CSS代码，利用这样一些CSS属性可以实现内容的渲染。尽管这些属性存在浏览器兼容性和W3C验证的问题，但了解一下还是蛮有趣的。

使用CSS选择器创建个性化链接样式

zip文档链接前面显示显示一个zip文档图标，PDF则显示PDF图标，以此类推，听上去很酷吧。更酷的是，你只需要使用CSS而不是JS就能实现这项功能。这篇教程告诉你如何通过CSS的属性选择器来制作个性化链接样式。

CSS Sticky Footer: 完美的CSS绝对底部

当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。

没有div没有float没有clear没有hack的超强CSS布局

一个超强的CSS 布局，没有div，没有float, 没有clear, 没有hack，没有和你开玩笑，确实是一个CSS 布局。出自TJKDesign 之手，你可以查看DEMO 演示或阅读该布局设计师的文章说明。

一个关于透明度继承的问题

在前端开发的时候，经常用到板块背景的透明度，但当父层透明时，其中嵌套的子层也会继承其透明性。而这并不是我们想要的，比如，我们只是想要某个块状元素背景透明，而背景层里面的文本子层则非透明。

使用CSS为图片添加更多趣味的5种方法

为你平淡乏味的图片添加更多趣味情调的简单技巧。使用Photoshop为每个图片添加某种样式虽然可行，但会是相当乏味且困难的长久工作。本文要介绍的CSS技巧将帮助你从痛苦中解脱出来！

101个CSS技术高级应用教程(上) (下)

一些比较高阶的CSS技术应用介绍，全学完这些教程，你的CSS水平将提高很多，废话

53种网页设计师必备的高级CSS技巧

都说了必备了，你不看看实在对不住自己千万的Web开发同胞了…

七, CSS 3

CSS2的出现让web顿时丰富起来，特别是web2.0时代CSS成为每个web页面都必不可少的元素。但是随着web技术的发展，CSS2已经不能满足web开发的需求，例如属性选择、ajax出现后与JS的交互等，因此对下一代的CSS需求越来越明显。目前CSS3还处于草稿阶段，但是其某些特征已经让人兴奋不已。

目前主流浏览器firefox、 IE7/8、Webkit等都已经部分地支持CSS3。因此提前了解CSS3是十分必要的。下面提供的20个学习资源中，多数是单篇的文章和访谈记录等，可见这方面的资源还是比较少的，作为一个真正的CSS开发者，走在别人的前面提前了解、运用、研究CSS3也是十分必要的。