首頁 >web前端 >css教學 >css中引入的三種方式的簡單介紹

css中引入的三種方式的簡單介紹

不言
不言原創
2018-08-01 15:42:421844瀏覽

這篇文章給大家介紹的內容是關於css中引入的三種方式的簡單介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

CSS 引入共有三種方式:內部樣式表,內聯樣式(行內樣式)表,外部樣式表,當然也可以使用多重樣式

內聯樣式

<p style="color:red;font-size:20px">内联样式表</p >

內聯樣式直接把樣式卸載html程式碼行內,一般僅在此樣式僅在目前元素上套用時使用,其他情況下盡量不要使用。

內部樣式表

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

內部樣式表一般寫在HTML頭部,在93f0f5c25f18dab9d176bd4f6de5d30e標籤內用c9ccee2e6ea535a969eb3f532ad9fe89標籤括起來。此方式一般使用在目前頁面需要使用特殊的樣式。

外部樣式表

 <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. #內嵌樣式

相關推薦:

css中如何實現浮動的元素換行

#CSS中Grid佈局的用法總結(附程式碼)

以上是css中引入的三種方式的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn