流行的CSS框架Blueprint简介

Blueprint是当前互联网上最流行的CSS框架，它的缩写是BP。Blueprint框架是为了节约开发时间而设计的，我们可以在Blueprint框架的基础上构建我们的CSS。对于每个页面都有独特设计的网站，Blueprint框架最为适用。

通过学习Blueprint框架源代码包tests目录下网页的源代码，我们可以快速掌握Blueprint的特性。和一般意义上的框架不同，Blueprint不会告诉我们应该如何组织或编写CSS，它更像一个工具箱，我们可以根据需要选用。

Blueprint框架有三个组成部分：首先是重置CSS，移除了不同Web浏览器设置的CSS默认规则；二是排版规则，提供良好的默认排版效果和颜色；三是栅格，提供了用于创建栅格布局的CSS类。

除此之外，Blueprint框架还提供了两个脚本Compressor和Validator。Compressor脚本用于压缩和定制Blueprint源文件。Validator脚本用于校验Blueprint核心文件。这两个脚本都是用Ruby编写的。

具体的用法如下(请按照屏幕提示操作)：

$ sudo aptitude install ruby rubygems
$ sudo gem install bundler
$ cd ~/src/blueprint/lib
$ ruby validate.rb
$ ruby compress.rb

使用Blueprint框架的第一步，是在网页中包含screen.css、print.css和ie.css这3个文件。screen.css提供了显示器、投影机显示所需的CSS，print.css提供了打印所需的CSS，ie.css提供了针对IE浏览器的补丁。

具体的代码如下：

注意，不要修改Blueprint框架的源代码，当我们需要改变HTML元素的CSS时，我们应该在自己的CSS文件中编写或修改。这样，当Blueprint框架有新版本推出时，我们就可以无痛升级了。

下面简要介绍一下Blueprint框架的排版规则。Blueprint提供下面这些类，用于定制排版效果：

.smaller：让元素文本显示得更小
.larger：让元素文本显示得更大
.hide：隐藏元素
.quiet：柔化元素文本的颜色
.loud：让元素文本显示为黑色
.highlight：把文本背景颜色设置为黄色
.added：把文本背景颜色设置为绿色
.removed：把文本背景颜色设置为红色
.first：移除元素左侧的margin和padding
.last：移除元素右侧的margin和padding
.top：移除元素顶部的margin和padding
.bottom：移除元素底部的margin和padding

我们还可以使用下面这些类来定制表单的显示效果：