首先插入樣式表的方法有三種:
- 外部樣式表(External style sheet)
- 内部樣式表(Internal style sheet)
- 内聯樣式(Inline style)
一.内部樣式表
與筆記一的執行個體相同，直接使用 style 标簽在文檔頭部定義内部樣式表就可以了
<style>
h1
{
color:red;
font-size:12px;
}
</style>
二.外部樣式表
如何建立外部樣式表？
例如：
1.将下列代碼儲存為mystyle.css檔案
h1
{
color:red;
font-size:12px;
}
.center
{
text-align:center; /*居中*/
}
p
{
text-align:center;
font-size:24px;
}
p.blue
{
color:blue;
}
p.yellow
{
color:yellow
}
#green
{
color:green;
}
2.在自己所需的html檔案裡使用link标簽連結到自己的外部樣式表
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<link rel = "stylesheet" type = "text/css" href = "mystyle.css"/>
<title>外部樣式表</title>
</head>
<body>
<h1 class = "center">我一個h1的标題怎麼這麼小？</h1>
<p>我隻是一個普通的居中段落</p>
<p id = "green">羊村大草原</p>
<p class = "yellow">我變成黃色了</p>
<p class = "blue">我又成為藍色了！</p>
</body>
</html>
結果：
三.内聯樣式
隻需要在相關的标簽内使用樣式（style）屬性。
由于會損失掉樣式表的許多優勢，是以此方法慎用。
例如：
<p style="color:green;font-size:24px">這是一個段落。</p>
四.多重樣式
樣式表允許以多種方式規定樣式資訊。
樣式可以規定在單個的 HTML 元素中(内聯樣式)，在 HTML 頁的頭元素中(内部樣式表)，或在一個外部的 CSS 檔案中(外部樣式表)。
甚至可以在同一個 HTML 文檔内部引用多個外部樣式表。
一般情況下，優先級如下：
内聯樣式）Inline style > （内部樣式）Internal style sheet >（外部樣式）External style
sheet > 浏覽器預設樣式
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)