css外部連結形式有哪幾種
- 青灯夜游原創
- 2022-07-27 20:27:315904瀏覽
css外部連結形式有兩種：1、透過link標記將css外部樣式連結到HTML頁面中，link標記需要放在head標記區，語法「」；2、在style標籤中透過「@import」規則鏈接，語法「@import url("css檔案路徑");」。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
如果 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>實現效果：
#link和@import的差異：
# #1、從屬關係區別@import是CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標籤，不僅可以載入CSS 文件，還可以定義RSS、rel 連接屬性等。 載入頁面時，link標籤引入的 CSS 同時載入；@import引入的 CSS 將會在頁面載入後載入。 ######3、相容性差異######@import是 CSS2.1 才有的語法，故只可在 IE5 才能辨識；link標籤作為 HTML 元素，不存在相容性問題。 ######4、DOM可控性區別######可以透過 JS 操作 DOM ，插入link標籤來改變樣式；由於 DOM 方法是基於文件的，無法使用@import的方式插入樣式。 ######（學習影片分享：###web前端入門###）###以上是css外部連結形式有哪幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css規則有哪三種類型下一篇：css規則有哪三種類型