Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具,它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度。如果你也使用Sublime进行前端开发,在Sublime中安装插件即可使用Emmet,以下为Html/CSS快速编写语法。
一、Html缩写
1. 初始化
html:5 或!:用于HTML5文档类型
html:xt:用于XHTML过渡文档类型
html:4s:用于HTML4严格文档类型
2. 轻松添加类、id、文本和属性
eg:p#foobr
<p id="foo"> </p>
eg:p.bar#foo
<p class="bar" id="foo"></p>
eg:a[href=#]
<a href="#"></a>
eg:h2{foo}
<h2>foo</h2>
3. 嵌套
>:子元素符号,表示嵌套的元素
+:同级标签符号
^:可以使该符号前的标签提升一行
eg:p>span
<p><span></span></p>
eg:h1+h2
<h1></h1>
<h2></h2>
eg:p>span^p
<p><span></span></p>
<p></p>
4. 分组
eg:(.foo>h2)+(.bar>h2)
<div class="foo">
<h2></h2>
</div>
<div class="bar">
<h2></h2>
</div>
5. 隐式标签
如果只输入.item则会根据父标签进行判定,下面是除div和span外所有的隐式标签名称:
li:用于ul和ol中
tr:用于table、tbody、thead和tfoot中
td:用于tr中
option:用于select和optgroup中
eg:ul>.item
<ul>
<li class="item"></li>
</ul>
6. 定义多个元素
eg:ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
7. 定义多个带属性的元素
eg:ul>.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
二、CSS缩写
1. 值
p 表示%
e 表示 em
x 表示 ex
eg:w100
<style type="text/css" media="screen">
h3{
width: 100px;
}
</style>
eg:h10p+m5e
<style type="text/css" media="screen">
h3{
height: 10%;
margin: 5em;
}
</style>
2. 附加属性
eg:@f
<style type="text/css" media="screen">
@font-face {
font-family:;
src:url();
}
</style>
eg:@f+
<style type="text/css" media="screen">
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
</style>
3. 模糊匹配
p{eg:ov:h、ov-h、ovh、oh};
<style type="text/css" media="screen">
overflow: hidden;
</style>
4. 供应商前缀
输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀 eg:trf
<style type="text/css" media="screen">
body{
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
}
</style>
在任意属性前加上“-”符号,也可以为该属性加上前缀。eg:-super-foo
<style type="text/css" media="screen">
body{
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;
}
</style>
如果不希望加上所有前缀,可以使用缩写来指定
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
eg:-wm-trf
<style type="text/css" media="screen">
body{
-webkit-transform: ;
-moz-transform: ;
transform: ;
}
</style>
5. 渐变
eg:lg(left, #fff 50%, #000)
<style type="text/css" media="screen">
body{
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);
}
</style>