CSS学习笔记（更新）

8. Emmet 语法

Emmet语法的前身是Zen coding，它使用缩写，来提高HTML/CSS的编写速度，Vscode已经集成该语法。

1.快速生成HTML结构语法

2.快速生成CSS样式语法

8.1 快速生成HTML结构语法

1.生成标签 直接输入标签名 按tab键即可，比如div，然后tab键，就可以生成<div></div>

2.如果想要生成多个相同的标签，加上*就可以了，比如 div*3，就可以快速生成3个div标签

3.如果有父子级关系的标签，可以用>，比如ul>li

4.如果有兄弟关系的标签，用+，比如div+p

5.如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了

比如：<div class="nav"></div>可以直接通过输入.nav回车就可以生成

#banner可以生成<div id="bannner"></div>

p.one可以生成<p class="one"></p>

ul>li#two可以生成<ul> <li id="two"></li></ul>

6.如果生成的div类名是有顺序的，可以用自增符号$

比如输入.demo$*5

<div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

7.如果想要在生成的标签内部写上内容可以用{}表示

例如，div{$}*5

  <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

8.2  快速生成CSS样式语法

CSS基本采取简写形式即可。

1.比如w200 按tab键 可以生成width:200px;

2.比如lh26 按tab键 可以生成line-height:26px;

tac按tab键可以说生成text-align:center;

8.3 快速格式化代码

format on save