Div+Css教程模板無(wú)憂>建站教程>Div+Css教程>Web標(biāo)準(zhǔn)教程>

使用CSS和字體控制屬性建立優(yōu)秀網(wǎng)站_Web標(biāo)準(zhǔn)教程

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

過(guò)去，修改一個(gè)網(wǎng)頁(yè)的字樣通常是指把相關(guān)的文本嵌套到<tag>標(biāo)簽中，并用屬性來(lái)控制它的顏色、大小和式樣。現(xiàn)在，人們已不再認(rèn)同這種方法，因?yàn)樗鼘⒁曈X(jué)式樣和實(shí)際的內(nèi)容標(biāo)記混合起來(lái)。如今我們推薦使用將字樣式樣信息集中到一個(gè)叫做層疊式樣表（CSS）的單獨(dú)文件中的方法。

將字體信息集中到一個(gè)CSS文件中具有許多明顯的優(yōu)點(diǎn)：它易于操作，不需要任何特殊的軟件，并且能夠在大多數(shù)主流瀏覽器中統(tǒng)一運(yùn)行。更重要的是，由于信息集中到一個(gè)單獨(dú)的位置，修改網(wǎng)頁(yè)的視覺(jué)外觀相當(dāng)方便：你只需簡(jiǎn)單修改主式樣表的字體或顏色，相關(guān)改變就會(huì)立即“層疊”到你的整個(gè)網(wǎng)站中。

聽(tīng)起來(lái)很有趣，是嗎？那么請(qǐng)繼續(xù)閱讀下去，因?yàn)槲覍⒃诒疚闹刑接慍SS font屬性，它旨在替代舊有的<font>元素，如果你需要對(duì)HTML頁(yè)面的字樣、顏色、文字大小和間距進(jìn)行集中控制，它是一個(gè)可利用的強(qiáng)大工具。

控制字樣

字體屬性定義了對(duì)應(yīng)元素所使用的字體。這個(gè)屬性通常包含一個(gè)由逗號(hào)隔開(kāi)的字體名稱(chēng)列表；并可以用引號(hào)來(lái)封套那些包含空白的名稱(chēng)。應(yīng)用時(shí)，瀏覽器將使用它在列表中找到的第一個(gè)字體，或如果沒(méi)有找到有效字體，就使用默認(rèn)的標(biāo)準(zhǔn)瀏覽器字體。

列表A中是這個(gè)指示的一個(gè)應(yīng)用實(shí)例：

列表A

<html>

<head>

.quote {

font-family: "Bookman Old Style", "Verdana";

}

</style>

</head>

<body>

<div class="quote">To be or not to be, that is the question.</div>

</body>

</html>

圖A顯示輸出結(jié)果。

圖A

Font_family

記住重要的一點(diǎn)，這個(gè)指示十分依賴(lài)于客戶(hù)端系統(tǒng)所顯示的字體；在上面的例子中，如果系統(tǒng)沒(méi)有顯示Bookman Old Style和Verdana字體，就將使用默認(rèn)的瀏覽器字體。要避免這個(gè)問(wèn)題，最好是在特殊字體名稱(chēng)列表后增加一個(gè)通用字體名稱(chēng)列表，如serif、sans-serif或cursive；這告訴瀏覽器使用那個(gè)字體類(lèi)別中最相匹配的字體。列表B是上面實(shí)例的一個(gè)修訂版本，它正好解決上述問(wèn)題。

列表B