css Blueprint有什么用

這篇文章將為大家詳細(xì)講解有關(guān)css Blueprint有什么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

Blueprint是一個(gè)css框架，它將布局（layout）、排版（typography）、組件 （widget）、重置 （reset）、打印 （print） 等分放到不同的CSS文件中。

Blueprint （CSS框架）

Blueprint是由于 HTML是一種標(biāo)準(zhǔn)，并且所描述的是結(jié)構(gòu)而非樣式，因此 Blueprint 是完全作為 CSS 實(shí)現(xiàn)的框架。

在設(shè)計(jì)網(wǎng)頁時(shí)要以 Blueprint 為指導(dǎo)，然后再設(shè)計(jì)或生成 HTML，以便將 Blueprint CSS 樣式應(yīng)用于 HTML 元素。實(shí)際上，由于 Blueprint 提供了強(qiáng)大的 CSS，因此可以在 HTML中設(shè)計(jì)網(wǎng)頁，而不必使用圖像設(shè)計(jì)程序來模擬最終頁面，比如說 photoshop。從一定意義上說，Blueprint 提供了真正的所見即所得的（WYSIWYG）網(wǎng)頁設(shè)計(jì)，因?yàn)樵蛯⑹褂门c最終站點(diǎn)相同的代碼。

此外，由于 Blueprint 的主要作用是模擬打印頁的外觀，因此使用 Blueprint 進(jìn)行交互式的設(shè)計(jì)的感覺更像是在使用 QuarkXPress 或 AdobeInDesign。Blueprint 樣式基于像素和一個(gè) 18 像素的基線網(wǎng)格。借助設(shè)計(jì)天賦和努力，可以創(chuàng)建具有專業(yè)外觀的頁面。

樣式例子

Blueprint 的默認(rèn)網(wǎng)格是 950 像素寬，分為 24 個(gè)由 10 像素分隔線隔開的 30 像素寬的列：[(24 列 * 30 像素/列) + (23 分隔線 * 10 像素/分隔線) = 950 像素]。如果偏好或者需要更寬或更窄的網(wǎng)格或不同的列寬，Blueprint 提供了一個(gè) Ruby 工具用于將 Blueprint 重新生成到需要的規(guī)范中。Ruby 工具還創(chuàng)建了一個(gè)網(wǎng)格圖像，可以在 Photoshop中引用，并且壓縮了最終的CSS以減小文件大小，從而縮短了傳輸時(shí)間和帶寬。

通常，不應(yīng)該編輯 Blueprint CSS 文件。而是應(yīng)該在一個(gè)單獨(dú)的文件定義自己的樣式，并根據(jù)需要覆蓋 Blueprint 代碼。這是最后一個(gè)文件 css/custom.css 的作用，這個(gè)文件是作為代碼的一部分創(chuàng)建和維護(hù)的。

關(guān)于“css Blueprint有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。