首頁 >web前端 >html教學 >html中是如何引入css樣式？以及link與@import的差異（程式碼實例）

html中是如何引入css樣式？以及link與@import的差異（程式碼實例）

青灯夜游原創: 2018-09-13 15:08:554974瀏覽

在前端網站的開發過程中，我們都是要用到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>

效果圖：

html中是如何引入css樣式？以及link與@import的差異（程式碼實例）

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>

效果圖：

html中是如何引入css樣式？以及link與@import的差異（程式碼實例）

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;
}

效果圖：

html中是如何引入css樣式？以及link與@import的差異（程式碼實例）

連結式會以網頁文件主體裝載前裝載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>

效果圖：

html中是如何引入css樣式？以及link與@import的差異（程式碼實例）

#導入式會在整個網頁裝載完後再裝載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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何實現網頁版別踩白塊的遊戲（程式碼範例）下一篇：如何實現網頁版別踩白塊的遊戲（程式碼範例）

看更多