CSS的三種引入方式

2022-05-08 22:33:08 字數 1295 閱讀 6989

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三種引入方式

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

CSS的三種引入方式

內聯css也稱為行內css或者行級css,它直接在標籤內引入。優點 便捷 高效 缺點 不能夠重用樣式,行數多的時候不建議使用 頁級css也稱為內部css,整體放在head標籤裡面,在style標籤裡面定義樣式,作用範圍僅限於本頁面。缺點 可維護性差 外聯css也稱為外部css,在實際專案中通常使用此...

CSS引入的三種方式

目的 為了把樣式和內容分開,並且使網頁元素更加豐富,引入了css css頁面引入有三種方式 1 內聯式 比較不常用,因為內容和樣式仍然在一起,不方便。示例 傳統布局 使用table來做整體頁面的布局 總結 這種方式來製作頁面現在也不是很多了,感覺並不是很高效。需要先用photoshop量出頁面布局具...