」。"/> 」。">

首頁 >web前端 >css教學 >CSS外部樣式表有兩種引用方法,分別是什麼

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

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

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

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

本教學操作環境: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