首頁 > 文章 > web前端 > css外部連結形式有哪幾種

css外部連結形式有哪幾種

青灯夜游原創: 2022-07-27 20:27:315789瀏覽

css外部連結形式有兩種：1、透過link標記將css外部樣式連結到HTML頁面中，link標記需要放在head標記區，語法「」；2、在style標籤中透過「@import」規則鏈接，語法「@import url("css檔案路徑");」。

css外部連結形式有哪幾種

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

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

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

如下圖所示就是一個外部樣式表：

css外部連結形式有哪幾種

#那如何將css外部樣式表連結到HTML文件中？ 外部樣式表的有兩種方式：

1）、使用link

#連結樣式是指在外部定義CSS樣式表並形成以.CSS為副檔名文件，然後在頁面中透過<link>連結標記連結到頁面中，而且該連結語句必須放在頁面的

標記區。

語法：

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2）、使用@import

導入式是透過@import在

語法：

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

簡單實例：

css外部樣式表style.css

h1{
	color:red;
}
p{
	font-size:14px;
	color:green;
}

HTML文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link type="text/css" rel="styleSheet"  href="style.css" />
		<!-- <style>
			@import url("style.cs");
		</style> -->
	</head>
	<body>
		<h1>link标签或@import的应用</h1>
		<p>外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。</p>
	</body>
</html>

實現效果：

css外部連結形式有哪幾種

#link和@import的差異：

# #1、從屬關係區別

@import是CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標籤，不僅可以載入CSS 文件，還可以定義RSS、rel 連接屬性等。

2、載入順序差異

載入頁面時，link標籤引入的 CSS 同時載入；@import引入的 CSS 將會在頁面載入後載入。 ######3、相容性差異######@import是 CSS2.1 才有的語法，故只可在 IE5 才能辨識；link標籤作為 HTML 元素，不存在相容性問題。 ######4、DOM可控性區別######可以透過 JS 操作 DOM ，插入link標籤來改變樣式；由於 DOM 方法是基於文件的，無法使用@import的方式插入樣式。 ######（學習影片分享：###web前端入門###）###

以上是css外部連結形式有哪幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 html JS dom href 样式表

陳述：

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

上一篇：css規則有哪三種類型下一篇：css規則有哪三種類型

看更多