| 前言 |
2、CSS樣式表（書寫位置）
2.1行內樣式（內聯樣式）
通過標籤的style屬性來設置元素的樣式
<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>
·注意
·style是標籤的屬性
·樣式屬性和值中間是：
·多組屬性值之間用；隔開
2.2內部樣式表（內嵌樣式表）
·概念
寫在標籤中間，並且用style標籤定義
<head>
<style type="text/CSS">
選擇器（選擇的標籤） {
屬性1: 屬性值1;
屬性2: 屬性值2;
屬性3: 屬性值3;
}
</style>
</head>
<style>
div {
color: red;
font-size: 12px;
}
</style>
注意：
.style標籤一般位於head標籤中
.只能控制當前的頁面
2.3外部樣式表（外鏈式）
是將所有的樣式放在一個或多個 以.CSS爲擴展名的外部樣式表文件中，通過link標籤將外部樣式表文件鏈接到HTML文檔中
<head>
<link rel="stylesheet" type="text/css" href="css文件路徑">
</head>
link 是個單標籤
link標籤需要放在head頭部標籤中，並且指定link標籤的三個屬性
| 屬性 | 作用 |
|---|---|
| rel | 定義當前文檔與被鏈接文檔之間的關係，在這裏需要指定爲“stylesheet”，表示被鏈接的文檔是一個樣式表文件。 |
| type | 定義所鏈接文檔的類型，在這裏需要指定爲“text/CSS”，表示鏈接的外部文件爲CSS樣式表。我們都可以省略 |
| href | 定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。 |
3、三種樣式表總結
| 樣式表 | 優點 | 缺點 | 使用情況 | 控制範圍 |
|---|---|---|---|---|
| 行內樣式表 | 書寫方便，權重高 | 沒有實現樣式和結構相分離 | 較少 | 控制一個標籤（少） |
| 內部樣式表 | 部分結構和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面（中） |
| 外部樣式表 | 完全實現結構和樣式相分離 | 需要引入 | 最多，強烈推薦 | 控制整個站點（多） |
4、CSS選擇器
選擇器就是選標籤用的，把我們想要的標籤選擇出來
4.1標籤選擇器
標籤選擇器（元素選擇器）是指用HTML標籤名稱作爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的CSS樣式。
標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
作用：
標籤選擇器 可以把某一類標籤全部選擇出來 比如所有的div標籤 和 所有的 span標籤
優點：
是能快速爲頁面中同類型的標籤統一樣式
4.2類選擇器
類選擇器使用“.”（英文點號）進行標識，後面緊跟類名.
.類名選擇器
.類名 {
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}
.標籤
<p class='類名'></p>
優點：
可以爲元素對象定義單獨或相同的樣式。 可以選擇一個或者多個標籤
注意
類選擇器使用“.”（英文點號）進行標識，後面緊跟類名(自定義，我們自己命名的)
長名稱或詞組可以使用中橫線來爲選擇器命名。
不要純數字、中文等命名， 儘量使用英文字母來表示。
類名之間用空格隔開
4.3 id選擇器
id選擇器使用#進行標識，後面緊跟id名
其基本語法格式如下：
id選擇器
#id名 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標籤
<p id="id名"></p>
4.4通配符選擇器
通配符選擇器用*號表示， * 就是 選擇所有的標籤 他是所有選擇器中作用範圍最廣的，能匹配頁面中所有的元素。
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
5、基礎選擇器總結
| 選擇器 | 作用 | 缺點 | 使用情況 | 用法 |
|---|---|---|---|---|
| 標籤選擇器 | 可以選出所有相同的標籤，比如p | 不能差異化選擇 | 較多 | p { color：red;} |
| 類選擇器 | 可以選出1個或者多個標籤 | 可以根據需求選擇 | 非常多 | .nav { color: red; } |
| id選擇器 | 一次只能選擇器1個標籤 | 只能使用一次 | 不推薦使用 | #nav {color: red;} |
| 通配符選擇器 | 選擇所有的標籤 | 選擇的太多，有部分不需要 | 不推薦使用 | * {color: red;} |
6、CSS字體樣式
6.1 font-size：設置字體大小
p {
font-size:20px;
}
6.2 font-family：字體
p{ font-family:"微軟雅黑";}
字體用引號括起來
6.3 font-weight字體粗細
| 屬性值 | 描述 |
|---|---|
| normal | 默認值（不加粗的） |
| bold | 定義粗體（加粗的） |
| 100~900 | 400 等同於 normal，而 700 等同於 bold 我們重點記住這句話 |
6.4 font-style：字體傾斜
| 屬性 | 作用 |
|---|---|
| normal | 默認值，瀏覽器會顯示標準的字體樣式 font-style: normal; |
| italic | 瀏覽器會顯示斜體的字體樣式。 |
6.5 綜合設置字體樣式
選擇器 { font: font-style font-weight font-size/line-height font-family;}
.順序不能亂，屬性之間以空格隔開
.傾斜和加粗屬性可以不設置，但必須保留font-size和font-family屬性，否則font屬性將不起作用。
6.6字體樣式總結
| 屬性 | 表示 | 注意點 |
|---|---|---|
| font-size | 字號 | 我們通常用的單位是px 像素，一定要跟上單位 |
| font-family | 字體 | 實際工作中按照團隊約定來寫字體 |
| font-weight | 字體粗細 | 記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數字不要跟單位 |
| font-style | 字體樣式 | 記住傾斜是 italic 不傾斜 是 normal 工作中我們最常用 normal |
| font | 字體連寫 | 1. 字體連寫是有順序的 不能隨意換位置 2. 其中字號 和 字體 必須同時出現 |
7、CSS外觀屬性
7.1color：文本顏色
| 表示表示 | 屬性值 |
|---|---|
| 預定義的顏色值 | red，green，blue，還有我們的御用色 pink |
| 十六進制 | #FF0000，#FF6600，#29D794 |
| RGB代碼 | rgb(255,0,0)或rgb(100%,0%,0%) |
- 注意
7.2text-align：文本水平對齊方式，表格中的內容對齊的方式，而不是整個表格
| 屬性 | 解釋 |
|---|---|
| left | 左對齊（默認值） |
| right | 右對齊 |
| center | 居中對齊 |
7.3 line-height:行間距（行高）
一般情況下，行距比字號大7.8像素左右就可以了。
line-height: 24px;
7.4 tex-indent：首行縮進
p {
/*行間距*/
line-height: 25px;
/*首行縮進2個字 em 1個em 就是1個字的大小*/
text-indent: 2em;
}
7.5 text-decoration：文本的裝飾
| 值 | 描述 |
|---|---|
| none | 默認。定義標準的文本。 取消下劃線（最常用） |
| underline | 定義文本下的一條線。下劃線 也是我們鏈接自帶的（常用） |
| overline | 定義文本上的一條線。（不用） |
| line-through | 定義穿過文本下的一條線。（不常用） |
8、CSS外觀屬性總結
| 屬性 | 表示 | 注意點 |
|---|---|---|
| color | 顏色 | 我們通常用 十六進制 比如 而且是簡寫形式 #fff |
| line-height | 行高 | 控制行與行之間的距離 |
| text-align | 水平對齊 | 可以設定文字水平的對齊方式 |
| text-indent | 首行縮進 | 通常我們用於段落首行縮進2個字的距離 text-indent: 2em; |
| text-decoration | 文本修飾 | 記住 添加 下劃線 underline 取消下劃線 none |
完！歡迎評論區留言