css Blueprint是什麼

Blueprint是一個css框架，它將佈局（layout）、排版（typography）、元件 （widget）、重置 （reset）、列印 （print） 等分放到不同的CSS檔案中。

本教學操作環境：windows7系統、Dell G3電腦。

推薦：css影片教學

Blueprint （CSS框架）

Blueprint 是CSS框架，目的是減少你的CSS開發時間了。它給你的CSS了堅實的基礎，具有易於使用的網格的基礎上最高的項目，合理的排版，甚至打印樣式表。

在設計網頁時要以 Blueprint 為指導，然後再設計或產生 HTML，以便將 Blueprint CSS 樣式套用至 HTML 元素。實際上，由於 Blueprint 提供了強大的 CSS，因此可以在 HTML中設計網頁，而不必使用圖像設計程式來模擬最終頁面，例如 photoshop。從某個意義上說，Blueprint 提供了真正的所見即所得的（WYSIWYG）網頁設計，因為原型將使用與最終網站相同的程式碼。

此外，由於 Blueprint 的主要作用是類比列印頁的外觀，因此使用 Blueprint 進行互動式的設計的感覺更像是在使用 QuarkXPress 或 AdobeInDesign。 Blueprint 樣式是基於像素和一個 18 像素的基線網格。借助設計天賦和努力，可以創建具有專業外觀的頁面。

樣式範例

Blueprint 的預設網格是950 像素寬，分成24 個由10 像素分隔線隔開的30 像素寬的列：[( 24 列* 30 像素/列) (23 分隔線* 10 像素/分隔線) = 950 像素]。如果偏好或需要更寬或更窄的網格或不同的列寬，Blueprint 提供了一個 Ruby 工具用於將 Blueprint 重新產生到需要的規格中。 Ruby 工具還創建了一個網格圖像，可以在 Photoshop中引用，並且壓縮了最終的CSS以減小檔案大小，從而縮短了傳輸時間和頻寬。

通常，不應該編輯 Blueprint CSS 檔案。而是應該在一個單獨的檔案定義自己的樣式，並根據需要覆蓋 Blueprint 程式碼。這是最後一個檔案 css/custom.css 的作用，這個檔案是作為程式碼的一部分創建和維護的。

更多程式相關知識，請造訪：程式設計課程！ ！

以上是css Blueprint是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！