首頁 > web前端 > css教學 > 怎麼載入css文件

怎麼載入css文件

青灯夜游
發布: 2021-07-22 14:14:25
原創
3277 人瀏覽過

載入css檔案的方法:1、使用「」語句載入;2、使用「@ import url("css檔案路徑");」語句載入。

怎麼載入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文件,也就是說在載入CS​​S文件之前,頁面是裸奔的,但是進入網站回應速度會更加快!

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

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

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