CSS的引入方式和優先級

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的位置，可以發現后聲明的樣式會覆蓋先聲明的。