詳解CSS文件的三種引入方式

2024-07-11 08:33:21

字體：大中小

供稿：網(wǎng)友

CSS的引入方式共有三種：行內(nèi)樣式、內(nèi)部樣式表、外部樣式表。

一、行內(nèi)樣式

使用style屬性引入CSS樣式。

示例：


<h1 style="color:red;">style屬性的應(yīng)用</h1><p style="font-size:14px;color:green;">直接在HTML標(biāo)簽中設(shè)置的樣式</p>

實(shí)際在寫頁(yè)面時(shí)不提倡使用，在測(cè)試的時(shí)候可以使用。

例如：


<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>行內(nèi)樣式</title>
</head>
<body>
<!--使用行內(nèi)樣式引入CSS-->
<h1 style="color:red;">Leaping Above The Water</h1>
<p style="color:red;font-size:30px;">我是p標(biāo)簽</p>
</body>
</html>

二、內(nèi)部樣式表

在style標(biāo)簽中書(shū)寫CSS代碼。style標(biāo)簽寫在head標(biāo)簽中。

示例：


<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>

例如：


<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>內(nèi)部樣式表</title>
<!--使用內(nèi)部樣式表引入CSS-->
<style type="text/css">
div{
background: green;
}
</style>
</head>
<body>
<div>我是DIV</div>
</body>
</html>

三、外部樣式表

CSS代碼保存在擴(kuò)展名為.css的樣式表中

HTML文件引用擴(kuò)展名為.css的樣式表，有兩種方式：鏈接式、導(dǎo)入式。

語(yǔ)法：

1、鏈接式


<link type="text/css" rel="styleSheet" href="CSS文件路徑" />

2、導(dǎo)入式


<style type="text/css">
@import url("css文件路徑");</style>

例如：


<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>外部樣式表</title>
<!--鏈接式:推薦使用-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--導(dǎo)入式-->
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>