Cheat Sheet - Creative Web Design

15 downloads 357 Views 83KB Size Report
Alias of datagrid. . Alias of datalist. . Alias of k
Cheat Sheet

← Emmet Documentation

Syntax Child: > nav>ul>li


h$[title=item$]{Header $}*3

Sibling: + div+p+bq



ul>li.item$$$*5

Climb-up: ^ div+div>p>span+em^bq



ID and CLASS attributes #header

div+div>p>span+em^^bq



Grouping: ()

.title

form#search.wide

p.class1.class2.class3

div>(header>ul>li*2>a)+footer>p



Custom attributes p[title="Hello world"]

td[rowspan=2 colspan=3 title]

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

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

http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]

Text: {} a{Click me}

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

Implicit tag names

Cheat Sheet



.class

em>.class

Multiplication: * ul>li*5 ul>.class



table>.row>.col

Item numbering: $ ul>li.item$*5
  • unknown abbreviations will be


HTML All

transformed to tag, e.g. foo → .

! Alias of html:5

a

Header 1 Header 2 Header 3 Document


cap

colg

fst, fset

a:link

btn

a:mail abbr

optg

acronym



opt

base bdo

bdo:r

http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]

tarea

Cheat Sheet leg bdo:l link

sect

Click me link:css here to continue



art

link:print

hdr

link:favicon img iframe

http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]

out

Cheat Sheet embed

det

object

cmd

param ol+

map area area:d

ul+

area:c dl+ area:r area:p form

map+

form:get form:post

table+

label input colgroup+, colg+ input:hidden, input:h input:text, input:t input:search

tr+

input:email input:url

http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]

select+

Cheat Sheet input:password, input:p input:datetime

optgroup+, optg+

input:date input:datetime-local

c

input:month

cc:ie6

input:week cc:ie input:time input:number

cc:noie

input:color html:4t input:checkbox, input:c input:radio, input:r input:range input:file, input:f input:submit, input:s

html:4s

input:image, input:i input:reset input:button, input:b select html:xt option

http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]

Cheat Sheet textarea menu:context, menu:c menu:toolbar, menu:t video

html:xs

audio html:xml bq Alias of blockquote

acr Alias of acronym



html:xxs

fig Alias of figure

figc Alias of figcaption

ifr Alias of iframe



html:5

emb Alias of embed

obj Alias of object

src Alias of source



CSS CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h == ov-h == ovh == oh. Alias of caption

If abbreviation wasn’t found, it is transformed into property name: foo-bar → foo-bar: |; http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]

Cheat Sheet

You can prefix abbreviations with hyphen to produce vendor-prefixed properties: -foo

Visual Formatting Alias of colgroup pos position: ; pos:s

position:static;

pos:a

position:absolute;

Alias of fieldset

pos:r position:relative; pos:f t

position:fixed;

Alias of buttontop: ;

t:a top:auto; r

right: ;

r:aAlias of optgroup right:auto; b bottom: ; b:a l

bottom:auto; Alias of option

left: ;

l:a

left:auto;

z

whsc:bs whsc:ba wob wob:n wob:k wob:l wob:bs wob:ba wos wow wow:nm wow:n wow:u wow:s

z-index: ; Alias of textarea

z:a

Background

z-index:auto; fl float: ;

bg

fl:n

bg+

float:none;

Alias of legendfloat:left; fl:l fl:r float:right;

cl

clear: ; Alias of section

cl:n clear:none; cl:l clear:left; cl:r

clear:right;

Alias of article

cl:b clear:both; d

display: ;

d:n

display:none;

Alias of header

d:b display:block; d:i

display:inline;

d:ib Alias of footerdisplay:inline-block; d:li display:list-item; d:ri

display:run-in;

d:cp Alias of address display:compact; d:tb display:table; d:itb

display:inline-table;

Alias of dialog

http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]

bg:n bgc bgi bgi:n bgr bgr:n bgr:x bgr:y bga bga:f bga:s bgp bgpx bgpy bgbk bgbk:bb bgbk:eb

Cheat Sheet d:tbcp display:table-caption; d:tbcl display:table-column; d:tbclg

display:table-column-group;

Alias of strong

d:tbhg display:table-header-group; d:tbfg

display:table-footer-group;

d:tbr

display:table-row;

Alias of progress

d:tbrg display:table-row-group; d:tbc

display:table-cell;

d:rb

display:ruby;

Alias of > cp:a clip:auto;

o:n

cp:r

os

rz

clip:rect( );

Alias of table>tr>td

rz:n

resize: ;

resize:none; rz:b resize:both;
rz:h resize:horizontal;

ow

oc oc:i

Tables tbl

rz:v cur

oo

resize:vertical;

Alias of colgroup>col

cur:a cur:d

tbl:a

cursor: ; tbl:f cursor:auto; cps cursor:default; cps:t

cur:c

cursor:crosshair;

Alias of tr>td

cur:ha cursor:hand; cur:he cursor:help; cur:m cursor:move;

cps:b ec ec:s ec:h

cur:p

cursor:pointer;

Alias of select>option

cur:t cursor:text; Margin & Padding m

Border bd bd+

margin: ;

m:aAlias of optgroup>option margin:auto; mt margin-top: ; mt:a margin-top:auto;

bd:n bdbk bdbk:c bdcl

mr

margin-right: ;

bdcl:c bdcl:s

mb

margin-bottom: ;

padding-top: ; p

bdti bdti:n bdri

pr

padding-right: ;

pb padding-left: ;

Box Sizing

bxz:cb box-sizing:content-box; bxz:bb box-sizing:border-box; box-shadow: hoff voff radius Document color ; bxsh:n box-shadow:none; ${child} w width: ; w:a width:auto;

bdli:n bdci bdci:n bdci:c bdtli bdtli:n bdtli:c bdtri

h

height: ;

maw max-width: ; maw:n max-height: ; Document mah:n max-height:none; ${child} min-width: ; miw mih min-height: ;

bdtri:c bdbri bdbri:n

mah

fw:n font-weight:normal; fw:br font-weight:bolder; fw:lr font-weight:lighter; ${child} fs font-style: ; fs:n font-style:normal; fs:i font-style:italic; font-variant: ; fv:sc font-variant:small-caps; font-size: ; Document fza font-size-adjust: ; fza:n ${child} ff ff:s

bdbli bdbli:n bdbli:c bdf

Font f

bdbri:c

bdf:c bdf:r bdf:sc bdf:st bdf:ow bdf:of bdf:sp bdl:a bdsp bds bds:n bds:h bds:dt bds:ds bds:s bds:db

font-size-adjust:none;

bds:dtds

font-family: ;

bds:dtdtds

font-family:serif;

bds:w

ff:ss font-family:sans-serif; ff:c font-family:cursive; ff:m font-family:monospace; fef font-effect: ; Document fef:n font-effect:none; fef:eg ${child} font-effect:engrave;

bds:r bds:i bds:o bdw bdt, bt bdt+

fef:eb

font-effect:emboss;

bdt:n

fef:o

font-effect:outline;

bdtw

fem font-emphasize: ; femp font-emphasize-position: ; femp:b font-emphasize-position:before; Document femp:a font-emphasize-position:after; fems ${child} font-emphasize-style: ;

bdts bdts:n bdtc bdr, br bdr+

fems:n

font-emphasize-style:none;

bdr:n

fems:ac

font-emphasize-style:accent;

bdrw

fems:dt

font-emphasize-style:dot;

bdrs:n

fems:c

font-emphasize-style:circle;

bdrc

fems:ds

font-emphasize-style:disc;

bdb, bb

fsm

font-smooth: ;

bdb+

fsm:a

font-smooth:auto;

bdb:n

fsm:n

font-smooth:never;

bdbw

fsm:aw

font-smooth:always;

bdbs

fst

font-stretch: ;

bdbs:n

fst:n

font-stretch:normal;

bdbc

fst:uc

font-stretch:ultra-condensed;

bdl, bl

fst:ec

font-stretch:extra-condensed;

bdl+

fst:c

font-stretch:condensed;

bdl:n

fst:sc

font-stretch:semi-condensed;

bdlw

fst:se

font-stretch:semi-expanded;

bdls

fst:e

font-stretch:expanded;

bdls:n

fst:ee

font-stretch:extra-expanded;

bdlc

fst:ue

font-stretch:ultra-expanded;

bdrs bdtrrs

Text

bdtlrs

va

vertical-align: ;

va:sup

vertical-align:super;

va:t

vertical-align:top;

va:tt

vertical-align:text-top;

bdbrrs bdblrs

http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]

Cheat Sheet

Lists va:m

vertical-align:middle;

lis

va:bl

vertical-align:baseline;

lis:n

va:b

vertical-align:bottom;

lisp

va:tb

vertical-align:text-bottom;

lisp:i

va:sub

vertical-align:sub;

lisp:o

ta

text-align: ;

list

ta:l

text-align:left;

list:n

ta:c

text-align:center;

list:d

ta:r

text-align:right;

list:c

tal

text-align-last: ;

list:s

tal:a

text-align-last:auto;

list:dc

tal:l

text-align-last:left;

list:dclz

tal:c

text-align-last:center;

tal:r

text-align-last:right;

td

text-decoration: ;

td:n

text-decoration:none;

td:u

text-decoration:underline;

td:o

text-decoration:overline;

td:l

text-decoration:line-through;

pgbb

te

text-emphasis: ;

pgbb:au

te:n

text-emphasis:none;

pgbb:al

te:ac

text-emphasis:accent;

pgbb:l

te:dt

text-emphasis:dot;

pgbb:r

te:c

text-emphasis:circle;

pgbi

te:ds

text-emphasis:disc;

pgbi:au

te:b

text-emphasis:before;

pgbi:av

te:a

text-emphasis:after;

pgba

th

text-height: ;

pgba:au

th:a

text-height:auto;

pgba:al

th:f

text-height:font-size;

pgba:l

th:t

text-height:text-size;

pgba:r

th:m

text-height:max-size;

orp

ti

text-indent: ;

wid

ti:-

text-indent:-9999px;

tj

text-justify: ;

tj:a

text-justify:auto;

list:lr list:ur lisi lisi:n

Print

Others ! @f

http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]

Cheat Sheet 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

to:n

text-outline:none;

tr

text-replace: ;

tr:n

text-replace:none;

tt

text-transform: ;

tt:n

text-transform:none;

tt:c

text-transform:capitalize;

tt:u

text-transform:uppercase;

tt:l

text-transform:lowercase;

tw

text-wrap: ;

cm

tw:n

text-wrap:normal;

op:ie

tw:no

text-wrap:none;

tw:u

text-wrap:unrestricted;

tw:s

text-wrap:suppress;

tsh

text-shadow: hoff #000 ;

0

@f+

#000 ;

@i @m

bg:ie

op:ms

voff

blur

trf trf:r

tsh+

text-shadow: 0

tsh:n

text-shadow:none;

trf:scx

lh

line-height: ;

trf:scy

lts

letter-spacing: ;

trf:skx

whs

white-space: ;

trf:sky

whs:n

white-space:normal;

trf:t

whs:p

white-space:pre;

trf:tx

whs:nw

white-space:nowrap;

trf:ty

whs:pw

white-space:pre-wrap;

trs

whs:pl

white-space:pre-line;

trsde

whsc

white-space-collapse: ;

trsdu

whsc:n

white-space-collapse:normal;

trsp

whsc:k

white-space-collapse:keep-all;

trstf

whsc:l

white-space-collapse:loose;

0

0

#000 ;

white-space-collapse:break-strict;

http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]

trf:sc

Cheat Sheet

XSL

white-space-collapse:break-all;

tm

word-break: ;

elem

word-break:normal; tmatch

word-break:keep-all;

attr

Alias of tm

tn

word-break:loose; word-break:break-strict;

attrs

word-break:break-all; word-spacing: ;

cp

tname

word-wrap: ;

Alias of tn

co

word-wrap:normal; word-wrap:none; call

val

word-wrap:unrestricted; word-wrap:suppress;

ap

each

api

imp

background: ; background: #fff no-repeat ;

for url( )

0

0

background:none; inc

background-image:url( );

background-repeat: ; xsl:when

msg

background-repeat:no-repeat;

background-repeat:repeat-x;

fall

background-repeat:repeat-y;

wh

Alias of xsl:when

if

com

background-image:none;

ch

ot

tex

background-color:# fff ;

background-attachment: ; background-attachment:fixed;

num

background-attachment:scroll; background-position: 0 0 ;

nam

background-position-x: ;

pres

background-position-y: ; par

background-break: ;

strip

background-break:bounding-box; pare

background-break:each-box;

proc

background-break:continuous; var ; background-clip:border-box;

http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]

sort

Cheat Sheet vare wp

background-clip:content-box; background-clip:no-clip;

key

background-origin: ; background-origin:padding-box; background-origin:border-box; background-origin:content-box; background-size: ;

http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]

choose+