利用Yahoo!免費(fèi)獲取可重復(fù)使用的CSS_Web標(biāo)準(zhǔn)教程
在上周的專欄文章中,我討論了Yahoo! Developer Network,集中論述了在Yahoo! User Interface (YUI) Library(用戶界面庫)中可用的JavaScript特性(最重要的就是日歷)。我想再花一點(diǎn)時間涉入YUI庫中另一個提供了CSS工具的領(lǐng)域。這些工具使你能夠很輕松地將以CSS為基礎(chǔ)的設(shè)計與Web應(yīng)用相結(jié)合。
瀏覽器支持
CSS工具的一個主要特性就是它的分級提供了對A級瀏覽器的完美支持。分級瀏覽器支持純粹是一個Yahoo!的分級,在它的網(wǎng)站上你可以看到完整的說明,它主要描述了在當(dāng)今市場上的瀏覽器中,CSS的良好表現(xiàn)。
在這個在線表格中,瀏覽器被分為三個級別的瀏覽器支持(A、C和X)。A級是最高的支持級別。通過充分發(fā)揮現(xiàn)代Web標(biāo)準(zhǔn)的強(qiáng)大性能,YUI庫發(fā)現(xiàn),A級體驗(yàn)提供了高級的功能性和可視保真度。支持類別和相關(guān)文件使你能夠切身體會到哪里支持CSS,但是它應(yīng)該在每一種瀏覽器中都可用(通過可能的降級)。
可重復(fù)使用的CSS
YUI庫中包括了三個CSS領(lǐng)域或特性,涉及格式化、字型介紹和以網(wǎng)格為基礎(chǔ)的(列和行)版式。網(wǎng)站上用這些術(shù)語來描述這三個元素:
Page Grids:使你能夠在所用模版容量范圍內(nèi),嵌入一到四列的網(wǎng)格。
Fonts:提供跨瀏覽器的排版標(biāo)準(zhǔn)化和控制器。一般來說,它在完全支持用戶(在瀏覽器內(nèi))對字體進(jìn)行調(diào)整的同時,還提供了一致的字體和行高。
Reset:提供跨瀏覽器的HTML元素默認(rèn)賦值的標(biāo)準(zhǔn)化。它也去除了瀏覽器中的共同默認(rèn)表達(dá),如對要強(qiáng)調(diào)元素使用粗體,這樣是為了幫助保證對所有的字體的定義都是有意圖的,并且元素始終用的是它們的語義含義,而不是習(xí)慣上的視覺表達(dá)。
在被安裝了以后,YUI庫下載中的每一個元素都可以在Web服務(wù)器的以下目錄/文件中獲得:
Page Grids: buildgridsgrids.css
Fonts: buildfontsfonts.css
Reset: build eset eset.css
你可以在自己的Web服務(wù)器上安裝這些基礎(chǔ)目錄或者將它們置于你的站點(diǎn)內(nèi),以便根據(jù)需要引用它們。CSS的一個重要特性(除了免費(fèi)之外)就是,它在發(fā)布之前,已經(jīng)經(jīng)過了徹底的檢驗(yàn)和調(diào)試。讓我們來更仔細(xì)地看一下實(shí)際操作中的CSS工具。
有網(wǎng)格的頁面版式
以網(wǎng)格為基礎(chǔ)的版式幾乎是所有站點(diǎn)設(shè)計或頁面版式的動力。過去,這一點(diǎn)常常通過HTML表格來完成,但是CSS為頁面版式提供了巨大的力量和靈活性。頁面網(wǎng)格提供的代碼可以根據(jù)你的要求,利用列和行來建立頁面。
在頁面網(wǎng)格最基本的級別上,它提供了七種Web頁面模版,其中六種定義了詳細(xì)的主要內(nèi)容/工具條版式;第七個模版定義了一個沒有工具條的版式,主要內(nèi)容占據(jù)了整個頁面寬度。這些模版的名稱如下:
yui-t1:包含一個位于左側(cè)寬度為160px的工具條和一個寬度為570px的主要區(qū)域。
yui-t2:包含一個位于左側(cè)寬度為180px的工具條和一個寬度為550px的主要區(qū)域。
yui-t3:包含一個位于左側(cè)寬度為300px的工具條和一個寬度為430px的主要區(qū)域。
yui-t4:包含一個位于右側(cè)寬度為180px的工具條和一個寬度為550px的主要區(qū)域。
yui-t5:包含一個位于右側(cè)寬度為240px的工具條和一個寬度為490px的主要區(qū)域。
yui-t6:包含一個位于右側(cè)寬度為300px的工具條和一個寬度為430px的主要區(qū)域。
yui-t7:包含一個寬度為750px的主要區(qū)域,沒有工具條。
你可以結(jié)合(或編輯,如果你夠大膽)這些模版來達(dá)到你的目的。列表A用第一種版式來安排一個頁面的格局(注意:CSS工具安裝在Web服務(wù)器的默認(rèn)目錄中)。
列表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標(biāo)簽被分配為yui-t2類。這說明采用的是第二種模版。
頁面被分為頁眉、主體和頁腳區(qū)域。頁眉被賦予標(biāo)識符hd,主體為bd,頁腳為ft。
頁面的主體被分為左區(qū)域(如果模版支持的話)和主區(qū)域。兩者都被分配為yui-b類,但是主區(qū)域在它的div標(biāo)簽中被附上了yui-main的標(biāo)識符屬性。
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語:開始標(biāo)準(zhǔn)之路
- 相關(guān)鏈接:
- 教程說明:
Web標(biāo)準(zhǔn)教程-利用Yahoo!免費(fèi)獲取可重復(fù)使用的CSS。