1.CSS的引入方式

CSS一共有四種引入方式，內聯樣式、內部樣式表、外部樣式表和@import引入。

1.1 內聯樣式

使用style屬性引入樣式。

<p style="color:red">123</p>

缺點：HTML頁面不純淨，檔案體積大，不利於後期維護。

1.2 內部樣式表

在style標籤中寫CSS程式碼。style標籤一般放在head中。

  <style>
    a{
      text-decoration: none;
      color: black;
      display: inline-block;
    }
  </style>
<a href="#">百度一下</a>
 

缺點：在頁面中編寫CSS程式碼，不利於CSS程式碼複用，也會增加檔案體積，不利於後期維護。

1.3 外部樣式表

使用link標籤引入CSS檔案。link標籤一般放在head中。

<link rel="stylesheet" href="css/test.css">

優點：實現了HTML程式碼和CSS程式碼的完全分離，使得前期製作和後期維護都很方便。

1.4 @import引入

在style標籤中使用@import url('css檔案')引入CSS檔案。

<style>
  @import "css/test.css";
  /*  或者使用：*/
  @import url('css/test.css');
</style>
 

@import引入的CSS樣式，在HTML初始化時，會被匯入到HTML或者CSS檔案中，成為檔案中的一部分，類似第二種內嵌樣式。

這種方式和外部樣式表一樣匯入CSS檔案，但效率不如外部樣式表，不建議使用。

2.CSS的優先順序

CSS的優先順序遵循就近原則，一般來說，內聯樣式的優先順序最高，內部樣式表、外部樣式表和@import引入，後宣告的優先。

<style>
@import "css/orange.css";
  p{
    color: green;
  }
</style>
<link rel="stylesheet" href="css/orange.css">

<!--顯示紅色-->
<p style="color: red">123</p>

<!--顯示橘黃色-->
<p>456</p>
 

任意交換style標籤、link標籤和@import的位置，可以發現後宣告的樣式會覆蓋先宣告的。