**CSS的基本用法
css樣式
樣式是css最小單元語法，每個樣式包括兩部分內容：選擇器和聲明。
- 選擇器（Selector）：選擇器告訴瀏覽器該樣式將作用於頁面中的哪些對象，這些對象可以是某個標籤、所有網頁對象、指定class或ID值等。瀏覽器在解析這個樣式時，根據選擇器來渲染對象顯示效果。
- 聲明（Declaration）：聲明可以有一個或無數個，這些聲明命令瀏覽器如何去渲染選擇器指定的對象。聲明必須包括兩個部分：屬性和屬性值，並用分號來標識一個聲明的結束，在一個樣式中最後一個聲明可以省略分號。所有聲明放在一對大括號裏面。
- 屬性（Property）：屬性是css提供的設置好的樣式選項。屬性名是一個單詞或多個單詞組成，單詞之間通過連字符相連。
- 屬性值（Value）：屬性值是用來顯示屬性效果的參數。她包括數值和單位，或者關鍵字。
任何語言都需要註釋，HTML使用“ ”,而css使用“/註釋語句/”。
body{/*頁面基本屬性*/
font-size:12px;
color:#CCCCCC;
}
/*段落基本屬性*/
p{background-color:#FF00FF;}
css的應用
css樣式代碼必須保存在.css類型的文本文件中，或者放在網頁內
- 行內樣式
行內樣式就是把css樣式直接放在代碼的行內標籤中，一般放在標籤的style屬性中，由於行內樣式直接插入標籤中，是最直接的方式，但是修改不易。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="background-color: rgb(37, 206, 228);">行內元素，控制段落1</p>
<h2 style="background-color: pink;">行內元素，h2標題</h2>
<p2 style="background-color:rgb(37, 206, 228);">行內元素，控制段落2</p2>
</body>
</html>
2個p標籤雖然內容不同，但是使用一樣的背景色，但添加2次行內屬性設置背景色，若後期修改是，需打開頁面一個個修改，而且添加這麼多行內樣式，頁面面積大，還會浪費服務器寬帶和流量。
- 內嵌式
內嵌式通過將css寫在網頁源文件的頭部，在和之間，該樣式只能在此頁使用，解決行內式多次書寫的弊端。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
p{
text-align: left;
font-size: 16px;
margin: auto;
margin-bottom: 20px;
text-indent: 2em;
}
</style>
</head>
<body>
<p>《唐人街探案3》是由萬達影視傳媒有限公司、北京壹同傳奇影視文化有限公司出品，陳思誠執導，王寶強、劉昊然領銜主演的懸疑推理喜劇片。</p>
<P>該片講述了“曼谷奪金殺人案”“紐約五行連環殺人案”後，“唐人街神探組合”唐仁，秦風被野田昊請到東京，調查一樁離奇的謀殺案的故事 。</p>
<p>該片將於2021年2月12日在中國大陸上映 。</p>
</body>
</html>
在這個例子中統一設置了p標籤的屬性，節約空間，減少代碼量，也方便了修改。
- 鏈接式
鏈接式通過html的標籤，將外部的樣式文件鏈接到HTML的文檔中，這是網絡上網站最常用的方式，也最實用。這個方法將HTML和css完全分離。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>《唐人街探案3》是由萬達影視傳媒有限公司、北京壹同傳奇影視文化有限公司出品，陳思誠執導，王寶強、劉昊然領銜主演的懸疑推理喜劇片。</p>
<P>該片講述了“曼谷奪金殺人案”“紐約五行連環殺人案”後，“唐人街神探組合”唐仁，秦風被野田昊請到東京，調查一樁離奇的謀殺案的故事 。</p>
<p>該片將於2021年2月12日在中國大陸上映 。</p>
</body>
</html>
p{
background: aliceblue;
font-size: 18px;
border-bottom: 3px dashed #18ebe0;
}
鏈接式樣式使css代碼和HTML代碼完全分離，實現結構和樣式的分開，使HTML代碼專門構建頁面結構，而css負責美化工作。
css文件可以放在不同的html文件中，使網站所有頁面樣式統一，同時便於管理和修改，減少代碼及維護時間。
初學過程中，我經常將行內樣式和內嵌式混合使用，不美觀也不簡潔，需要多操作，養成書寫代碼的好習慣。
總結：行內樣式最直接，但是代碼多，浪費服務器；
內嵌式解決多次書寫，但是隻能在當前頁面使用；
鏈接式使用最廣泛，可以統一修改屬性值，可在多個頁面中使用。