CSS 小結筆記之三種樣式表

Assist發表於2018-08-01
CSS筆記

CSS 引入共有三種方式：內部樣式表，內聯樣式（行內樣式）表，外部樣式表，當然也可以使用多重樣式

內聯樣式

<div style="color:red;font-size:20px">內聯樣式表</div >

內聯樣式 直接把樣式解除安裝html程式碼行內，一般僅僅在此樣式僅僅只在當前元素上應用時使用，其他情況下儘量不要使用。

內部樣式表

 <style>
        div {
            color: blue;
            font-size: 20px
        }
    </style>

內部樣式表一般寫在HTML頭部，在<head>標籤內用<style>標籤括起來。此方式一般使用在當前頁面需要使用特殊的樣式。

外部樣式表

 <link rel="stylesheet" href="CSS/Googlefonts.css">

外部樣式表 是單獨將樣式寫到一個css檔案中，並在頭部引用。使用外部樣式表時要注意如果出現多重樣式時樣式覆蓋帶來的問題。

多重樣式

當使用多重樣式時，多重樣式將會重疊為一個，一般而言多個樣式表會根據下面的規則重疊為一個，其中4為最高權重

  1. 瀏覽器預設設定
  2. 外部樣式表
  3. 內部樣式表（位於 head 標籤內部）
  4. 內聯樣式（在 HTML 元素內部）

多重樣式優先順序順序

對於同一個元素的多個樣式而言，優先順序次序如下，7的優先順序最高（!important 規則例外，但一般儘量不要用）：

  1. 通用選擇器（*）
  2. 元素(型別)選擇器
  3. 類選擇器
  4. 屬性選擇器
  5. 偽類
  6. ID 選擇器
  7. 內聯樣式

相關文章