Emmet 学习笔记

• 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中慢慢掌握吧，为不浪费生命而努力。