- 行間樣式引入
- 內(nèi)部樣式引入
- 外部樣式引入
行間樣式引入
直接在 html 標(biāo)簽元素內(nèi)嵌入 css 樣式,
下面代碼是 div1 的顏色保持不變，而將 div2 的字體顏色改為紅色：
<pre>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>行間樣式引入小實(shí)例</title>
</head>
<body>
<div>div1</div>
<div style="color:red;">div2</div>
</body>
</html>
</pre>
內(nèi)部樣式引入
在 html 頭部 head 部分內(nèi) style 聲明插入代碼(即 CSS 樣式)
下面代碼是 div1 的顏色保持不變，而將 div2 的字體顏色改為藍(lán)色：
<pre>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>內(nèi)部樣式引入小實(shí)例</title>
<style>
#div2{color:blue;}
</style>
</head>
<body>
<div>div1</div>
<div id="div2">div2</div>
</body>
</html>
</pre>
外部樣式引入
<em>引入外部樣式表有兩種方式，一種是使用<link>標(biāo)簽（推薦），另一種是使用@ import 。
兩者的區(qū)別： <link> 是 html 標(biāo)簽，只能放入html源代碼中使用，@import 可看作 css 樣式，作用是引入 css 樣式功能。
</em>
下面代碼實(shí)現(xiàn)是 div1 的顏色保持不變，而將 div2 的字體顏色改為黃色。
<link>標(biāo)簽
- 新建一個(gè) CSS 文件，假設(shè)該文件名為“外部樣式.css”, 代碼如下：
<pre>
.div2{
color:yello;
}
</pre> - 新建 html 文件(注意：這里 CSS 文件與 html 文件同級(jí))
<pre>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>外部樣式引入小實(shí)例之<link>標(biāo)簽</title>
<style>
<link rel="stylesheet" href="外部樣式.css" />
</style>
</head>
<body>
<div>div1</div>
<div id="div2">div2</div>
</body>
</html>
</pre>
@import url( css 文件路徑地址);
- 新建一個(gè) CSS 文件，假設(shè)該文件名為“外部樣式.css”, 代碼如下：
<pre>
.div2{
color:yello;
}
</pre> - 新建 html 文件(注意：這里 CSS 文件與 html 文件同級(jí))
<pre>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>外部樣式引入小實(shí)例之@import</title>
<style>
@import url(./外部樣式.css);
</style>
</head>
<body>
<div>div1</div>
<div id="div2">div2</div>
</body>
</html>
</pre>
