html中是如何引入css樣式？以及link與@import的差異（程式碼實例）
在前端網站的開發過程中，我們都是要用到css樣式的，css樣式可以有效地對頁面的佈局、字體、顏色、背景和其它效果實現更精確的控制。那麼這些css樣式的檔案或程式碼是如何匯入到html中的呢？ 本章就帶給大家html中如何引入CSS樣式檔？以及link與@import的差別（程式碼實例），讓大家了解css樣式是如何匯入的，重點描述css樣式檔案的匯入。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、HTML導入css樣式的方法
#HTML主要負責網頁的內容展現，而CSS檔案負責網頁內容的樣式，在HTML中使用css樣式的方法有：行內式、內嵌式、外聯式，
而外聯式又分：連結式（link）和導入式（@import ）。 【推薦學習：css影片教學】
那麼下面就跟大家介紹一下：
1. 行內式--- -HTML標籤中使用CSS
程式碼實例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行内式</title> </head> <body> <p style="color: red;font-size: 20px;">行内式行内式行内式行内式行内式行内式行内式行内式行内式<p> </body> </html>
效果圖：
css引用的行內式也可稱為內聯式或行級式，它直接在標籤內部引入，顯著的優點是十分的便捷、高效；但是同時也造成了不能夠重用樣式的缺點，如果代碼行數到達一定長度不建議採用。通常內嵌CSS作為測試使用，可以找出程式碼中bug。
優點:
沒有了樣式表文件，在某些時候可以提升效率;
使用style 屬性的樣式效果會最強，會涵蓋掉其他引入方式的相同樣式效果。
缺點:
多個元素難以共享樣式，不利於程式碼重複使用;
#HTML 和CSS 程式碼混雜，不利於程式設計師和搜尋引擎閱讀。
2.內嵌式---將CSS內容透過style標籤寫在head標籤中
程式碼實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内嵌式</title>
<style>
p{
background-color: #21B4BB;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<p>内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式<p>
</body>
</html>效果圖：
css引用的內嵌式也可稱為內部式或頁級式，整體則放在head標籤裡邊的，在style標籤裡邊定義樣式，作用範圍僅限於本頁面的元素；如果你寫的程式碼超過了幾百行，想想每次把程式碼頁拉到最上邊都很煩，所以它在可維護性方面較差。
優點：跟行間樣式表相同不會產生額外的請求，且它初步實現了結構與樣式的分離，比較適合單頁網站應用。
缺點：由於內部樣式表是寫在HTML 檔案中的，導致頁面不純淨、檔案體積大、不利於網路爬蟲獲取資訊、不利於維護、頁面之間無法共享樣式
3. 外聯式---透過link標籤引入外部樣式表（css樣式檔案）
#1）連結式（link）
語法：
<link rel="stylesheet" type="text/css" href="css的路径" >
程式碼實例：
HTML程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>链接式</title> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <p>链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式<p> </body> </html>
css樣式檔--style.css程式碼：
p{
font-size: 20px;
color: #fff;
background-color: #70DBDB;
}效果圖：
連結式會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會像導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。
2）導入式（@import）
語法：
<style type="text/css" media="screen">
@import url("CSS文件");
</style>程式碼實例：
HTML程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导入式</title>
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>
<body>
<p>导入式导入式导入式导入式导入式导入式导入式导入式导入式<p>
</body>
</html>效果圖：
#導入式會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的缺陷。
3）外聯式的優缺點
優點：
實作了結構與表現的程式碼完全分離
方便復用及維護
#因為分離到各自獨立的檔案中，讓HTML 檔案大小大幅減少了，從而讓頁面結構更容易被程式設計師和網路爬蟲讀懂
對搜尋引擎友好，讓搜尋引擎給頁面評分更高，有利於頁面搜尋引擎排名
#外部樣式表在使用者首次造訪後就被快取到使用者電腦上，下次存取無需載入
缺點：
如果樣式很多，CSS 檔案會改變的很大找起來不方便。此外，多一個CSS 檔案就多一次HTTP 請求，在訪問量大的網站中會加重伺服器壓力
二、連結式（link）與匯入式（@import）的區別
link是XHTML標籤，除了載入CSS外，還可以定義RSS等其他事務；而@import屬於CSS範疇，只能載入CSS；
link引用CSS時，在頁面載入時同時載入；而@import需要頁面網頁完全載入以後載入。
link是XHTML標籤，無相容問題；而@import是在CSS2.1提出的，低版本的瀏覽器不支援。
ink支援使用Javascript控制DOM去改變樣式；而@import不支援。
@import可以在CSS檔案中再次引入其他樣式表；而link不支援。
（學習影片分享：web前端入門）
以上是html中是如何引入css樣式？以及link與@import的差異（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
bootstrap怎麼設置框架
Apr 07, 2025 pm 03:27 PM
要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。
bootstrap怎麼寫分割線
Apr 07, 2025 pm 03:12 PM
創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
bootstrap怎麼調整大小
Apr 07, 2025 pm 03:18 PM
要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-
