溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css外部鏈接形式實例分析”，在日常操作中，相信很多人在css外部鏈接形式實例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css外部鏈接形式實例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
css外部鏈接形式有兩種：1、通過link標記將css外部樣式鏈接到HTML頁面中，link標記需要放在head標記區(qū)，語法“<link type="text/css" rel="styleSheet" href="CSS文件路徑" />”；2、在style標簽中通過“@import”規(guī)則鏈接，語法“@import url("css文件路徑");”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
如果 CSS 樣式被放置在網頁文檔外部的文件中，則稱為外部樣式表，一個 CSS 樣式表文檔就表示一個外部樣式表。
實際上，外部樣式表也就是一個文本文件，擴展名為.css。當把CSS樣式代碼復制到一個文本文件中后，另存為.css文件，則它就是一個外部樣式表。
如下圖所示就是一個外部樣式表：
那如何將css外部樣式表鏈接到HTML文檔中？外部樣式表的有兩種方式：
1）、使用link
鏈接樣式是指在外部定義CSS樣式表并形成以.CSS為擴展名文件，然后在頁面中通過<link>鏈接標記鏈接到頁面中，而且該鏈接語句必須放在頁面的<head>標記區(qū)。
語法：
<link type="text/css" rel="styleSheet" href="CSS文件路徑" />
2）、使用@import
導入式是通過@import在<style>標簽中進行聲明的
語法：
<style type="text/css">
@import url("css文件路徑");
</style>簡單實例：
css外部樣式表 style.css
h2{
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>
<h2>link標簽或@import的應用</h2>
<p>外部定義CSS樣式表以.CSS為擴展名文件，然后在頁面中通過link標簽或@import鏈接到頁面中。</p>
</body>
</html>實現(xiàn)效果：
link和@import的區(qū)別：
1、從屬關系區(qū)別
@import是 CSS 提供的語法規(guī)則，只有導入樣式表的作用；link是HTML提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。
2、加載順序區(qū)別
加載頁面時，link標簽引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢后被加載。
3、兼容性區(qū)別
@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標簽作為 HTML 元素，不存在兼容性問題。
4、DOM可控性區(qū)別
可以通過 JS 操作 DOM ，插入link標簽來改變樣式；由于 DOM 方法是基于文檔的，無法使用@import的方式插入樣式。
到此，關于“css外部鏈接形式實例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
