一、css産生的原因
為了解決混亂的樣式結構。
二、css的樣式規則
例如：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>我變成紅色</h1>
</body>
</html>
效果：
詳細規則：
三、css字型樣式font
1. font-size：字号大小
可以使用相對長度，也可以使用絕對長度。推薦使用px（像素）
執行個體：
<p>字号大小</p>
<style>
p {
font-size: 40px;
}
</style>
效果圖前後對比：
2. 字型
①font-family ：字型
設定字型，如宋體、微軟雅黑、arial等字型，不用刻意背會。
注意事項：
部分代碼（其他代碼與上相同）：
font-family: "宋體";
效果圖前後對比（前圖預設字型）
如果是字型有多個，可以如此：
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB";
這種情況下，不會一下子用所有的字型，有相當于查詢的效果，如果可以用微軟雅黑，其他就不執行，如果沒有，則接着看其他的字型有沒有，如果都沒有，則用預設的字型。
②CSS Unicode字型（不用記憶）
3. 字型粗細font-weight
文法：
①
font-weight: normal 或 bold 或 bolder 或 lighter 或 <integer>（100/200/300/.../900）;
②與上面對應相等
font-weight: 400 或 700 或 比bold更重 或 比bold較輕 或 用數字表示粗細（100/200/300/.../900）
更習慣于用數字表示。
4. font-style：斜體
文法：
font-style:normal|italic|oblique;
normal：預設值，不傾斜
italic：斜體
oblique：傾斜（不常用）
5. 字型綜合設定
文法：
font: font-style font-weight font-size/line-height font-family;
注意：使用font屬性的時候，必須按照上面的順序，中間用空格隔開。其中不需要設定的屬性可以省略，但必須保留font-size和font-family屬性，否則font不起作用。