整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入 外部 CSS 文件。下面我們就來看看這些方式和它們的優缺點。
內聯方式
內聯方式指的是直接在 HTML 標簽中的 style 屬性中添加 CSS。
示例：
<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> 標簽引入外部的 CSS 文件。
示例：
<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 代替）和導入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，并且說明為什么不推薦使用 @import。
小結：我們應盡量使用 <link> 標簽導入外部 CSS 文件，避免或者少用使用其他三種方式。
SS的4種引入方式是：行內樣式、內嵌樣式、鏈接樣式、導入樣式
1.行內樣式
最直接最簡單的一種，直接對HTML標簽使用style=""，例如：
<p style="color:#F00; "></p>
缺點：HTML頁面不純凈，文件體積大，不利于蜘蛛爬行，后期維護不方便。
2.內嵌樣式
內嵌樣式就是將CSS代碼寫在<head></head>之間，并且用<style></style>進行聲明，例如：
<style type="text/css">
body,div,a,img,p{margin:0; padding:0;}
</style>
優缺點：頁面使用公共CSS代碼，也是每個頁面都要定義的，如果一個網站有很多頁面，每個文件都會變大，后期維護難度也大，如果文件很少，CSS代碼也不多，這種樣式還是很不錯的。
3.鏈接樣式
鏈接樣式是使用頻率最高，最實用的樣式，只需要在<head></head>之間加上<link…/>就可以了，如下：
<link type="text/css" rel="stylesheet" href="style.css" />
優缺點：實現了頁面框架代碼與表現CSS代碼的完全分離，使得前期制作和后期維護都十分方便
4.導入樣式（不建議使用）
導入樣式和鏈接樣式比較相似，采用@import樣式導入CSS樣式表，在HTML初始化時，會被導入到HTML或者CSS文件中，成為文件的一部分，類似第二種內嵌樣式。
@import在html中使用，如下：
<style type="text/css">
@import url(style.css);
</style>
@import在CSS中使用，如下：
@import url(style.css);
四種CSS引入方式的優先級
1.就近原則
2.理論上：行內>內嵌>鏈接>導入
3.實際上：內嵌、鏈接、導入在同一個文件頭部，誰離相應的代碼近，誰的優先級高
文章地址：peixun.qietu.com
文/丁向明
做一個有博客的web前端自媒體人，專注web前端開發，關注用戶體驗，加我qq/微信交流：6135833
avaScript 程序不能獨立運行，它需要被嵌入 HTML 中，然后瀏覽器才能執行 JavaScript 代碼。通過 <script> 標簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內部方式
內部方式是通過<script>標簽包裹JavaScript代碼,從而引入HTML頁面中，示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 基礎 - 引入方式</title>
</head>
<body>
<!-- 內聯形式：通過 script 標簽包裹 JavaScript 代碼 -->
<script>
alert('嗨，歡迎來傳智播學習前端技術！')
</script>
</body>
</html>2.外部形式
一般將 JavaScript 代碼寫在獨立的以 .js 結尾的文件中，然后通過 <script>標簽的 <src>屬性引入，示例代碼如下：
// demo.js
document.write('嗨，歡迎來傳智播學習前端技術！')<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 基礎 - 引入方式</title>
</head>
<body>
<!-- 外部形式：通過 script 的 src 屬性引入獨立的 .js 文件 -->
<script src="demo.js"></script>
</body>
</html>注意：如果 script 標簽使用 src 屬性引入了某 .js 文件，那么 標簽的代碼會被忽略！！！如下代碼所示：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
