精品无码一区二区在线,狠狠色色综合网站,无码国产精品一区二区免费式直播

主頁 > 知識(shí)庫 > 標(biāo)記語言——網(wǎng)頁應(yīng)用CSS樣式

標(biāo)記語言——網(wǎng)頁應(yīng)用CSS樣式

點(diǎn)擊這里返回腳本之家　HTML教程　欄目．想瀏覽CSS教程請(qǐng)點(diǎn)這里。
上文：標(biāo)記語言——精簡標(biāo)簽。 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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)用到公開版本上,讓我們?cè)賮砜纯磶追N方法. 方法B:外部樣式表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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" _fcksavedurl=""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ì)吧? 方法C:@import

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<style type="text/css">
<![CDATA[
@import "styles.css";
]]>
</style>
</head>

與方法B類似,使用@import能以相對(duì)路徑(像是上面的例子)或絕對(duì)路徑從外部文件導(dǎo)入CSS定義.
方法C與使用<link>標(biāo)簽有著相同優(yōu)點(diǎn),由于樣式表放在外部文檔中,修改并更新單一文檔就能改變整個(gè)網(wǎng)站,而且能簡單快速地完成.外部樣式表會(huì)被瀏覽器緩存下來,為導(dǎo)入相同樣式表的所有頁面節(jié)省下載時(shí)間. 捉迷藏
使用方法C的重大好處是:Netscape 4.X以下版本并不支持@import語法,因此會(huì)使被引用的CSS內(nèi)容"藏起來",這肯定是個(gè)好用的技巧,因?yàn)槲覀兡芤源司帉戇M(jìn)階CSS語法處理布局之類的設(shè)計(jì)細(xì)節(jié),讓能夠處理的最新瀏覽器顯示它們,同時(shí)也能讓老舊瀏覽器忽視這些語法.
Netscape 4.x的問題在于:它認(rèn)為它的CSS支持能力與真正支持的瀏覽器一樣好.因此,除了Netscape 4.x之外,我們都能讓瀏覽器自己決定是否顯示正確的效果.
這是以標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)站時(shí)的重點(diǎn),盡量把結(jié)構(gòu)化標(biāo)記代碼與顯示方式分開,并且為支持的瀏覽器提供布局細(xì)節(jié),其他樣式.老舊的瀏覽器則去他們能輕易讀取,顯示的結(jié)構(gòu)內(nèi)容,但不會(huì)處理為他們隱藏起來的進(jìn)階CSS規(guī)則. 打開樣式,關(guān)閉樣式
看看圖10-1和10-2,并且比較一下,這是我的個(gè)人網(wǎng)站使用完整CSS,接著關(guān)掉CSS的顯示效果(應(yīng)該十分接近老舊瀏覽器的顯示效果),不使用CSS時(shí)的結(jié)構(gòu)仍然十分明顯,所有人仍然容易閱讀,使用.如果我們沒有把顯示布局需要的CSS隱藏起來,那么舊版本瀏覽器的使用者或許就會(huì)拿到一團(tuán)難以閱讀的內(nèi)容.

圖10-1 我的個(gè)人網(wǎng)站,使用CSS

圖10-2 同一個(gè)頁面,拿掉CSS,古舊瀏覽器可能把它顯示成這樣結(jié)合方法B和方法C應(yīng)用多重樣式表
有些時(shí)候,在一份文檔中引入許多分樣式表可能很有用,舉例來說,可以將所有布局規(guī)則放到一個(gè)文檔中,并且將字體設(shè)定放到另一個(gè)文檔中,對(duì)龐大,復(fù)雜的設(shè)計(jì)來說,這能使維護(hù)大量規(guī)則的工作變得更簡單. 變色龍效果
在制作Fast Company雜志的網(wǎng)站時(shí),我希望每個(gè)月更改網(wǎng)站的配色,以便配合當(dāng)期雜志的封面圖片,為了簡化定期修改工作,因此我把所有與顏色相關(guān)的CSS規(guī)則集中到一個(gè)文檔里,并且把不會(huì)每個(gè)月修改的其他規(guī)則放進(jìn)另一個(gè)文檔中.
每個(gè)月就能更簡單,快速的蓋好所有顏色,不必在構(gòu)成設(shè)計(jì)的其他幾百條規(guī)則里慢慢找需要改動(dòng)的內(nèi)容.只要改好這個(gè)文檔,整個(gè)網(wǎng)站的色彩就會(huì)立刻改變. 如何辦到
要結(jié)合方法B與方法C引入多重樣式表,做法是在頁面的<head>里使用<link>標(biāo)簽引用CSS主體文檔,與方法B示范相同,鏈接到styles.css.
而styles.css的內(nèi)容只簡單包含了幾條@import規(guī)則,引入所需要的其他CSS文件.
舉例來說,如果想引入三份樣式表,一份處理布局,一份定義字體,一份定義色彩,那么styles.css的內(nèi)容則可能如下所示:

/老舊的瀏覽器不會(huì)解讀這些導(dǎo)入規(guī)則 /
@import url("layout.css");
@import url("fonts.css");
@import url("colors.css");

如此一來,就能在整個(gè)網(wǎng)站使用相同的<link>標(biāo)簽,只引用styles.css文件,這個(gè)文檔能以@import規(guī)則繼續(xù)導(dǎo)入其他樣式表,新樣式表只要加到這個(gè)文檔里,就能對(duì)整個(gè)網(wǎng)站發(fā)揮作用.
這讓更新,替換CSS變得非常簡單,舉例來說,如果在路上你突然想把CSS切成4個(gè)文件,你只需要改動(dòng)這個(gè)文檔的@import規(guī)則,而不必修改所有XHTML標(biāo)記源代碼. Lo-Fi和Hi-Fi樣式
以方法C的@import規(guī)則對(duì)老舊瀏覽器隱藏CSS時(shí),還有另一個(gè)技巧可用.那就是使用CSS的層疊效應(yīng),以方法A或方法B提供老舊,最新瀏覽器都支持的Lo-Fi效果,接著以@import為其他支持的瀏覽器提供進(jìn)階效果.
老舊的瀏覽器只會(huì)拿到他們能支持的內(nèi)容,而新一點(diǎn)的瀏覽器則會(huì)拿到所有想使用的樣式.
接著我們看看這個(gè)技巧的代碼長什么樣:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<link rel="stylesheet" type="text/css" href="lofi.css" _fcksavedurl=""lofi.css"" />
<style type="text/css">
@import "hifi.css";
</style>
</head>

此處lofi.css應(yīng)該包含基本的CSS規(guī)則,像是鏈接色彩,字體大小;而hifi.css則是包含進(jìn)階規(guī)則,像是布局,定位,背景圖片等.
我們能同時(shí)傳送Lo-Fi和Hi-Fi版本的樣式,完全不必編寫script或者在服務(wù)器端以任何方式辨認(rèn)瀏覽器版本. 順序很重要
在標(biāo)記源代碼內(nèi)指定<link>與<style>標(biāo)簽的順序很重要,CSS的Cascade(層疊)指的正是規(guī)則的優(yōu)先權(quán),這是根據(jù)出現(xiàn)順序決定的.
舉例來說,由于大多數(shù)最新的瀏覽器都同時(shí)支持兩種做法,因此會(huì)下載所有樣式表并套用里面的所有樣式,這時(shí),在hifi.css里的樣式規(guī)則會(huì)覆蓋lofi.css對(duì)相同標(biāo)簽指定的樣式,理由是什么?因?yàn)闃?biāo)記源碼里,hifi.css出現(xiàn)在lofi.css之后.
老舊瀏覽器會(huì)忽略hifi.css,因?yàn)椴恢С諤import規(guī)則,因此他們只會(huì)使用lofi.css定義的樣式. 擁抱層疊特性
以各種方式發(fā)揮CSS層疊特性帶來的好處,舉個(gè)例子,假設(shè)你整個(gè)網(wǎng)站都共用一個(gè)外部CSS進(jìn)行布局,定位,設(shè)定字體,色彩等,這時(shí)你應(yīng)該會(huì)在每個(gè)頁面以方法@import這個(gè)樣式表,為老舊瀏覽器隱藏這些規(guī)則.
如果網(wǎng)站上有一個(gè)頁面想共享布局和定位設(shè)定,但是需要調(diào)整字體或顏色.在(與網(wǎng)站上其他頁面不同的)這個(gè)頁面里,仍然能引入CSS主體文檔,在完成引用之后,我們緊接著引用第二個(gè)為這個(gè)頁面定義好特殊樣式的CSS文檔.任何在第二個(gè)CSS文件中的規(guī)則都會(huì)被優(yōu)先采用,覆蓋第一個(gè)CSS文件為相同標(biāo)簽所指定的樣式規(guī)則.
讓我們看看示例,master.css包含了整個(gè)網(wǎng)站結(jié)構(gòu),字體之類的CSS規(guī)則,而在custom.css中只在特定頁面引用,覆蓋幾個(gè)特殊標(biāo)簽的樣式設(shè)定.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<style type="text/css">
@import "master.css";
@import "custom.css";
</style>
</head>

由于custom.css在標(biāo)記源代碼中是第二個(gè)出現(xiàn)的,因此它為相同標(biāo)簽指定的樣式會(huì)覆蓋master.css之內(nèi)制定的內(nèi)容.
舉例來說,假設(shè)在main.css之內(nèi)我們要求<h1>標(biāo)簽使用紅色serif字體,而<h2>則使用藍(lán)色serif字體.

h1 {
font-family: Georgia, serif;
color: red;
}
h2 {
font-family: Georgia, serif;
color: blue;
}

在某個(gè)特定頁面,我們只想改變<h1>標(biāo)簽的樣式設(shè)定,沿用<h2>的樣式.那么在custom.css中,我們就只需要為<h1>聲明新樣式.

h1 {
font-family: Verdana, sans-serif;
color: orange;
}

這個(gè)聲明將會(huì)覆蓋master.css內(nèi)的聲明(因?yàn)閏ustom.css在它后面再引入).如果頁面先引入master.css之后再引入custom.css的話,<h1>標(biāo)簽會(huì)使用橘色Verdana字體,而<h2>仍是藍(lán)色serif字體.因?yàn)楹竺孢@個(gè)在master.css里的聲明沒有被custom.css覆蓋.
CSS的層疊功能是個(gè)共享通用樣式的好工具,讓你能夠只覆蓋需要修改的規(guī)則.

方法D:行內(nèi)樣式

<h1 style="font-family: Georgia, serif; color: orange;">This is a Title</h1>

這是我們所接觸的第四種CSS應(yīng)用方法--行內(nèi)樣式,幾乎任何標(biāo)簽都能加上style屬性,讓你能直接對(duì)標(biāo)簽應(yīng)用CSS樣式規(guī)則,與上面的例子一樣.
由于行內(nèi)樣式是層疊最底層,因此他們會(huì)覆蓋所有外部樣式的聲明,以及聲明在<head>的<style>標(biāo)簽內(nèi)的規(guī)則.
這是個(gè)在頁面各處加上樣式的簡單做法,但是使用它必須付出代價(jià). 樣式綁死在標(biāo)簽上
如果在為頁面制定樣式的時(shí)候太依賴方法D,那么就沒有做到把內(nèi)容和展示方式分離,回頭修改的時(shí)候必須深入標(biāo)記源代碼,把CSS放到分離得到文件中,維護(hù)起來就簡單很多.
濫用方法D與使用<font>之類的顯示效果標(biāo)簽污染標(biāo)記源代碼沒什么差別,這些設(shè)計(jì)細(xì)節(jié)向來應(yīng)該放在其他地方. 小心使用
在現(xiàn)實(shí)情況中,當(dāng)然有時(shí)用行內(nèi)樣式的機(jī)會(huì),在需要為頁面加上樣式,但是無法存取外部文件,或是不能修改<head>的時(shí)候,它能救你一命,或者暫時(shí)套用樣式,不打算與其它標(biāo)簽共用的時(shí)候也會(huì)用到.
舉例來說,如果網(wǎng)站上有個(gè)預(yù)告慈善義賣的頁面,稍后就會(huì)取下,而你想為這個(gè)頁面設(shè)計(jì)一套獨(dú)特的樣式,那么或許就將這些樣式規(guī)則內(nèi)嵌到標(biāo)簽里,而不把他們加到永久樣式表里.
這就動(dòng)手吧,不過要注意這些樣式無法輕易更改,或是橫跨頁面讓整個(gè)網(wǎng)站使用.

上一頁12 3 下一頁閱讀全文

標(biāo)簽：山南賀州湘潭懷化通遼湖北黃山煙臺(tái)

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《標(biāo)記語言——網(wǎng)頁應(yīng)用CSS樣式》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

標(biāo)記語言——網(wǎng)頁應(yīng)用CSS樣式

QQ咨詢

電話咨詢