編寫更優美的網頁：精心設計的 CSS 框架可節省時間和工作

2020-03-24 16:42:00

字體：大中小

來源：轉載

供稿：網友

大約在 1950，在構建了 L 型 Usonian 房屋之后，建筑師 Frank Lloyd Wright 引入了 Usonian Automatic —— 一種全新的成品部件系統和一系列簡單的技巧，允許外行建造大多數新房屋的結構。對于 Wright 而言，Usonian Automatic 房屋非常經濟、實用、有吸引力，并且將改變房屋的格局。 Wright 系統的核是一個標準化的 4x12x24 英寸的帶凹面的混凝土或玻璃磚塊。舉例來說，建一堵墻需要花三個步驟。首先，磚塊的堆砌不需要灰泥。接下來，橫向及垂直鋼筋插入在磚塊中以形成框架。最后，灰泥填充到邊緣間隙中以固定鋼筋和磚塊，以及凝固結構。因此，除了搭建根基之外，大部分工作都可以由任何有決心的、動手能力強的人獨立完成。雖然靈活，但 Usonian Automatic 系統在實踐中被證明難以實現且費用昂貴，這讓 Wright 感到異常沮喪。與 Wright 的目標相反，許多房主都開始找專業承包人來建房。盡管如此，為了轉換搭建舒適房屋的經濟局面，Wright 的系統嘗試提供了完整的基礎設施 — 材料、技巧和底蘊 — 其價值是不可忽視的。Usonian Automatic 簡直就是一個框架。軟件開發框架軟件開發也可以從框架中受益。與 Usonian Automatic 相似，軟件框架可以簡化代碼的構建，從而允許開發人員將精力更多地集中于軟件用途上，而不是簡單組裝工作。舉例來說，Apple? 的知名框架 Cocoa 提供了各種工具、類庫、技術以及體現公司html' target='_blank'>應用程序開發方法。通過采用 Cocoa，Mac 開發人員不需要完全重新設計。他們可以將時間花在一些獨特、有價值、有市場的特性上。除了 Cocoa 之外，還有許多其他的軟件框架可用。Zend 提供了同名的 Zend Framework 用于 PHP 開發。Django、Rails 和 Catalyst 分別對應于 Python、Ruby 和 Perl 應用程序提供了一個基于 Model-View-Controller (MVC) 的框架。Nokia 的 Qt 是一種跨平臺的（包括 Mac OS? X、Linux? 和 Microsoft? Windows? 等）圖形應用程序開發框架。確實，幾乎軟件開發的每個方面都提供了至少一個框架。這對于任何編程技術的第二代及更后代尤為正確。早期的試驗和錯誤有助于形成更好的實踐，并能啟發創新，從而在下一代框架中加以利用。 Django 和 Rails 已經證明，服務器端 Web 開發已經日益成熟。以瀏覽器為中心的應用程序開發也是如此。SproutCore 是一種針對基于瀏覽器的應用程序的富 JavaScript 框架，并且 Flex 和 Silverlight 分別提供了一個完整的應用程序棧。但奇怪的是，網頁開發 —— 對于任何在線工作都是一項重要、基本的任務 —— 始終保持著較慢的發展步伐?；蛘哒f是在原地踏步。在過去兩年中出現了許多網頁框架，它們使 Hypertext Markup Language (HTML) 和 CSS 在各種瀏覽器中的構建更加簡單、速度更快且可預測性更高，甚至實現了標準化。本文將介紹兩個用于網頁構建的框架：Blueprint 和 Yahoo!? User Interface (YUI) Grid。兩個框架都是可以免費使用和互換的，分別遵照 Massachusetts Institute of Technology (MIT) License 和 Berkeley Software Distribution (BSD) License 的條款。本文將分別介紹兩者的創新之處和功能，并指導大家完成一系列示例。您可以選擇最適合自己的框架。 Blueprint 簡介由于 HTML 是一種標準，并且所描述的是結構而非樣式，因此 Blueprint 框架是完全作為 CSS 實現的。要使用 Blueprint，您在設計網頁時要以 Blueprint 為指導，然后再設計或生成 HTML，以便將 Blueprint CSS 樣式應用于 HTML 元素。實際上，由于 Blueprint 提供了強大的 CSS，因此您可以在 HTML 中設計網頁，而不必使用圖像設計程序來模擬最終頁面，比如說 photoshop。從一定意義上說，Blueprint 提供了真正的所見即所得的（WYSIWYG）網頁設計，因為您的原型將使用與最終站點相同的代碼。此外，由于 Blueprint 的主要作用是模擬打印頁的外觀，因此使用 Blueprint 進行交互式的設計的感覺更像是在使用 QuarkXPress 或 Adobe InDesign。Blueprint 樣式基于像素和一個 18 像素的基線網格。借助設計天賦和努力，您可以創建具有專業外觀的頁面。 Blueprint 的 CSS 樣式（大約 250 種）可劃分為三類功能，如表 1 所示。
表 1. Blueprint 的 CSS 樣式類別

清除瀏覽器關于填充、類型樣式以及其他特性所有假定。可以將重置看作一個干凈的面板：您只能看到 Blueprint 或自己明確定義的樣式和效果。
清單 1 的 Blueprint 用于重置的 CSS 代碼。定義了一個最高容器、各種固定列寬，以及其他許多用于左右移動各列、添加邊框和構建優美表單的修飾符。一種網格樣式甚至還能為基本列填充顏色，以簡化設計和調試。大多數 Blueprint 樣式都是作為 CSS 類實現的，因此您可以通過向某個 HTML 元素分配一個或多個類來混合效果?？刂祈撁嫖淖值耐庥^。HTML 的 type 元素用 em 定義，從而允許頁面外觀在文字大小改變時保持一致和有序。版式 CSS 還將所有元素的垂直對齊設置為 baseline（清單 1 中 CSS 代碼的最后一行），這樣所有框中的文字，不論嵌入有多深，都可以保持對齊。

清單 1. Blueprint 用于重置的 CSS 代碼
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline; 圖 1 展示了 Blueprint 的一種用途。網絡上提供了該示例。
圖 1. Blueprint 樣式的 HTML 頁面的一個例子

圖 2 顯示了相同的頁面，只是字體變得更大了。網格仍然緊湊且相同，因為尺寸是使用像素指定的。
圖 2. 與圖 1 相同的 HTML 頁面，但通過瀏覽器首選項增加了字體大小

Blueprint 的默認網格是 950 像素寬，分為 24 個由 10 像素分隔線隔開的 30 像素寬的列：[(24 列 * 30 像素/列) + (23 分隔線 * 10 像素/分隔線) = 950 像素]。如果您偏好或者需要更寬或更窄的網格或不同的列寬，Blueprint 提供了一個 Ruby 工具用于將 Blueprint 重新生成到您的規范中。Ruby 工具還創建了一個網格圖像，您可以在 Photoshop 中引用它，并且它壓縮了最終的 CSS 以減小文件大小，從而縮短了傳輸時間和帶寬。使用 Blueprint 創建網頁為了幫助您熟悉 Blueprint，本文將創建示例頁面的一部分，如圖 1 所示。第一步是在您的 HTML 頁面中包括 Blueprint 的 CSS 文件，如清單 2 所示。這段 HTML 代碼假定您將 Blueprint 文件保存在 Web 根目錄 css/blueprint 的某個子目錄下。
清單 2. 將 Blueprint 的 CSS 文件包括在 HTML 頁面中
head
!--[if IE]
link media="screen" rel="stylesheet" type="text/css"
href="css/blueprint/ie.css" /
![endif]--
link media="screen" rel="stylesheet" type="text/css"
href="css/blueprint/screen.css" /
link media="print" rel="stylesheet" type="text/css"
href="css/blueprint/print.css" /
link rel="stylesheet" type="text/css"
href="css/custom.css" /
...
/head 共有三種標準的 Blueprint 文件，如表 2 所示。
表 2. 標準 Blueprint CSS 文件

聲明一組用于打印的默認樣式通常，您不應該編輯 Blueprint CSS 文件。而是應該在一個單獨的文件定義您自己的樣式，并根據需要覆蓋 Blueprint 代碼。這是最后一個文件 css/custom.css 的作用，這個文件是作為您自己代碼的一部分創建和維護的。首先，所有的 Blueprint 頁面必須包含在一個適當標記的 div 中。如果您希望查看頁面的底層網格，可以添加 showgrid 類，如清單 3 所示。
清單 3. 添加 showgrid 類
body
div
/div
/body 圖 3 顯示了默認的 Blueprint 網格。
圖 3. 默認的 Blueprint 網格

在使用 Blueprint 進行設計時遵循兩個簡單的規則：將網格放在腦海中。
Blueprint 預先定義了大量基于多個列的樣式。舉例來說，.span-4 樣式的寬度包括分隔線在內達到了 4 列，或者 150 像素。您可以將此樣式添加到任何種類的 HTML 元素中 —— 比如說 textarea —— 來將它的寬度擴展到 4 列。顯然，您可以將 .span-4 應用于 div，但需要留意 div.span-n，其中 n 的范圍是從 1 到 24，居于在左側并且右邊距為一條分割線的寬度。將基線謹記于心。
Blueprint 將整個頁面的線高度設置為 18 像素，因此每個圖像和文本都必須是 18 像素的倍數。要繼續此示例（回顧圖 1），頁面的第一段和第二段是通過 alt 類輕松完成的，如清單 4 所示。alt 類是 custom.css 中定義的一種自定義樣式。
清單 4. alt 類
h1 A simple sample page
/h1

hr h2 This sample page demonstrates
a tiny fraction of what you get with Blueprint. /h2
hr 頁面的下一部分，即三個文本框所在的行，也是由 Blueprint 預先定義的一些 span 實現的，如清單 5 所示。
清單 5. Blueprint 預先定義的 span
div
h6 Here's a box /h6
p Lorem ... /p
/div

div
h6 And another box /h6
p Lorem ... /p
/div

div
h6 This box is aligned with the sidebar /h6
p Lorem ... /p
/div
hr
hr 如前所述，帶 span-n 標記的 div 橫跨 n 列，位于左側，并且右邊距為一個分割線寬度。last 樣式應該應用于任何序列的最后一列。令人驚訝的是，last 并未明確強制重新配置其后的任何元素；它僅僅將右邊距設置為 0，這將覆蓋 span-n 中 10 像素的默認右邊距設置。而 hr 會強制清空，排除換行之后的任何元素。hr 將繪制一條白線，從而有效地呈現不可見的規則，但需要提供一個標準的垂直空白空間。 colborder 樣式將在第一與第二以及第二與第三個框之間創建灰色線條。為了實現這條線，樣式將右側填充擴展至 24 像素，繪制了一條單像素線條（在列的中部），并將右邊距擴展至 25 像素。由于 Blueprint 是基于像素的，因此保持網格對齊是非常必要的。下一行內容與之前相類似，但第一列通過 prepend-1 修飾符稍微與網格有所遠離，如清單 6 所示。
清單 6. prepend-1 修飾符
div
p
img src="test.jpg" alt="test" Lorem ...
/p

blockquote
p Integer cursus ornare mauris. ... /p
/blockquote
...

hr
div
h6 This is a nested column /h6
p Lorem ipsum ...
/p
/div
div
h6 This is another nested column /h6
p Lorem ipsum ... /p
/div
/div prepend-v 樣式，其中 v 的范圍是從 1 到 23，用于使用 padding-left 為 v 列和 v-1 分隔線預留足夠的像素。小狗圖像的高度是 180 像素。由于它的高度是 18 的倍數，因此圖像右側和下方的文本在指定基線上仍然是等距的。發現所有 Blueprint 技巧最好的方式是從上至下讀取 screen.css 文件。下面給出了一些要點和技巧： hide 樣式類使用 display: none; 隱藏任何元素。 added 和 removed 樣式類在 Asynchronous JavaScript + XML (Ajax) 應用程序中用于突出顯示頁面中添加或刪除的元素。還有一個名稱為 highlight 的類，它可以將任何元素的背景置為黃色。您可以使用 push-i 和 pull-j 來將某個列向右移動 i 列，或向左移動 j 列。再說一次，Blueprint 的方法是獨一無二的。它強制使用通常在打印設計中出現的網格。但是，這并不一定有壞處。這項決策允許您很好地控制自己的站點在任何瀏覽器中的顯示效果。 YUI Grids 簡介相反，YUI Grids 為 CSS 提供了固定寬度的頁面和可變寬度的頁面，并且它提供了任意深度的列嵌套。您還可以任意定位或移動各列，因此可以使用 CSS 簡單快捷地對頁面上的內容進行排序。舉例來說，您可以將導航從左側移至右側，而只需要一處 CSS 修改。此外，您使用 Yahoo 自己的 JavaScript 庫來擴充 YUI Grids，以提高交互性。您可以另外了解關于 YUI JavaScript 庫的更多信息。本文側重介紹 Grids 的樣式表，它可以獨立于 JavaScript 庫運行。 YUI Grids 在許多方面都與 Blueprint 相似：它使用一組可預測的基線樣式來簡化版面。它定義了版式樣式。它提供了許多預定定義的、適用于大多數 Web 應用程序的頁面布局。 YUI Grids 還定義了一組列式網格，您可以通過嵌入來創建任意復雜的頁面。大約種 100 YUI Grids CSS 樣式可以劃分為三個類別，如表 3 所示。
表 3. YUI Grids CSS 樣式類別

描述各種流行的、雙列頁面格式。通常，一列比另一列寬，分別提供主要內容和導航功能。模板樣式還提供了一些變量來交換兩列的順序?？刂苾蓚€或多個 div 元素在一行中的顯示方式。內嵌網格設置每個嵌入 div 的寬度，啟用浮動，以及控制何時開始和結束一行。
與 Blueprint 不同，內嵌的網格樣式使用百分比來描述各組件的寬度。因此，當頁面的寬度增加時，整個網格以及網格中的各個元素也在隨之增加。但是，網絡的組件始終維持相對大小，比如說 66% 和 33%。圖 4 展示了一個通過嵌套實現的列布局。它的頂部和底部分別有一個頁眉和腳注。內容區本身是一個含兩列的網格，每個列又劃分為一個兩列網格。
圖 4. 內嵌網格的 YUI Grids 布局

使用 YUI Grids 構建網頁要使用 YUI Grids，Yahoo 推薦在 Web 瀏覽器中以嚴格的行為提供多個呈現模式。您可以在 HTML 文件的第一行中請求嚴格模式： !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" 接下來，您必須包括 YUI Grids CSS。為了您的方便，Yahoo 提供了一個最簡化的樣式表。 link rel="stylesheet" type="text/css"
（您還可以下載文件，并將它保存在自己的 Web 根目錄中，或者，如果只希望使用它的一部分特性，則可以下載它的各個組件。一個部分實現了重置（reset）；另一個部分描述版式（typography）；第三個部分定義網格元素（grid））。與 Blueprint 相似，使用 YUI Grids 構建的頁面必須擁有標準的組件，如清單 7 所示。
清單 7. YUI Grids 的標準頁面組件
div id="doc"
div id="hd" !-- header -- /div
div id="bd" !-- body -- /div
div id="ft" !-- footer -- /div
/div 最外面的 div 的 ID 用于確定頁面的寬度。共有四種樣式，從 doc1 到 doc4。id="doc1" 用于指定 750 像素的頁面；id="doc2" 用于指定 950 像素的頁面；id="doc4" 用于指定更寬且越來越常用的 974 像素的頁面。id="doc3" 是不固定的寬度。所有頁面寬度樣式都將內容居中。站點內容應該放置在 ID 為 bd 的 div 中。內容進一步劃分為兩個 “塊”，一主一次，如清單 8 所示。（可以根據需要再對塊進行劃分，如圖 4 所示）。
清單 8. 主塊和從塊
div id="bd"
div id="yui-main"
div
/div
/div

div
/div
/div yui-b 表示 “塊”，并且一個 YUI Grids 頁面中應該始終有兩個塊。根據習慣，yui-main 一般顯示在左側，除非您向最外面的 div 添加了一個類樣式以更改兩個列的順序。舉例來說， div id="doc" 將 180 像素的區域置于左側（否則應位于最右側）。每個塊中都嵌入了一個風格。每個網格可以包含一個或多個子網格，或者一個或多個 “單元”。清單 9 是用于構建如圖 4 所示的四列布局的 HTML 和相關的 CSS。
清單 9. 用于構建如圖 4 所示的四列布局的 HTML 和相關的 CSS
div id="outermost"
div id="firstgrid"
div
/div
div
/div
/div

div id="secondgrid"
div
/div
div
/div
/div
/div yui-g 代表 “網格”，而 yui-u 代表 “單元”。此處，outermost 網格（其名稱僅僅是為了在討論中便于區別）包括另外兩個網格：firstgrid 和 secondgrid。first 樣式指示新 “行” 的開始，或者網絡及單元的順序。實際的內容將顯示在各個單元中。默認情況下，網格 —— 也就是 yui-g —— 在兩個單元之間是平均分配的。您可以修改它，方法是使用一個特殊的類來替換 yui-g。舉例來說，如果您希望將之前清單中的兩個網格繼續劃分為兩個單元，其中一個單元是另一個單元的兩倍寬度，可以編寫如清單 10 所示的代碼。
清單 10. 將兩個網格繼續劃分為兩個單元，其中一個單元是另一個單元的兩倍寬度
div id="outermost"
div id="firstgrid"
div
/div
div
/div
/div
div id="secondgrid"
div
/div
div
/div
/div
/div yui-gc 將兩個單元分別設置為可用寬度的 66% 和 33%。結果如圖 5 所示。其他的變量請參見 YUI Grids 文檔。一個有趣的例外是網格樣式 yui-gb，它可以平均劃分三個嵌入單元的空間。
圖 5. 修改 YUI Grids CSS 網格中的單元的布局

YUI Grids 有些麻煩，但是它在所有的瀏覽器的都能正常運行，并且適用于移動設備。Yahoo 聲稱 YUI Grids 在它自己的站點中得到了廣泛應用。如果是這樣的話，它應該能兼容所有流行的瀏覽器。結束語除了 Blueprint 和 YUI Grids 之外，您還可以在網絡上找到 10 到 12 種可用于加速網頁設計及開發的框架。一些框架是 “重量級的”，詳細指定了項目的組織和其他約定。其他一些則是 “輕量級的”。事實上，它們只是一系列帶有解釋的 CSS 代碼。要找到所有的選項，在搜索引擎中輸入 CSS 框架，細讀結果并衡量您的項目是否能從中受益。無論您選擇哪種框架（如果您還沒有框架，則應該選擇一個），它絕對可以節省您的時間和工作。 Wright 的 Usonian Automatic 可能談不上成功，但它的精神永存。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：XHTML與CSS的面向對象編程

下一篇：css：block，inline和inline-block用法和區別