首頁 > web前端 > css教學 > 主體

怎麼引用css文件

青灯夜游
發布: 2023-01-05 16:13:23
原創
11851 人瀏覽過

引用css檔案的方法:1、使用link標籤,語法“”;2、使用“ @import”規則,語法“@import url(檔案路徑);”。

怎麼引用css文件

本教學操作環境:windows7系統、CSS3版、Dell G3電腦。

1、使用link標籤(連結式)

將css程式碼寫在一個單獨的檔案中,用link標籤直接引入該檔案到頁面中。一個頁面可以多次使用LINK標籤引入多個外部css文件,注意這些CSS程式碼的相互影響,通常是後引入的CSS文件會覆蓋前面引入的CSS文件的相同效果。這種引入CSS的方式是目前最受歡迎的,可以在站個網站範圍內進行CSS代碼的規劃,方便復用和維護,但這樣將代碼高度集中,代碼量可能過大,維護不當的話又容易出現混亂。

<link rel="stylesheet" type="text/css" href="style.css">
登入後複製

2、使用@import(導入式)

#使用@import引入CSS檔案有兩種方式,一種可以放在頁面中的 中,用法如下:

@import url(index2.css);
登入後複製

另外也可以放在CSS檔案中使用,用法如下:

@import "sub.css";
登入後複製

使用@import引入CSS可以很方便的引入外部文件的CSS程式碼,方便維護和規劃。但每多引進一個CSS文件,就會對伺服器增加一次連線請求,當存取量較大時,需在維護性和效能上進行權衡。

連結式(link)與導入式(@import)的區別

link是XHTML標籤,除了載入CSS外,還可以定義RSS等其他交易;而@import屬於CSS範疇,只能載入CSS;

link引用CSS時,在頁面載入時同時載入;而@import需要頁面網頁完全載入以後載入。

link是XHTML標籤,無相容問題;而@import是在CSS2.1提出的,低版本的瀏覽器不支援。

ink支援使用Javascript控制DOM去改變樣式;而@import不支援。

@import可以在CSS檔案中再次引入其他樣式表;而link不支援。

(學習影片分享:css影片教學

以上是怎麼引用css文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板