CSS系列：CSS的引入方式

時間 2019-12-11

標籤 css 系列引入方式欄目 CSS 简体版

原文原文鏈接

css的四種引入方式

內聯方式(行間樣式)

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

這一般是個很糟糕的書寫方式，它只能改變當前標籤的樣式，若是想要多個<div>擁有相同的樣式，你不得不重複地爲每一個<div>添加相同的樣式，若是想要修改一種樣式，又不得不修改全部的 style 中的代碼。很顯然，內聯方式引入 CSS 代碼會致使 HTML 代碼變得冗長，且使得網頁難以維護。css

嵌入方式

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

嵌入方式的 CSS 只對當前的網頁有效。由於 CSS 代碼是在 HTML 文件中，因此會使得代碼比較集中，當咱們寫模板網頁時這一般比較有利。由於查看模板代碼的人能夠一目瞭然地查看 HTML 結構和 CSS 樣式。由於嵌入的 CSS 只對當前頁面有效，因此當多個頁面須要引入相同的 CSS 代碼時，這樣寫會致使代碼冗餘，也不利於維護。html

連接方式

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

這是最多見的也是最推薦的引入 CSS 的方式。使用這種方式，全部的 CSS 代碼只存在於單獨的 CSS 文件中，因此具備良好的可維護性。而且全部的 CSS 代碼只存在於 CSS 文件中，CSS 文件會在第一次加載時引入，之後切換頁面時只需加載 HTML 文件便可。git

導入方式

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

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

@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";