CSS3 Please!

CSS3 Please!是我师傅推荐给我的，是一个CSS3规则生成器。它允许你在线调正CSS属性，同时右侧的一个大大的CSS3,please圆角框内即展示了当前你所处的样式状态，即时预览，非常方便。接着，你就可以拷贝样式到自己的文件里了。

CSS3 Selectors Test

这是一个选择器的测试，它能自动运行一堆CSS选择器进行测试，以检查你的浏览器是否兼容这些样式。它将以绿色表示兼容的样式。你能点击查看每个CSS选择器的检测结果，它将以一个简单的样例来呈现。

CSS3 Transforms

你能在CSS3 Transforms里通过左侧的按钮来设置一堆不同的属性，比如位置，旋转，渐变程度等等。设置好之后就能迅速产生相应的代码。

CSS3 Gradient Generator

一款在线生成CSS渐变的工具。无论设计师还是开发者都能通过这个工具来生产相对CSS渐变代码。

CSS3 Button Maker

这个工具提供了很多按钮以及颜色选择器来帮你制作CSS3按钮。生成之后你能获取相应的CSS代码来用在自己的网站上。

那我们该怎样选择适合自己的框架呢？

首先，你要确保你所要用的框架已经建立了并有了能准确描述细节方面的文档。这一步对于你下一步的实施以及使用你准备好的框架，都是至关重要的。然后，你就应该分析你所选择的框架能够解决怎样的问题。不过，当你碰上几个你自认为是最适合这个项目的框架的时候，你应该明智的对它们进行筛选并仔细衡量是否真正符合你的需求。

同样，你可以大胆的去请教其他开发人员或是同事，哪个框架更加合适，为什么选择这个框架。这样可以帮助你在其他有经验者的基础上获取更多有价值的见解。另外一点，要提的就是，你在这次框架选择的过程中扮演怎样的角色.是主要人物？或只是一个乐于帮忙的普通成员而已？它是否能给你带来价值？每个问题都会帮助你决定是否使用所选的框架。

下面让我们看看同时适合开发人员和设计人员的8个最好的框架

Blueprint CSS

Blueprint CSS 框架使用了栅格化系统来预先构建了字体样式并包含多款插件，内建表单样式等等。同时，你还会发现Blueprint具有良好的文档，Wiki,以及活跃的社区组，以及一些使用Blutprint框架的网站例子。

Elements CSS Framework

总体上来说，Elements 框架使编写CSS代码变得更加简单而又高效。它是能使你的文件安排的有条理 收集当前类这个功能，将使你的开发过程变得更加友好，而且它能给外链自动增加各种icon图标，这样用户就能快速找到并定位到它们。

Content with Style

Content with Style也是一款能帮助你通过一些不可思议的设计和排版元素来设计并构造你的网站的CSS框架。它有6种不同的布局供你选择，包括垂直导航，两个内容栏，两栏式的水平导航及一个内容栏。总之，Content with Style是一种高效的方式来排序你网站的内容并且能顾及到头部、主题部分、及子部分。

Emastic

一款轻量级的CSS框架，它使用了px,em,或是%为单位来标志页面的宽度，而且它同样是基于弹性布局的。Emastic为你的字体排版预先定义了多种样式。主要一点，它的栅格化是由5到75em大小的区块组成。默认的尺寸大小也能随时改变，而且框架的设计选项也是基于栅格设计的。

960 Grid System

960 Grid System是一款非常强大的CSS框架，它能帮助我们迅速开发网站的原型。它是基于12-16栏布局的并且布局模板同样支持Illustrator, Photoshop, Expression Design, Fireworks 等工具。而且，你能用纸笔构造出最适合你自己的一款模板。

Yui Grids

基本的Yui Grids CSS 提供了四种预先定义的页面宽度，六种模板，而且这些都可以再细分成两栏、三栏或者四栏。仅4kb的文件却整合了超过1000中的页面布局样式。支持流式宽度，简单的用户定制化，灵活的模板栏等多种特性。

YAML

YAML（Yet Another Multicolumn Layout)另一款适合创建新式和灵活布局的Xhtml/CSS框架。使用它能编写通用性极强的结构，而且用户的可访问性也很强。YAML专注于Web标准及可访问性，包含了众多扩展的轻量级框架核心，完整的多语言文档，强健灵活的布局思想。

SenCSs

SenCSs(Sensible Standards CSS baseline，发音“sense”).它为你CSS重复的部分提供了合理的样式，这样你就能更加关注于自己网站的样式。SenCSs不像其他CSS框架那样，它不包含各种杂乱的布局样式或是预定义的栅格系统，那SenCSs能刚什么呢？baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms 等等都是SenCSs所能办到的。

页面的字体排版其实是比较棘手的一件事情，本人刚开始在设计页面的时候，对于字体属性的选择一直定不下来，不过在经过了几次设计之后，也稍微做了些总结，现分析如下：

这是我对于比较正规的页面考虑采用的样式

font: 12px/1.5 Tahoma, Times New Roman,Helvetica,sans-serif;

1. 字体大小采用px为单位, 而不采用em. 因为em的可用性提升其实是很有限的，加上现在主流浏览器都支持“全页面缩放（Full Page Zoom）”功能了，所以基本可以不用考虑用em来实现了。
2. 行高采用1.5, 也就是18px. 我觉得这是比较符合大家视觉的，相对于12px字体，这个行高看起来非常舒服。
3. 字体样式默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。Tahoma是Matthew Carter为微软公司设计的一款字体，从Mac OS X 10.5开始，默认也捆绑了这款字体。但在Mac OS X 10.4及其之前的系统中，没有Tahoma字体。
4. 而我将Times New Roman排在第二位，其实这款字体也是非常的耐看的，而且我觉得大家应该可以留意到，在我们用office word开始，这款字体就已经成为默认的英文字体了，可见其经典程度。所以我将其用来作为自己博客的logo字体。还有一款要推荐的字体就是看起来比Times New Roman更经典的系统默认字体,那就是Helvetica,这是一款已经超过50年历史的字体，在设计界的地位似乎无人能敌,大家可以参考这篇文章。已经其实我非常想将Helvetica放在首位的，不过，考虑到非Mac系统的Helvetica字体都是rip版，以及Windows的市场占有率，因此只能委屈Helvetica, 放在第三位了。
   放在最后的sans-serif是针对强悍的Linux DIY族。Linux默认只有kernel, 字体完全由用户自定义，针对这部分用户，sans-serif可能能派上用场。
5. 最后，无论在XP还是Vista、Win7下，不指定网页的中文字体时，默认就是宋体或是微软雅黑。因此font-family属性里的’宋体’是多余的，可以省去。

一个读者提出了他在网络上搜寻到的关于这一点点的研究。在这上面呈现出了一些很有趣的事情，但在这篇文章里，1-4等级几乎是初学者而6级是“超级巨星”。那剩下的都在第5等级的CSS开发世界。

我认为如果我们都把我们的思想聚集在一起，就能提出一个更好的系统。我的一个想法就是如果你甚至连CSS不知道是什么，你就不需要一个评估等级，因此我们不必要仅仅为它而用整个等级。我们能指定第一级别给初学者而指定第五等级给高手。现在我们仅仅需要准确的分解那些组成这些知识等级的东西并试着去分解剩下的三个使之成为有意义的技巧。

仅此开始我们的粗略草案。我将会采用任何人在这方面的评测接着开发它使之成为更加充实的评估系统。我可能将它作为一个民意检测，这可能很搞笑~~

等级1

• 我确实曾听说过CSS，它曾被用在网站开发。
• 我以前曾下载使用过CSS模板，我甚至可以指出怎样将我的LOGO放上去。
• 我已经浏览过CSS文档并做了一些例如更改颜色之类的小改动。

等级2

• 我知道CSS表示层叠样式表
• 它曾被网站开发者为了保持内容与样式的分离而用来设计网站页面的
• 我已经对一个CSS模板进行了广泛的修改
• 我以前曾经使用WYSIWYG编辑器去创建CSS网站页面

等级3

• 我曾设计从零开始并仅仅使用CSS来作为样式表来设计一个适度复杂的网站
• 我对CSS的结构有很好的理解力，如CSS盒模型，和CSS布置
• 我对不同浏览器对CSS有不同呈现方式的情况有一个基本的理解并且那将需要被说明并作测试
• 我有一个日益增长的CSS收集源便于吸取利用

等级4

• 我已经设计并涉及到大量基于CSS的网站
• 我能够很舒适的编写CSS并感觉我能应付任何设计思想
• 我对兼容浏览的CSS有很好的理解力。我知道并已经尝试CSS Hacks而且知道使用它们的优缺点
• 我能快速而有效的检验CSS的错误
• 我大多数都手写CSS并且为了发挥好灵感、调试或是参考我收集了大量工具和CSS源

等级5

• 我以我自己的一点点开始构建CSS框架
• 我对于所有的CSS知识点已经有了一个全集
• 我在周末的半夜醒来并跳到我的电脑前来编辑一个令人可畏的CSS代码例子我的脑子才刚刚构思出来并把它传到我的博客上……哪个是关于CSS的呢？（在这点上开玩笑了，我实在不确定怎么描述这第五个等级）

而你现在有何感想呢？我们应该改变什么？我们能把这个变成像一个“小谜语” ？那将会比第五等级更好？还是更差？

这里是官方网站：http://www.transcendingcss.com/

今天在Apress的网站上又偶然发现这本新书《Pro CSS and HTML Design Patterns》，出于好奇，下载了源代码过来看看。因为书名貌似很有来头。真是不看不知道，一看吓一跳啊，作者相当有创意了，从示例代码来看，版式设计精美，非常漂亮，涉及的知识点也很广，深度也绝不亚于《css mastery》！特别是第十二章的最后一个例子，原来css也能用的如此出神入化!

看这个数学公式，没有用任何图片，纯css实现，牛的不行……

看完这些示例，Pro CSS and HTML Design Patterns》这本书无疑可以成为本年度最值得期待的CSS好书啊！期待0day电子版的到来。可以告诉大家一个好消息，此书中文版将由人民邮电出版社图灵公司引进发行中译本，希望他们能高效高质量地及时出版……