界面引入CSS樣式的方式有4種,它們有什么區(qū)別呢粒没?
1.?使用HTML標簽的style屬性
優(yōu)點:分散靈活方便,優(yōu)先級高
缺點:缺乏整體性和規(guī)劃性火俄,不利于后期的修改和維護
2.?將樣式代碼寫在頁面<style></style>標簽之中
優(yōu)點:標簽中的任何位置,也可以多次出現(xiàn)逗爹,一個頁面內部便于復用和維護
缺點:多個頁面之間的CSS代碼復用仍然不夠
3.?使用 link 標簽谷市,引入外部CSS文件
優(yōu)點:直接引入該文件到頁面中蛔垢,一個頁面可以多次使用 link 標簽引入多個外部css文件击孩,方便復用和維護
缺點:后引入的CSS文件會覆蓋前面引入的CSS文件的相同效果迫悠,代碼量可能過大,維護不當?shù)脑捰秩菀壮霈F(xiàn)混亂
4.?使用@import引入CSS文件
優(yōu)點:方便維護和規(guī)劃
缺點:引入一個CSS文件巩梢,就會對服務器增加一次連接請求创泄,當訪問量較大時,需在維護性和性能上進行權衡
link和import區(qū)別
1.?從屬關系:link 屬于 html 標簽括蝠,而 @import 是 css 提供的鞠抑,外層需要添加 <style></style>標簽
2.?加載順序:頁面加載時,link 同時被加載忌警, 而 @import 引用的 css 會等界面加載完成后再加載
3. 權重:link 方式的樣式的權重高于 @import 權重
4.?兼容性:?link 沒有兼容性問題搁拙,@import 不兼容 ie5 以下
5. Dom可控性:可以通過 JS 操作 DOM ,是否插入link標簽來起到改變樣式的作用法绵;由于DOM方法是基于文檔的箕速,無法使用@import的方式插入樣式