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 1a>li>
    <li><a href="">link 2a>li>
    <li><a href="">link 3a>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中慢慢掌握吧，为不浪费生命而努力。