網(wǎng)站建設(shè)的絕大部分都是關(guān)于文檔的樣式，不過(guò)它還提供了很多有用的界面樣式工具，而不僅僅面向文檔。例如，Mozilla開(kāi)發(fā)人員使用一種名為XUL的語(yǔ)言創(chuàng)建Mozilla瀏覽器（以及許多Mozilla產(chǎn)品）的界面。XUL就利用CSS和類(lèi)CSS聲明來(lái)提供導(dǎo)航按鈕、邊欄頁(yè)、對(duì)話(huà)框、狀態(tài)框以及chrome本身的其他部分。

類(lèi)似地，可以重用用戶(hù)默認(rèn)環(huán)境的某些方面來(lái)設(shè)置文檔的字體和顏色樣式，甚至可以對(duì)焦點(diǎn)強(qiáng)調(diào)和鼠標(biāo)光標(biāo)施加影響。CSS2的界面功能會(huì)讓用戶(hù)有更愉快的體驗(yàn)，不過(guò)如果使用不當(dāng)，也可能造成用戶(hù)更混亂。

系統(tǒng)字體和顏色

有時(shí)你可能希望在網(wǎng)頁(yè)設(shè)計(jì)時(shí)自己的文檔能盡可能地模仿用戶(hù)的計(jì)算環(huán)境。如果你在創(chuàng)建基于Web的應(yīng)用，目標(biāo)是讓W(xué)eb組件看上去是用戶(hù)操作系統(tǒng)中的一部分，這就是一個(gè)顯而易見(jiàn)的例子。盡管CSS2不允許在自己的文檔中重用操作系統(tǒng)外觀(guān)的任何一個(gè)方面，不過(guò)有一組豐富的顏色和有限的字體可供選擇。

系統(tǒng)字體

假設(shè)已經(jīng)創(chuàng)建了一個(gè)元素（例如通過(guò)JavaScript實(shí)現(xiàn)），其功能相當(dāng)于按鈕?？梢宰屵@個(gè)控件看上去就像是用戶(hù)計(jì)算環(huán)境中的一個(gè)按鈕，從而滿(mǎn)足用戶(hù)對(duì)控件外觀(guān)的期望，相應(yīng)地使控件更為有用。為了達(dá)到這個(gè)目的，只需編寫(xiě)以下規(guī)則：

a.widget {font: caption;}

這會(huì)為class為widget的所有元素設(shè)置字體，使之與有標(biāo)題控件（如按鈕）中的文本使用同樣的字體系列、字體大小、字體加粗、字體風(fēng)格以及字體變形。

CSS2定義了6個(gè)系統(tǒng)字體關(guān)鍵字。分別描述如下：

caption

由標(biāo)題控件使用的字體樣式，如按鈕和下拉控件。

icon

操作系統(tǒng)圖標(biāo)標(biāo)簽所用的字體樣式，如硬盤(pán)驅(qū)動(dòng)器。文件夾和文件圖標(biāo)。

menu

下拉菜單和菜單列表中文本使用的字體樣式。

message-box

對(duì)話(huà)框中文本使用的字體樣式。

small-caption

由標(biāo)題小控件的標(biāo)簽使用的字體樣式。

status-bar

窗口狀態(tài)條中文本使用的字體樣式。

有一點(diǎn)很重要，要認(rèn)識(shí)到這些值只能用于font屬性，它們本身就是簡(jiǎn)寫(xiě)形式。例如，假設(shè)一個(gè)用戶(hù)的操作系統(tǒng)將圖標(biāo)標(biāo)簽顯示為10像素的Geneva字體，而且沒(méi)有加粗、沒(méi)有斜體，也沒(méi)有小型大寫(xiě)字母效果。這意味著以下3個(gè)規(guī)則都是等價(jià)的，其結(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)站建設(shè)中很特別，所以使用這些值比平常要稍微復(fù)雜一些。

舉例來(lái)說(shuō)，假設(shè)你希望使用圖標(biāo)標(biāo)簽的字體樣式，不過(guò)還希望將這個(gè)字體加粗，盡管用戶(hù)系統(tǒng)中的圖標(biāo)標(biāo)簽本身可能不是粗體。為此，需要按以下順序聲明規(guī)則：

body {font: icon; font-weight: bold;}

如果聲明按這個(gè)順序?qū)?，第一個(gè)聲明會(huì)讓用戶(hù)代理將body元素的字體設(shè)置為與圖標(biāo)標(biāo)簽一致，然后利用第二個(gè)聲明修改該字體的加粗。如果把順序倒過(guò)來(lái)，font聲明的值會(huì)覆蓋以上第二個(gè)聲明的font-weight值（譯注1[1]），這就會(huì)丟掉加粗聲明。簡(jiǎn)寫(xiě)屬性（如font）也是用類(lèi)似的方式處理。

你可能想知道，為什么這里沒(méi)有通用字體系列，因?yàn)樵?a href="http://m.supportcoffeeroasters.com" target="_self" title="昆明網(wǎng)頁(yè)設(shè)計(jì)">設(shè)計(jì)網(wǎng)頁(yè)時(shí)，通常都建議創(chuàng)作人員指定字體時(shí)要采用類(lèi)似Geneva, sans-serif；的形式（以防用戶(hù)瀏覽器不支持所指定的字體）。CSS 不要求“添加”通用字體系列，不過(guò)在這種情況下也沒(méi)有這個(gè)必要。如果用戶(hù)代理想要“抽取”計(jì)算環(huán)境中顯示某種元素所用的字體系列，就絕對(duì)能保證這種字體對(duì)瀏覽器一定可用。

如果所需的系統(tǒng)字體樣式不可用或者無(wú)法確定，用戶(hù)代理可以在一組近似的字體樣式中猜測(cè)。例如，可以這樣近似small-caption：取caption的字體樣式，再縮小字體的大小。如果無(wú)法做出這樣的猜測(cè)，用戶(hù)代理就應(yīng)當(dāng)使用一種“用戶(hù)代理默認(rèn)字體”。