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