專注Java教育14年
全國(guó)咨詢/投訴熱線：400-8080-105
更新時(shí)間：2021-04-02 16:36:43 來源：動(dòng)力節(jié)點(diǎn) 瀏覽1304次
我們?cè)诰帉慔TML文件的時(shí)候，為了使網(wǎng)頁(yè)的內(nèi)容和屬性更加豐富，難免會(huì)引入CSS來達(dá)到我們的目的。CSS是一種用來表現(xiàn)HTML文件樣式的計(jì)算機(jī)語(yǔ)言，僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。引入CSS有4 種方式，其中有2 種方式是在HTML文件中直接添加CSS代碼，另外2種是引入外部 CSS文件。下面我們一起來學(xué)習(xí)一下引入CSS的4種方式，了解過的小伙伴也可以溫故知新。
內(nèi)聯(lián)樣式即只在某個(gè)元素內(nèi)使用style屬性，它只針對(duì)某個(gè)元素，而不會(huì)影響整個(gè)文件，所以可以控制某個(gè)HTML元素的外觀表現(xiàn)，適合用于代碼調(diào)試，不建議使用。
示例：
<div style="background: red"></div>
這通常是個(gè)很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) <div> 擁有相同的樣式，你不得不重復(fù)地為每個(gè) <div>添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長(zhǎng)，且使得網(wǎng)頁(yè)難以維護(hù)。
嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書寫 CSS 代碼。
示例：
<head>
????<style>
????.content {
????????background: red;
????}
????</style>
</head>
嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁(yè)有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁(yè)時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁(yè)面有效，所以當(dāng)多個(gè)頁(yè)面需要引入相同的 CSS 代碼時(shí)，這樣寫會(huì)導(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 文件會(huì)在第一次加載時(shí)引入，以后切換頁(yè)面時(shí)只需加載 HTML 文件即可。導(dǎo)入方式導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。
示例：
<style>
????@import url(style.css);
</style>
鏈入外部樣式表，就是把樣式表保存為一個(gè)樣式表文件，然后在頁(yè)面中用
<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)頁(yè)的<head></head>標(biāo)簽中使用<link>標(biāo)記來引入外部樣式表文件。（就是方法樣子不同一個(gè)用style，一個(gè)用link）
Css引入的4種方式，所有的內(nèi)容已全部講完了，實(shí)際上，在書寫CSS樣式的時(shí)候，我們大多數(shù)都是使用link標(biāo)簽去鏈接樣式，這種方式使用的最多，是我們的重點(diǎn)掌握對(duì)象。在本站的CSS教程中亦有對(duì)引入鏈接方式從而引入CSS的重點(diǎn)課程，我們可以重點(diǎn)學(xué)習(xí)。
Java實(shí)驗(yàn)班
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
Java就業(yè)班
有基礎(chǔ) 直達(dá)就業(yè)
Java夜校直播班
業(yè)余時(shí)間 高薪轉(zhuǎn)行
Java在職加薪班
工作1~3年，加薪神器
Java架構(gòu)師班
工作3~5年，晉升架構(gòu)
提交申請(qǐng)后，顧問老師會(huì)電話與您溝通安排學(xué)習(xí)
京公網(wǎng)安備 11030102010736號(hào)