CSS三 CSS的三種引入方式

2022-05-01 16:54:10 字數 1317 閱讀 8197

css的引入方式共有三種:行內樣式、內部樣式表、外部樣式表。

一、行內樣式

使用style屬性引入css樣式。

示例:直接在html標籤中設定的樣式

實際在寫頁面時不提倡使用,在測試的時候可以使用。

例如:

我是p標籤

二、內部樣式表

在style標籤中書寫css**。style標籤寫在head標籤中。

示例:例如:

我是div

三、外部樣式表

css**儲存在擴充套件名為.css的樣式表中

html檔案引用擴充套件名為.css的樣式表,有兩種方式:鏈結式、匯入式。

語法:1、鏈結式

2、匯入式

例如:

1111

2222

鏈結式和匯入式的區別

1、屬於xhtml

2、優先載入css檔案到頁面

@import

1、屬於css2.1

2、先載入html結構在載入css檔案。

四、css中的優先順序

1、樣式優先順序

行內樣式》內部樣式》外部樣式(後兩者是就近原則)

例如:行內樣式和內部樣式比較優先順序:

我是p段落

瀏覽器執行效果:

結論:行內樣式優先順序高於內部樣式表。

內部樣式表和外部樣式表比較優先順序:

a、內部樣式表在外部樣式表上面

我是p段落

我是div

1111

2222

瀏覽器執行效果:

b、外部樣式表在內部樣式表上面

我是p段落

我是div

1111

2222

瀏覽器執行效果:

結論:內部樣式表和外部樣式表使用就近原則,即誰寫在下面以誰為準。

2、選擇器優先順序

優先順序:id選擇器》類選擇器》標籤選擇器

瀏覽器執行效果:

CSS三 CSS的三種引入方式

css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。一 行內樣式 使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用,在測試的時候可以使用。例如 我是p標籤 二 內部樣式表 在style標籤中書寫css style標籤寫在head標籤中。示例 例...

CSS三 CSS的三種引入方式

css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。一 行內樣式 使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用,在測試的時候可以使用。例如 我是p標籤 二 內部樣式表 在style標籤中書寫css style標籤寫在head標籤中。示例 例...

css三種引入方式

行內 標籤內部 head內 style標籤 link 引入外部 href rel stylesheet style type import url style 選擇類 選擇id 一 三種css樣式規則的定義語法 名稱 語法 使用方式 1 標記選擇器 標記名稱 p2 id選擇器 id名稱 3 類選擇器...