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

來源:互聯網
上載者:User
這篇文章給大家介紹的內容是關於css中引入的三種方式的簡單介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所協助。

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

內聯樣式

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

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

內部樣式表

 <style>        p {            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. 識別碼選取器

  7. 內聯樣式

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.