|
上文：Chapter 9 精簡標(biāo)簽
標(biāo)準(zhǔn)化設(shè)計(jì)解決方案 - 標(biāo)記語言和樣式手冊
Web Standards Solutions The Markup and Style Handbook
Part 2: Simplebits Of Style 簡短精悍的樣式
Chapter 10 應(yīng)用CSS
在第一部分主要的焦點(diǎn)放在標(biāo)記語法的例子上，也探討了如何在標(biāo)簽上應(yīng)用CSS進(jìn)行設(shè)計(jì),指定樣式細(xì)節(jié).在第二章,我們將討論幾種把CSS應(yīng)用到一份文檔,網(wǎng)站,甚至是單一標(biāo)簽上的做法.除此之外也會(huì)討論怎么對(duì)早先版本瀏覽器隱藏CSS內(nèi)容,讓我們能在使用進(jìn)階技巧時(shí)不會(huì)影響到能讓所有瀏覽器,設(shè)備讀取的標(biāo)記結(jié)構(gòu).
在章節(jié)最后的"技巧延伸"單元,會(huì)介紹不必編寫script就能切換字體,色彩,做出多種主題的做法 -- 替換樣式表.
如何將CSS應(yīng)用到文件上?
現(xiàn)在要來探討四種把CSS應(yīng)用到文檔上的不同做法,每個(gè)方法都有自己的優(yōu)缺點(diǎn),根據(jù)情況而定,四種方法都有可能是最佳選擇.這邊示范的每個(gè)方法都是用了合法的XHTML 1.0 Transitional 語法結(jié)構(gòu),<html>標(biāo)簽以及<head>配置.
讓我們從方法A開始吧.
方法A:<style>標(biāo)簽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<html xmlns="<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<style type="text/css">
<![CDATA[
... CSS聲明放在這邊 ...
]]>
</style>
</head>
這個(gè)做法也成為內(nèi)嵌樣式表,讓你能將所有CSS聲明直接寫在(X)HTML文件內(nèi),<style>標(biāo)簽位于頁面<head>之內(nèi),可以放進(jìn)任何你需要的樣式.
為type屬性指定的 text/css 能確保瀏覽器理解我們使用的樣式語言,是不能省略的,我們也使用W3C建議的CDATA注解語法,對(duì)無法處理樣式規(guī)則的瀏覽器隱藏這些內(nèi)容(http://www.w3.org/TR/xhtml1/#h-4.8).
部分理解
使用方法A的重大缺點(diǎn)之一是:有些老舊瀏覽器(特別是Internet Expleror 4.X 和 Netscape 4.X)會(huì)盡全力顯示<style>標(biāo)簽內(nèi)指定的CSS效果,如果你用了任何只有最新瀏覽器支持的進(jìn)階CSS布局,定位規(guī)則,那么就可能造成問題.如果把復(fù)雜的CSS規(guī)則放在<style>標(biāo)簽中,就可能讓舊瀏覽器的使用者得到一片混亂,難以閱讀的排版結(jié)果.
無法緩存
另一個(gè)內(nèi)嵌樣式表的缺點(diǎn)是:放在頁面內(nèi),就必須在每次讀取頁面時(shí)一并下載,相對(duì)之下,稍后提供的其他方法能夠讓樣式表只需下載一次,往后直接使用瀏覽器的緩存.
修改多次
由于內(nèi)嵌式樣式表存儲(chǔ)在XHTML頁面內(nèi),如果在網(wǎng)站的許多頁面使用相同的樣式,就代表這些樣式會(huì)有許多相同的復(fù)本,如果需要變更這些樣式的話,就必須修改所有使用了相同樣式的頁面,記住!一次修改許多文檔會(huì)是件苦差事.
方便開發(fā)
提到好處,我發(fā)現(xiàn)最初開始編寫,測試CSS時(shí),以方法A把所有規(guī)則寫在我測試用的頁面里十分方便,這讓我能把標(biāo)記,樣式放在同一個(gè)文檔里,方便經(jīng)常修改,在測試完成后,我會(huì)以不同的方法將CSS應(yīng)用到公開版本上,讓我們再來看看幾種方法.
方法B:外部樣式表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<html xmlns="<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
方法B示范了連接外部樣式表的做法:把所有CSS聲明內(nèi)容放在單獨(dú)文檔中,接著在(X)HTML的<head>內(nèi)使用<link>標(biāo)簽引用它的內(nèi)容.
我們以href屬性指定文檔的位置,這個(gè)屬性可以是相對(duì)路徑(像是上面的例子),或者是絕對(duì)路徑(填入樣式表完整的"http://"位置).同時(shí)留意<link>是單一標(biāo)簽,或是空標(biāo)簽,必須在最后以 / 自我閉合.
分離文檔 = 方便維護(hù)
把所有的CSS規(guī)則放在與標(biāo)記內(nèi)容不同的文檔中有個(gè)明顯的優(yōu)點(diǎn):也就是任何對(duì)整個(gè)網(wǎng)站進(jìn)行的樣式變動(dòng)都能夠修改這個(gè)檔案完成,而不必像使用方法A的時(shí)候,為每個(gè)網(wǎng)頁重復(fù)修改CSS聲明.
當(dāng)然,這對(duì)大規(guī)模網(wǎng)站來說是十分關(guān)鍵的,上百份,甚至上千份頁面都能共享單一文檔內(nèi)的相同樣式.
下載一次
鏈接外部樣式表的額外優(yōu)點(diǎn)之一是:這個(gè)文檔通常只會(huì)被下載一次,之后瀏覽器就會(huì)使用緩存,能在重復(fù)瀏覽相同頁面或是其他引用了相同樣式表的頁面時(shí),節(jié)省需要的下載時(shí)間.
仍然無法完全隱藏
與方法A一樣,方法B仍然可有可能被老舊,只支持部分CSS功能的瀏覽器解讀,任何為最新瀏覽器設(shè)計(jì)的樣式都有可能在不支持的瀏覽器中造成大混亂.
嗯...這是我第二次提到這個(gè)問題了,下一個(gè)方法必須解決它,對(duì)吧?
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 標(biāo)記語言——應(yīng)用CSS [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 標(biāo)記語言——應(yīng)用CSS [1]
第 2 頁 
