CSS在實際應用中，一般有以下三種級聯方式。

1. 外聯式

外聯式樣式表中，CSS 代碼作為文件單獨存放，如以 style.css 文件包含所有樣式。在 HTML 中的外部級聯采用 <link> 標記或者 @import 語句來引入。示例代碼如下：

<link rel="stylesheet" href="style.css" type="text/css" /> //link 鏈接 @import url("style.css"); //@import 導入

2. 內聯式

門戶網站的 CSS 代碼通常采用嵌入式，即通常所說的內聯方式 (Inline Style)，其使用 <style> 標記將樣式定義為內部塊對象。示例代碼如下：

<style type="text/css"> <!-- body{font-family:Arial,Helvetica,sans-serif;} --> </style>

?

內聯 CSS 可以有效減少 HTTP 請求，提升頁面性能，緩解服務器壓力。由于瀏覽器加載完 CSS 才能渲染頁面，因此能防止 CSS 文件無法讀取而造成頁面裸奔的現象。

3. 嵌入式

最初級的 CSS 寫法即把代碼直接添加于所修飾的標記元素。示例代碼如下：

<div style="font-family:Arial,Helvetica,sans-serif;">芒果</div>

?

這樣做雖然更為直觀，但很大程度上加大了頁面體積，不符合結構與表現分離的設計思想。

總體而言，外聯和內聯各有優點，可綜合實際情況選擇適合的級聯方式。

?總結一下：外聯優點：css在同一個文件中，當頁面需要修改的時候只需要修改一個文件即可，方便維護。

???????????????????? 缺點：HTTP請求多，瀏覽器要加載完CSS才能渲染頁面，因此影響頁面的性能。

?????????????? 內置優點：內聯 CSS 可以有效減少 HTTP 請求，提升頁面性能，緩解服務器壓力。瀏覽器加載完 CSS 才能渲染頁面，因此能防止 CSS 文件無法讀取而造成頁面裸奔的現象。

?????????????????????缺點：每次修改css的時候需要修改多個頁面

Javascrip內聯和外置的區別其實也差不多

轉載于:https://www.cnblogs.com/shin9321/p/5853512.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的页面引用CSS和Javascript时，内联和外置的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。