」語句引入;2、在style標籤對中,使用「@import url("css檔案路徑");”語句引入。"/> 」語句引入;2、在style標籤對中,使用「@import url("css檔案路徑");”語句引入。">
搜尋
首頁web前端css教學怎樣引入外部css樣式表

引入外部css樣式表的方法:1、使用「」語句引入;2、在style標籤對中,使用「@import url("css檔案路徑");」語句引入。

怎樣引入外部css樣式表

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

引入外部css樣式表的方法

#1、使用 標籤

# # 標籤定義文件與外部資源的關係。 標籤最常見的用途是連結外部css樣式表。

語法:

<link rel="stylesheet" href="css文件路径" />

2、使用使用 @import 規則

@import 規則可讓您將樣式表匯入另一張樣式表中。

語法:


<style type="text/css">
@import url("css文件路径");
</style>

和@import方法的區別

    ##link 屬於HTML 標籤,而@import 是CSS 提供的。
  • 頁面被載入時,link 會同時被載入,而 @import 引用的 CSS 會等到頁面載入完再載入。
  • @import 只有在 IE 5 以上才能識別,而 link 是 HTML 標籤,無相容問題。
  • link 方式的樣式的權重高於 @import 權重。

說明:路徑

#相對路徑(Relative Path)

顧名思義:就是css檔案相對某一個參照物的位置。

上物理課的時候老師都會提到相對運動:指某一個物體對另外一個物體的相對於一個固定參照物來是相對運動的。我們走路看汽車的時候覺得汽車往後走,汽車看我們的時候是往前走,那麼相對路徑也是醬樣子的,網頁所處目錄就是我們的參照物。

像是下面這段css程式碼的引進就是一個相對路徑位址style.css檔案跟這個網頁檔案是同處一個目錄層級。

<link rel="stylesheet" href="style.css" />

絕對路徑(Absolute Path)

既然是絕對的,那就說明這個位址是唯一性,獨立性。相對本地來說,剛剛的網站test的絕對位址為F:\test,相對伺服器來說,就應該是127.0.0.1/test類似這樣的IP位址。

例:

<link rel="stylesheet" href="http://xxx.com/test/css/style.css" />

關於路徑引入

要相對路徑還是絕對路徑引入css文件,個人認為本地預覽的時候可以選擇相對路徑,專案上線的時候改成絕對路徑來引入,為什麼?有以下幾點:

1. 減少索引,絕對位址的唯一性可以確保使用者在輸入網頁的時候,瀏覽器直接去索引到那個IP位址,直接一刀致命,沒有拖沓。而相對路徑就要一步步索引目錄,這就好比在路上遇見一個心儀的妹紙,我們害羞不敢當面去談話,於是我們製造了無數的偶遇之後才有膽子上去問聯繫方式,到最後才發現妹紙早名花有主,早知如此,何必當初呢~

2. 增加外鏈,對於做SEO的人來說,我們都知道外鏈能帶來不錯的權重提高,就算是別人來抓我們的內容,假如它沒有改成自己的伺服器位址,那說明這個網站的引用位址還是我們的網址,爬蟲會透過這個圖片引用位址反爬回去,但相對路徑引用,因為位址發生變更,因此爬蟲爬回去之後找不到相應的文件,因此爬蟲的工作也即將停止。

3. 提高排名,假如是你一個乾前端的,那麼多少都會遇到某一個自己喜歡的動畫效果,HTML搞下來了,但是不想要直接把css也下下來,因此會在本地直接呼叫網路位址。當你預覽這個頁面的時候不小心點到了引入地址,會跳到相應的網站css,即使你沒有訪問其主頁,但是你還是訪問了他的域名,無意中還是增加了其訪問量。

(學習影片分享:

css影片教學

以上是怎樣引入外部css樣式表的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
有點提醒您偽元素是孩子,有點。有點提醒您偽元素是孩子,有點。Apr 19, 2025 am 11:39 AM

這裡有一個帶子元素的容器:

菜單具有'動態命中區域”菜單具有'動態命中區域”Apr 19, 2025 am 11:37 AM

飛翔的菜單!您需要在第二個菜單中實現懸停事件以顯示更多菜單項的菜單,即您在棘手的領域中。一方面,他們應該

通過Webvtt改善視頻可訪問性通過Webvtt改善視頻可訪問性Apr 19, 2025 am 11:27 AM

“網絡的力量在於其普遍性。每個人的訪問無論殘疾是一個重要方面。” - 蒂姆·伯納斯 - 李

每周平台新聞:CSS :: Marker偽元素,預先渲染的Web組件,向您的網站添加Webmention每周平台新聞:CSS :: Marker偽元素,預先渲染的Web組件,向您的網站添加WebmentionApr 19, 2025 am 11:25 AM

在本週的綜述中:datepickers正在讓鍵盤用戶頭痛,一個新的Web組件編譯器,有助於與Fouc進行戰鬥,我們終於獲得了造型列表項目標記,以及在您的網站上獲得網絡攻擊的四個步驟。

使寬度和靈活的物品一起玩得很好使寬度和靈活的物品一起玩得很好Apr 19, 2025 am 11:23 AM

簡短的答案:您可能要尋找的是彈性折射和彈性基礎。

位置粘性和桌子標頭位置粘性和桌子標頭Apr 19, 2025 am 11:21 AM

您可以位置:粘性;一個

每周平台新聞:HTML在搜索控制台,全局腳本範圍中的HTML檢查,Babel Envs添加默認查詢查詢每周平台新聞:HTML在搜索控制台,全局腳本範圍中的HTML檢查,Babel Envs添加默認查詢查詢Apr 19, 2025 am 11:18 AM

在本週的Web平台新聞世界中,Google搜索控制台可以更輕鬆地查看爬行的標記,我們了解到自定義屬性

Indieweb和網絡企業Indieweb和網絡企業Apr 19, 2025 am 11:16 AM

Indieweb是一回事!他們將舉行會議和一切。紐約客甚至在寫這件事:

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境