導入式樣式表CSS與連結式樣式表CSS的差別
- 高洛峰原創
- 2016-12-16 15:37:132503瀏覽
<span style="font-family:Arial;"><!-- 链接外部样式：也就是在与<head>与</head>标记之间加入一个<link>标记。 --> <head> <link href=”style.css” rel=”stylesheet” type=”text/css” /> </head> <!-- 导入外部样式：在内部样式表的<style></style>标记之间导入一个外部样式表，导入时用@import。 --> <style type="text/css"> @import "CssStyle.css"; </style></span>
因為我總是分不清楚，趁還有點時間就來看看了
首先，讓我們區別一下什麼是鏈接外部樣式和導入外部樣式：
我們知道，這兩種引用外部樣式的方式作用幾乎是一樣的，都是將獨立的CSS樣式文件引用到網頁文件中來，但二者還是有一些細微的的差別的（因為設計都不會無聊到搞出兩個完全一樣的東西來），以下就根據我所了解到的兩個面向進行探討：
1、使用link連結的css是客戶端瀏覽你的網頁時先將外部的CSS檔案載入到網頁當中，然後再進行編譯顯示，所以這種情況下顯示出來的網頁跟我們預期的效果一樣，即使網速再慢也是一樣的效果。而使用@import導入的CSS就不同了，客戶端在瀏覽網頁時是先將html的結構呈現出來，再把外部的CSS文件加載到網頁當中，當然最終的效果也是跟前者是一樣的，只是當網速較慢時會出現先顯示沒有CSS統一佈局時的html網頁，這樣就會給閱讀者很不好的感覺。這也是現在大部分網站的CSS都採用連結方式的最主要原因；
2、導入樣式可以避免過多頁面指向一個css檔。當網站中使用同一個CSS檔案的頁面不是非常多時，這兩種方式在效果方面幾乎是沒有不同的，但網站的頁面數達到一定程度時（比如新浪等門戶），如果採用連結的方式可能就會使得由於多個頁面調用同一個CSS檔案而造成速度下降，但是一般頁面能達到這種程度的網站也會有資本用最好的硬碟，所以這方面的因素也不用怎麼擔心。
綜合以上兩方面的因素，我們可以發現，現在大多數的網站還是比較喜歡使用連結的方式引用外部CSS的。
更多導入式樣式表CSS與連結式樣式表CSS的區別相關文章請關注PHP中文網！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS的四種引入方式下一篇：CSS的四種引入方式