初识“960”css框架

是时候使用CSS框架了。尽管时光飞逝，我这对于CSS兼容性的恐惧依然没有很好的应对方法。对于我这种偶尔写写代码的人来说，通过学习一个相对规范的CSS框架，也有助于我更好的认识css的复位、思考模式、兼容性技巧。

通过初步了解（2-3个小时的时间），归纳出了三个常见的CSS框架：yuml、blueprint、960。yahoo的YUI看上去比较恐怖，于是算了。

yuml是德国货，看上去非常全面，从固定布局到可变布局通吃，相对来说blueprint和960就小得多，而且是固定布局。这两个框架都比较活跃，而且几乎是同时出现，但是blueprint是950宽度的设计，个人比较不习惯，于是偏向于选择960框架。960基本满足了我现阶段的需求：简单，而且仅面向布局设计，设计思路比较容易搞清楚，英文注释比较浅显，复位样式和兼容性设计都不差。于是将学习心得做一个笔记。

【文件夹】

下载回来的960框架压缩包，包含以下目录：

app_plugins：应用程序插件。960针对fireworks和photoshop制作了动作插件，运行这个定制的动作，你就可以马上得到一个设计模板，立刻开始工作。（对于中国用户来说，fireworks完全可以忘记了，自从并入ADOBE那天起，他的命运就被定格在了“被放弃”上。）

code：CSS框架的代码部分。这个目录是960框架的核心。

licenses：作者自己也不知道许可协议实施是啥玩意，这种法律文书对于他来说没什么意义。于是他把两个开发性的许可协议都放在了自己的作品中，目的就是：你随便怎么用。

sketch_sheets：手绘草稿纸。这个目录下有一个PDF文件，你可以把他打印出来，这样可以方便你用笔构思你的设计布局时用。

templates：针对12种常见的设计和应用软件制作的格子模板。作者想得挺周到。用这些模板不仅可以设计网页布局，其实对其他设计也可以有辅助作用，从平面设计的角度看，栅格化设计的道理其实都是一样的。

README.txt：说明文件，后面会提到。

【code文件夹成份详解】

code目录下包含的文件众多，但是并非所有文件都要用上。

通过观察会注意到，有一半的文件名会加上“rtl_”前缀。这是因为960设计方法为了兼顾全面，分为了左浮动和右浮动两种。左浮动的是默认设计方式，是没有前缀的；而“rtl_”前缀代表是右浮动。按照官方说明，右浮动是为那些从右往左读的语言准备的。

.html文件是代码的演示，只作为参考，并不是核心。IMG目录下的图片也是为了演示用的，实际使用中不需要。

为了减少传输体积，960的默认CSS文件是经过压缩的。CSS目录中有个uncompressed目录，在这个目录中，CSS是没有经过压缩，方便阅读的模式。两者文件名相同，其执行结果也是等价的。可以选择性使用或者混用。

960框架刚开始的时候，只有12分隔和16分隔两种模式，后来为了加大灵活度，又加入了24分隔。于是就有了两种文件名960.css和960_24_col.css。如果使用12或者16分隔的模式，就使用960.css，如果是24分隔，就使用960_24_col.css。在国内，24分隔相对实用。12、16分隔的间距大，是很欧美的那种简约风格，遇到稍微麻烦点的客户，就很难得到认可。

reset.css是一个复位样式表文件。包含了让所有浏览器统一初始样式的CSS内容，并且包含了清除浮动的属性。text.css是一个文本设定文件。内容对于中文来说不实用，他不是960框架的核心，可以不使用。

【具体使用】

其实看完了才发现，960其实本身没什么玄妙，就是一个稍微严谨的布局思路。使用格子类来直观地编写大小和定位属性。并且用了一对标签来消除左边或者右边的外边距。使用了两组标签来做格式化的内填充，还用了另外两组标签来进行相对定位。几乎没什么可以说的，如果你能读懂CSS，那么不需要说；如果你读不懂CSS，那么说了也白说。

英语从来就不及格的我翻译了960代码中的注释，看完应该就全明白了，如果有理解错误欢迎留言指出。文件压缩包解压密码为本BLOG的域名（不含http://）

960css框架中文注释版