詳談 CSS樣式表使用：鏈接/嵌入

更新時(shí)間：2006年09月25日 00:00:00 作者：

在阿捷的w3cn中，他說(shuō)：

引用內(nèi)容
在以前，我們通常采用2種方法使用樣式表：
頁(yè)面內(nèi)嵌法：就是將樣式表直接寫在頁(yè)面代碼的head區(qū)。類似這樣：
<style type="text/css">  </style>
外部調(diào)用法：將樣式表寫在一個(gè)獨(dú)立的.css文件中，然后在頁(yè)面head區(qū)用類似以下代碼調(diào)用。
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
在符合web標(biāo)準(zhǔn)的設(shè)計(jì)中，我們使用外部調(diào)用法，好處不言而喻，你可以不修改頁(yè)面只修改.css文件而改變頁(yè)面的樣式。如果所有頁(yè)面都調(diào)用同一個(gè)樣式表文件，那么改一個(gè)樣式表文件，可以改變所有文件的樣式。

可見(jiàn)阿捷是十分推崇用<link>的。補(bǔ)充一下阿捷的話，使用<link>的好處不單單是修改起樣式表很方便，而且會(huì)使用戶的瀏覽速度加快。用戶第一次打開鏈接了樣式表的頁(yè)面后，樣式表會(huì)自動(dòng)下載到本地緩存當(dāng)中。當(dāng)用戶再打開另一個(gè)頁(yè)面，而這個(gè)頁(yè)面如果也鏈接了同樣的樣式表的時(shí)候，會(huì)從緩存中讀取相關(guān)的文件，這樣就會(huì)加快瀏覽的速度。

但是我也碰到過(guò)這種情況：有時(shí)碰到網(wǎng)絡(luò)不順暢的情況，頁(yè)面打開以后，鏈接的樣式表沒(méi)有加載成功。這種情況造成的后果，不僅僅是頁(yè)面文字的顏色、大小等等樣式無(wú)法顯示，更麻煩的是很可能造成整個(gè)頁(yè)面的布局亂了套！

比如有一次我打開Macromedia.com的時(shí)候，碰到公司網(wǎng)絡(luò)不暢，也許是因?yàn)橛泻芏嗳嗽赽t吧。。。結(jié)果頁(yè)面顯示出的樣子完全是沒(méi)有樣式表的樣子，熟悉的布局看不到了，所有內(nèi)容從上往下排列，就像用手機(jī)在瀏覽網(wǎng)站。雖然內(nèi)容還能全部看到，但我不得不花些時(shí)間去熟悉這種新的布局，瀏覽的時(shí)候也有一種不順暢的感覺(jué)。

在做金山在線首頁(yè)的時(shí)候（上一版，現(xiàn)在已經(jīng)看不到了），我就把所有樣式嵌入到了頁(yè)面的<head>區(qū)。首頁(yè)是一個(gè)網(wǎng)站流覽量最大的頁(yè)面，必須保證高的可靠性。而且只對(duì)首頁(yè)樣式表采取嵌入的方式，其他頁(yè)面還是用<link>，修改樣式時(shí)不會(huì)增加太多的工作量。

周末做amaoagou的首頁(yè)，我對(duì)樣式更進(jìn)一步進(jìn)行了規(guī)劃：把與布局有關(guān)的樣式：#head、#left之類都嵌入到頁(yè)面內(nèi)部，其他樣式采用鏈接的方式。

總結(jié)一下：

* 方法一：首頁(yè)完全采用嵌入的方法，其他頁(yè)面均采用鏈接的方式。優(yōu)點(diǎn)：這樣可以保證首頁(yè)在網(wǎng)絡(luò)狀況不好的情況下仍然能夠正確顯示。缺點(diǎn)：修改樣式時(shí)需要修改外部樣式表和首頁(yè)內(nèi)嵌的樣式表兩個(gè)地方。
* 方法二：將負(fù)責(zé)布局的樣式和其他樣式分開寫。首頁(yè)嵌入布局的樣式，鏈接其他樣式；其他頁(yè)面對(duì)于兩套樣式均采用鏈接方式。優(yōu)點(diǎn)：修改樣式時(shí)，比第一種工作量小。網(wǎng)絡(luò)狀況不好時(shí)，首頁(yè)的外觀不能完全保證，但至少布局不會(huì)亂。
* 如果制作的不是符合標(biāo)準(zhǔn)的頁(yè)面，比如公司產(chǎn)品的一個(gè)小專題，領(lǐng)導(dǎo)要求用table制作以確保專題上線速度。對(duì)于各個(gè)頁(yè)面都會(huì)用到的樣式：鏈接。對(duì)于只有這一個(gè)頁(yè)面會(huì)用到，但會(huì)用到很多次的樣式：嵌入<head>。對(duì)于只有這一個(gè)頁(yè)面會(huì)用到且只使用一次的樣式：嵌入<head>或者干脆直接寫style="..."得了。

您可能感興趣的文章: