Zen Coding Cheat Sheet | Xhtml | Html

Zen HTML Elements Based on HTML 5 specification draft.  Root Element

html:xxs

html html:xml html:4t html:4s strict .dtd"> html:xt strict .dtd"> http://code.google.com/p/zen-coding/

html:5  Document Document Metadata head title base link  link:css link:print link:favicon link:touch href="favicon.png"> link:rss link:atom href="atom.xml"> meta meta:utf  1

meta:win meta:compat content="IE=7"> style type="text/css"> Scripting script type="text/javascript"> script:src src=""> noscript Sections body  section, sect nav  article, art aside h1 h2 h3 h4 h5 h6 hgroup, hgr  header, hdr  footer, ftr  address, adr  div  Grouping Content p hr  br  GNU General Public License v3

pre dialog, dlg blockquote, bq ol ol+ ul ul+ li dl dl+ dt dd Text-level Semantics a a:link  a:mail q cite em strong, str  small mark  dfn abbr  http://code.google.com/p/zen-coding/

acronym, acr  time progress, prog meter  code  var  samp kbd sub sup span i b bdo bdo:r  bdo:l ruby  rt rp  Edits ins del  Embedded Content figure, fig img iframe, ifr  embed, emb object, obj 2

param  video audio source, src canvas map map+ area area:d area:c area:r  area:p Tabular Data table table+ caption, cap colgroup, colg colgroup+, colg+ col tbody  thead tfoot tr 

GNU General Public License v3

tr+ th td  Forms form form:get form:post fieldset, fset legend, leg label input input:hidden, input:h input:text, input:t input:search input:email input:url input:password, input:p input:datetime input:datetime-local input:date input:month input:week  input:time input:number  input:range input:color 

http://code.google.com/p/zen-coding/

input:checkbox, input:c input:radio, input:r  input:file, input:f  input:submit, input:s input:image, input:i input:reset input:button, input:b button, btn select select+ optgroup, optg optgroup+, optg+ option, opt  Interactive Elements datagrid, datag datalist, datal textarea, tarea keygen, kg output, out details, det command, cmd bb menu menu:context, menu:c menu:toolbar, menu:t

3

Comments cc:ie cc:noie

Zen HTML Selectors  E#name div#name  E.name div.name div.one.two div#name.one.two  E>E  head>link  table>tr>td ul#name>li.item  E+E  p+p div#name>p.one+p.two

Zen HTML Aliases  E*N  p*3 ul#name>li.item*3

GNU General Public License v3

 E*N$ p.name-$*3 select>option#item-$*3  E+ ul+ table+ dl+

Positioning position:; position:static; position:absolute; position:relative; position:fixed; top:; top:auto; right:; right:auto; bottom:; bottom:auto; left:; left:auto; z-index:; z-index:auto;

Box behavior and properties float:; float:none; float:left; float:right; clear:; clear:none; clear:left; clear:right; clear:both; display:; display:none; display:block; display:inline; display:inline-block; display:-moz-inline-box:; display:-moz-inline-stack:; display:list-item; display:run-in; display:compact; display:table; display:inline-table; display:table-caption; display:table-column; display:table-column-group; display:table-header-group; display:table-footer- group ; display:table-row; display:table-row-group; display:table-cell;

Zen CSS properties Based on CSS 3 draft specification Property

Alias

Special Rules @import url(); @media print { } @font-face { font-family:; src:url(); } !important expression ()

@i @m @f  

! exp

 Properties Groups Sorting Methods • • • • • • • •

Positioning Box behavior and properties Sizing Color appearance Special content types Text Visual properties Print

http://code.google.com/p/zen-coding/

pos pos:s pos:a pos:r pos:f   t t:a r r:a b b:a l l:a z z:a

     

fl fl:n fl:l fl:r cl cl:n cl:l cl:r cl:b d d:n d:b d:i d:ib d:mib d:mis d:li d:ri d:cp d:tb d:itb d:tbcp d:tbcl d:tbclg d:tbhg d:tbfg d:tbr d:tbrg d:tbc

visibility:; visibility:visible; visibility:hidden; visibility:collapse; overflow:; overflow:visible; overflow:hidden;

4

ov:s ov:a ovx ovx:v ovx:h ovx:s ovx:a ovy ovy:v ovy:h ovy:s ovy:a ovs ovs:a ovs:s ovs:p ovs:m ovs:mq zoo cp cp:a cp :r bxz bxz:cb bxz:bb bxsh bxsh:n bxsh+ bxsh:w bxsh:w+ bxsh:m bx sh :m +

margin:; margin:auto; margin:0; margin:0 0; margin:0 0 0; margin:0 0 0 0; margin-top:; margin-top:auto; margin-right:; margin-right:auto; margin-bottom:; margin-bottom:auto; margin-left:; margin-left:auto; v padding:; padding:0; v:h padding:0 v:c 0; padding:0 0 0; padding:0 0 0 0; padding-top:; padding-right:;

m m:a m:0 m:2 m:3 m:4 mt mt:a mr mr:a mb mb:a ml ml:a p p:0 p:2 p:3 p:4 pt pr

Sizing

v:v ov ov:v ov:h

overflow:scroll; overflow:auto; overflow-x:; overflow-x:visible; overflow-x:hidden; overflow-x:scroll; overflow-x:auto; overflow-y:; overflow-y:visible; overflow-y:hidden; overflow-y:scroll; overflow-y:auto; overflow-style:; overflow-style:auto; overflow-style:scrollbar; overflow-style:panner; overflow-style:move; overflow-style:marquee; zoom:1; clip:; clip:auto; c li p: re ct( 0 0 0 0) ; box-sizing:; box-sizing:content-box; box-sizing:border-box; box-shadow:; box-shadow:none; box-shadow:0 0 0 #000; -webkit-box-shadow:; -webkit-box-shadow:0 0 0 #000; -moz-box-shadow:; - moz- box -s ha dow :0 0 0 0 #0 00 ;

GNU General Public License v3

padding-bottom:; padding-left:; width:; width:auto; height:; height:auto; max-width:; max-width:none; max-height:; max-height:none; min-width:; min-height:;

pb pl w w:a h h:a maw maw:n mah mah:n miw mih

Color appearance outline:; o outline:none; o:n outline:1px solid #000; o+ outline-offset:; oo outline-width:; ow outline-style:; os outline-color:#000; oc outline-color:invert; oc:i border:; bd border:none; bd:n border:1px solid #000; bd+ border-break:; bdbk   border-break:close; bdbk:c bor de r- col la ps e: ; bd cl border-collapse:collapse; bdcl:c border-collapse:separate; bdcl:s border-color:#000; bdc border-image:url(); bdi border-image:none; bdi:n -webkit-border-image:; bdi:w -webkit-border-image:url() 0 0 0 0 stretch stretch; bdi:w+ -moz-border-image:; bdi:m -moz-border-image:url() 0 0 0 0 stretch stretch; bdi:m+ border-top-image:url(); bdti border-top-image:none; bdti:n border-right-image:url(); bdri border-right-image:none; bdri:n border-bottom-image:url(); bdbi border-bottom-image:none; bdbi: n border-left-image:url(); bdli border-left-image:none; bdli:n border-corner-image:url(); bdci border-corner-image:none; bdci:n bor de r- co rn er- ima ge :con ti nu e; bd ci: c border-top- left-image:url(); bdtli border-top- left-image:none; bdtli:n border-top-left-image:continue; bdtli:c bor de r- to p- rig ht -i ma ge :ur l( ); bd tri bor de r- to p- rig ht -i ma ge :non e; bd tri :n http://code.google.com/p/zen-coding/

border-top-right-image:continue; border-bottom-right-image:url(); border-bottom-right-image:none; border-bottom-right-image:continue; border-bottom-left-image:url(); border-bottom-left-image:none; border-bottom-left-image:continue; border-fit:; border-fit:clip; border-fit:repeat; bo rd er- fi t: sc ale ; border-fit:stretch; border-fit:overwrite; border-fit:overflow; bo rd er- fi t: sp ace ; border-length:; border-length:auto; border-spacing:; border-style:; border-style:none; border-style:hidden; border-style:dotted; border-style:dashed; border-style:solid; border-style:double; border-style:dot-dash; border- style:dot-dot-dash; border-style:wave; border-style:groove; border-style:ridge; border-style:inset; border-style:outset; border-width:; border-top:; border-top:none; border-top:1px solid #000; border-top-width:; border-top-style:; border-top-style:none; border-top-color:#000; border-right:; border-right:none; border- right:1px solid #000; border-right-width:; border-right-style:; border-right-style:none; border-right-color:#000; border-bottom:; border-bottom:none; bo rd er- bot tom :1p x s ol id #0 00 ; border- bottom-width: ; border-bottom-style:; border-bottom-style:none; border-bottom-color:#000; 5

bdtri:c bdbri bdbri:n bdbri:c bdbli bdbli:n bdbli:c bdf   bdf:c bdf:r bd f: sc bdf:st bdf:ow bdf:of   bd f: sp bdlt bdlt:a bdsp bds bds:n bds:h bds:dt bds:ds bds:s bds:db bds:dtds bds:dtdtds bds:w bds:g bds:r bds:i bds:o bdw bdt bdt:n bdt+ bdtw bdts bdts:n bdtc bdr bdr:n bdr+ bdrw bdrs bdrs:n bdrc bdb bdb:n bd b+ bdbw bdbs bdbs:n bdbc

border-left:; bdl b ord er -le ft :n one ; bd l: n border-left:1px solid #000; bdl+ border-left-width:; bdlw b ord er -le ft -st yle :; bd ls b ord er -le ft -st yle :n one ; bd ls :n b ord er -le ft -col or :#00 0; bd lc border-radius:; bdrz - web ki t- bord er- ra di us: ; bd rz :w -moz-border-radius:; bdrz:m border-top-right-radius:; bdtrrz border-top-left-radius:; bdtlrz b ord er -bot tom -r ig ht- ra di us: ; bd brr z border-bottom-left-radius:; bdblrz background:; bg b ac kg rou nd :n one ; bg :n background:#FFF url() 0 0 no-repeat; bg+ filter:progid:DXImageTransform.Microsoft.AlphaImage Loader(src='',sizingMethod='crop'); bg:ie background-color:#FFF; bgc b ac kg rou nd -col or :t ra ns pa re nt; bg c: t b ac kg rou nd -im age :u rl () ; bg i background-image:none; bgi:n background-repeat:; bgr background-repeat:repeat; bgr:r background-repeat:repeat-x; bgr:x background-repeat:repeat-y; bgr:y b ac kg rou nd -re pe at :n o- re pe at ; bg r: n b ac kg rou nd -at ta ch me nt :; bg a b ac kg rou nd -at ta ch me nt :fi xe d; bg a: f   b ac kg rou nd -at ta ch me nt :s cr oll ; bg a: s background-position:0 0; bgp b ac kg rou nd -p os iti on- x: ; bg px b ac kg rou nd -p os iti on- y: ; bg py background-break:; bgbk   background-break:bounding-box; bgbk:bb background-break:each-box; bgbk:eb b ac kg rou nd -b re ak :c ont in uou s; bg bk: c b ac kg rou nd -cl ip :; bg cp background-clip:border-box; bgcp:bb b ac kg rou nd -cl ip :pa dd in g- box ; bg cp :p b b ac kg rou nd -cl ip :co nt ent -b ox ; bg cp :c b background-clip:no-clip; bgcp:nc background-origin:; bgo background-origin:padding-box; bgo:pb b ac kg rou nd -ori gi n: bor de r- bo x; bg o: bb background-origin:content-box; bgo:cb b ac kg rou nd -s ize :; bg z background-size:auto; bgz:a background-size:contain; bgz:ct background-size:cover; bgz:cv color:#000; c

GNU General Public License v3

Special content types table-layout:; table-layout:auto; table-layout:fixed; caption-side:; ca pti on -s id e: top ; caption-side:bottom; empty-cells:; e mp ty -c ells :sh ow; empty-cells:hide; list-style:; list-style:none; list-style-position:; list-style-position:inside; list-style-position:outside; list-style-type:; list-style-type:none; list-style-type:disc; list-style-type:circle; list-style-type:square; list-style-type:decimal; list-style-type:decimal-leading-zero; lis t- sty le -ty pe :lowe r- rom an; lis t- sty le -ty pe :up pe r- roma n; list-style-image:; list-style-image:none; quotes:; quotes:none; quotes:'\00AB' '\00BB' '\201E' '\201C'; quotes:'\201C' '\201D' '\2018' '\2019'; content:; content:normal; content:open-quote; content:no-open-quote; content:close-quote; con te nt :n o- clos e- qu ote ; content:attr(); content:counter(); content:counters(); counter-increment:; counter-reset:;

tbl tbl:a tbl:f  cps cp s: t cps:b ec e c: s ec:h lis lis:n lisp lisp:i lisp:o list list:n list:d list:c list:s list:dc list:dclz li st :lr li st :u r lisi lisi:n q q:n q:ru q:en ct ct:n ct:oq ct:noq ct:cq ct :n cq ct:a ct:c ct:cs coi cor

Text  

   

vertical-align:; vertical- align:supe r; vertical-align:top; vertical-align:text-top; vertical-align:middle; vertical-align:baseline; vertical-align:bottom; vertical-align:text-bottom; vertical-align:sub; text-align:; text-align:left;

http://code.google.com/p/zen-coding/

ta ta:l

text-align:center; text- align:right; te xt- ali gn :ju st ify ; text-align-last:; text-align-last:auto; text-align-last:left; text- align-last:center; text-align-last:right; text- decoration:; text-decoration:none; text-decoration:overline; text-decoration:line-through; text-decoration:underline; text-emphasis:; text-emphasis:none; text- emphasis:a ccent; text-emphasis:dot; text-emphasis:circle; text-emphasis:disc; text- emphasis:before; text-emphasis:after; text-height:; text- he ight:auto; text-height:font-size; text-height:text-size; text-height:max-size; text-indent:; text-indent:-9999px; text-justify:; text-justify:auto; text-justify:inter-word; text-justify:inter-ideograph; text-justify:inter-cluster; text-justify:distribute; text-justify:kashida; text-justify:tibetan; text-outline:; text-outline:none; text-outline:0 0 #000; text-replace:; text-replace:none; text-transform:; text-transform:none; va text-transform:uppercase; va:sup text-transform:capitalize; va:t text-transform:lowercase; va:tt text-wrap:; va:m text-wrap:normal; va:bl text-wrap:none; va:b text-wrap:unrestricted; va:tb text-wrap:suppress; va:sub text-shadow:; text-shadow:none; text-shadow:0 0 0 #000; 6

ta:c ta:r ta :j tal tal:a tal:l tal:c tal:r td td:n td:o td:l td:u te te:n te :ac te:dt te:c te:ds te :b te:a th th:a th:f   th:t th:m ti ti:tj tj:a tj:iw tj:ii tj:ic tj:d tj:k   tj:t to to:n to+ tr tr:n tt tt:n tt:u tt:c tt:l tw tw:n tw:no tw:u tw:s tsh tsh:n tsh+

line-height:; lh white-space:; whs white-space:normal; whs:n white-space:pre; whs:p white-space:nowrap; whs:nw white-space:pre-wrap; whs:pw white-space:pre-line; whs:pl white-space-collapse:; whsc w hi te -s pa ce -co lla ps e: no rm al; whs c: n w hi te -s pa ce -co lla ps e: ke ep- al l; whs c: k   white-space-collapse:loose; whsc:l white-space-collapse:break-strict; whsc:bs white-space-collapse:break-all; whsc:ba word-break:; wob word-break:normal; wob:n word-break:keep-all; wob:k   word-break:loose; wob:l word-break:break-strict; wob:bs word-break:break-all; wob:ba word-spacing:; wos word-wrap:; wow word-wrap:normal; wow:n word-wrap:none; wow:no word-wrap:unrestricted; wow:u word-wrap:suppress; wow:s letter-spacing:; lts font:; f   font:1em Arial,sans-serif; f+ font-weight:; fw font-weight:normal; fw:n font-weight:bold; fw:b font-weight:bolder; fw:br font-weight:lighter; fw:lr font-style:; fs font-style:normal; fs:n font-style:italic; fs:i font-style:oblique; fs:o font-variant:; fv font-variant:normal; fv:n font-variant:small-caps; fv:sc font-size:; fz font-size-adjust:; fza font-size-adjust:none; fza:n font-family:; ff   font-family:Georgia,'Times New Roman',serif; ff:s font-family:Helvetica,Arial,sans-serif; ff:ss font-family:'Monotype Corsiva','Comic Sans MS',cursive; ff:c font-family:Capitals,Impact,fantasy; ff:f  font-family:Monaco,'Courier New',monospace; ff:m font-effect:; fef   font-effect:none; fef:n font-effect:engrave; fef:eg font-effect:emboss; fef:eb

GNU General Public License v3

font-effect:outline; font-emphasize:; font-emphasize-position:; font-emphasize-position:before; fon t- em ph as iz e- pos it io n:a fte r; font-emphasize-style:; font-emphasize-style:none ; fon t- em ph as iz e- st yle :a cce nt; font-emphasize-style:dot; font-emphasize-style:circle; font-emphasize-style:disc; font-smooth:; font-smooth:auto; font-smooth:never; font-smooth:always; font-stretch:; font-stretch:normal; fon t- st re tc h: ult ra -c on de nse d; fon t- st re tc h: ex tra -con de ns ed ; font-stretch:condensed; fon t- st re tc h: se mi -c on de ns ed ; font-stretch:semi-e xpanded; font-stretch:expanded; fon t- st re tc h: ex tra -ex pa nd ed ; font-stretch:ultra-expanded;

fef:o fem femp femp:b fe mp: a fems fems:n fe ms :a c fems:dt fems:c fems:ds fsm fsm:a fsm:n fsm:aw fst fst:n fs t: uc fs t: ec fst:c fs t: sc fst:se fst:e fs t: ee fst:ue

pa ge -b re ak -i ns ide :a uto ; page-break-inside:avoid; page-break-after:; page-break-after:auto; page-break-after:always; page-break-after:left; pa ge -b re ak -a fte r: rig ht ; orphans:; widows:;

pg bi :a pgbi:av pgba pgba:a pgba:aw pgba:l pg ba :r orp wid

 Visual properties opacity:; op filter:progid:DXImageTransform.Microsoft.Alpha (Opacity=100); op:ie -ms-filter:'progid:DXImageTransform.Microsoft.Alpha (Opacity=100)'; op:ms resize:; rz resize:none; rz:n resize:both; rz:b resize:horizontal; rz:h resize:vertical; rz:v cursor:; cur cursor:auto; cur:a cursor:default; cur:d cursor:crosshair; cur:c cursor:hand; cur:ha cursor:help; cur:he cursor:move; cur:m cursor:pointer; cur:p cursor:text; cur:t

Print page-break-before:; pa ge -b re ak -be fore :a ut o; page-break-before:always; pa ge -b re ak -be fore :l eft ; page-break-before:right; page-break-inside:; http://code.google.com/p/zen-coding/

pgbb pg bb: a pgbb:aw pg bb: l pgbb:r pgbi

.: PDF version by Shayanlinux – Compiled in OpenOffice.org Writer :.

7

GNU General Public License v3