利用Yahoo!免費獲取可重復使用的CSS_Web標準教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

在上周的專欄文章中，我討論了Yahoo! Developer Network，集中論述了在Yahoo! User Interface (YUI) Library（用戶界面庫）中可用的JavaScript特性（最重要的就是日歷）。我想再花一點時間涉入YUI庫中另一個提供了CSS工具的領域。這些工具使你能夠很輕松地將以CSS為基礎的設計與Web應用相結合。

瀏覽器支持

CSS工具的一個主要特性就是它的分級提供了對A級瀏覽器的完美支持。分級瀏覽器支持純粹是一個Yahoo!的分級，在它的網站上你可以看到完整的說明，它主要描述了在當今市場上的瀏覽器中，CSS的良好表現。

在這個在線表格中，瀏覽器被分為三個級別的瀏覽器支持（A、C和X）。A級是最高的支持級別。通過充分發揮現代Web標準的強大性能，YUI庫發現，A級體驗提供了高級的功能性和可視保真度。支持類別和相關文件使你能夠切身體會到哪里支持CSS，但是它應該在每一種瀏覽器中都可用（通過可能的降級）。

可重復使用的CSS

YUI庫中包括了三個CSS領域或特性，涉及格式化、字型介紹和以網格為基礎的（列和行）版式。網站上用這些術語來描述這三個元素：

Page Grids:使你能夠在所用模版容量范圍內，嵌入一到四列的網格。
Fonts:提供跨瀏覽器的排版標準化和控制器。一般來說，它在完全支持用戶（在瀏覽器內）對字體進行調整的同時，還提供了一致的字體和行高。
Reset:提供跨瀏覽器的HTML元素默認賦值的標準化。它也去除了瀏覽器中的共同默認表達，如對要強調元素使用粗體，這樣是為了幫助保證對所有的字體的定義都是有意圖的，并且元素始終用的是它們的語義含義，而不是習慣上的視覺表達。
在被安裝了以后，YUI庫下載中的每一個元素都可以在Web服務器的以下目錄／文件中獲得：

Page Grids: buildgridsgrids.css
Fonts: buildfontsfonts.css
Reset: build eset eset.css
你可以在自己的Web服務器上安裝這些基礎目錄或者將它們置于你的站點內，以便根據需要引用它們。CSS的一個重要特性（除了免費之外）就是，它在發布之前，已經經過了徹底的檢驗和調試。讓我們來更仔細地看一下實際操作中的CSS工具。

有網格的頁面版式

以網格為基礎的版式幾乎是所有站點設計或頁面版式的動力。過去，這一點常常通過HTML表格來完成，但是CSS為頁面版式提供了巨大的力量和靈活性。頁面網格提供的代碼可以根據你的要求，利用列和行來建立頁面。

在頁面網格最基本的級別上，它提供了七種Web頁面模版，其中六種定義了詳細的主要內容／工具條版式；第七個模版定義了一個沒有工具條的版式，主要內容占據了整個頁面寬度。這些模版的名稱如下：

yui-t1:包含一個位于左側寬度為160px的工具條和一個寬度為570px的主要區域。
yui-t2:包含一個位于左側寬度為180px的工具條和一個寬度為550px的主要區域。
yui-t3:包含一個位于左側寬度為300px的工具條和一個寬度為430px的主要區域。
yui-t4:包含一個位于右側寬度為180px的工具條和一個寬度為550px的主要區域。
yui-t5:包含一個位于右側寬度為240px的工具條和一個寬度為490px的主要區域。
yui-t6:包含一個位于右側寬度為300px的工具條和一個寬度為430px的主要區域。
yui-t7:包含一個寬度為750px的主要區域，沒有工具條。
你可以結合（或編輯，如果你夠大膽）這些模版來達到你的目的。列表A用第一種版式來安排一個頁面的格局（注意：CSS工具安裝在Web服務器的默認目錄中）。

列表A

<html><head>
<title>Yahoo CSS Tools Example 1</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</head>
<body>
<div id="doc" class="yui-t2">
<div id="hd">Page Header</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">Main Area</div>
</div><div class="yui-b">Left Column</div>
</div>
<div id="ft">Page Footer</div>
</div></body></html>
HTML頁面上的幾個注釋：

版式被賦予整個頁面——主div標簽被分配為yui-t2類。這說明采用的是第二種模版。
頁面被分為頁眉、主體和頁腳區域。頁眉被賦予標識符hd，主體為bd，頁腳為ft。
頁面的主體被分為左區域（如果模版支持的話）和主區域。兩者都被分配為yui-b類，但是主區域在它的div標簽中被附上了yui-main的標識符屬性。