網(wǎng)站建設的絕大部分都是關(guān)于文檔的樣式,不過(guò)它還提供了很多有用的界面樣式工具,而不僅僅面向文檔。例如,Mozilla開(kāi)發(fā)人員使用一種名為XUL的語(yǔ)言創(chuàng )建Mozilla瀏覽器(以及許多Mozilla產(chǎn)品)的界面。XUL就利用CSS和類(lèi)CSS聲明來(lái)提供導航按鈕、邊欄頁(yè)、對話(huà)框、狀態(tài)框以及chrome本身的其他部分。
類(lèi)似地,可以重用用戶(hù)默認環(huán)境的某些方面來(lái)設置文檔的字體和顏色樣式,甚至可以對焦點(diǎn)強調和鼠標光標施加影響。CSS2的界面功能會(huì )讓用戶(hù)有更愉快的體驗,不過(guò)如果使用不當,也可能造成用戶(hù)更混亂。
有時(shí)你可能希望在網(wǎng)頁(yè)設計時(shí)自己的文檔能盡可能地模仿用戶(hù)的計算環(huán)境。如果你在創(chuàng )建基于Web的應用,目標是讓W(xué)eb組件看上去是用戶(hù)操作系統中的一部分,這就是一個(gè)顯而易見(jiàn)的例子。盡管CSS2不允許在自己的文檔中重用操作系統外觀(guān)的任何一個(gè)方面,不過(guò)有一組豐富的顏色和有限的字體可供選擇。
假設已經(jīng)創(chuàng )建了一個(gè)元素(例如通過(guò)JavaScript實(shí)現),其功能相當于按鈕??梢宰屵@個(gè)控件看上去就像是用戶(hù)計算環(huán)境中的一個(gè)按鈕,從而滿(mǎn)足用戶(hù)對控件外觀(guān)的期望,相應地使控件更為有用。為了達到這個(gè)目的,只需編寫(xiě)以下規則:
a.widget {font: caption;}
這會(huì )為class為widget的所有元素設置字體,使之與有標題控件(如按鈕)中的文本使用同樣的字體系列、字體大小、字體加粗、字體風(fēng)格以及字體變形。
CSS2定義了6個(gè)系統字體關(guān)鍵字。分別描述如下:
caption
由標題控件使用的字體樣式,如按鈕和下拉控件。
icon
操作系統圖標標簽所用的字體樣式,如硬盤(pán)驅動(dòng)器。文件夾和文件圖標。
menu
下拉菜單和菜單列表中文本使用的字體樣式。
message-box
對話(huà)框中文本使用的字體樣式。
small-caption
由標題小控件的標簽使用的字體樣式。
status-bar
窗口狀態(tài)條中文本使用的字體樣式。
有一點(diǎn)很重要,要認識到這些值只能用于font屬性,它們本身就是簡(jiǎn)寫(xiě)形式。例如,假設一個(gè)用戶(hù)的操作系統將圖標標簽顯示為10像素的Geneva字體,而且沒(méi)有加粗、沒(méi)有斜體,也沒(méi)有小型大寫(xiě)字母效果。這意味著(zhù)以下3個(gè)規則都是等價(jià)的,其結果如下所示:
body {font: icon;}
body {font: 10px Geneva;}
body {
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 10px;
font-family: Geneva;
}
因此像icon這樣一個(gè)簡(jiǎn)單值實(shí)際上包含了很多其他的值。這在網(wǎng)站建設中很特別,所以使用這些值比平常要稍微復雜一些。
舉例來(lái)說(shuō),假設你希望使用圖標標簽的字體樣式,不過(guò)還希望將這個(gè)字體加粗,盡管用戶(hù)系統中的圖標標簽本身可能不是粗體。為此,需要按以下順序聲明規則:
body {font: icon; font-weight: bold;}
如果聲明按這個(gè)順序寫(xiě),第一個(gè)聲明會(huì )讓用戶(hù)代理將body元素的字體設置為與圖標標簽一致,然后利用第二個(gè)聲明修改該字體的加粗。如果把順序倒過(guò)來(lái),font聲明的值會(huì )覆蓋以上第二個(gè)聲明的font-weight值(譯注1[1]),這就會(huì )丟掉加粗聲明。簡(jiǎn)寫(xiě)屬性(如font)也是用類(lèi)似的方式處理。
你可能想知道,為什么這里沒(méi)有通用字體系列,因為在設計網(wǎng)頁(yè)時(shí),通常都建議創(chuàng )作人員指定字體時(shí)要采用類(lèi)似Geneva, sans-serif;的形式(以防用戶(hù)瀏覽器不支持所指定的字體)。CSS 不要求“添加”通用字體系列,不過(guò)在這種情況下也沒(méi)有這個(gè)必要。如果用戶(hù)代理想要“抽取”計算環(huán)境中顯示某種元素所用的字體系列,就絕對能保證這種字體對瀏覽器一定可用。
如果所需的系統字體樣式不可用或者無(wú)法確定,用戶(hù)代理可以在一組近似的字體樣式中猜測。例如,可以這樣近似small-caption:取caption的字體樣式,再縮小字體的大小。如果無(wú)法做出這樣的猜測,用戶(hù)代理就應當使用一種“用戶(hù)代理默認字體”。
當前文章標題:網(wǎng)頁(yè)設計中的系統字體和顏色
當前URL:http://amzcoolest.com/news/wzzz/3038.html