大家好，這裡是「 Daotin的夢呓 」從零開始學 Web 系列教程。此文首發于「 Daotin的夢呓 」公衆号，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
一、CSS概念
1、什麼是 CSS？
CSS 全稱為 Cascading Style Sheets，中文翻譯為“層疊樣式表”，簡稱 CSS 樣式表，是以稱之為層疊樣式表（Cascading Stylesheet）簡稱 CSS。在網頁制作時采用 CSS 技術，可以有效地對頁面的布局、字型、顔色、背景和其它效果實作更加精确的控制。隻要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。
2、CSS 的作用
簡單地來講，CSS 能對你制作的網頁進行布局、顔色、背景、寬度、高度、字型進行控制，讓網頁按您的美工設計布局的更加美觀漂亮。 樣式是用來控制頁面外觀、設定元素對象屬性的工具，使用樣式可使頁面産生各種特殊的效果。
3、樣式表書寫位置
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 樣式表内容 */
</style>
</head> 二、選擇器
選擇器是一個選擇誰（标簽）的過程。
選擇器{屬性:值; 屬性:值; ......} | 解釋 | 屬性：值 |
|---|---|
| 寬 | width: 20px; |
| 高 | height: 20px; |
| 背景顔色 | background-color: red; |
| 文字大小 | font-size: 24px; |
| 内容的水準對齊方式 | text-align: left center right |
| 首行縮進(1em = 一個漢字的長度16px) | text-indent: 2em; |
| 文字顔色 | color: red; |
1、基礎選擇器
a. 标簽選擇器
标簽{屬性：值;} 特點：标簽選擇器定義之後，會将頁面所有的元素都執行這個标簽樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
font-size: 50px;
color: red
}
</style>
</head>
<body>
<div>等你下課</div>
</body>
</html> 顔色的顯示方式
- 直接寫顔色的名稱（比如：red，green等）
- 十六進制顯示顔色
（#000000; 前2為代表紅色，中間2位代表綠色，後邊2位代表藍色。 PS： #EEE == #EEEEEE； #333 == #333333）
-
rgb(120, 120, 120)
- A代表alpha 不透明度，值 0~1（比如：
rgb(120,120,120. 0.5)
opacity:0.2;
b. 類選擇器（重點）
.自定義類名{屬性:值; 屬性:值; } 
1、誰調用，誰生效。
2、一個标簽可以調用多個類選擇器。多個标簽可以調用同一個類選擇器。
類選擇器命名規則
- 不能用純數字或者數字開頭來定義類名；
- 不能使用特殊符号或者特殊符号開頭（_ 除外）來定義類名；
- 不建議使用漢字來定義類名；
- 不推薦使用屬性或者屬性的值來定義類名。
類選擇器常用的命名
c. ID選擇器
#自定義名稱{屬性:值;} 特點：
1、一個 ID 選擇器在一個頁面隻能使用一次。如果使用2次或者2次以上，不符合 w3c 規範，JS 調用會出問題。
2、一個标簽隻能使用一個 ID 選擇器。
3.一個标簽可以同時使用類選擇器和 ID 選擇器。
d. 通配符選擇器
*{屬性:值;} 特點：給所有的标簽都使用相同的樣式。
PS：不推薦使用，增加浏覽器和伺服器負擔。
2、複合選擇器
兩個或者兩個以上的基礎選擇器通過不同的方式連接配接在一起。
a. 交集選擇器
标簽+類（ID）選擇器{屬性：值；} 特點：即要滿足使用了某個标簽，還要滿足使用了類選擇器或者ID選擇器。
b. 後代選擇器（重點）
選擇器+空格+選擇器{屬性：值;} 後代選擇器首選要滿足包含（嵌套）關系。
父集元素在前邊，子集元素在後邊。
特點：無限制隔代。（下面都會生效）
隻要能代表标簽，标簽、類選擇器、ID選擇器自由組合。
c. 子代選擇器
選擇器>選擇器{屬性:值;} 選中直接下一代元素，下下一代就選不中了。
d. 并集選擇器
選擇器+，+選擇器+，選擇器{屬性:值;}