html調(diào)用外部css的方法

發(fā)布時間：2022-04-24 15:57:06 來源：億速云閱讀：243 作者：iii 欄目：大數(shù)據(jù)

這篇文章主要介紹“html調(diào)用外部css的方法”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“html調(diào)用外部css的方法”文章能幫助大家解決問題。

調(diào)用方法：1、使用“<link rel="stylesheet" href="css文件路徑" type="text/css" />”語句調(diào)用；2、在style標(biāo)簽中使用“@import url(CSS文件路徑地址)”語句調(diào)用。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

html調(diào)用外部css有兩種方法

1、鏈接式

在網(wǎng)頁的<head></head>標(biāo)簽對中使用<link>標(biāo)記來引入外部樣式表文件，使用html規(guī)則引入外部css。

語法：

<link rel="stylesheet" href="css文件路徑" type="text/css" />

2、導(dǎo)入式

CSS @import規(guī)則，用于從其他樣式表導(dǎo)入樣式規(guī)則。這些規(guī)則必須先于所有其他類型的規(guī)則，@import不能在條件組的規(guī)則中使用。

將一個獨立的.css文件引入HTML文件中，使用css @import規(guī)則引入外部css文件，寫在<head>標(biāo)記的<style>標(biāo)記中

語法：

<style type="text/css">
@import url(CSS文件路徑地址);
</style>

比較鏈接方式和導(dǎo)入方式

鏈接方式（下面用 link 代替）和導(dǎo)入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式。

link 屬于 HTML，通過 <link> 標(biāo)簽中的 href 屬性來引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語句應(yīng)寫在 CSS 中，要注意的是導(dǎo)入語句應(yīng)寫在樣式表的開頭，否則無法正確導(dǎo)入外部文件；

@import 是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無法正確導(dǎo)入外部樣式文件；

當(dāng) HTML 文件被加載時，link 引用的文件會同時被加載，而 @import 引用的文件則會等頁面全部下載完畢再被加載。

關(guān)于“html調(diào)用外部css的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

向AI問一下細(xì)節(jié)

猜你喜歡