匯入式樣式表CSS與連結式樣式表CSS的區別

來源:互聯網
上載者:User
<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的。


相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.