B 站黑马程序员 pink 老师前端课程学习笔记_03 CSS3

CSS3_02

1. Emmet 语法

Emmet 语法的前身是 Zen cooding，它使用缩写来提高 html 和 css 的编写速度，Vscode内部已集成该语法

1.1 快速生成 HTML 语法

1. 生成标签： 直接输入标签名按 tab 键即可
2. 生成多个相同的标签：加上*
3. 生成有父子关系的标签：>
4. 生成有兄弟关系的标签：+
5. 生成带有类名或 id 名字的标签：直接写类名或者 id 名（默认生成在 div 标签下）
6. 生成有顺序类名：$
7. 在生成的标签内部书写：{}

  <!-- 生成多个相同标签 -->
    <!-- div*5 -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!-- 生成有父子关系的标签 -->
    <!-- div>span -->
    <div><span></span></div>
    <!-- ul>li -->
    <ul>
        <li></li>
    </ul>
    <!-- 生成有兄弟关系的标签 -->
    <!-- h4+p -->
    <h4></h4>
    <p></p>
    <!-- 生成有类名或id名的标签 -->
    <!-- . -->
    <div class=""></div>
    <!-- .color -->
    <div class="color"></div>
    <!-- #banner -->
    <div id="banner"></div>
    <!-- p.gray -->
    <p class="gray"></p>
    <!-- p#red -->