首頁 > 文章 > web前端 > CSS外部樣式表有兩種引用方法，分別是什麼

CSS外部樣式表有兩種引用方法，分別是什麼

青灯夜游原創: 2021-02-22 15:10:4816015瀏覽

方法：1、在style標籤中透過「@import」引用，語法「@import url(URL)」；2、透過link標籤引用，語法「4c173f9ae075fbcd9d2871ee987cb8bb」。

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

CSS外部樣式表

如果CSS 樣式被放置在網頁文件外部的文件中，則稱為外部樣式表，一個CSS 樣式表文檔就表示一個外部樣式表。

實際上，外部樣式表也就是一個文字文件，擴展名為.css。當把CSS樣式程式碼複製到一個文字檔後，另存為.css文件，則它就是一個外部樣式表。

引入外部樣式表的方式：

HTML檔案引用副檔名為.css的樣式表，有兩種方式：連結式、匯入式。

1、透過@import指令引入

@import指令是CSS語言的一部分，使用時把這個指令加入到HTML的一個c9ccee2e6ea535a969eb3f532ad9fe89標籤中；

要與外部的CSS檔案關聯起來，得使用url而不是href，並且要把路徑放在一個圓括號裡面；

<html>
<head>
<style type="text/css">    
    @import url(css/styles.css);
</style>
<!--此处的type属性是针对HTML4.01的，若在HTML5中则不需要加-->
</head>

<body>
......
</body>
</html

【推薦教學：CSS影片教學】

2、透過2cdf5bf648cf2f33323966d7f58a7f3f標籤引入（最常用方式）

<link type="text/css" href="style.css" rel="stylesheet" />
<!--同理，type属性是针对HTML4.01的-->

兩種方式的差異

2cdf5bf648cf2f33323966d7f58a7f3f標籤屬於html標籤，而@import是css提供的一種方式，2cdf5bf648cf2f33323966d7f58a7f3f標籤不僅可以引入css，還可以做其他事，而@import只能引入css；

載入順序的區別：當一個頁面被瀏覽時，link引入的css會被同步加載，而@import引用的css是等到其他元素全被下載完之後才被加載；

兼容性的不同：@import是CSS2.1才提出的，所以只有在IE5以上才支持，低版本的瀏覽器不支持，而2cdf5bf648cf2f33323966d7f58a7f3f標籤無此問題；

當使用javascript控制DOM去改變樣式時，只能使用2cdf5bf648cf2f33323966d7f58a7f3f標籤，因為@import不是DOM可以控制的。

更多程式相關知識，請造訪：程式設計影片！！

以上是CSS外部樣式表有兩種引用方法，分別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css中如何改變字體大小下一篇：css中如何改變字體大小

看更多