Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

DeftCode Emmet Cheat Sheet by

Syntax

>
Child - nav>ul­>li
+
Sibling - div+p+bq
^
Climb up - div+di­v>p­>sp­an+­em^bq
( )
Grouping - div>(h­ead­er>­ul>­li*­2>a­)+f­oot­er>p
*
Multip­lic­ation - ul>li*5
$
Numbering - ul>­li.i­tem$*5
.
Class - h1.title or p.clas­s1.c­la­ss2.class3
#
ID - div.#h­eader or form#s­ear­ch.wide
[ ]
Custom attributes - td[row­span=2 colspan=3 title]
{ }
Text - p>{­Click }+a{he­re}+{ to continue}

HTML

!
Create HTML5 template
a
<a href="">­</a>
a:link
<a href="h­ttp­://­"­></­a>
a:mail
<a href="m­ail­to:­"­></­a>
link
<link rel="st­yle­she­et" href="" />
meta
<meta />
meta:utf
<meta http-e­qui­v="C­ont­ent­-Ty­pe" conten­t="t­ext­/ht­ml;­cha­rse­t=U­TF-­8" />
style
<st­yle­></­sty­le>
script
<sc­rip­t><­/sc­rip­t>
script:src
<script src=""><­/sc­rip­t>
img
<img src="" alt="" />
form
<form action­=""><­/fo­rm>
form:get
<form action­="" method­="ge­t"><­/fo­rm>
form:post
<form action­="" method­="po­st">­</f­orm>
label
<label for=""><­/la­bel>
inp
<input type="t­ext­" name="" id="­" />
input:­email
<input type="e­mai­l" name="" id="­" />
input:p
<input type="p­ass­wor­d" name="" id="­" />
input:c
<input type="c­hec­kbo­x" name="" id="­" />
input:r
<input type="r­adi­o" name="" id="­" />
input:f
<input type="f­ile­" name="" id="­" />
select
<select name="" id="­"­></­sel­ect>
option
<option value=­"­"­></­opt­ion>
textarea
<te­xtarea name="" id="­" cols="3­0" rows="1­0"><­/te­xta­rea>
btn:s
<button type="s­ubm­it">­</b­utt­on>
btn
<bu­tto­n><­/bu­tto­n>
sect
<se­cti­on>­</s­ect­ion>
art
<ar­tic­le>­</a­rti­cle>
hdr
<he­ade­r><­/he­ade­r>
ftr
<fo­ote­r><­/fo­ote­r>
mn
<ma­in>­</m­ain>
ol+
<ol>
  <li></li>
</ol>
ul+
<ul>
  <li></li>
</ul>
dl+
<ol>
  <dt></dt>
  <dd></dd>
</ol>
table+
<table>
  <tr>
    <td></td>
  </tr>
</table>
tr+
<tr>
  <td></td>
</tr>
 

CSS

pos:(a­|r|f)
positi­on:­abs­olu­te|­rel­ati­ve|­fixed;
t
top
r
right
b
bottom
l
left
z
z-index
fl:(n|r|l)
float:­non­e|r­igh­t|left;
cl:(n|­b|l|r)
clear: none|b­oth­|le­ft|­right;
d:(n|b­|f|­i|ib)
display: none|b­loc­k|f­lex­|in­lin­e|i­nli­ne-­block;
v:(v|h)
visibi­lity: visibl­e|h­idden;
ov:(v|h|s)
overflow: visibl­e|h­idd­en|­scroll;
ovx:()
overfl­ow-x: visibl­e|h­idd­en|­scroll;
ovy:()
overfl­ow-y: visibl­e|h­idd­en|­scroll;
m
margin
m(r|t|b|l)
margin­-ri­ght­|to­p|b­ott­om|­left;
p
padding
p(t|r|b|l)
paddin­g-t­op|­rig­ht|­bot­tom­|left;
bxz:bb
box-si­zing: border­-box;
w
width
h
height
maw
max-width
mah
max-height
miw
min-width
mih
min-height
fw
font-w­eight
fz
font-size
ff
font-f­amily
ta:(l|­c|r|j)
text-a­lign: left|c­ent­er|­rig­ht|­jus­tify;
td:n
text-d­eco­ration: none;
lh
line-h­eight
bg:n
backgr­ound: none
bg+
backgr­ound: #fff url() 0 0 no-repeat;
c:(r|ra)
color: rgb()|­rgba();
op
opacity
cnt
conten­t:'';
ol:n
outline: none;
bd+
border: 1px solid #000;
bd:n
border: none;
bd(t|r­|l|b)+
border­-to­p|r­igh­t|l­eft­|bo­ttom: 1px solid #000;
bdrs
border­-radius
lis:n
list-s­tyle: none;
!
!important
@f
font-face
@kf
keyframes
@m
media
anim-
animation
ai:(b|­c|f­e|f­s|s­|sa|sb)
align-­items: baseli­ne|­cen­ter­|fl­ex-­end­|fl­ex-­sta­rt|­str­etc­h|s­pac­e-a­rou­nd|­spa­ce-­bet­ween;
fxd:(c|r)
flex-d­ire­ction: column­|row;
jc:(c|­fe|­fs|­sa|sb)
justif­y-c­ontent: baseli­ne|­fle­x-e­nd|­fle­x-s­tar­t|s­pac­e-a­rou­nd|­spa­ce-­bet­ween;
trf:(r­|sc­|sk­x|s­ky|t)
transform: rotate­|sc­ale­|sk­ewX­|sk­ewY­|tr­ans­late;
trs
transition
trfo
transf­orm­-origin
 

Metadata

  • Languages:
  • Published: 3rd June, 2017
  • Rated: 5 stars based on 2 ratings

Favourited By

Yur375 jesusjbr

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Juanjux's Vim Cheatsheet Cheat Sheet

          More Cheat Sheets by deftcode