專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2021-04-02 16:36:43 來源：動力節(jié)點(diǎn) 瀏覽1303次
我們在編寫HTML文件的時候，為了使網(wǎng)頁的內(nèi)容和屬性更加豐富，難免會引入CSS來達(dá)到我們的目的。CSS是一種用來表現(xiàn)HTML文件樣式的計(jì)算機(jī)語言，僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。引入CSS有4 種方式，其中有2 種方式是在HTML文件中直接添加CSS代碼，另外2種是引入外部 CSS文件。下面我們一起來學(xué)習(xí)一下引入CSS的4種方式，了解過的小伙伴也可以溫故知新。
內(nèi)聯(lián)樣式即只在某個元素內(nèi)使用style屬性，它只針對某個元素，而不會影響整個文件，所以可以控制某個HTML元素的外觀表現(xiàn)，適合用于代碼調(diào)試，不建議使用。
示例：
<div style="background: red"></div>
這通常是個很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個 <div> 擁有相同的樣式，你不得不重復(fù)地為每個 <div>添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會導(dǎo)致 HTML 代碼變得冗長，且使得網(wǎng)頁難以維護(hù)。
嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書寫 CSS 代碼。
示例：
<head>
????<style>
????.content {
????????background: red;
????}
????</style>
</head>
嵌入方式的 CSS 只對當(dāng)前的網(wǎng)頁有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁時這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對當(dāng)前頁面有效，所以當(dāng)多個頁面需要引入相同的 CSS 代碼時，這樣寫會導(dǎo)致代碼冗余，也不利于維護(hù)。鏈接方式鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽
示例：
<head>
????<link rel="stylesheet" type="text/css" href="style.css">
</head>
這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會在第一次加載時引入，以后切換頁面時只需加載 HTML 文件即可。導(dǎo)入方式導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。
示例：
<style>
????@import url(style.css);
</style>
鏈入外部樣式表，就是把樣式表保存為一個樣式表文件，然后在頁面中用
<link rel="stylesheet" type="text/css" href="my.css"/>
引入外部css文件。
這種方法可以說是現(xiàn)在占統(tǒng)治地位的引入方法。如同IE與瀏覽器。這也是最能體現(xiàn)CSS特點(diǎn)的方法；最能體現(xiàn)DIV+CSS中的內(nèi)容與顯示分離的思想，也最易改版維護(hù)，代碼看起來也是最美觀的一種。
它與導(dǎo)入式不同的是鏈接式使用HTML規(guī)則引入外部CSS文件，它在網(wǎng)頁的<head></head>標(biāo)簽中使用<link>標(biāo)記來引入外部樣式表文件。（就是方法樣子不同一個用style，一個用link）
Css引入的4種方式，所有的內(nèi)容已全部講完了，實(shí)際上，在書寫CSS樣式的時候，我們大多數(shù)都是使用link標(biāo)簽去鏈接樣式，這種方式使用的最多，是我們的重點(diǎn)掌握對象。在本站的CSS教程中亦有對引入鏈接方式從而引入CSS的重點(diǎn)課程，我們可以重點(diǎn)學(xué)習(xí)。
初級 202925
初級 203221
初級 202629
初級 203743
官方微信
官方抖音
Java實(shí)驗(yàn)班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號