溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何引用CSS外部樣式表

發(fā)布時間:2021-02-23 09:43:13 來源:億速云 閱讀:374 作者:清風 欄目:web開發(fā)

這篇文章主要為大家展示了如何引用CSS外部樣式表,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶大家一起來研究并學習一下“如何引用CSS外部樣式表”這篇文章吧。

css是什么意思

css是一種用來表現HTML或XML等文件樣式的計算機語言,主要是用來設計網頁的樣式,使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言,并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中,而樣式規(guī)則的優(yōu)先級由css根據這個層次結構決定,從而實現級聯效果,發(fā)展至今,css不僅能裝飾網頁,也可以配合各種腳本對于網頁進行格式化。

方法:1、在style標簽中通過“@import”引用,語法“@import url(URL)”;2、通過link標簽引用,語法“<link type="text/css" href="URL" rel="stylesheet" />”。

CSS外部樣式表

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

實際上,外部樣式表也就是一個文本文件,擴展名為.css。當把CSS樣式代碼復制到一個文本文件中后,另存為.css文件,則它就是一個外部樣式表。

引入外部樣式表的方式:

HTML文件引用擴展名為.css的樣式表,有兩種方式:鏈接式、導入式。

1、通過@import指令引入

@import指令是CSS語言的一部分,使用時把這個指令添加到HTML的一個<style>標簽中;

要與外部的CSS文件關聯起來,得使用url而不是href,并且要把路徑放在一個圓括號里面;

<html>
<head>
<style type="text/css">    
    @import url(css/styles.css);
</style>
<!--此處的type屬性是針對HTML4.01的,若在HTML5中則不需要加-->
</head>

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

【 】

2、通過<link>標簽引入(最常用方式)

<link type="text/css" href="style.css" rel="stylesheet" />
<!--同理,type屬性是針對HTML4.01的-->

兩種方式的區(qū)別

<link>標簽屬于html標簽,而@import是css提供的一種方式,<link>標簽不僅可以引入css,還可以做其他事,而@import只能引入css;

加載順序的區(qū)別:當一個頁面被瀏覽時,link引入的css會被同步加載,而@import引用的css是等到其他元素全被下載完之后才被加載;

兼容性的不同:@import是CSS2.1才提出的,所以只有在IE5以上才支持,低版本的瀏覽器不支持,而<link>標簽無此問題;

當使用javascript控制DOM去改變樣式時,只能使用<link>標簽,因為@import不是DOM可以控制的。

以上就是關于“如何引用CSS外部樣式表”的內容,如果改文章對你有所幫助并覺得寫得不錯,勞請分享給你的好友一起學習新知識,若想了解更多相關知識內容,請多多關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI