css第二天

一、emmet語法

1、簡介

? Emmet語法的前身是Zen coding,它使用縮寫,來提高html/css的編寫速度, Vscode內部已經集成該語法。

? 快速生成HTML結構語法

? 快速生成CSS樣式語法

2、快速生成HTML結構語法

• 生成標簽 直接輸入標簽名 按tab鍵即可 比如 div 然后tab 鍵， 就可以生成
• 如果想要生成多個相同標簽 加上 * 就可以了 比如 div*3 就可以快速生成3個div
• 如果有父子級關系的標簽，可以用 > 比如 ul > li就可以了
• 如果有兄弟關系的標簽，用 + 就可以了 比如 div+p
• 如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #two tab 鍵就可以了
• 如果生成的div 類名是有順序的， 可以用 自增符號 $
• 如果想要在生成的標簽內部寫內容可以用 { } 表示

3、快速生成CSS樣式語法

CSS 基本采取簡寫形式即可

? 比如 w200 按tab 可以 生成 width: 200px;

? 比如 lh26px 按tab 可以生成 line-height: 26px;

4、快速格式化代碼

Vscode 快速格式化代碼: shift+alt+f

也可以設置 當我們 保存頁面的時候自動格式化代碼:

1）文件 ------.>【首選項】---------->【設置】；

2）搜索emmet.include;

3）在settings.json下的【工作區設置】中添加以下語句：

? “editor.formatOnType”: true,

? “editor.formatOnSave”: true

二、css的復合選擇器

1、什么是復合選擇器？

? 在 CSS 中，可以根據選擇器的類型把選擇器分為基礎選擇器和復合選擇器，復合選擇器是建立在基礎選擇器之上，對基本選擇器進行組合形成的。
? 復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，可以更準確、更高效的選擇目標元素（標簽）
? 常用的復合選擇器包括：后代選擇器、子選擇器、并集選擇器、偽類選擇器等等

2、后代選擇器 (重要）

定義：

? 后代選擇器又稱為包含選擇器，可以選擇父元素里面子元素。其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔。當標簽發生嵌套時，內層標簽就成為外層標簽的后代。

語法：

? 上述語法表示選擇元素 1 里面的所有元素 2 (后代元素)。

語法說明：

• 元素1 和 元素2 中間用空格隔開
• 元素1 是父級，元素2 是子級，最終選擇的是元素2
• 元素2 可以是兒子，也可以是孫子等，只要是元素1 的后代即可
• 元素1 和 元素2 可以是任意基礎選擇器

例子：

<