編寫更優(yōu)美的網(wǎng)頁：精心設(shè)計的 CSS 框架可節(jié)省時間和工作

2020-03-24 16:42:00

字體：大中小

供稿：網(wǎng)友

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

清除瀏覽器關(guān)于填充、類型樣式以及其他特性所有假定。可以將重置看作一個干凈的面板：您只能看到 Blueprint 或自己明確定義的樣式和效果。
清單 1 的 Blueprint 用于重置的 CSS 代碼。定義了一個最高容器、各種固定列寬，以及其他許多用于左右移動各列、添加邊框和構(gòu)建優(yōu)美表單的修飾符。一種網(wǎng)格樣式甚至還能為基本列填充顏色，以簡化設(shè)計和調(diào)試。大多數(shù) Blueprint 樣式都是作為 CSS 類實(shí)現(xiàn)的，因此您可以通過向某個 HTML 元素分配一個或多個類來混合效果。控制頁面文字的外觀。HTML 的 type 元素用 em 定義，從而允許頁面外觀在文字大小改變時保持一致和有序。版式 CSS 還將所有元素的垂直對齊設(shè)置為 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 的一種用途。網(wǎng)絡(luò)上提供了該示例。
圖 1. Blueprint 樣式的 HTML 頁面的一個例子

圖 2 顯示了相同的頁面，只是字體變得更大了。網(wǎng)格仍然緊湊且相同，因?yàn)槌叽缡鞘褂孟袼刂付ǖ摹?br>圖 2. 與圖 1 相同的 HTML 頁面，但通過瀏覽器首選項增加了字體大小

Blueprint 的默認(rèn)網(wǎng)格是 950 像素寬，分為 24 個由 10 像素分隔線隔開的 30 像素寬的列：[(24 列 * 30 像素/列) + (23 分隔線 * 10 像素/分隔線) = 950 像素]。如果您偏好或者需要更寬或更窄的網(wǎng)格或不同的列寬，Blueprint 提供了一個 Ruby 工具用于將 Blueprint 重新生成到您的規(guī)范中。Ruby 工具還創(chuàng)建了一個網(wǎng)格圖像，您可以在 Photoshop 中引用它，并且它壓縮了最終的 CSS 以減小文件大小，從而縮短了傳輸時間和帶寬。使用 Blueprint 創(chuàng)建網(wǎng)頁為了幫助您熟悉 Blueprint，本文將創(chuàng)建示例頁面的一部分，如圖 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 共有三種標(biāo)準(zhǔn)的 Blueprint 文件，如表 2 所示。
表 2. 標(biāo)準(zhǔn) Blueprint CSS 文件

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

在使用 Blueprint 進(jìn)行設(shè)計時遵循兩個簡單的規(guī)則：將網(wǎng)格放在腦海中。
Blueprint 預(yù)先定義了大量基于多個列的樣式。舉例來說，.span-4 樣式的寬度包括分隔線在內(nèi)達(dá)到了 4 列，或者 150 像素。您可以將此樣式添加到任何種類的 HTML 元素中 —— 比如說 textarea —— 來將它的寬度擴(kuò)展到 4 列。顯然，您可以將 .span-4 應(yīng)用于 div，但需要留意 div.span-n，其中 n 的范圍是從 1 到 24，居于在左側(cè)并且右邊距為一條分割線的寬度。將基線謹(jǐn)記于心。
Blueprint 將整個頁面的線高度設(shè)置為 18 像素，因此每個圖像和文本都必須是 18 像素的倍數(shù)。要繼續(xù)此示例（回顧圖 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 預(yù)先定義的一些 span 實(shí)現(xiàn)的，如清單 5 所示。
清單 5. Blueprint 預(yù)先定義的 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 標(biāo)記的 div 橫跨 n 列，位于左側(cè)，并且右邊距為一個分割線寬度。last 樣式應(yīng)該應(yīng)用于任何序列的最后一列。令人驚訝的是，last 并未明確強(qiáng)制重新配置其后的任何元素；它僅僅將右邊距設(shè)置為 0，這將覆蓋 span-n 中 10 像素的默認(rèn)右邊距設(shè)置。而 hr 會強(qiáng)制清空，排除換行之后的任何元素。hr 將繪制一條白線，從而有效地呈現(xiàn)不可見的規(guī)則，但需要提供一個標(biāo)準(zhǔn)的垂直空白空間。 colborder 樣式將在第一與第二以及第二與第三個框之間創(chuàng)建灰色線條。為了實(shí)現(xiàn)這條線，樣式將右側(cè)填充擴(kuò)展至 24 像素，繪制了一條單像素線條（在列的中部），并將右邊距擴(kuò)展至 25 像素。由于 Blueprint 是基于像素的，因此保持網(wǎng)格對齊是非常必要的。下一行內(nèi)容與之前相類似，但第一列通過 prepend-1 修飾符稍微與網(wǎng)格有所遠(yuǎn)離，如清單 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 分隔線預(yù)留足夠的像素。小狗圖像的高度是 180 像素。由于它的高度是 18 的倍數(shù)，因此圖像右側(cè)和下方的文本在指定基線上仍然是等距的。發(fā)現(xiàn)所有 Blueprint 技巧最好的方式是從上至下讀取 screen.css 文件。下面給出了一些要點(diǎn)和技巧： hide 樣式類使用 display: none; 隱藏任何元素。 added 和 removed 樣式類在 Asynchronous JavaScript + XML (Ajax) 應(yīng)用程序中用于突出顯示頁面中添加或刪除的元素。還有一個名稱為 highlight 的類，它可以將任何元素的背景置為黃色。您可以使用 push-i 和 pull-j 來將某個列向右移動 i 列，或向左移動 j 列。再說一次，Blueprint 的方法是獨(dú)一無二的。它強(qiáng)制使用通常在打印設(shè)計中出現(xiàn)的網(wǎng)格。但是，這并不一定有壞處。這項決策允許您很好地控制自己的站點(diǎn)在任何瀏覽器中的顯示效果。 YUI Grids 簡介相反，YUI Grids 為 CSS 提供了固定寬度的頁面和可變寬度的頁面，并且它提供了任意深度的列嵌套。您還可以任意定位或移動各列，因此可以使用 CSS 簡單快捷地對頁面上的內(nèi)容進(jìn)行排序。舉例來說，您可以將導(dǎo)航從左側(cè)移至右側(cè)，而只需要一處 CSS 修改。此外，您使用 Yahoo 自己的 JavaScript 庫來擴(kuò)充 YUI Grids，以提高交互性。您可以另外了解關(guān)于 YUI JavaScript 庫的更多信息。本文側(cè)重介紹 Grids 的樣式表，它可以獨(dú)立于 JavaScript 庫運(yùn)行。 YUI Grids 在許多方面都與 Blueprint 相似：它使用一組可預(yù)測的基線樣式來簡化版面。它定義了版式樣式。它提供了許多預(yù)定定義的、適用于大多數(shù) Web 應(yīng)用程序的頁面布局。 YUI Grids 還定義了一組列式網(wǎng)格，您可以通過嵌入來創(chuàng)建任意復(fù)雜的頁面。大約種 100 YUI Grids CSS 樣式可以劃分為三個類別，如表 3 所示。
表 3. YUI Grids CSS 樣式類別

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

使用 YUI Grids 構(gòu)建網(wǎng)頁要使用 YUI Grids，Yahoo 推薦在 Web 瀏覽器中以嚴(yán)格的行為提供多個呈現(xiàn)模式。您可以在 HTML 文件的第一行中請求嚴(yán)格模式： !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 根目錄中，或者，如果只希望使用它的一部分特性，則可以下載它的各個組件。一個部分實(shí)現(xiàn)了重置（reset）；另一個部分描述版式（typography）；第三個部分定義網(wǎng)格元素（grid））。與 Blueprint 相似，使用 YUI Grids 構(gòu)建的頁面必須擁有標(biāo)準(zhǔn)的組件，如清單 7 所示。
清單 7. YUI Grids 的標(biāo)準(zhǔn)頁面組件
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" 是不固定的寬度。所有頁面寬度樣式都將內(nèi)容居中。站點(diǎn)內(nèi)容應(yīng)該放置在 ID 為 bd 的 div 中。內(nèi)容進(jìn)一步劃分為兩個 “塊”，一主一次，如清單 8 所示。（可以根據(jù)需要再對塊進(jìn)行劃分，如圖 4 所示）。
清單 8. 主塊和從塊
div id="bd"
div id="yui-main"
div
/div
/div

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

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

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

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

上一篇：XHTML與CSS的面向?qū)ο缶幊?/a>

下一篇：css：block，inline和inline-block用法和區(qū)別