html中引入css樣式的方法

發(fā)布時(shí)間：2020-09-14 14:44:20 來(lái)源：億速云閱讀：156 作者：小新欄目：web開(kāi)發(fā)

html中引入css樣式的方法？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

一、HTML導(dǎo)入css樣式的方法

HTML主要負(fù)責(zé)網(wǎng)頁(yè)的內(nèi)容展現(xiàn)，而CSS文件負(fù)責(zé)網(wǎng)頁(yè)內(nèi)容的樣式，在HTML中使用css樣式的方法有：行內(nèi)式、內(nèi)嵌式、外聯(lián)式，

而外聯(lián)式又分：鏈接式（link）和導(dǎo)入式（@import）。那么下面就給大家介紹一下：

1. 行內(nèi)式----HTML標(biāo)簽中使用CSS

代碼實(shí)例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行內(nèi)式</title>
	</head>
	<body>
		<p style="color: red;font-size: 20px;">行內(nèi)式行內(nèi)式行內(nèi)式行內(nèi)式行內(nèi)式行內(nèi)式行內(nèi)式行內(nèi)式行內(nèi)式<p>
	</body>
</html>

效果圖：

html中引入css樣式的方法

css引用的行內(nèi)式也可稱(chēng)為內(nèi)聯(lián)式或者行級(jí)式，它直接在標(biāo)簽內(nèi)部引入，顯著的優(yōu)點(diǎn)是十分的便捷、高效；但是同時(shí)也造成了不能夠重用樣式的缺點(diǎn)，如果代碼行數(shù)到達(dá)一定長(zhǎng)度不建議采用。通常內(nèi)聯(lián)CSS作為測(cè)試使用，可以查找代碼中bug。

2.內(nèi)嵌式---將CSS內(nèi)容通過(guò)style標(biāo)簽寫(xiě)在head標(biāo)簽中

代碼實(shí)例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>內(nèi)嵌式</title>
		<style>
			p{
				background-color: #21B4BB;
				color: #fff;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<p>內(nèi)嵌式內(nèi)嵌式內(nèi)嵌式內(nèi)嵌式內(nèi)嵌式內(nèi)嵌式內(nèi)嵌式<p>
	</body>
</html>

效果圖：

html中引入css樣式的方法

css引用的內(nèi)嵌式也可稱(chēng)為內(nèi)部式或者頁(yè)級(jí)式，整體是放在head標(biāo)簽里邊的，在style標(biāo)簽里邊定義樣式，作用范圍僅限于本頁(yè)面的元素；如果你寫(xiě)的代碼超過(guò)了幾百行，想想每次把代碼頁(yè)拉到最上邊都很煩，所以它在可維護(hù)性方面較差。

3. 外聯(lián)式---通過(guò)link標(biāo)簽引入外部樣式表（css樣式文件）

1）鏈接式（link）

語(yǔ)法：

<link rel="stylesheet"  type="text/css"  href="css的路徑" >

代碼實(shí)例：

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樣式的方法

鏈接式會(huì)以網(wǎng)頁(yè)文件主體裝載前裝載CSS文件，因此顯示出來(lái)的網(wǎng)頁(yè)從一開(kāi)始就是帶樣式的效果的，它不會(huì)象導(dǎo)入式那樣先顯示無(wú)樣式的網(wǎng)頁(yè)，然后再顯示有樣式的網(wǎng)頁(yè)，這是鏈接式的優(yōu)點(diǎn)。

2）導(dǎo)入式（@import）

語(yǔ)法：

<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>

代碼實(shí)例：

HTML代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>導(dǎo)入式</title>
		<style type="text/css" media="screen">   
		@import url("style.css");   
		</style>
	</head>
	<body>
		<p>導(dǎo)入式導(dǎo)入式導(dǎo)入式導(dǎo)入式導(dǎo)入式導(dǎo)入式導(dǎo)入式導(dǎo)入式導(dǎo)入式<p>
	</body>
</html>

效果圖：

html中引入css樣式的方法

導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁(yè)裝載完后再裝載CSS文件，因此這就導(dǎo)致了一個(gè)問(wèn)題，如果網(wǎng)頁(yè)比較大則會(huì)兒出現(xiàn)先顯示無(wú)樣式的頁(yè)面，閃爍一下之后，再出現(xiàn)網(wǎng)頁(yè)的樣式。這是導(dǎo)入式固有的一個(gè)缺陷。

二、鏈接式（link）與導(dǎo)入式（@import）的區(qū)別

link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；而@import屬于CSS范疇，只能加載CSS；
link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；而@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。
link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；而@import是在CSS2.1提出的，低版本的瀏覽器不支持。
ink支持使用Javascript控制DOM去改變樣式；而@import不支持。
@import可以在CSS文件中再次引入其他樣式表；而link不支持。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)html中引入css樣式的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

html中引入css樣式的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽