Scribd
Upload
79 views23 pages

Cheat Sheet

The document provides a cheat sheet for Emmet syntax and abbreviations. It lists various Emmet syntax for generating HTML elements and attributes using abbreviations and shorthand notation. Some examples include syntax for generating child elements (>), sibling elements (+), climb-up elements (^), grouping elements (), and multiplication of elements (*). It also lists implicit tag names and common HTML element abbreviations that Emmet will expand to the corresponding tag.

Uploaded by

mike
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
79 views23 pages

Cheat Sheet

The document provides a cheat sheet for Emmet syntax and abbreviations. It lists various Emmet syntax for generating HTML elements and attributes using abbreviations and shorthand notation. Some examples include syntax for generating child elements (>), sibling elements (+), climb-up elements (^), grouping elements (), and multiplication of elements (*). It also lists implicit tag names and common HTML element abbreviations that Emmet will expand to the corresponding tag.

Uploaded by

mike
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Cheat Sheet

Emmet Documentation

Syntax
Child: > Item numbering: $
nav>ul>li ul>li.item$*5
<nav> <ul>
<ul> <li class="item1"></li>
<li></li> <li class="item2"></li>
</ul> <li class="item3"></li>
</nav> <li class="item4"></li>
<li class="item5"></li>
</ul>
Sibling: +
div+p+bq h$[title=item$]{Header $}*3
<div></div> <h1 title="item1">Header 1</h1>
<p></p> <h2 title="item2">Header 2</h2>
<blockquote></blockquote> <h3 title="item3">Header 3</h3>

ul>li.item$$$*5
Climb-up: ^
<ul>
div+div>p>span+em^bq <li class="item001"></li>
<div></div> <li class="item002"></li>
<div> <li class="item003"></li>
<p><span></span><em></em></p> <li class="item004"></li>
<blockquote></blockquote> <li class="item005"></li>
</div> </ul>

div+div>p>span+em^^bq ul>li.item$@-*5
<div></div> <ul>
<div> <li class="item5"></li>
<p><span></span><em></em></p> <li class="item4"></li>
</div> <li class="item3"></li>
<blockquote></blockquote> <li class="item2"></li>
<li class="item1"></li>
</ul>
Grouping: ()
div>(header>ul>li*2>a)+footer>p ul>li.item$@3*5
<div> <ul>
<header> <li class="item3"></li>
<ul> <li class="item4"></li>
<li><a href=""></a></li> <li class="item5"></li>
<li><a href=""></a></li> <li class="item6"></li>
</ul> <li class="item7"></li>
</header> </ul>
<footer>
<p></p>
</footer> ID and CLASS attributes
</div> #header
<div id="header"></div>
(div>dl>(dt+dd)*3)+footer>p
<div> .title

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

<dl>
<div class="title"></div>
<dt></dt>
<dd></dd>
<dt></dt> form#search.wide
<dd></dd> <form id="search" class="wide"></form>
<dt></dt>
<dd></dd> p.class1.class2.class3
</dl> <p class="class1 class2 class3"></p>
</div>
<footer>
<p></p> Custom attributes
</footer>
p[title="Hello world"]
<p title="Hello world"></p>
Multiplication: *
td[rowspan=2 colspan=3 title]
ul>li*5
<td rowspan="2" colspan="3" title=""></td>
<ul>
<li></li>
<li></li> [a='value1' b="value2"]
<li></li> <div a="value1" b="value2"></div>
<li></li>
<li></li>
</ul>
Text: {}
a{Click me}
<a href="">Click me</a>

p>{Click }+a{here}+{ to continue}


<p>Click <a href="">here</a> to continue</p>

Implicit tag names


.class
<div class="class"></div>

em>.class
<em><span class="class"></span></em>

ul>.class
<ul>
<li class="class"></li>
</ul>

table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

HTML
All unknown abbreviations will be transformed to tag, e.g. foo <foo></foo>.
! pic
Alias of html:5 Alias of picture

<!DOCTYPE html> <picture> </picture>


<html lang="en">
<head> ifr
<meta charset="UTF-8" />
Alias of iframe
<title> Document </title>
</head> <iframe src=" " frameborder="0"> </iframe>
<body>
emb
</body>
Alias of embed
</html>
<embed src=" " type=" " />

a
<a href=" "> </a> obj
Alias of object
a:link <object data=" " type=" "> </object>
<a href="http:// "> </a>

cap
a:mail
Alias of caption
<a href="mailto: "> </a>
<caption> </caption>

abbr
colg
<abbr title=" "> </abbr>
Alias of colgroup

acronym, acr <colgroup> </colgroup>


<acronym title=" "> </acronym>
fst, fset
base Alias of fieldset
<base href=" " />
<fieldset> </fieldset>

basefont
btn
<basefont />
Alias of button

<button> </button>
br
<br />
optg

frame Alias of optgroup


<frame /> <optgroup> </optgroup>

hr tarea
<hr />
Alias of textarea

<textarea name=" " id=" " cols=" 30 " rows=" 10 ">


bdo
</textarea>
<bdo dir=" "> </bdo>

leg
bdo:r
Alias of legend
<bdo dir="rtl"> </bdo>
<legend> </legend>

bdo:l

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

<bdo dir="ltr"> </bdo> sect


Alias of section
col <section> </section>
<col />

art
link
Alias of article
<link rel="stylesheet" href=" " />
<article> </article>

link:css
hdr
<link rel="stylesheet" href=" style .css" />
Alias of header

link:print <header> </header>


<link rel="stylesheet" href=" print .css"
media="print" /> ftr
Alias of footer
link:favicon
<footer> </footer>
<link rel="shortcut icon" type="image/x-icon" href="
favicon.ico " />
adr
Alias of address
link:touch
<link rel="apple-touch-icon" href=" favicon.png " /> <address> </address>

link:rss dlg
<link rel="alternate" type="application/rss+xml" Alias of dialog
title="RSS" href=" rss.xml " />
<dialog> </dialog>

link:atom
str
<link rel="alternate" type="application/atom+xml"
title="Atom" href=" atom.xml " /> Alias of strong

<strong> </strong>
link:import, link:im
<link rel="import" href=" component .html" /> prog
Alias of progress
meta <progress> </progress>
<meta />

mn
meta:utf
Alias of main
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" /> <main> </main>

meta:win tem
<meta http-equiv="Content-Type" Alias of template
content="text/html;charset=windows-1251" />
<template> </template>

meta:vp
datag
<meta name="viewport" content="width= device-width ,
Alias of datagrid
user-scalable= no , initial-scale= 1.0 , maximum-
scale= 1.0 , minimum-scale= 1.0 " /> <datagrid> </datagrid>

meta:compat datal
<meta http-equiv="X-UA-Compatible" content=" IE=7 " Alias of datalist
/>
<datalist> </datalist>

style
kg
<style> </style>

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

Alias of keygen
<keygen />
script
<script> </script>
out
Alias of output
script:src
<script src=" "> </script> <output> </output>

img det
<img src=" " alt=" " /> Alias of details

<details> </details>
img:srcset, img:s
<img srcset=" " src=" " alt=" " />
cmd
Alias of command
img:sizes, img:z
<command />
<img sizes=" " srcset=" " src=" " alt=" " />

doc
picture
Alias of html>
<picture> </picture>
(head>meta[charset=${charset}]+title{${1:Document}})+body

<html>
source, src
<head>
<source />
<meta charset="UTF-8" />
<title> Document </title>
source:src, src:sc </head>
<source src=" " type=" " /> <body>

source:srcset, src:s </body>


<source srcset=" " /> </html>

source:media, src:m doc4


<source media="( min-width: )" srcset=" " /> Alias of html>(head>meta[http-equiv="Content-Type"
content="text/html;charset=${charset}"]+title{${1:Documen
t}})+body
source:type, src:t
<source srcset=" " type=" image/ " /> <html>
<head>
<meta http-equiv="Content-Type"
source:sizes, src:z
content="text/html;charset=UTF-8" />
<source sizes=" " srcset=" " />
<title> Document </title>
</head>
source:media:type, src:mt <body>
<source media="( min-width: )" srcset=" " type="
image/ " /> </body>
</html>
source:media:sizes, src:mz
<source media="( min-width: )" sizes=" " srcset=" " ri:dpr, ri:d
/> Alias of img:s

<img srcset=" " src=" " alt=" " />


source:sizes:type, src:zt
<source sizes=" " srcset=" " type=" image/ " />
ri:viewport, ri:v
Alias of img:z
iframe
<iframe src=" " frameborder="0"> </iframe> <img sizes=" " srcset=" " src=" " alt=" " />

embed ri:art, ri:a


<embed src=" " type=" " /> Alias of pic>src:m+img

<picture>

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

object <source media="( min-width: )" srcset=" " />


<object data=" " type=" "> </object> <img src=" " alt=" " />
</picture>
param
<param name=" " value=" " /> ri:type, ri:t
Alias of pic>src:t+img
map <picture>
<map name=" "> </map> <source srcset=" " type=" image/ " />
<img src=" " alt=" " />
area </picture>
<area shape=" " coords=" " href=" " alt=" " />
html:4t
area:d Alias of !!!4t+doc4[lang=${lang}]
<area shape="default" href=" " alt=" " />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
area:c "http://www.w3.org/TR/html4/loose.dtd">
<area shape="circle" coords=" " href=" " alt=" " /> <html lang="en">
<head>
area:r <meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
<area shape="rect" coords=" " href=" " alt=" " />
<title> Document </title>
</head>
area:p <body>
<area shape="poly" coords=" " href=" " alt=" " />
</body>
form </html>
<form action=" "> </form>
html:4s
form:get Alias of !!!4s+doc4[lang=${lang}]
<form action=" " method="get"> </form>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
form:post <html lang="en">
<form action=" " method="post"> </form> <head>
<meta http-equiv="Content-Type"
label content="text/html;charset=UTF-8" />
<label for=" "> </label> <title> Document </title>
</head>
<body>
input
<input type=" text " /> </body>
</html>
inp
<input type=" text " name=" " id=" " /> html:xt
Alias of !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml
input:hidden, input:h xml:lang=${lang}]
Alias of input[type=hidden name] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
<input type="hidden" name=" " /> Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
input:text, input:t
<html xmlns="http://www.w3.org/1999/xhtml"
Alias of inp xml:lang="en">
<input type=" text " name=" " id=" " /> <head>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
input:search
<title> Document </title>
Alias of inp[type=search]
</head>
<input type="search" name=" " id=" " /> <body>

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

input:email </body>
</html>
Alias of inp[type=email]

<input type="email" name=" " id=" " />


html:xs
Alias of !!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml
input:url xml:lang=${lang}]
Alias of inp[type=url] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
<input type="url" name=" " id=" " /> Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
input:password, input:p <html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
Alias of inp[type=password]
<head>
<input type="password" name=" " id=" " /> <meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
input:datetime <title> Document </title>
</head>
Alias of inp[type=datetime]
<body>
<input type="datetime" name=" " id=" " />
</body>
input:date </html>

Alias of inp[type=date]
html:xxs
<input type="date" name=" " id=" " />
Alias of !!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml
xml:lang=${lang}]
input:datetime-local
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
Alias of inp[type=datetime-local]
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<input type="datetime-local" name=" " id=" " /> <html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
input:month <head>
<meta http-equiv="Content-Type"
Alias of inp[type=month]
content="text/html;charset=UTF-8" />
<input type="month" name=" " id=" " /> <title> Document </title>
</head>
input:week <body>

Alias of inp[type=week]
</body>
<input type="week" name=" " id=" " /> </html>

input:time html:5
Alias of inp[type=time] Alias of !!!+doc[lang=${lang}]
<input type="time" name=" " id=" " /> <!DOCTYPE html>
<html lang="en">
input:tel <head>
<meta charset="UTF-8" />
Alias of inp[type=tel]
<title> Document </title>
<input type="tel" name=" " id=" " /> </head>
<body>
input:number
Alias of inp[type=number] </body>
</html>
<input type="number" name=" " id=" " />

ol+
input:color
Alias of ol>li
Alias of inp[type=color]
<ol>
<input type="color" name=" " id=" " />
<li> </li>
</ol>

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

input:checkbox, input:c
Alias of inp[type=checkbox] ul+
<input type="checkbox" name=" " id=" " /> Alias of ul>li

<ul>
input:radio, input:r <li> </li>
Alias of inp[type=radio] </ul>

<input type="radio" name=" " id=" " />


dl+

input:range Alias of dl>dt+dd

Alias of inp[type=range] <dl>


<dt> </dt>
<input type="range" name=" " id=" " />
<dd> </dd>
</dl>
input:file, input:f
Alias of inp[type=file] map+
<input type="file" name=" " id=" " /> Alias of map>area

<map name=" ">


input:submit, input:s <area shape=" " coords=" " href=" " alt=" " />
<input type="submit" value=" " /> </map>

input:image, input:i table+


<input type="image" src=" " alt=" " /> Alias of table>tr>td

<table>
input:button, input:b <tr>
<input type="button" value=" " /> <td> </td>
</tr>
isindex </table>
<isindex />
colgroup+, colg+
input:reset Alias of colgroup>col
Alias of input:button[type=reset] <colgroup>
<col />
<input type="reset" value=" " />
</colgroup>

select
tr+
<select name=" " id=" "> </select>
Alias of tr>td

select:disabled, select:d <tr>


<td> </td>
Alias of select[disabled.]
</tr>
<select name=" " id=" " disabled="disabled">
</select>
select+
Alias of select>option
option, opt
<option value=" "> </option> <select name=" " id=" ">
<option value=" "> </option>
</select>
textarea
<textarea name=" " id=" " cols=" 30 " rows=" 10 ">
</textarea> optgroup+, optg+
Alias of optgroup>option

marquee <optgroup>
<marquee behavior=" " direction=" "> </marquee> <option value=" "> </option>
</optgroup>
menu:context, menu:c
pic+
Alias of menu[type=context]>

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

Alias of picture>source:srcset+img
<menu type="context"> </menu>
<picture>
<source srcset=" " />
menu:toolbar, menu:t
<img src=" " alt=" " />
Alias of menu[type=toolbar]>
</picture>
<menu type="toolbar"> </menu>
!!!
video <!DOCTYPE html>
<video src=" "> </video>
!!!4t
audio <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
<audio src=" "> </audio> Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
html:xml
<html xmlns="http://www.w3.org/1999/xhtml"> </html> !!!4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
keygen "http://www.w3.org/TR/html4/strict.dtd">
<keygen />
!!!xt

command <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//EN"
<command />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
button:submit, button:s, btn:s
Alias of button[type=submit] !!!xs
<button type="submit"> </button> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
button:reset, button:r, btn:r strict.dtd">

Alias of button[type=reset]
!!!xxs
<button type="reset"> </button>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
button:disabled, button:d, btn:d
Alias of button[disabled.] c
<button disabled="disabled"> </button> <!-- ${child} -->

fieldset:disabled, fieldset:d, fset:d, fst:d cc:ie6

Alias of fieldset[disabled.] <!--[if lte IE 6]>


${child}
<fieldset disabled="disabled"> </fieldset>
<![endif]-->

bq
cc:ie
Alias of blockquote <!--[if IE]>
<blockquote> </blockquote> ${child}
<![endif]-->

fig
cc:noie
Alias of figure
<!--[if !IE]><!-->
<figure> </figure> ${child}
<!--<![endif]-->
figc
Alias of figcaption

<figcaption> </figcaption>

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

CSS
CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h == ov-h == ovh == oh.
If abbreviation wasnt found, it is transformed into property name: foo-bar foo-bar: |;
You can prefix abbreviations with hyphen to produce vendor-prefixed properties: -foo

Visual Formatting Border


pos position: relative ; bd border: ;

pos:s position:static; bd+ border: 1px solid #000 ;

pos:a position:absolute; bd:n border:none;

pos:r position:relative; bdbk border-break: close ;

pos:f position:fixed; bdbk:c border-break:close;

t top: ; bdcl border-collapse: ;

t:a top:auto; bdcl:c border-collapse:collapse;

r right: ; bdcl:s border-collapse:separate;

r:a right:auto; bdc border-color:# 000 ;

b bottom: ; bdc:t border-color:transparent;

b:a bottom:auto; bdi border-image:url( );

l left: ; bdi:n border-image:none;

l:a left:auto; bdti border-top-image:url( );

z z-index: ; bdti:n border-top-image:none;

z:a z-index:auto; bdri border-right-image:url( );

fl float: left ; bdri:n border-right-image:none;

fl:n float:none; bdbi border-bottom-image:url( );

fl:l float:left; bdbi:n border-bottom-image:none;

fl:r float:right; bdli border-left-image:url( );

cl clear: both ; bdli:n border-left-image:none;

cl:n clear:none; bdci border-corner-image:url( );

cl:l clear:left; bdci:n border-corner-image:none;

cl:r clear:right; bdci:c border-corner-image:continue;

cl:b clear:both; bdtli border-top-left-image:url( );

d display: block ; bdtli:n border-top-left-image:none;

d:n display:none; bdtli:c border-top-left-image:continue;

d:b display:block; bdtri border-top-right-image:url( );

d:f display:flex; bdtri:n border-top-right-image:none;

d:if display:inline-flex; bdtri:c border-top-right-image:continue;

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

d:i display:inline; bdbri border-bottom-right-image:url( );

d:ib display:inline-block; bdbri:n border-bottom-right-image:none;

d:li display:list-item; bdbri:c border-bottom-right-image:continue;

d:ri display:run-in; bdbli border-bottom-left-image:url( );

d:cp display:compact; bdbli:n border-bottom-left-image:none;

d:tb display:table; bdbli:c border-bottom-left-image:continue;

d:itb display:inline-table; bdf border-fit: repeat ;

d:tbcp display:table-caption; bdf:c border-fit:clip;

d:tbcl display:table-column; bdf:r border-fit:repeat;

d:tbclg display:table-column-group; bdf:sc border-fit:scale;

d:tbhg display:table-header-group; bdf:st border-fit:stretch;

d:tbfg display:table-footer-group; bdf:ow border-fit:overwrite;

d:tbr display:table-row; bdf:of border-fit:overflow;

d:tbrg display:table-row-group; bdf:sp border-fit:space;

d:tbc display:table-cell; bdlen border-length: ;

d:rb display:ruby; bdlen:a border-length:auto;

d:rbb display:ruby-base; bdsp border-spacing: ;

d:rbbg display:ruby-base-group; bds border-style: ;

d:rbt display:ruby-text; bds:n border-style:none;

d:rbtg display:ruby-text-group; bds:h border-style:hidden;

v visibility: hidden ; bds:dt border-style:dotted;

v:v visibility:visible; bds:ds border-style:dashed;

v:h visibility:hidden; bds:s border-style:solid;

v:c visibility:collapse; bds:db border-style:double;

ov overflow: hidden ; bds:dtds border-style:dot-dash;

ov:v overflow:visible; bds:dtdtds border-style:dot-dot-dash;

ov:h overflow:hidden; bds:w border-style:wave;

ov:s overflow:scroll; bds:g border-style:groove;

ov:a overflow:auto; bds:r border-style:ridge;

ovx overflow-x: hidden ; bds:i border-style:inset;

ovx:v overflow-x:visible; bds:o border-style:outset;

ovx:h overflow-x:hidden; bdw border-width: ;

ovx:s overflow-x:scroll; bdt, bt border-top: ;

ovx:a overflow-x:auto; bdt+ border-top: 1px solid #000 ;

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

ovy overflow-y: hidden ; bdt:n border-top:none;

ovy:v overflow-y:visible; bdtw border-top-width: ;

ovy:h overflow-y:hidden; bdts border-top-style: ;

ovy:s overflow-y:scroll; bdts:n border-top-style:none;

ovy:a overflow-y:auto; bdtc border-top-color:# 000 ;

ovs overflow-style: scrollbar ; bdtc:t border-top-color:transparent;

ovs:a overflow-style:auto; bdr, br border-right: ;

ovs:s overflow-style:scrollbar; bdr+ border-right: 1px solid #000 ;

ovs:p overflow-style:panner; bdr:n border-right:none;

ovs:m overflow-style:move; bdrw border-right-width: ;

ovs:mq overflow-style:marquee; bdrst border-right-style: ;

zoo, zm zoom:1; bdrst:n border-right-style:none;

cp clip: ; bdrc border-right-color:# 000 ;

cp:a clip:auto; bdrc:t border-right-color:transparent;

cp:r clip:rect( top right bottom left bdb, bb border-bottom: ;


);
bdb+ border-bottom: 1px solid #000 ;
rsz resize: ;
bdb:n border-bottom:none;
rsz:n resize:none;
bdbw border-bottom-width: ;
rsz:b resize:both;
bdbs border-bottom-style: ;
rsz:h resize:horizontal;
bdbs:n border-bottom-style:none;
rsz:v resize:vertical;
bdbc border-bottom-color:# 000 ;
cur cursor:${pointer};
bdbc:t border-bottom-color:transparent;
cur:a cursor:auto;
bdl, bl border-left: ;
cur:d cursor:default;
bdl+ border-left: 1px solid #000 ;
cur:c cursor:crosshair;
bdl:n border-left:none;
cur:ha cursor:hand;
bdlw border-left-width: ;
cur:he cursor:help;
bdls border-left-style: ;
cur:m cursor:move;
bdls:n border-left-style:none;
cur:p cursor:pointer;
bdlc border-left-color:# 000 ;
cur:t cursor:text;
bdlc:t border-left-color:transparent;

Margin & Padding bdrs border-radius: ;

m margin: ; bdtrrs border-top-right-radius: ;

m:a margin:auto; bdtlrs border-top-left-radius: ;

mt margin-top: ; bdbrrs border-bottom-right-radius: ;

mt:a margin-top:auto; bdblrs border-bottom-left-radius: ;

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

mr margin-right: ;
Lists
mr:a margin-right:auto;
lis list-style: ;
mb margin-bottom: ;
lis:n list-style:none;
mb:a margin-bottom:auto;
lisp list-style-position: ;
ml margin-left: ;
lisp:i list-style-position:inside;
ml:a margin-left:auto;
lisp:o list-style-position:outside;
p padding: ;
list list-style-type: ;
pt padding-top: ;
list:n list-style-type:none;
pr padding-right: ;
list:d list-style-type:disc;
pb padding-bottom: ;
list:c list-style-type:circle;
pl padding-left: ;
list:s list-style-type:square;

Box Sizing list:dc list-style-type:decimal;

bxz box-sizing: border-box ; list:dclz list-style-type:decimal-leading-zero;

bxz:cb box-sizing:content-box; list:lr list-style-type:lower-roman;

bxz:bb box-sizing:border-box; list:ur list-style-type:upper-roman;

bxsh box-shadow: inset hoff voff blur lisi list-style-image: ;


color ;
lisi:n list-style-image:none;
bxsh:r box-shadow: inset hoff voff blur
spread rgb( 0 , 0 , 0 );
Print
bxsh:ra box-shadow: inset h v blur
pgbb page-break-before: ;
spread rgba( 0 , 0 , 0 , . 5 );
pgbb:au page-break-before:auto;
bxsh:n box-shadow:none;
pgbb:al page-break-before:always;
w width: ;
pgbb:l page-break-before:left;
w:a width:auto;
pgbb:r page-break-before:right;
h height: ;
pgbi page-break-inside: ;
h:a height:auto;
pgbi:au page-break-inside:auto;
maw max-width: ;
pgbi:av page-break-inside:avoid;
maw:n max-width:none;
pgba page-break-after: ;
mah max-height: ;
pgba:au page-break-after:auto;
mah:n max-height:none;
pgba:al page-break-after:always;
miw min-width: ;
pgba:l page-break-after:left;
mih min-height: ;
pgba:r page-break-after:right;

Font orp orphans: ;


f font: ; wid widows: ;
f+ font: 1em Arial,sans-serif ;

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

fw font-weight: ;
Others
! !important
fw:n font-weight:normal;
@f @font-face {
fw:b font-weight:bold;
font-family: ;
fw:br font-weight:bolder; src:url(|);
}
fw:lr font-weight:lighter;
@f+ @font-face {
fs font-style:${italic}; font-family: ' FontName ';
src: url(' FileName .eot');
fs:n font-style:normal; src: url(' FileName .eot?#iefix')
format('embedded-opentype'),
fs:i font-style:italic;
url(' FileName .woff')
fs:o font-style:oblique; format('woff'),
url(' FileName .ttf')
fv font-variant: ; format('truetype'),
url(' FileName .svg# FontName
fv:n font-variant:normal; ') format('svg');
font-style: normal ;
fv:sc font-variant:small-caps;
font-weight: normal ;
fz font-size: ; }

fza font-size-adjust: ; @i, @import @import url( );

fza:n font-size-adjust:none; @kf @-webkit-keyframes identifier {


from { }
ff font-family: ; to { }
}
ff:s font-family:serif; @-o-keyframes identifier {
from { }
ff:ss font-family:sans-serif;
to { }
ff:c font-family:cursive; }
@-moz-keyframes identifier {
ff:f font-family:fantasy; from { }
to { }
ff:m font-family:monospace; }
@keyframes identifier {
ff:a font-family: Arial, "Helvetica Neue",
from { }
Helvetica, sans-serif;
to { }
ff:t font-family: "Times New Roman", Times, }
Baskerville, Georgia, serif;
@m, @media @media screen {
ff:v font-family: Verdana, Geneva, sans-
serif; }

fef font-effect: ; ac align-content: ;

fef:n font-effect:none; ac:c align-content:center;

fef:eg font-effect:engrave; ac:fe align-content:flex-end;

fef:eb font-effect:emboss; ac:fs align-content:flex-start;

fef:o font-effect:outline; ac:s align-content:stretch;

fem font-emphasize: ; ac:sa align-content:space-around;

femp font-emphasize-position: ; ac:sb align-content:space-between;

femp:b font-emphasize-position:before; ai align-items: ;

femp:a font-emphasize-position:after; ai:b align-items:baseline;

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

fems font-emphasize-style: ; ai:c align-items:center;

fems:n font-emphasize-style:none; ai:fe align-items:flex-end;

fems:ac font-emphasize-style:accent; ai:fs align-items:flex-start;

fems:dt font-emphasize-style:dot; ai:s align-items:stretch;

fems:c font-emphasize-style:circle; anim animation: ;

fems:ds font-emphasize-style:disc; anim- animation: name duration


timing-function delay
fsm font-smooth: ; iteration-count direction
fill-mode ;
fsm:a font-smooth:auto;
animdel animation-delay: time ;
fsm:n font-smooth:never;
animdir animation-direction: normal ;
fsm:aw font-smooth:always;
animdir:a animation-direction:alternate;
fst font-stretch: ;
animdir:ar animation-direction:alternate-reverse;
fst:n font-stretch:normal;
animdir:n animation-direction:normal;
fst:uc font-stretch:ultra-condensed;
animdir:r animation-direction:reverse;
fst:ec font-stretch:extra-condensed;
animdur animation-duration: 0 s;
fst:c font-stretch:condensed;
animfm animation-fill-mode: both ;
fst:sc font-stretch:semi-condensed;
animfm:b animation-fill-mode:backwards;
fst:se font-stretch:semi-expanded;
animfm:bt, animfm:bh animation-fill-mode:both;
fst:e font-stretch:expanded;
animfm:f animation-fill-mode:forwards;
fst:ee font-stretch:extra-expanded;
animic animation-iteration-count: 1 ;
fst:ue font-stretch:ultra-expanded;
animic:i animation-iteration-count:infinite;

Text animn animation-name: none ;

va vertical-align: top ; animps animation-play-state: running ;

va:sup vertical-align:super; animps:p animation-play-state:paused;

va:t vertical-align:top; animps:r animation-play-state:running;

va:tt vertical-align:text-top; animtf animation-timing-function: linear ;

va:m vertical-align:middle; animtf:cb animation-timing-function:cubic-


bezier( 0.1 , 0.7 , 1.0 , 0.1 );
va:bl vertical-align:baseline;
animtf:e animation-timing-function:ease;
va:b vertical-align:bottom;
animtf:ei animation-timing-function:ease-in;
va:tb vertical-align:text-bottom;
animtf:eio animation-timing-function:ease-in-out;
va:sub vertical-align:sub;
animtf:eo animation-timing-function:ease-out;
ta text-align: left ;
animtf:l animation-timing-function:linear;
ta:l text-align:left;
ap appearance:${none};
ta:c text-align:center;
as align-self: ;
ta:r text-align:right;

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

as:a align-self:auto;
ta:j text-align:justify;
as:b align-self:baseline;
ta-lst text-align-last: ;
as:c align-self:center;
tal:a text-align-last:auto;
as:fe align-self:flex-end;
tal:l text-align-last:left;
as:fs align-self:flex-start;
tal:c text-align-last:center;
as:s align-self:stretch;
tal:r text-align-last:right;
bfv backface-visibility: ;
td text-decoration: none ;
bfv:h backface-visibility:hidden;
td:n text-decoration:none;
bfv:v backface-visibility:visible;
td:u text-decoration:underline;
bg:ie filter:progid:DXImageTransform.Microso
td:o text-decoration:overline;
ft.AlphaImageLoader(src=' x
td:l .png',sizingMethod=' crop ');
text-decoration:line-through;
cm /* ${child} */
te text-emphasis: ;
colm columns: ;
te:n text-emphasis:none;
colmc column-count: ;
te:ac text-emphasis:accent;
colmf column-fill: ;
te:dt text-emphasis:dot;
colmg column-gap: ;
te:c text-emphasis:circle;
colmr column-rule: ;
te:ds text-emphasis:disc;
colmrc column-rule-color: ;
te:b text-emphasis:before;
colmrs column-rule-style: ;
te:a text-emphasis:after;
colmrw column-rule-width: ;
th text-height: ;
colms column-span: ;
th:a text-height:auto;
colmw column-width: ;
th:f text-height:font-size;
d:ib+ display: inline-block;
th:t text-height:text-size;
*display: inline;
th:m text-height:max-size; *zoom: 1;

ti text-indent: ; fx flex: ;

ti:- text-indent:-9999px; fxb flex-basis: ;

tj text-justify: ; fxd flex-direction: ;

tj:a text-justify:auto; fxd:c flex-direction:column;

tj:iw text-justify:inter-word; fxd:cr flex-direction:column-reverse;

tj:ii text-justify:inter-ideograph; fxd:r flex-direction:row;

tj:ic text-justify:inter-cluster; fxd:rr flex-direction:row-reverse;

tj:d text-justify:distribute; fxf flex-flow: ;

tj:k text-justify:kashida; fxg flex-grow: ;

tj:t text-justify:tibetan; fxsh flex-shrink: ;

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

to text-outline: ; fxw flex-wrap: ;

to+ text-outline: 0 0 #000 ; fxw:n flex-wrap:nowrap;

to:n text-outline:none; fxw:w flex-wrap:wrap;

tr text-replace: ; fxw:wr flex-wrap:wrap-reverse;

tr:n text-replace:none; jc justify-content: ;

tt text-transform: uppercase ; jc:c justify-content:center;

tt:n text-transform:none; jc:fe justify-content:flex-end;

tt:c text-transform:capitalize; jc:fs justify-content:flex-start;

tt:u text-transform:uppercase; jc:sa justify-content:space-around;

tt:l text-transform:lowercase; jc:sb justify-content:space-between;

tw text-wrap: ; mar max-resolution: res ;

tw:n text-wrap:normal; mir min-resolution: res ;

tw:no text-wrap:none; op+ opacity: ;


filter: alpha(opacity= );
tw:u text-wrap:unrestricted;
op:ie filter:progid:DXImageTransform.Microso
tw:s text-wrap:suppress; ft.Alpha(Opacity=100);

tsh text-shadow: hoff voff blur #000 ; op:ms -ms-


filter:'progid:DXImageTransform.Micros
tsh:r text-shadow: h v blur rgb( 0 , 0 ,
oft.Alpha(Opacity=100)';
0 );
ord order: ;
tsh:ra text-shadow: h v blur rgba( 0 , 0
, 0 , . 5 ); ori orientation: ;

tsh+ text-shadow: 0 0 0 #000 ; ori:l orientation:landscape;

tsh:n text-shadow:none; ori:p orientation:portrait;

lh line-height: ; tov text-overflow:${ellipsis};

lts letter-spacing: ; tov:c text-overflow:clip;

lts-n letter-spacing:normal; tov:e text-overflow:ellipsis;

whs white-space: ; trf transform: ;

whs:n white-space:normal; trf:r transform: rotate( angle );

whs:p white-space:pre; trf:rx transform: rotateX( angle );

whs:nw white-space:nowrap; trf:ry transform: rotateY( angle );

whs:pw white-space:pre-wrap; trf:rz transform: rotateZ( angle );

whs:pl white-space:pre-line; trf:sc transform: scale( x , y );

whsc white-space-collapse: ; trf:sc3 transform: scale3d( x , y , z );

whsc:n white-space-collapse:normal; trf:scx transform: scaleX( x );

whsc:k white-space-collapse:keep-all; trf:scy transform: scaleY( y );

whsc:l white-space-collapse:loose; trf:scz transform: scaleZ( z );

whsc:bs white-space-collapse:break-strict;

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

trf:skx transform: skewX( angle );

whsc:ba white-space-collapse:break-all; trf:sky transform: skewY( angle );

wob word-break: ; trf:t transform: translate( x , y );

wob:n word-break:normal; trf:t3 transform: translate3d( tx , ty , tz


);
wob:k word-break:keep-all;
trf:tx transform: translateX( x );
wob:ba word-break:break-all;
trf:ty transform: translateY( y );
wos word-spacing: ;
trf:tz transform: translateZ( z );
wow word-wrap: ;
trfo transform-origin: ;
wow:nm word-wrap:normal;
trfs transform-style: preserve-3d ;
wow:n word-wrap:none;
trs transition: prop time ;
wow:u word-wrap:unrestricted;
trsde transition-delay: time ;
wow:s word-wrap:suppress;
trsdu transition-duration: time ;
wow:b word-wrap:break-word;
trsp transition-property: prop ;

Background trstf transition-timing-function: tfunc ;

bg background:# 000 ; us user-select:${none};

bg+ background: #fff url( ) 0 0 wfsm -webkit-font-smoothing:${antialiased};


no-repeat ;
wfsm:a -webkit-font-smoothing:antialiased;
bg:n background:none;
wfsm:n -webkit-font-smoothing:none;
bgc background-color:# fff ;
wfsm:s, wfsm:sa -webkit-font-smoothing:subpixel-
bgc:t background-color:transparent; antialiased;

bgi background-image:url( ); wm writing-mode: lr-tb ;

bgi:n background-image:none; wm:btl writing-mode:bt-lr;

bgr background-repeat: ; wm:btr writing-mode:bt-rl;

bgr:n background-repeat:no-repeat; wm:lrb writing-mode:lr-bt;

bgr:x background-repeat:repeat-x; wm:lrt writing-mode:lr-tb;

bgr:y background-repeat:repeat-y; wm:rlb writing-mode:rl-bt;

bgr:sp background-repeat:space; wm:rlt writing-mode:rl-tb;

bgr:rd background-repeat:round; wm:tbl writing-mode:tb-lr;

bga background-attachment: ; wm:tbr writing-mode:tb-rl;

bga:f background-attachment:fixed;

bga:s background-attachment:scroll;

bgp background-position: 0 0 ;

bgpx background-position-x: ;

bgpy background-position-y: ;

bgbk background-break: ;

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

bgbk:bb background-break:bounding-box;

bgbk:eb background-break:each-box;

bgbk:c background-break:continuous;

bgcp background-clip: padding-box ;

bgcp:bb background-clip:border-box;

bgcp:pb background-clip:padding-box;

bgcp:cb background-clip:content-box;

bgcp:nc background-clip:no-clip;

bgo background-origin: ;

bgo:pb background-origin:padding-box;

bgo:bb background-origin:border-box;

bgo:cb background-origin:content-box;

bgsz background-size: ;

bgsz:a background-size:auto;

bgsz:ct background-size:contain;

bgsz:cv background-size:cover;

Color
c color:# 000 ;

c:r color:rgb( 0 , 0 , 0 );

c:ra color:rgba( 0 , 0 , 0 , . 5 );

op opacity: ;

Generated content
cnt content:' ';

cnt:n, ct:n content:normal;

cnt:oq, ct:oq content:open-quote;

cnt:noq, ct:noq content:no-open-quote;

cnt:cq, ct:cq content:close-quote;

cnt:ncq, ct:ncq content:no-close-quote;

cnt:a, ct:a content:attr( );

cnt:c, ct:c content:counter( );

cnt:cs, ct:cs content:counters( );

ct content: ;

q quotes: ;

q:n

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

quotes:none;

q:ru quotes:'\00AB' '\00BB' '\201E'


'\201C';

q:en quotes:'\201C' '\201D' '\2018'


'\2019';

coi counter-increment: ;

cor counter-reset: ;

Outline
ol outline: ;

ol:n outline:none;

olo outline-offset: ;

olw outline-width: ;

olw:tn outline-width:thin;

olw:m outline-width:medium;

olw:tc outline-width:thick;

ols outline-style: ;

ols:n outline-style:none;

ols:dt outline-style:dotted;

ols:ds outline-style:dashed;

ols:s outline-style:solid;

ols:db outline-style:double;

ols:g outline-style:groove;

ols:r outline-style:ridge;

ols:i outline-style:inset;

ols:o outline-style:outset;

olc outline-color:# 000 ;

olc:i outline-color:invert;

Tables
tbl table-layout: ;

tbl:a table-layout:auto;

tbl:f table-layout:fixed;

cps caption-side: ;

cps:t caption-side:top;

cps:b caption-side:bottom;

ec empty-cells: ;

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

ec:s empty-cells:show;

ec:h empty-cells:hide;

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

XSL
tmatch, tm co
<xsl:template match=" " mode=" "> </xsl:template> <xsl:copy-of select=" " />

tname, tn val
<xsl:template name=" "> </xsl:template> <xsl:value-of select=" " />

call each, for


<xsl:call-template name=" " /> <xsl:for-each select=" "> </xsl:for-each>

ap tex
<xsl:apply-templates select=" " mode=" " /> <xsl:text> </xsl:text>

api com
<xsl:apply-imports /> <xsl:comment> </xsl:comment>

imp msg
<xsl:import href=" " /> <xsl:message terminate="no"> </xsl:message>

inc fall
<xsl:include href=" " /> <xsl:fallback> </xsl:fallback>

ch num
<xsl:choose> </xsl:choose> <xsl:number value=" " />

xsl:when, wh nam
<xsl:when test=" "> </xsl:when> <namespace-alias stylesheet-prefix=" " result-
prefix=" " />
ot
<xsl:otherwise> </xsl:otherwise> pres
<xsl:preserve-space elements=" " />

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]


Cheat Sheet

if
<xsl:if test=" "> </xsl:if> strip
<xsl:strip-space elements=" " />
par
<xsl:param name=" "> </xsl:param> proc
<xsl:processing-instruction name=" ">
pare </xsl:processing-instruction>

<xsl:param name=" " select=" " />


sort

var <xsl:sort select=" " order=" " />

<xsl:variable name=" "> </xsl:variable>


choose+

vare Alias of xsl:choose>xsl:when+xsl:otherwise


<xsl:variable name=" " select=" " /> <xsl:choose>
<xsl:when test=" "> </xsl:when>
wp <xsl:otherwise> </xsl:otherwise>
<xsl:with-param name=" " select=" " /> </xsl:choose>

key xsl
<xsl:key name=" " match=" " use=" " /> Alias of !!!+xsl:stylesheet[version=1.0
xmlns:xsl=http://www.w3.org/1999/XSL/Transform]>{
|}
elem
<xsl:element name=" "> </xsl:element> <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
attr
</xsl:stylesheet>
<xsl:attribute name=" "> </xsl:attribute>

!!!
attrs
<?xml version="1.0" encoding="UTF-8"?>
<xsl:attribute-set name=" "> </xsl:attribute-set>

cp
<xsl:copy select=" " />

http://docs.emmet.io/cheat-sheet/[6/20/2015 3:38:43 PM]

You might also like