載入css檔案的方法:1、使用「」語句載入;2、使用「@ import url("css檔案路徑");」語句載入。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
方法1:透過link標籤載入
標籤定義文件與外部資源的關係,標籤最常見的用途是連結樣式表。
在網頁的
標籤對中使用標記可呼叫外部CSS檔案。語法格式:
<link rel="stylesheet" type="text/css" href="css文件路径" />
對各個屬性的說明:
#href 屬性設定外部樣式表檔案的位址,可以是相對位址,也可以是絕對地址。
rel 屬性定義關聯的文檔,這裡表示關聯的是樣式表。
type 屬性定義匯入檔案的類型,同 style 元素一樣,text/css表示為 CSS 文字檔案。
說明:
這種方法會以網頁文件主體裝載前裝載CSS文件,因此顯示出來的網頁從一開始就是帶樣式的效果的,它不會像導入式那樣先顯示無樣式的網頁,然後再顯示有樣式的網頁。
方法2:透過@import方式載入
@import規則,用於從其他樣式表匯入樣式規則,這些規則必須先於所有其他類型的規則。
使用@import指令用以把外部樣式表資訊導入頁面中,它是存在於在標籤中的。
<style type="text/css"> @import url("css文件路径"); </style>
註:
使用@import引入CSS可以很方便的引入外部文件的CSS程式碼,方便維護與規劃。但每多引進一個CSS文件,就會對伺服器增加一次連線請求,當存取量較大時,需在維護性和效能上進行權衡。
使用@import方式載入會導致HTML頁面載入完成之後才會去載入CSS文件,也就是說在載入CSS文件之前,頁面是裸奔的,但是進入網站回應速度會更加快!
(學習影片分享:css影片教學)
以上是怎麼載入css文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!