CSS的三種引入方式

2021-09-16 12:51:38 字數 814 閱讀 9630

內聯css也稱為行內css或者行級css,它直接在標籤內引入。

優點:便捷、高效

缺點:不能夠重用樣式,**行數多的時候不建議使用

頁級css也稱為內部css,整體放在head標籤裡面,在style標籤裡面定義樣式,作用範圍僅限於本頁面。

缺點:可維護性差

外聯css也稱為外部css,在實際專案中通常使用此方式,在頁面中使用link或@import引入。

優點:可維護性好

缺點:外聯css是乙個單獨的檔案,可以作用於多個頁面,在修改的時候修改某一塊區域,達到多個頁面的樣式變更,相比於內聯css和頁級css,省去了對每個頁面修改,提高了開發效率。

接下來說下link和@import的區別:

1)link:

link語法中,rel是關聯(relation),type指的是型別,href指的是引入的檔案路徑

link的作用主要是引入css和網頁圖示,告知搜尋引擎,網頁之間的關係。

(link引入網頁圖示:)

2) @import:

@import語法務必寫在style標籤中,後面直接加檔案路徑。

@import作用在css檔案和頁面中,可以在乙個css檔案引入其他的css檔案,整合到一起在頁面引入一次即可。

3)二者載入順序影響

link:無論放到哪個位置,都是一邊載入資料,一邊優化,視覺感受好。

@import:先載入資料,再載入樣式,如果網速不佳,可能造成資料出來,而樣式一點點載入出來的效果。

link永遠比@import的優先順序高。

css三種引入方式

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

CSS引入的三種方式

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

CSS的三種引入方式

1,行內式 直接寫在html標籤中,控制當前標籤,對其他標籤不起作用 我是盒子 2,內嵌式 一般寫在head標籤中,但理論上寫在什麼位置都可以,可以控制整個頁面的樣式 doctype html en utf 8 document title pink style head pink 我是盒子 div...