CSS文件是鏈接還是應(yīng)該嵌入？_Div+CSS教程

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

　　
　　CSS樣式表文件是使用link來調(diào)用單獨的文件好呢，還是直接用<style>......</style>嵌入頁面內(nèi)部好呢？或者說究竟這兩種方法該怎么使用呢？

　　w3cn的阿捷說，在以前，我們通常采用2種方法使用樣式表：
　　頁面內(nèi)嵌法：就是將樣式表直接寫在頁面代碼的head區(qū)。類似這樣：

示例代碼 [www.hl5o.cn]

　　外部調(diào)用法：將樣式表寫在一個獨立的.css文件中，然后在頁面head區(qū)用以下的代碼調(diào)用。

示例代碼 [www.hl5o.cn]

　　在符合web標(biāo)準(zhǔn)的設(shè)計中，我們使用外部調(diào)用法，好處不言而喻，你可以不修改頁面只修改.css文件而改變頁面的樣式。假如所有頁面都調(diào)用同一個樣式表文件，那么改一個樣式表文件，可以改變所有文件的樣式。

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

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

　　有一次筆者打開Macromedia.com的時候，碰到公司網(wǎng)絡(luò)不暢，也許是因為有很多人在下載東西吧。結(jié)果頁面顯示出的樣子完全是沒有樣式表的樣子，熟悉的布局看不到了，所有內(nèi)容從上往下排列，就像用手機(jī)在瀏覽網(wǎng)站。雖然內(nèi)容還能全部看到，但我不得不花些時間去熟悉這種新的布局，瀏覽的時候也有一種不順暢的感覺。

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

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

　　總結(jié)出如下的經(jīng)驗：

示例代碼 [www.hl5o.cn]

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