Blueprint是當(dāng)前互聯(lián)網(wǎng)上最流行的CSS框架，它的縮寫(xiě)是BP。Blueprint框架是為了節(jié)約開(kāi)發(fā)時(shí)間而設(shè)計(jì)的，用戶可以在Blueprint框架的基礎(chǔ)上構(gòu)建我們的CSS。對(duì)于每個(gè)頁(yè)面都有獨(dú)特設(shè)計(jì)的網(wǎng)站，Blueprint框架最為適用。通過(guò)學(xué)習(xí)Blueprint框架源代碼包tests目錄下網(wǎng)頁(yè)的源代碼，用戶可以快速掌握Blueprint的特性。和一般意義上的框架不同，Blueprint不會(huì)告訴用戶應(yīng)該如何組織或編寫(xiě)CSS，它更像一個(gè)工具箱，我們可以根據(jù)需要選用。

Blueprint框架有三個(gè)組成部分：首先是重置CSS，移除了不同Web瀏覽器設(shè)置的CSS默認(rèn)規(guī)則；二是排版規(guī)則，提供良好的默認(rèn)排版效果和顏色；三是柵格，提供了用于創(chuàng)建柵格布局的CSS類。除此之外，Blueprint框架還提供了兩個(gè)腳本Compressor和Validator。Compressor腳本用于壓縮和定制Blueprint源文件。Validator腳本用于校驗(yàn)Blueprint核心文件。這兩個(gè)腳本都是用Ruby編寫(xiě)的。作為一個(gè) CSS 框架，Blueprint可以讓你用很整潔的代碼來(lái)將頁(yè)面劃分成很復(fù)雜的網(wǎng)格結(jié)構(gòu)。從一定意義上說(shuō)，Blueprint 提供了真正的所見(jiàn)即所得的網(wǎng)頁(yè)設(shè)計(jì)，因?yàn)槟脑蛯⑹褂门c最終站點(diǎn)相同的代碼。

使用Blueprint框架的第一步，是在網(wǎng)頁(yè)中包含screen.css、print.css和ie.css這3個(gè)文件。screen.css提供了顯示器、投影機(jī)顯示所需的CSS，print.css提供了打印所需的CSS，ie.css提供了針對(duì)IE瀏覽器的補(bǔ)丁。注意，不要修改Blueprint框架的源代碼，當(dāng)需要改變HTML元素的CSS時(shí)，用戶應(yīng)該在自己的CSS文件中編寫(xiě)或修改。這樣，當(dāng)Blueprint框架有新版本推出時(shí)，你就可以無(wú)痛升級(jí)了。實(shí)際上，由于 Blueprint 提供了強(qiáng)大的 CSS，因此你可以在 HTML 中設(shè)計(jì)網(wǎng)頁(yè)，而不必使用圖像設(shè)計(jì)程序來(lái)模擬最終頁(yè)面

Blueprint提供下面這些類，用于定制排版效果：讓元素文本顯示得更??；讓元素文本顯示得更大；隱藏元素；柔化元素文本的顏色；讓元素文本顯示為黑色等。通過(guò)Blueprint框架提供的柵格CSS類，用戶以建立任何一種柵格布局的網(wǎng)站。默認(rèn)的柵格有24列，每一列寬30px，列與列之間的margin是10px，總的寬度是950px。默認(rèn)的柵格在1024×768分辨率下顯示效果良好。除了頁(yè)頭和頁(yè)尾外，具有3欄布局，兩個(gè)邊欄的寬度是中間內(nèi)容的1/4。需要注意的是，Blueprint框架要求把所有頁(yè)面內(nèi)容都放在之間，也就是說(shuō)正文內(nèi)就應(yīng)該是這個(gè)div。其次，除寬度為24列的欄(使用.span-24類)外，每一行的最后一欄必須帶有.last類。