• 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 缩略语法

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

简写 补全 m10px20px margin: 10px 20px; lh2em line-height: 2em; w500 width: 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中慢慢掌握吧，为不浪费生命而努力。