溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css中如何進行引入外部文件，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
css的基本語法是：1、css規則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。
css的引入方式有：1、使用HTML標簽的style屬性引入；2、將樣式代碼寫在頁面的“<style></style>”標簽對中；3、使用link標簽，引入外部CSS文件；4、使用“@import”規則，引入外部CSS文件。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
1、使用HTML標簽的style屬性（行內式）
將style屬性直接加在單個的HTML元素標簽上，控制HTML標簽的表現樣式。
這種引入CSS的方式是分散靈活方便，但缺乏整體性和規劃性，不利于后期的修改和維護，當需要修改網站的樣式時，一個相同的修改可能涉及多個地方，維護成本高。使用STYLE屬性的樣式效果最強，會覆蓋掉其它幾種引入方式的相同樣式效果。
<div style="color:red"></div>
2、使用style標簽（內嵌式）
將樣式代碼寫在頁面<style>...</style>標簽之中
<style>...</style>標簽結構可以位于頁面<HTML>標簽中的任何位置，也可以多次出現。通常是將整個<style>...</style>結構寫在頁面的<head>...</head>部分中。這種引入CSS方式的特點是每個頁面的CSS代碼可能具有統一性和規劃性，一個頁面內部便于復用和維護，但多個頁面之間的CSS代碼復用仍然不夠。
<style>
bdoy{font-size:14px;}
</style>3、使用link標簽，引入外部CSS文件（鏈接式）
將css代碼寫在一個單獨的文件中，用link標簽直接引入該文件到頁面中。一個頁面可以多次使用LINK標簽引入多個外部css文件，注意這些CSS代碼的相互影響，通常是后引入的CSS文件會覆蓋前面引入的CSS文件的相同效果。這種引入CSS的方式是目前最為流行的，可以在站個網站范圍內進行CSS代碼的規劃，方便復用和維護，但這樣將代碼高度集中，代碼量可能過大，維護不當的話又容易出現混亂。
<link rel="stylesheet" type="text/css" href="style.css">
4、使用@import引入CSS文件（導入式）
使用@import引入CSS文件有兩種方式，一種可以放在頁面中的<style>...</style> 中，用法如下：
@import url(index2.css);
另外也可以放在CSS文件中使用，用法如下：
@import "sub.css";
使用@import引入CSS可以很方便的引入外部文件的CSS代碼，方便維護和規劃。但是每多引入一個CSS文件，就會對服務器增加一次連接請求，當訪問量較大時，需在維護性和性能上進行權衡。（學習視頻分享：css視頻教程）
鏈接式和導入式的區別
<link>
1、屬于XHTML
2、優先加載CSS文件到頁面
@import
1、屬于CSS2.1
2、先加載HTML結構在加載CSS文件。
CSS中的優先級
1、樣式優先級
行內樣式>內部樣式>外部樣式(后兩者是就近原則)
例如：
行內樣式和內部樣式比較優先級：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>行內樣式和內部樣式表的優先級</title>
<!--內部部樣式表-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<!--行內樣式-->
<p style="color: red;">我是p段落</p>
</html>瀏覽器運行效果：
結論：行內樣式優先級高于內部樣式表。
內部樣式表和外部樣式表比較優先級：
a、內部樣式表在外部樣式表上面
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>內部樣式表和外部樣式表的優先級</title>
<!--內部部樣式表-->
<style type="text/css">
p{
color: blue;
}
</style>
<!--外部樣式表-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<p>我是p段落</p>
<p>我是p</p>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>瀏覽器運行效果：
b、外部樣式表在內部樣式表上面
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>內部樣式表和外部樣式表的優先級</title>
<!--外部樣式表-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--內部部樣式表-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p>我是p段落</p>
<p>我是p</p>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>瀏覽器運行效果：
結論：內部樣式表和外部樣式表使用就近原則，即誰寫在下面以誰為準。
注意：導入式和鏈接式的優先級也是使用就近原則。
2、選擇器優先級
優先級：ID選擇器>類選擇器>標簽選擇器
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>選擇器的優先級</title>
<style type="text/css">
#a{
color: green;
}
.b{
color: yellow;
}
h3{
color: red;
}
</style>
</head>
<body>
<h3>111</h3> <!--紅色-->
<h3 id="a" class="b">222</h3> <!--綠色-->
<h3 class="b">333</h3><!--黃色-->
</html>瀏覽器運行效果：
感謝你能夠認真閱讀完這篇文章，希望小編分享的“css中如何進行引入外部文件”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
