內聯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...