Emmet 学习笔记 Emmet HTML 缩略语法 子级元素：>同胞元素：+上一级元素：^元素个数：*分组：()ID and CLASS：# .定义属性：[attr=value]项目序号：$内容文本：{}Emmet CSS 缩略语法

Emmet 学习笔记

Emmet HTML 缩略语法

子级元素：>

div>ul>li

<div> <ul> <li></li> </ul> </div>

同胞元素：+

div+p+bq

<div></div> <p></p> <blockquote></blockquote>

上一级元素：^

div+div>p>span+em^bq

<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>

元素个数：*

ul>li*5

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

分组：()

div>(header>ul>li*2>a)+footer>p

<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>

ID and CLASS：# .

div#header+div.page

<div id="header"></div> <div class="page"></div>

定义属性：[attr=value]

td[title="Hello world!" colspan=3]

<td title="Hello world!" colspan="3"></td>

项目序号：$

ul>li.item$*5

<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>

使用多个$可以增加前导0的个数：

ul>li.item$$$*5

<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>

还可以增加@-，使项目从大到小开始编号：

ul>li.item$@-*5

<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>

你还可以改变项目编号的初始值：

ul>li.item$@3*5

<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>

内容文本：{}

ul>li*3>a{link $}

<ul> <li><a href="">link 1</a></li> <li><a href="">link 2</a></li> <li><a href="">link 3</a></li> </ul>

Emmet CSS 缩略语法

简写模式如下，其他类似，这样真的提高效率不少：

简写补全m10px20pxmargin: 10px 20px;lh2emline-height: 2em;w500width: 500px……

渐变

bg: lg(left,red,50%,#6c6 )

body{ background: -webkit-linear-gradient(left, red, 50%, #6c6); background: -moz-linear-gradient(left, red, 50%, #6c6); background: -o-linear-gradient(left, red, 50%, #6c6); background: linear-gradient(to right, red, 50%, #6c6); }

更多更全的缩略语法可见：cheat-sheet

大致过一遍，也能总结出一二点： CSS : 1. 属性名如果是简单词（比如：co/color，前面是缩写，后面是完整属性名），一般是由前两个或前三个字母代替；如果是复杂词（比如：lh/line-height），则取每一个单词的首字母或者其他有规律的取词方法，来组成缩略词。 2. 有一些属性名加上一些修饰词是可以直接输出属性键值对，属性名和修饰符中间加上：号，也是很方便。比如（pos:a/position: absolute, c:r/color: rgb(), …） 3. 更多的自己在编写CSS中慢慢掌握吧，为不浪费生命而努力。