不瞭解前端的UI不是好美工，以下是慕課網HTML+CSS基礎教程學習筆記，不廢話，Start!
第7章 CSS樣式基本知識
7-1 內聯式css樣式，直接寫在現有的HTML標籤中
CSS樣式程式碼插入的形式分3種：
1.內聯式：把CSS程式碼直接寫在現有的html標籤中，如下程式碼：
這裡的文字是紅色，字號為12px。
<p style="color:red;font-size:12px">
這裡的文字是紅色，字號為12px。
</p>
複製程式碼css樣式要寫在style=""雙引號中，多條樣式程式碼中間用分號隔開。
7-2 嵌入式CSS樣式，寫在當前文的檔案中
嵌入式的優勢在於可以一對多修改樣式。
嵌入式css樣式程式碼寫在<style type="text/css">...</style>之間。
把需要帶有css樣式的文字放在<span></span>標籤之間。
<head>
<style type="text/css">
span{
color:red;
font-size:20px;
}
</style>
</head>
複製程式碼嵌入式css樣式必須寫在<style></style>之間，並且一般情況下嵌入式css樣式寫在<head></head>之間。
7-3 外部式CSS樣式，寫在單獨的一個檔案中
外部式css樣式是把css程式碼寫在一個單獨的外部檔案中管理。這個css樣式以“.css”為副檔名，在<head>內使用<link>標籤。如下：
<link href="h1.css" rel="stylesheet" type="text/css" />
複製程式碼<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css樣式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>外部式css樣式是把<span>css程式碼</span>寫在一個單獨的外部檔案中管理。這個css樣式以“.css”為副檔名。
</P>
</body>
</html>
複製程式碼單獨外部檔案如下：
注意：
1. css樣式檔名稱以有意義的英文字母命名，如h1.css。<br>
2. 同嵌入式一樣，把需要帶有css樣式的文字放在<span></span>標籤之間。<br>
3. rel="stylesheet" type="text/css"是固定寫法。<br>
4. <link>標籤一般寫在<head>內。
複製程式碼7-4 三種方法優先順序
優先順序:
內聯式(行內) > 嵌入式(head內) > 外部式(單獨檔案)
總結來說就是就近原則