Skip to content

Rohan-Shakya/Emmet-Cheat-Sheet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 

Repository files navigation

Emmet Cheat Sheet


Syntax

  1. Child: >
  2. Sibling: +
  3. Climb-up: ^
  4. Grouping: ()
  5. Multiplication: *
  6. Naming and numbering: $
  7. ID and CLASS attributes: .
  8. Custom attributes
  9. Text: {}
  10. Implicit tag names

HTML

  1. Form
  2. Input
  3. Button

CSS

  1. Visual Formatting
  2. Margin & Padding
  3. Box Sizing
  4. Font
  5. Background
  6. Color
  7. Generated content
  8. Outline
  9. Tables
  10. Border
  11. Lists
  12. Print
  13. Others
  14. Animation
  15. Transform, Transition

XSL

HTML DOCTYPES


Syntax

Child: >

nav>ul>li

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

Sibling: +

div+p+bq

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

Climb-up: ^

div+div>p>span+em^bq

   <div></div>
   <div>
      <p><span></span><em></em></p>
      <blockquote></blockquote>
   </div>
div+div>p>span+em^^bq
   <div></div>
   <div>
      <p><span></span><em></em></p>
   </div>
   <blockquote></blockquote>

Grouping: ()

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>

(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
 </div>
 <footer>
    <p></p>
 </footer>

Multiplication: *

ul>li*5

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

Naming and numbering: $

ul>li.sample$*5

    <ul>
      <li class="sample1"></li>
      <li class="sample2"></li>
      <li class="sample3"></li>
      <li class="sample4"></li>
      <li class="sample5"></li>
   </ul>

h$[title=topic$]{Headline $}*3

<h1 title="topic1">Headline 1</h1>
<h2 title="topic2">Headline 2</h2>
<h3 title="topic3">Headline 3</h3>

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>

ID and CLASS attributes

#header

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

.title

 <div class="title"></div>

form#search.wide

 <form id="search" class="wide"></
form>

p.class1.class2.class3

 <p class="class1 class2 class3"></p>

Custom attributes

p[title="Hello world"]

 <p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

 <td rowspan="2" colspan="3"
title=""></td>

[a=‘value1‘ b="value2"]

 <div a="value1" b="value2"></div>

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>

HTML

All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>.

a

 <a href=""></a>

a:link

 <a href="http://"></a>

a:mail

 <a href="mailto:"></a>

abbr

 <abbr title=""></abbr>

acronym, acr

 <acronym title=""></acronym>

base

 <base href="" />

basefont

 <basefont />

br

 <br />

frame

 <frame />

hr

 <hr />

bdo

 <bdo dir=""></bdo>

bdo:r

 <bdo dir="rtl"></bdo>

bdo:l

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

col

<col />

link

 <link rel="stylesheet" href="" />

link:css

 <link rel="stylesheet"
href="style.css" />

link:print

 <link rel="stylesheet"
href="print.css" media="print" />

link:favicon

 <link rel="shortcut icon"
type="image/x-icon" href="favicon.
ico" />

link:touch

 <link rel="apple-touch-icon"
href="favicon.png" />

link:rss

 <link rel="alternate"
type="application/rss+xml"
title="RSS" href="rss.xml" />

link:atom

 <link rel="alternate"
type="application/atom+xml"
title="Atom" href="atom.xml" />
link:import, link:im
 <link rel="import"
href="component.html" />

meta

 <meta />

meta:utf

 <meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"
/>

meta:win

 <meta http-equiv="ContentType" content="text/
html;charset=windows-1251" />

meta:vp

 <meta name="viewport"
content="width=device-width, userscalable=no, initial-scale=1.0,
maximum-scale=1.0, minimumscale=1.0" />

meta:compat

 <meta http-equiv="X-UA-Compatible"
content="IE=7" />

style

 <style></style>

script

 <script></script>

script:src

 <script src=""></script>

img

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

img:srcset, img:s

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

img:sizes, img:z

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

picture

 <picture></picture>

source, src

 <source />

source:src, src:sc

 <source src="" type="" />

source:srcset, src:s

<source srcset="" />

source:media, src:m

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

source:type, src:t

 <source srcset="" type="image/" />

source:sizes, src:z

 <source sizes="" srcset="" />

source:media:type, src:mt

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

source:media:sizes, src:mz

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

source:sizes:type, src:zt

 <source sizes="" srcset=""
type="image/" />

iframe

 <iframe src="" frameborder="0"></
iframe>

embed

 <embed src="" type="" />

object

 <object data="" type=""></object>

param

 <param name="" value="" />

map

 <map name=""></map>

area

 <area shape="" coords="" href=""
alt="" />

area:d

 <area shape="default" href=""
alt="" />

area:c

 <area shape="circle" coords=""
href="" alt="" />

area:r

 <area shape="rect" coords=""
href="" alt="" />

area:p

 <area shape="poly" coords=""
href="" alt="" />

Form, Input, Button

form

 <form action=""></form>

form:get

 <form action="" method="get"></
form>

form:post

 <form action="" method="post"></
form>

label

 <label for=""></label>

input

 <input type="text" />

inp

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

input:hidden, input:h

 <input type="hidden" name="" />

input:text, input:t

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

input:search

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

input:email

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

input:url

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

input:password, input:p

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

input:datetime

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

input:date

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

input:datetime-local

 <input type="datetime-local"
name="" id="" />

input:month

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

input:week

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

input:time

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

input:tel`

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

input:number

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

input:color

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

input:checkbox, input:c

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

input:radio, input:r

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

input:range

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

input:file, input:f

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

input:submit, input:s

 <input type="submit" value="" />

input:image, input:i

 <input type="image" src="" alt=""
/>

input:button, input:b

 <input type="button" value="" />

isindex

 <isindex />

input:reset

 <input type="reset" value="" />

select

 <select name="" id=""></select>

select:disabled, select:d

 <select name="" id=""
disabled="disabled"></select>

option, opt

 <option value=""></option>

textarea

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

marquee

 <marquee behavior=""
direction=""></marquee>

menu:context, menu:c

 <menu type="context"></menu>

menu:toolbar, menu:t

 <menu type="toolbar"></menu>

video

 <video src=""></video>

audio

<audio src=""></audio>

html:xml

 <html xmlns="http://www.
w3.org/1999/xhtml"></html>

keygen

 <keygen />

command

 <command />

button:submit, button:s, btn:s

 <button type="submit"></button>

button:reset, button:r, btn:r

 <button type="reset"></button>

button:disabled, button:d, btn:d

 <button disabled="disabled"></
button>

fieldset:disabled, fieldset:d, fset:d, fst:d

 <fieldset disabled="disabled"></
fieldset>

bq

 <blockquote></blockquote>

fig

 <figure></figure>

figc

 <figcaption></figcaption>

pic

 <picture></picture>

ifr

 <iframe src="" frameborder="0"></
iframe>

emb

 <embed src="" type="" />

obj

 <object data="" type=""></object>

cap

 <caption></caption>

colg

 <colgroup></colgroup>

fst, fset

 <fieldset></fieldset>

btn

 <button></button>

optg

 <optgroup></optgroup>

tarea

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

leg

 <legend></legend>

sect

 <section></section>

art

 <article></article>

hdr

 <header></header>

ftr

 <footer></footer>

adr

 <address></address>

dlg

 <dialog></dialog>

str

 <strong></strong>

prog

 <progress></progress>

mn

 <main></main>

tem

 <template></template>

datag

 <datagrid></datagrid>

datal

 <datalist></datalist>

kg

 <keygen />

out

 <output></output>

det

 <details></details>

cmd

 <command />

ri:dpr, ri:d

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

ri:viewport, ri:v

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

ri:art, ri:a

 <picture>
 <source media="(min-width: )"
srcset="" />
 <img src="" alt="" />
 </picture>

ri:type, ri:t

 <picture>
 <source srcset="" type="image/"
/>
 <img src="" alt="" />
 </picture>

ol+

 <ol>
 <li></li>
 </ol>

ul+

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

dl+

 <dl>
 <dt></dt>
 <dd></dd>
 </dl>

map+

 <map name="">
 <area shape="" coords=""
href="" alt="" />
 </map>

table+

 <table>
 <tr>
 <td></td>
 </tr>
 </table>

colgroup+, colg+

 <colgroup>
 <col />
 </colgroup>

tr+

 <tr>
 <td></td>
 </tr>

select+

 <select name="" id="">
 <option value=""></option>
 </select>

optgroup+, optg+

 <optgroup>
 <option value=""></option>
 </optgroup>

pic+

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

CSS

CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h == ov-h == ovh == oh. If abbreviation wasn’t 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

pos

 position:relative;

pos:s

 position:static;

pos:a

 position:absolute;

pos:r

 position:relative;

pos:f

 position:fixed;

t

 top:;

t:a

 top:auto;

r

 right:;

r:a

 right:auto;

b

 bottom:;

b:a

 bottom:auto;

l

 left:;

l:a

 left:auto;

z

 z-index:;

z:a

 z-index:auto;

fl

 float:left;

fl:n

 float:none;

fl:l

 float:left;

fl:r

float:right;

cl

 clear:both;

cl:n

 clear:none;

cl:l

 clear:left;

cl:r

 clear:right;

cl:b

 clear:both;

d

 display:block;

d:n

 display:none;

d:b

 display:block;

d:f

 display:flex;

d:if

 display:inline-flex;

d:i

 display:inline;

d:ib

 display:inline-block;

d:li

 display:list-item;

d:ri

 display:run-in;

d:cp

 display:compact;

d:tb

 display:table;

d:itb

 display:inline-table;

d:tbcp

 display:table-caption

d:tbcl

 display:table-column;

d:tbclg

 display:table-column-group;

d:tbhg

 display:table-header-group;

d:tbfg

 display:table-footer-group;

d:tbr

 display:table-row;

d:tbrg

 display:table-row-group;

d:tbc

 display:table-cell;

d:rb

 display:ruby;

d:rbb

 display:ruby-base;

d:rbbg

 display:ruby-base-group;

d:rbt

 display:ruby-text;

d:rbtg

display:ruby-text-group;

v

 visibility:hidden;

v:v

 visibility:visible;

v:h

 visibility:hidden;

v:c

 visibility:collapse;

ov

 overflow:hidden;

ov:v

 overflow:visible;

ov:h

 overflow:hidden;

ov:s

 overflow:scroll;

ov:a

 overflow:auto;

ovx

 overflow-x:hidden;

ovx:v

 overflow-x:visible;

ovx:h

 overflow-x:hidden;

ovx:s

 overflow-x:scroll;

ovx:a

 overflow-x:auto;

ovy

 overflow-y:hidden;

ovy:v

 overflow-y:visible;

ovy:h

 overflow-y:hidden;

ovy:s

 overflow-y:scroll;

ovy:a

 overflow-y:auto;

ovs

 overflow-style:scrollbar;

ovs:a

 overflow-style:auto;

ovs:s

 overflow-style:scrollbar;

ovs:p

 overflow-style:panner;

ovs:m

 overflow-style:move;

ovs:mq

 overflow-style:marquee;

zoo, zm

 zoom:1;

cp

 clip:;

cp:a

 clip:auto;

cp:r

 clip:rect(top right bottom left);

rsz

 resize:;

rsz:n

 resize:none;

rsz:b

 resize:both;

rsz:h

 resize:horizontal;

rsz:v

 resize:vertical;

cur

 cursor:${pointer};

cur:a

 cursor:auto;

cur:d

 cursor:default;

cur:c

 cursor:crosshair;

cur:ha

 cursor:hand;

cur:he

 cursor:help;

cur:m


cur:p

 cursor:pointer;

cur:t

 cursor:text;

Margin & Paddinng

m

margin:;

m:a

 margin:auto;

mt

 margin-top:;

mt:a

 margin-top:auto;

mr

 margin-right:;

mr:a

 margin-right:auto;

mb

 margin-bottom:;

mb:a

 margin-bottom:auto;

ml

 margin-left:;

ml:a

 margin-left:auto;

p

padding:;

pt

 padding-top:;

pr

 padding-right:;

pb

 padding-bottom:;

pl

 padding-left:;

Box-Sizing

bxz

 box-sizing:border-box;

bxz:cb

 box-sizing:content-box;

bxz:bb

 box-sizing:border-box;

bxsh

 box-shadow:inset hoff voff blur color;

bxsh:r

 box-shadow:inset hoff voff blur
spread rgb(0, 0, 0);

bxsh:ra

 box-shadow:inset h v blur spread
rgba(0, 0, 0, .5);

bxsh:n

 box-shadow:none;

w

 width:;

w:a

 width:auto;

h

 height:;

h:a

 height:auto;

maw

 max-width:;

maw:n

 max-width:none;

mah

 max-height:;

mah:n

 max-height:none;

miw

 min-width:;

mih

 min-height:;

Font

f

font:;

f+

 font:1em Arial,sans-serif;

fw

 font-weight:;

fw:n

 font-weight:normal;

fw:b

 font-weight:bold;

fw:br

 font-weight:bolder;

fw:lr

 font-weight:lighter;

fs, fs:i

 font-style:italic;

fs:n

 font-style:normal;

fs:o

 font-style:oblique;

fv

 font-variant:;

fv:n

 font-variant:normal;

fv:sc

 font-variant:small-caps;

fz

 font-size:;

fza

 font-size-adjust:;

fza:n

 font-size-adjust:none;

ff

 font-family:;

ff:s

 font-family:serif;

ff:ss

 font-family:sans-serif;

ff:c

 font-family:cursive;

ff:f

 font-family:fantasy;

ff:m

 font-family:monospace;

ff:a

 font-family: Arial, „Helvetica
Neue", Helvetica, sans-serif;

ff:t

 font-family: „Times New Roman",
Times, Baskerville, Georgia, serif;

ff:v

 font-family: Verdana, Geneva,
sans-serif;

fef

 font-effect:;

fef:n

 font-effect:none;

fef:eg

 font-effect:engrave;

fef:eb

 font-effect:emboss;

fef:o

 font-effect:outline;

fem

 font-emphasize:;

femp

 font-emphasize-position:;

femp:b

 font-emphasize-position:before;

femp:a

 font-emphasize-position:after;

fems

 font-emphasize-style:;

fems:n

 font-emphasize-style:none;

fems:ac

 font-emphasize-style:accent;

fems:dt

 font-emphasize-style:dot;

fems:c

 font-emphasize-style:circle;

fems:ds

 font-emphasize-style:disc;

fsm

 font-smooth:;

fsm:a

 font-smooth:auto;

fsm:n

 font-smooth:never;

fsm:aw

 font-smooth:always;

fst

 font-stretch:;

fst:n

 font-stretch:normal;

fst:uc

 font-stretch:ultra-condensed;

fst:ec

 font-stretch:extra-condensed;

fst:c

 font-stretch:condensed;

fst:sc

 font-stretch:semi-condensed;

fst:se

 font-stretch:semi-expanded;

fst:e

 font-stretch:expanded;

fst:ee

 font-stretch:extra-expanded;

fst:ue

 font-stretch:ultra-expanded;

Text

va

 vertical-align:top;

va:sup

 vertical-align:super;

va:t

 vertical-align:top;

va:tt

 vertical-align:text-top;

va:m

 vertical-align:middle;

va:bl

 vertical-align:baseline;

va:b

 vertical-align:bottom;

va:tb

 vertical-align:text-bottom;

va:sub

 vertical-align:sub;

ta, ta:l

 text-align:left;

ta:c

 text-align:center;

ta:r

 text-align:right;

ta:j

 text-align:justify;

ta-lst

 text-align-last:;

tal:a

 text-align-last:auto;

tal:l

 text-align-last:left;

tal:c

 text-align-last:center;

tal:r

 text-align-last:right;

td, td:n

 text-decoration:none;

td:u

 text-decoration:underline;

td:o

 text-decoration:overline;

td:l

 text-decoration:line-through;

te

 text-emphasis:;

te:n

 text-emphasis:none;

te:ac

 text-emphasis:accent;

te:dt

 text-emphasis:dot;

te:c

 text-emphasis:circle;

te:ds

 text-emphasis:disc;

te:b

 text-emphasis:before;

te:a

 text-emphasis:after;

th

 text-height:;

th:a

 text-height:auto;

th:f

 text-height:font-size;

th:t

 text-height:text-size;

th:m

 text-height:max-size;

ti

 text-indent:;

ti:-

 text-indent:-9999px;

tj

 text-justify:;

tj:a

 text-justify:auto;

tj:iw

 text-justify:inter-word;

tj:ii

 text-justify:inter-ideograph;

tj:ic

 text-justify:inter-cluster;

tj:d

 text-justify:distribute;

tj:k

 text-justify:kashida;

tj:t

 text-justify:tibetan;

to

 text-outline:;

to+

 text-outline:0 0 #000;

to:n

 text-outline:none;

tr

 text-replace:;

tr:n

 text-replace:none;

tt

 text-transform:uppercase;

tt:n

 text-transform:none;

tt:c

 text-transform:capitalize;

tt:u

 text-transform:uppercase;

tt:l

 text-transform:lowercase;

tw

 text-wrap:;

tw:n

 text-wrap:normal;

tw:no

 text-wrap:none;

tw:u

 text-wrap:unrestricted;

tw:s

 text-wrap:suppress;

tsh

 text-shadow:hoff voff blur #000;

tsh:r

 text-shadow:h v blur rgb(0, 0, 0);

tsh:ra

 text-shadow:h v blur rgba(0, 0, 0,
.5);

tsh+

 text-shadow:0 0 0 #000;

tsh:n

 text-shadow:none;

lh

 line-height:;

lts

 letter-spacing:;

lts-n

 letter-spacing:normal;

whs

 white-space:;

whs:n

 white-space:normal;

whs:p

 white-space:pre;

whs:nw

 white-space:nowrap;

whs:pw

 white-space:pre-wrap;

whs:pl

 white-space:pre-line;

whsc

 white-space-collapse:;

whsc:n

 white-space-collapse:normal;

whsc:k

 white-space-collapse:keep-all;

whsc:l

 white-space-collapse:loose;

whsc:bs

 white-space-collapse:break-strict;

whsc:ba

 white-space-collapse:break-all;

wob

 word-break:;

wob:n

 word-break:normal;

wob:k

 word-break:keep-all;

wob:ba

 word-break:break-all;

wos

 word-spacing:;

wow

 word-wrap:;

wow:nm

 word-wrap:normal;

wow:n

 word-wrap:none;

wow:u

 word-wrap:unrestricted;

wow:s

 word-wrap:suppress;

wow:b

 word-wrap:break-word;

Background

bg

 background:#000;

bg+

 background:#fff url() 0
  0 no-repeat;

bg:n

 background:none;

bgc

 background-color:#fff;

bgc:t

 background-color:transparent;

bgi

 background-image:url();

bgi:n

 background-image:none;

bgr

 background-repeat:;

bgr:n

 background-repeat:no-repeat;

bgr:x

 background-repeat:repeat-x;

bgr:y

 background-repeat:repeat-y;

bgr:sp

 background-repeat:space;

bgr:rd

 background-repeat:round;

bga

 background-attachment:;

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:;

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:;

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:;

ec:s

 empty-cells:show;

ec:h

 empty-cells:hide;

Borders

bd

 border:;

bd+

 border:1px solid #000;

bd:n

 border:none;

bdbk

 border-break:close;

bdbk:c

 border-break:close;

bdcl

 border-collapse:;

bdcl:c

 border-collapse:collapse;

bdcl:s

 border-collapse:separate;

bdc

 border-color:#000;

bdc:t

 border-color:transparent;

bdi

 border-image:url();

bdi:n

 border-image:none;

bdti

 border-top-image:url();

bdti:n

 border-top-image:none;

bdri

 border-right-image:url();

bdri:n

 border-right-image:none;

bdbi

 border-bottom-image:url();

bdbi:n

 border-bottom-image:none;

bdli

 border-left-image:url();

bdli:n

 border-left-image:none;

bdci

 border-corner-image:url();

bdci:n

 border-corner-image:none;

bdci:c

 border-corner-image:continue;

bdtli

 border-top-left-image:url();

bdtli:n

 border-top-left-image:none;

bdtli:c

 border-top-left-image:continue;

bdtri

 border-top-right-image:url();

bdtri:n

 border-top-right-image:none;

bdtri:c

 border-top-right-image:continue;

bdbri

 border-bottom-right-image:url();

bdbri:n

 border-bottom-right-image:none;

bdbri:c

 border-bottom-right-image:continue;

bdbli

 border-bottom-left-image:url();

bdbli:n

 border-bottom-left-image:none;

bdbli:c

 border-bottom-left-image:continue;

bdf

 border-fit:repeat;

bdf:c

 border-fit:clip;

bdf:r

 border-fit:repeat;

bdf:sc

 border-fit:scale;

bdf:st

 border-fit:stretch;

bdf:ow

 border-fit:overwrite;

bdf:of

 border-fit:overflow;

bdf:sp

 border-fit:space;

bdlen

 border-length:;

bdlen:a

 border-length:auto;

bdsp

 border-spacing:;

bds

 border-style:;

bds:n

 border-style:none;

bds:h

 border-style:hidden;

bds:dt

 border-style:dotted;

bds:ds

 border-style:dashed;

bds:s

 border-style:solid;

bds:db

 border-style:double;

bds:dtds

 border-style:dot-dash;

bds:dtdtds

 border-style:dot-dot-dash;

bds:w

 border-style:wave;

bds:g

 border-style:groove;

bds:r

 border-style:ridge;

bds:i

 border-style:inset;

bds:o

 border-style:outset;

bdw

 border-width:;

bdt, bt

 border-top:;

bdt+

 border-top:1px solid #000;

bdt:n

 border-top:none;

bdtw

 border-top-width:;

bdts

 border-top-style:;

bdts:n

 border-top-style:none;

bdtc

 border-top-color:#000;

bdtc:t

 border-top-color:transparent;

bdr, br

 border-right:;

bdr+

 border-right:1px solid #000;

bdr:n

 border-right:none;

bdrw

 border-right-width:;

bdrst

 border-right-style:;

bdrst:n

 border-right-style:none;

bdrc

 border-right-color:#000;

bdrc:t

 border-right-color:transparent;

bdb, bb

 border-bottom:;

bdb+

 border-bottom:1px solid #000;

bdb:n

 border-bottom:none;

bdbw

 border-bottom-width:;

bdbs

 border-bottom-style:;

bdbs:n

 border-bottom-style:none;

bdbc

 border-bottom-color:#000;

bdbc:t

 border-bottom-color:transparent;

bdl, bl

 border-left:;

bdl+

 border-left:1px solid #000;

bdl:n

 border-left:none;

bdlw

 border-left-width:;

bdls

 border-left-style:;

bdls:n

 border-left-style:none;

bdlc

 border-left-color:#000;

bdlc:t

 border-left-color:transparent;

bdrs

 border-radius:;

bdtrrs

 border-top-right-radius:;

bdtlrs

 border-top-left-radius:;

bdbrrs

 border-bottom-right-radius:;

bdblrs

 border-bottom-left-radius:;

List

lis

 list-style:;

lis:n

 list-style:none;

lisp

 list-style-position:;

lisp:i

 list-style-position:inside;

lisp:o

 list-style-position:outside;

list

 list-style-type:;

list:n

 list-style-type:none;

list:d

 list-style-type:disc;

list:c

 list-style-type:circle;

list:s

 list-style-type:square;

list:dc

 list-style-type:decimal;

list:dclz

 list-style-type:decimal-leadingzero;

list:lr

 list-style-type:lower-roman;

list:ur

 list-style-type:upper-roman;

lisi

 list-style-image:;

lisi:n

 list-style-image:none;

Print

pgbb

 page-break-before:;

pgbb:au

 page-break-before:auto;

pgbb:al

 page-break-before:always;

pgbb:l

 page-break-before:left;

pgbb:r

 page-break-before:right;

pgbi

 page-break-inside:;

pgbi:au

 page-break-inside:auto;

pgbi:av

 page-break-inside:avoid;

pgba

 page-break-after:;

pgba:au

 page-break-after:auto;

pgba:al

 page-break-after:always;

pgba:l

 page-break-after:left;

pgba:r

 page-break-after:right;

!

 !important

@f

 @font-face {
 font-family:;
 src:url(|);
 }

@f+

 @font-face {
 font-family: ‚FontName‘;
 src: url(‚FileName.eot‘);
 src: url(‚FileName.eot?#iefix‘)
format(‚embedded-opentype‘),
 url(‚FileName.woff‘)
format(‚woff‘),
 url(‚FileName.ttf‘)
format(‚truetype‘),
 url(‚FileName.
svg#FontName‘) format(‚svg‘);
 font-style: normal;
 font-weight: normal;
 }

@i, @import

@import url();

@kf

 @-webkit-keyframes identifier {
 from { }
 to { }
 }
 @-o-keyframes identifier {
 from { }
 to { }
 }
 @-moz-keyframes identifier {
 from { }
 to { }
 }
 @keyframes identifier {
 from { }
 to { }
 }

@m, @media

@media screen { }

Animation

anim

 animation:;

anim-

 animation:name duration timingfunction delay iteration-count
direction fill-mode;

animdel

 animation-delay:time;

animdir

 animation-direction:normal;

animdir:a

 animation-direction:alternate;

animdir:ar

 animation-direction:alternatereverse;

animdir:n

 animation-direction:normal;

animdir:r

 animation-direction:reverse;

animdur

 animation-duration:0s;

animfm

 animation-fill-mode:both;

animfm:b

 animation-fill-mode:backwards;

animfm:bt, animfm:bh

 animation-fill-mode:both;

animfm:f

 animation-fill-mode:forwards;

animic

 animation-iteration-count:1;

animic:i

 animation-iteration-count:infinite;

animn

 animation-name:none;

animps

 animation-play-state:running;

animps:p

 animation-play-state:paused;

animps:r

 animation-play-state:running;

animtf

 animation-timing-function:linear;

animtf:cb

 animation-timing-function:cubicbezier(0.1, 0.7, 1.0, 0.1);

animtf:e

 animation-timing-function:ease;

animtf:ei

 animation-timing-function:ease-in;

animtf:eio

 animation-timing-function:ease-inout;

animtf:eo

 animation-timing-function:ease-out;

animtf:l

 animation-timing-function:linear;

ap

 appearance:${none};

as

 align-self:;

as:a

 align-self:auto;

as:b

 align-self:baseline;

as:c

 align-self:center;

as:fe

 align-self:flex-end;

as:fs

 align-self:flex-start;

as:s

 align-self:stretch;

bfv

 backface-visibility:;

bfv:h

 backface-visibility:hidden;

bfv:v

 backface-visibility:visible;

bg:ie

 filter:progid:DXImageTransform.
Microsoft.AlphaImageLoader(src=‘x.
png‘,sizingMethod=‘crop‘);

colmf

 column-fill:;

colmg

 column-gap:;

colmr

 column-rule:;

colmrc

 column-rule-color:;

colmrs

 column-rule-style:;

colmrw

 column-rule-width:;

colms

 column-span:;

colmw

 column-width:;

Flex

fx

 flex:;

fxb

 flex-basis:;

fxd

 flex-direction:;

fxd:c

 flex-direction:column;

fxd:cr

 flex-direction:column-reverse;

fxd:r

 flex-direction:row;

fxd:rr

 flex-direction:row-reverse;

fxf

 flex-flow:;

fxg

 flex-grow:;

fxsh

 flex-shrink:;

fxw

 flex-wrap: ;

fxw:n

 flex-wrap:nowrap;

fxw:w

 flex-wrap:wrap;

fxw:wr

 flex-wrap:wrap-reverse;

jc

 justify-content:;

jc:c

 justify-content:center;

jc:fe

 justify-content:flex-end;

jc:fs

 justify-content:flex-start;

jc:sa

 justify-content:space-around;

jc:sb

 justify-content:space-between;

Transform , Transition

trf

 transform:;

trf:r

 transform: rotate(angle);

trf:rx

 transform: rotateX(angle);

trf:ry

 transform: rotateY(angle);

trf:rz

 transform: rotateZ(angle);

trf:sc

 transform: scale(x, y);

trf:sc3

 transform: scale3d(x, y, z);

trf:scx

 transform: scaleX(x);

trf:scy

 transform: scaleY(y);

trf:scz

 transform: scaleZ(z);

trf:skx

 transform: skewX(angle);

trf:sky

 transform: skewY(angle);

trf:t

 transform: translate(x, y);

trf:t3

 transform: translate3d(tx, ty,
tz);

trf:tx

 transform: translateX(x);

trf:ty

 transform: translateY(y);

trf:tz

 transform: translateZ(z);

trfo

 transform-origin:;

trfs

 transform-style:preserve-3d;

trs

 transition:prop time;

trsde

 transition-delay:time;

trsdu

 transition-duration:time;

trsp

 transition-property:prop;

trstf

 transition-timing-function:tfunc;

us

 user-select:${none};

XSL

tmatch, tm

 <xsl:template match="" mode=""></
xsl:template>

tname, tn

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

call

 <xsl:call-template name="" />

ap

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

api

 <xsl:apply-imports />

imp

 <xsl:import href="" />

inc

 <xsl:include href="" />

ch

 <xsl:choose></xsl:choose>

xsl:when, wh

 <xsl:when test=""></xsl:when>

ot

 <xsl:otherwise></xsl:otherwise>

if

 <xsl:if test=""></xsl:if>

par

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

pare

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

var

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

vare

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

wp

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

key

 <xsl:key name="" match="" use="" />

elem

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

attr

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

attrs

 <xsl:attribute-set name=""></
xsl:attribute-set>

cp

 <xsl:copy select="" />

co

 <xsl:copy-of select="" />

val

 <xsl:value-of select="" />

each, for

 <xsl:for-each select=""></
xsl:for-each>

tex

 <xsl:text></xsl:text>

com

 <xsl:comment></xsl:comment>

msg

 <xsl:message terminate="no"></
xsl:message>

fall

 <xsl:fallback></xsl:fallback>

num

 <xsl:number value="" />

nam

 <namespace-alias stylesheet-prefix=""
result-prefix="" />

pres

 <xsl:preserve-space elements="" />

strip

 <xsl:strip-space elements="" />

proc

 <xsl:processinginstruction name=""></
xsl:processing-instruction>

sort

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

choose+

 <xsl:choose>
 <xsl:when test=""></xsl:when>
 <xsl:otherwise></xsl:otherwise>
 </xsl:choose>

xsl

 |}
 <?xml version="1.0"
encoding="UTF-8"?>
 <xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/
XSL/Transform"></xsl:stylesheet>

!!!

 <?xml version="1.0"
encoding="UTF-8"?>

HTML DOCTYPES

!, html:5

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title>Document</title>
 </head>
 <body>

 </body>
 </html>

doc

 <html>
 <head>
 <meta charset="UTF-8" />
 <title>Document</title>
 </head>
 <body>

 </body>
 </html>

doc4

 <html>
 <head>
 <meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"
/>
 <title>Document</title>
 </head>
 <body>

 </body>
 </html>

html:4t

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"/>
 <title>Document</title>
 </head>
 <body>

 </body>
 </html>

html:4s

 <!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type"content="text/html;charset=UTF-8"/>
 <title>Document</title>
 </head>
 <body>

 </body>
 </html>

html:xt

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
 <meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"/>
 <title>Document</title>
 </head>
 <body>

 </body>
 </html>

html:xs

 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.
dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type"content="text/html;charset=UTF-8"/>
    <title>Document</title>
    </head>
    <body>

    </body>
 </html>

html:xxs

 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type"
        content="text/html;charset=UTF-8"
        />
        <title>Document</title>
    </head>
    <body>

    </body>
 </html>

!!!

 <!DOCTYPE html>

!!!4t

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TRhtml4/loose.dtd">

!!!4s

 <!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strictdtd">

!!!xt

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TRxhtml1/DTD/xhtml1-transitional.dtd">

!!!xs

 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1DTD/xhtml1-strict.
dtd">

!!!xxs

 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

About

Cheat-Sheet of Emmet : Faster HTML / CSS Workflow

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published