CSS 從入門到放棄系列：CSS的引入方式

Renshuo發表於2018-12-30
CSS

css的四種引入方式

內聯方式(行間樣式)

<div style="width:100px;height: 100px; background-color: red"></div>

這通常是個很糟糕的書寫方式，它只能改變當前標籤的樣式，如果想要多個<div>擁有相同的樣式，你不得不重複地為每個<div>新增相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的程式碼。很顯然，內聯方式引入 CSS 程式碼會導致 HTML 程式碼變得冗長，且使得網頁難以維護。

嵌入方式

<head>
     <style>
     .embedded {
        width: 50px;
        height: 50px;
        background-color: black
    }
    </style>
</head>
<div class="embedded"></div>

嵌入方式的 CSS 只對當前的網頁有效。因為 CSS 程式碼是在 HTML 檔案中，所以會使得程式碼比較集中，當我們寫模板網頁時這通常比較有利。因為檢視模板程式碼的人可以一目瞭然地檢視 HTML 結構和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效，所以當多個頁面需要引入相同的 CSS 程式碼時，這樣寫會導致程式碼冗餘，也不利於維護。

連結方式

<head> 
    <link rel="stylesheet" href="reference.css">
</head>
<div class="link"></div>

這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 程式碼只存在於單獨的 CSS 檔案中，所以具有良好的可維護性。並且所有的 CSS 程式碼只存在於 CSS 檔案中，CSS 檔案會在第一次載入時引入，以後切換頁面時只需載入 HTML 檔案即可。

匯入方式

<head>
     <style>
          @import url(import.css);
    </style>
</head>
<div class="import"></div>

當 HTML 檔案被載入時，link 引用的檔案會同時被載入，而 @import 引用的檔案則會等頁面全部下載完畢再被載入；所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。
注意：

  • @import必須是在<style>標籤內，或者一個CSS檔案中，並且是要在樣式定義之前使用。
  • @import是 CSS2.1 才出現的概念，所以如果瀏覽器版本較低，無法正確匯入外部樣式檔案；
  • IE使用@import無法引入超過35條的樣式表。

  • 3種方式都有效(當使用url(url)的方式時，包住路徑的引號可有可無；當直接使用url時，包住路徑的引號必須保留。

    1. @import url(“import.css”);
    2. @import url(import.css);
    3. @import “import.css”;

下載原始碼

相關文章