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