快速编辑HTML代码
1、添加类、id、文本和属性
(1)输入 .box
(2)输入p#text
(3)类和id一起输入 .box.text
(4)元素和内容一块输出 p{你好}
你好
(5)输出属性 a[href=#]
2、嵌套
(1)输入div+p
<div></div>
<p></p>
(2)输入ul>li*3>a
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
(3) >:子元素符号,表示嵌套的元素
+:同级标签符号
3、分组
可以通过嵌套和括号来快速生成一些代码块(.foo>h1)+(.bar>h2)
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
4、定义多个带属性的元素
输入ul>li.item$*3,代码输出
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
CSS缩写
1. 值
比如要定义元素的宽度,只需输入w100,即可生成
width: 100px;
注:除了px,也可以生成其他单位
p 表示%
e 表示 em
x 表示 ex
- 附加属性
可能你之前已经了解了一些缩写,比如 @f,可以生成:
1 @font-face {
2 font-family:;
3 src:url();
4 }
3. 模糊匹配
如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:
overflow: hidden;
4、供应商前缀
如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成:(未实现)
1 -webkit-transform: ;
2 -moz-transform: ;
3 -ms-transform: ;
4 -o-transform: ;
5 transform: ;
你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:
1 -webkit-super-foo: ;
2 -moz-super-foo: ;
3 -ms-super-foo: ;
4 -o-super-foo: ;
5 super-foo: ;
如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:
-webkit-transform: ;
-moz-transform: ;
transform: ;
前缀缩写如下:
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
5、渐变
输入lg(left, #fff 50%, #000),会生成如下代码:(未实现)
1 background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
2 background-image: -webkit-linear-gradient(left, #fff 50%, #000);
3 background-image: -moz-linear-gradient(left, #fff 50%, #000);
4 background-image: -o-linear-gradient(left, #fff 50%, #000);
5 background-image: linear-gradient(left, #fff 50%, #000);
文章来源:返回主页Jason.Zeng
文章转载自