|
結(jié)合方法B和方法C應(yīng)用多重樣式表
有些時候,在一份文檔中引入許多分樣式表可能很有用,舉例來說,可以將所有布局規(guī)則放到一個文檔中,并且將字體設(shè)定放到另一個文檔中,對龐大,復(fù)雜的設(shè)計來說,這能使維護(hù)大量規(guī)則的工作變得更簡單.
變色龍效果
在制作Fast Company雜志的網(wǎng)站時,我希望每個月更改網(wǎng)站的配色,以便配合當(dāng)期雜志的封面圖片,為了簡化定期修改工作,因此我把所有與顏色相關(guān)的CSS規(guī)則集中到一個文檔里,并且把不會每個月修改的其他規(guī)則放進(jìn)另一個文檔中.
每個月就能更簡單,快速的蓋好所有顏色,不必在構(gòu)成設(shè)計的其他幾百條規(guī)則里慢慢找需要改動的內(nèi)容.只要改好這個文檔,整個網(wǎng)站的色彩就會立刻改變.
如何辦到
要結(jié)合方法B與方法C引入多重樣式表,做法是在頁面的<head>里使用<link>標(biāo)簽引用CSS主體文檔,與方法B示范相同,鏈接到styles.css.
而styles.css的內(nèi)容只簡單包含了幾條@import規(guī)則,引入所需要的其他CSS文件.
舉例來說,如果想引入三份樣式表,一份處理布局,一份定義字體,一份定義色彩,那么styles.css的內(nèi)容則可能如下所示:
/* 老舊的瀏覽器不會解讀這些導(dǎo)入規(guī)則 */
@import url("layout.css");
@import url("fonts.css");
@import url("colors.css");
如此一來,就能在整個網(wǎng)站使用相同的<link>標(biāo)簽,只引用styles.css文件,這個文檔能以@import規(guī)則繼續(xù)導(dǎo)入其他樣式表,新樣式表只要加到這個文檔里,就能對整個網(wǎng)站發(fā)揮作用.
這讓更新,替換CSS變得非常簡單,舉例來說,如果在路上你突然想把CSS切成4個文件,你只需要改動這個文檔的@import規(guī)則,而不必修改所有XHTML標(biāo)記源代碼.
Lo-Fi和Hi-Fi樣式
以方法C的@import規(guī)則對老舊瀏覽器隱藏CSS時,還有另一個技巧可用.那就是使用CSS的層疊效應(yīng),以方法A或方法B提供老舊,最新瀏覽器都支持的Lo-Fi效果,接著以@import為其他支持的瀏覽器提供進(jìn)階效果.
老舊的瀏覽器只會拿到他們能支持的內(nèi)容,而新一點的瀏覽器則會拿到所有想使用的樣式.
接著我們看看這個技巧的代碼長什么樣:
<!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="lofi.css" />
<style type="text/css">
@import "hifi.css";
</style>
</head>
此處lofi.css應(yīng)該包含基本的CSS規(guī)則,像是鏈接色彩,字體大小;而hifi.css則是包含進(jìn)階規(guī)則,像是布局,定位,背景圖片等.
我們能同時傳送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ù)最新的瀏覽器都同時支持兩種做法,因此會下載所有樣式表并套用里面的所有樣式,這時,在hifi.css里的樣式規(guī)則會覆蓋lofi.css對相同標(biāo)簽指定的樣式,理由是什么?因為標(biāo)記源碼里,hifi.css出現(xiàn)在lofi.css之后.
老舊瀏覽器會忽略hifi.css,因為不支持@import規(guī)則,因此他們只會使用lofi.css定義的樣式.
擁抱層疊特性
以各種方式發(fā)揮CSS層疊特性帶來的好處,舉個例子,假設(shè)你整個網(wǎng)站都共用一個外部CSS進(jìn)行布局,定位,設(shè)定字體,色彩等,這時你應(yīng)該會在每個頁面以方法@import這個樣式表,為老舊瀏覽器隱藏這些規(guī)則.
如果網(wǎng)站上有一個頁面想共享布局和定位設(shè)定,但是需要調(diào)整字體或顏色.在(與網(wǎng)站上其他頁面不同的)這個頁面里,仍然能引入CSS主體文檔,在完成引用之后,我們緊接著引用第二個為這個頁面定義好特殊樣式的CSS文檔.任何在第二個CSS文件中的規(guī)則都會被優(yōu)先采用,覆蓋第一個CSS文件為相同標(biāo)簽所指定的樣式規(guī)則.
讓我們看看示例,master.css包含了整個網(wǎng)站結(jié)構(gòu),字體之類的CSS規(guī)則,而在custom.css中只在特定頁面引用,覆蓋幾個特殊標(biāo)簽的樣式設(shè)定.
<!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">
@import "master.css";
@import "custom.css";
</style>
</head>
由于custom.css在標(biāo)記源代碼中是第二個出現(xiàn)的,因此它為相同標(biāo)簽指定的樣式會覆蓋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;
}
在某個特定頁面,我們只想改變<h1>標(biāo)簽的樣式設(shè)定,沿用<h2>的樣式.那么在custom.css中,我們就只需要為<h1>聲明新樣式.
h1 {
font-family: Verdana, sans-serif;
color: orange;
}
這個聲明將會覆蓋master.css內(nèi)的聲明(因為custom.css在它后面再引入).如果頁面先引入master.css之后再引入custom.css的話,<h1>標(biāo)簽會使用橘色Verdana字體,而<h2>仍是藍(lán)色serif字體.因為后面這個在master.css里的聲明沒有被custom.css覆蓋.
CSS的層疊功能是個共享通用樣式的好工具,讓你能夠只覆蓋需要修改的規(guī)則.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 標(biāo)記語言——應(yīng)用CSS [2] 下一頁 標(biāo)記語言——應(yīng)用CSS [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 標(biāo)記語言——應(yīng)用CSS [3]
