Zen codingcheatsheet

Zen HTML Elements <body></body> meta:win
</html> <meta http-equiv="Content-Type"
Based on HTML 5 specification draft. content="text/html;charset=Win-1251">
html:xxs
Root Element meta:compat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
html "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <meta http-equiv="X-UA-Compatible" content="IE=7">
<html></html> <html xmlns="http://www.w3.org/1999/xhtml" style
html:xml xml:lang="en"> <style type="text/css"></style>
<html xmlns="http://www.w3.org/1999/xhtml" <head> Scripting
xml:lang="en"></html> <title></title> script
html:4t <meta http-equiv="Content-Type" <script type="text/javascript"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 content="text/html;charset=UTF-8"/>
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> script:src
</head> <script type="text/javascript" src=""></script>
<html lang="en"> <body></body>
<head> noscript
</html> <noscript></noscript>
<title></title> html:5
<meta http-equiv="Content-Type" Sections
<!DOCTYPE HTML> body
content="text/html;charset=UTF-8">
<html lang="en-EN"> <body></body>
</head>
<head> section, sect
<body></body>
<title></title> <section></section>
</html>
<meta charset="UTF-8"> nav
html:4s
</head> <nav></nav>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<body> article, art
"http://www.w3.org/TR/html4/strict.dtd">
</body> <article></article>
<html lang="en">
</html> aside
<head>
Document Metadata <aside></aside>
<title></title>
head h1
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"> <head></head> <h1></h1>
</head> title h2
<body></body> <title></title> <h2></h2>
</html> base h3
html:xt <base href=""> <h3></h3>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 link h4
Transitional//EN" <link> <h4></h4>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- link:css h5
transitional.dtd"> <link rel="stylesheet" type="text/css" href="style.css" <h5></h5>
<html xmlns="http://www.w3.org/1999/xhtml" media="all"> h6
xml:lang="en"> link:print <h6></h6>
<head> <link rel="stylesheet" type="text/css" href="print.css" hgroup, hgr
<title></title> media="print">
<hgroup></hgroup>
<meta http-equiv="Content-Type" link:favicon
header, hdr
content="text/html;charset=UTF-8"/> <link rel="shortcut icon" type="image/x-icon"
href="favicon.ico"> <header></header>
</head>
link:touch footer, ftr
<body></body>
<link rel="apple-touch-icon" href="favicon.png"> <footer></footer>
</html>
html:xs link:rss address, adr
<link rel="alternate" type="application/rss+xml" <address></address>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- title="RSS" href="rss.xml"> div
strict.dtd"> link:atom <div></div>
<html xmlns="http://www.w3.org/1999/xhtml" <link rel="alternate" type="application/atom+xml" Grouping Content
xml:lang="en"> title="Atom" href="atom.xml"> p
<head> meta <p></p>
<title></title> <meta> hr
<meta http-equiv="Content-Type" meta:utf <hr>
content="text/html;charset=UTF-8"/> <meta http-equiv="Content-Type" br
</head> content="text/html;charset=UTF-8"> <br>

http://code.google.com/p/zen-coding/ 1 GNU General Public License v3

pre acronym, acr param
<pre></pre> <acronym title=""></acronym> <param name="" value="">
dialog, dlg time video
<dialog></dialog> <time></time> <video src=""></video>
blockquote, bq progress, prog audio
<blockquote></blockquote> <progress></progress> <audio src=""></audio>
ol meter source, src
<ol></ol> <meter></meter> <source>
ol+ code canvas
<ol> <code></code> <canvas></canvas>
<li></li> var map
</ol> <var></var> <map name=""></map>
ul samp map+
<ul></ul> <samp></samp> <map name="">
ul+ kbd <area shape="" coords="" href="" alt="">
<ul> <kbd></kbd> </map>
<li></li> sub area
</ul> <sub></sub> <area shape="" coords="" href="" alt="">
li sup area:d
<li></li> <sup></sup> <area shape="default" href="" alt="">
dl span area:c
<dl></dl> <span></span> <area shape="circle" coords="" href="" alt="">
dl+ i area:r
<dl> <i></i> <area shape="rect" coords="" href="" alt="">
<dt></dt> b area:p
<dd></dd> <b></b> <area shape="poly" coords="" href="" alt="">
</dl> bdo Tabular Data
dt <bdo dir=""></bdo> table
<dt></dt> bdo:r <table></table>
dd <bdo dir="rtl"></bdo> table+
<dd></dd> bdo:l <table>
Text-level Semantics <bdo dir="ltr"></bdo> <tr>
a ruby <td></td>
<a href=""></a> <ruby></ruby> </tr>
a:link rt </table>
<a href="http://"></a> <rt></rt> caption, cap
a:mail rp <caption></caption>
<a href="mailto:"></a> <rp></rp> colgroup, colg
q Edits <colgroup></colgroup>
<q></q> ins colgroup+, colg+
cite <ins></ins> <colgroup>
<cite></cite> del <col>
em <del></del> </colgroup>
<em></em> Embedded Content col
strong, str figure, fig <col>
<strong></strong> <figure></figure> tbody
small img <tbody></tbody>
<small></small> <img src="" alt=""> thead
mark iframe, ifr <thead></thead>
<mark></mark> <iframe src="" frameborder="0"></iframe> tfoot
dfn embed, emb <tfoot></tfoot>
<dfn></dfn> <embed src="" type=""> tr
abbr object, obj <tr></tr>
<abbr title=""></abbr> <object data="" type=""></object>


tr+ input:checkbox, input:c Comments
<tr> <input type="checkbox" id=""> cc:ie
<td></td> input:radio, input:r 
</tr> <input type="radio" id=""> cc:noie
th input:file, input:f 
<th></th> <input type="file" id="">
td input:submit, input:s Zen HTML Selectors
<td></td> <input type="submit" value=""> E#name
Forms input:image, input:i div#name
form <input type="image" src="" alt=""> <div id="name"></div>
<form action=""></form> input:reset E.name
form:get <input type="reset" value=""> div.name
<form action="" method="get"></form> input:button, input:b <div class="name"></div>
form:post <input type="button" value=""> div.one.two
<form action="" method="post"></form> button, btn <div class="one two"></div>
fieldset, fset <button></button> div#name.one.two
<fieldset></fieldset> select <div id="name" class="one two"></div>
legend, leg <select id=""></select> E>E
<legend></legend> select+ head>link
label <select id=""> <head>
<label for=""></label> <option value=""></option> <link/>
input </select> </head>
<input type=""> optgroup, optg table>tr>td
input:hidden, input:h <optgroup></optgroup> <table>
<input type="hidden" value=""> optgroup+, optg+ <tr>
input:text, input:t <optgroup> <td></td>
<input type="text" value="" id=""> <option></option> </tr>
input:search </optgroup> </table>
<input type="search" value="" id=""> option, opt ul#name>li.item
input:email <option></option> <ul id="name">
<input type="email" value="" id=""> Interactive Elements <li class="item"></li>
input:url datagrid, datag </ul>
<input type="url" value="" id=""> <datagrid></datagrid> E+E
input:password, input:p datalist, datal p+p
<input type="password" value="" id=""> <datalist></datalist> <p></p>
input:datetime textarea, tarea <p></p>
<input type="datetime" value="" id=""> <textarea id="" cols="30" rows="10"></textarea> div#name>p.one+p.two
input:datetime-local keygen, kg <div id="name">
<input type="datetime-local" value="" id=""> <keygen> <p class="one"></p>
input:date output, out <p class="two"></p>
<input type="date" value="" id=""> <output></output> </div>
input:month details, det Zen HTML Aliases
<input type="month" value="" id=""> <details></details>
E*N
input:week command, cmd
p*3
<input type="week" value="" id=""> <command>
<p></p>
input:time bb
<p></p>
<input type="time" value="" id=""> <bb></bb>
<p></p>
input:number menu
ul#name>li.item*3
<input type="number" value="" id=""> <menu></menu>
<ul id="name">
input:range menu:context, menu:c
<li class="item"></li>
<input type="range" value="" id=""> <menu type="context"></menu>
input:color menu:toolbar, menu:t
<input type="color" value="" id=""> <menu type="toolbar"></menu> </ul>

E*N$ Positioning overflow:scroll; ov:s
p.name-$*3 position:; pos overflow:auto; ov:a
<p class="name-1"></p> position:static; pos:s overflow-x:; ovx
<p class="name-2"></p> position:absolute; pos:a overflow-x:visible; ovx:v
<p class="name-3"></p> position:relative; pos:r overflow-x:hidden; ovx:h
select>option#item-$*3 position:fixed; pos:f overflow-x:scroll; ovx:s
<select> top:; t overflow-x:auto; ovx:a
<option id="item-1"></option> top:auto; t:a overflow-y:; ovy
<option id="item-2"></option> right:; r overflow-y:visible; ovy:v
<option id="item-3"></option> right:auto; r:a overflow-y:hidden; ovy:h
</select> bottom:; b overflow-y:scroll; ovy:s
E+ bottom:auto; b:a overflow-y:auto; ovy:a
ul+ left:; l overflow-style:; ovs
<ul> left:auto; l:a overflow-style:auto; ovs:a
<li></li> z-index:; z overflow-style:scrollbar; ovs:s
</ul> z-index:auto; z:a overflow-style:panner; ovs:p
table+ overflow-style:move; ovs:m
Box behavior and properties overflow-style:marquee; ovs:mq
<table>
float:; fl
<tr> zoom:1; zoo
float:none; fl:n
<td></td> clip:; cp
float:left; fl:l
</tr> clip:auto; cp:a
float:right; fl:r
</table> clip:rect(0 0 0 0); cp:r
clear:; cl
dl+ box-sizing:; bxz
clear:none; cl:n
<dl> box-sizing:content-box; bxz:cb
clear:left; cl:l
<dt></dt> box-sizing:border-box; bxz:bb
clear:right; cl:r
<dd></dd> box-shadow:; bxsh
clear:both; cl:b
</dl> box-shadow:none; bxsh:n
display:; d
box-shadow:0 0 0 #000; bxsh+
Zen CSS properties display:none; d:n
-webkit-box-shadow:; bxsh:w
Based on CSS 3 draft specification display:block; d:b
-webkit-box-shadow:0 0 0 #000; bxsh:w+
Property Alias display:inline; d:i
-moz-box-shadow:; bxsh:m
display:inline-block; d:ib
Special Rules display:-moz-inline-box:; d:mib
-moz-box-shadow:0 0 0 0 #000; bxsh:m+
@import url(); @i
display:-moz-inline-stack:; d:mis Sizing
@media print { @m margin:; m
display:list-item; d:li
} margin:auto; m:a
display:run-in; d:ri
@font-face { @f margin:0; m:0
display:compact; d:cp
font-family:; margin:0 0; m:2
display:table; d:tb
src:url(); margin:0 0 0; m:3
display:inline-table; d:itb
} margin:0 0 0 0; m:4
display:table-caption; d:tbcp
!important ! margin-top:; mt
display:table-column; d:tbcl
expression () exp margin-top:auto; mt:a
display:table-column-group; d:tbclg
Properties Groups display:table-header-group; d:tbhg margin-right:; mr
Sorting Methods display:table-footer-group; d:tbfg margin-right:auto; mr:a
display:table-row; d:tbr margin-bottom:; mb
• Positioning
display:table-row-group; d:tbrg margin-bottom:auto; mb:a
• Box behavior and properties
display:table-cell; d:tbc margin-left:; ml
• Sizing margin-left:auto; ml:a
visibility:; v
• Color appearance padding:; p
visibility:visible; v:v
• Special content types padding:0; p:0
visibility:hidden; v:h
• Text visibility:collapse; v:c padding:0 0; p:2
• Visual properties overflow:; ov padding:0 0 0; p:3
• Print overflow:visible; ov:v padding:0 0 0 0; p:4
overflow:hidden; ov:h padding-top:; pt
padding-right:; pr


padding-bottom:; pb border-top-right-image:continue; bdtri:c border-left:; bdl
padding-left:; pl border-bottom-right-image:url(); bdbri border-left:none; bdl:n
width:; w border-bottom-right-image:none; bdbri:n border-left:1px solid #000; bdl+
width:auto; w:a border-bottom-right-image:continue; bdbri:c border-left-width:; bdlw
height:; h border-bottom-left-image:url(); bdbli border-left-style:; bdls
height:auto; h:a border-bottom-left-image:none; bdbli:n border-left-style:none; bdls:n
max-width:; maw border-bottom-left-image:continue; bdbli:c border-left-color:#000; bdlc
max-width:none; maw:n border-fit:; bdf border-radius:; bdrz
max-height:; mah border-fit:clip; bdf:c -webkit-border-radius:; bdrz:w
max-height:none; mah:n border-fit:repeat; bdf:r -moz-border-radius:; bdrz:m
min-width:; miw border-fit:scale; bdf:sc border-top-right-radius:; bdtrrz
min-height:; mih border-fit:stretch; bdf:st border-top-left-radius:; bdtlrz
Color appearance border-fit:overwrite; bdf:ow border-bottom-right-radius:; bdbrrz
outline:; o border-fit:overflow; bdf:of border-bottom-left-radius:; bdblrz
outline:none; o:n border-fit:space; bdf:sp background:; bg
outline:1px solid #000; o+ border-length:; bdlt background:none; bg:n
outline-offset:; oo border-length:auto; bdlt:a background:#FFF url() 0 0 no-repeat; bg+
outline-width:; ow border-spacing:; bdsp filter:progid:DXImageTransform.Microsoft.AlphaImage
outline-style:; os border-style:; bds Loader(src='',sizingMethod='crop');
border-style:none; bds:n bg:ie
outline-color:#000; oc
border-style:hidden; bds:h background-color:#FFF; bgc
outline-color:invert; oc:i
border-style:dotted; bds:dt background-color:transparent; bgc:t
border:; bd
border-style:dashed; bds:ds background-image:url(); bgi
border:none; bd:n
border-style:solid; bds:s background-image:none; bgi:n
border:1px solid #000; bd+
border-style:double; bds:db background-repeat:; bgr
border-break:; bdbk
border-style:dot-dash; bds:dtds background-repeat:repeat; bgr:r
border-break:close; bdbk:c
border-style:dot-dot-dash; bds:dtdtds background-repeat:repeat-x; bgr:x
border-collapse:; bdcl
border-style:wave; bds:w background-repeat:repeat-y; bgr:y
border-collapse:collapse; bdcl:c
border-style:groove; bds:g background-repeat:no-repeat; bgr:n
border-collapse:separate; bdcl:s
border-style:ridge; bds:r background-attachment:; bga
border-color:#000; bdc
border-style:inset; bds:i background-attachment:fixed; bga:f
border-image:url(); bdi
border-style:outset; bds:o background-attachment:scroll; bga:s
border-image:none; bdi:n
border-width:; bdw background-position:0 0; bgp
-webkit-border-image:; bdi:w
border-top:; bdt background-position-x:; bgpx
-webkit-border-image:url() 0 0 0 0 stretch stretch;
bdi:w+ border-top:none; bdt:n background-position-y:; bgpy
-moz-border-image:; bdi:m border-top:1px solid #000; bdt+ background-break:; bgbk
-moz-border-image:url() 0 0 0 0 stretch stretch; border-top-width:; bdtw background-break:bounding-box; bgbk:bb
bdi:m+ border-top-style:; bdts background-break:each-box; bgbk:eb
border-top-image:url(); bdti border-top-style:none; bdts:n background-break:continuous; bgbk:c
border-top-image:none; bdti:n border-top-color:#000; bdtc background-clip:; bgcp
border-right-image:url(); bdri border-right:; bdr background-clip:border-box; bgcp:bb
border-right-image:none; bdri:n border-right:none; bdr:n background-clip:padding-box; bgcp:pb
border-bottom-image:url(); bdbi border-right:1px solid #000; bdr+ background-clip:content-box; bgcp:cb
border-bottom-image:none; bdbi:n border-right-width:; bdrw background-clip:no-clip; bgcp:nc
border-left-image:url(); bdli border-right-style:; bdrs background-origin:; bgo
border-left-image:none; bdli:n border-right-style:none; bdrs:n background-origin:padding-box; bgo:pb
border-corner-image:url(); bdci border-right-color:#000; bdrc background-origin:border-box; bgo:bb
border-corner-image:none; bdci:n border-bottom:; bdb background-origin:content-box; bgo:cb
border-corner-image:continue; bdci:c border-bottom:none; bdb:n background-size:; bgz
border-top-left-image:url(); bdtli border-bottom:1px solid #000; bdb+ background-size:auto; bgz:a
border-top-left-image:none; bdtli:n border-bottom-width:; bdbw background-size:contain; bgz:ct
border-top-left-image:continue; bdtli:c border-bottom-style:; bdbs background-size:cover; bgz:cv
border-top-right-image:url(); bdtri border-bottom-style:none; bdbs:n color:#000; c
border-top-right-image:none; bdtri:n border-bottom-color:#000; bdbc


Special content types text-align:center; ta:c line-height:; lh
table-layout:; tbl text-align:right; ta:r white-space:; whs
table-layout:auto; tbl:a text-align:justify; ta:j white-space:normal; whs:n
table-layout:fixed; tbl:f text-align-last:; tal white-space:pre; whs:p
caption-side:; cps text-align-last:auto; tal:a white-space:nowrap; whs:nw
caption-side:top; cps:t text-align-last:left; tal:l white-space:pre-wrap; whs:pw
caption-side:bottom; cps:b text-align-last:center; tal:c white-space:pre-line; whs:pl
empty-cells:; ec text-align-last:right; tal:r white-space-collapse:; whsc
empty-cells:show; ec:s text-decoration:; td white-space-collapse:normal; whsc:n
empty-cells:hide; ec:h text-decoration:none; td:n white-space-collapse:keep-all; whsc:k
list-style:; lis text-decoration:overline; td:o white-space-collapse:loose; whsc:l
list-style:none; lis:n text-decoration:line-through; td:l white-space-collapse:break-strict; whsc:bs
list-style-position:; lisp text-decoration:underline; td:u white-space-collapse:break-all; whsc:ba
list-style-position:inside; lisp:i text-emphasis:; te word-break:; wob
list-style-position:outside; lisp:o text-emphasis:none; te:n word-break:normal; wob:n
list-style-type:; list text-emphasis:accent; te:ac word-break:keep-all; wob:k
list-style-type:none; list:n text-emphasis:dot; te:dt word-break:loose; wob:l
list-style-type:disc; list:d text-emphasis:circle; te:c word-break:break-strict; wob:bs
list-style-type:circle; list:c text-emphasis:disc; te:ds word-break:break-all; wob:ba
list-style-type:square; list:s text-emphasis:before; te:b word-spacing:; wos
list-style-type:decimal; list:dc text-emphasis:after; te:a word-wrap:; wow
list-style-type:decimal-leading-zero; list:dclz text-height:; th word-wrap:normal; wow:n
list-style-type:lower-roman; list:lr text-height:auto; th:a word-wrap:none; wow:no
list-style-type:upper-roman; list:ur text-height:font-size; th:f word-wrap:unrestricted; wow:u
list-style-image:; lisi text-height:text-size; th:t word-wrap:suppress; wow:s
list-style-image:none; lisi:n text-height:max-size; th:m letter-spacing:; lts
quotes:; q text-indent:; ti font:; f
quotes:none; q:n text-indent:-9999px; ti:- font:1em Arial,sans-serif; f+
quotes:'00AB' '00BB' '201E' '201C'; q:ru text-justify:; tj font-weight:; fw
quotes:'201C' '201D' '2018' '2019'; q:en text-justify:auto; tj:a font-weight:normal; fw:n
content:; ct text-justify:inter-word; tj:iw font-weight:bold; fw:b
content:normal; ct:n text-justify:inter-ideograph; tj:ii font-weight:bolder; fw:br
content:open-quote; ct:oq text-justify:inter-cluster; tj:ic font-weight:lighter; fw:lr
content:no-open-quote; ct:noq text-justify:distribute; tj:d font-style:; fs
content:close-quote; ct:cq text-justify:kashida; tj:k font-style:normal; fs:n
content:no-close-quote; ct:ncq text-justify:tibetan; tj:t font-style:italic; fs:i
content:attr(); ct:a text-outline:; to font-style:oblique; fs:o
content:counter(); ct:c text-outline:none; to:n font-variant:; fv
content:counters(); ct:cs text-outline:0 0 #000; to+ font-variant:normal; fv:n
counter-increment:; coi text-replace:; tr font-variant:small-caps; fv:sc
counter-reset:; cor text-replace:none; tr:n font-size:; fz
text-transform:; tt font-size-adjust:; fza
Text text-transform:none; tt:n font-size-adjust:none; fza:n
vertical-align:; va
text-transform:uppercase; tt:u font-family:; ff
vertical-align:super; va:sup
text-transform:capitalize; tt:c font-family:Georgia,'Times New Roman',serif; ff:s
vertical-align:top; va:t
text-transform:lowercase; tt:l font-family:Helvetica,Arial,sans-serif; ff:ss
vertical-align:text-top; va:tt
text-wrap:; tw font-family:'Monotype Corsiva','Comic Sans MS',cursive;
vertical-align:middle; va:m ff:c
text-wrap:normal; tw:n
vertical-align:baseline; va:bl font-family:Capitals,Impact,fantasy; ff:f
text-wrap:none; tw:no
vertical-align:bottom; va:b font-family:Monaco,'Courier New',monospace; ff:m
text-wrap:unrestricted; tw:u
vertical-align:text-bottom; va:tb font-effect:; fef
text-wrap:suppress; tw:s
vertical-align:sub; va:sub font-effect:none; fef:n
text-shadow:; tsh
text-align:; ta font-effect:engrave; fef:eg
text-shadow:none; tsh:n
text-align:left; ta:l font-effect:emboss; fef:eb
text-shadow:0 0 0 #000; tsh+


font-effect:outline; fef:o page-break-inside:auto; pgbi:a
font-emphasize:; fem page-break-inside:avoid; pgbi:av
font-emphasize-position:; femp page-break-after:; pgba
font-emphasize-position:before; femp:b page-break-after:auto; pgba:a
font-emphasize-position:after; femp:a page-break-after:always; pgba:aw
font-emphasize-style:; fems page-break-after:left; pgba:l
font-emphasize-style:none; fems:n page-break-after:right; pgba:r
font-emphasize-style:accent; fems:ac orphans:; orp
font-emphasize-style:dot; fems:dt widows:; wid
font-emphasize-style:circle; fems:c
font-emphasize-style:disc; fems:ds
font-smooth:; fsm
font-smooth:auto; fsm:a
font-smooth:never; fsm:n
font-smooth:always; fsm:aw
font-stretch:; fst
font-stretch:normal; fst:n
font-stretch:ultra-condensed; fst:uc
font-stretch:extra-condensed; fst:ec
font-stretch:condensed; fst:c
font-stretch:semi-condensed; fst:sc
font-stretch:semi-expanded; fst:se
font-stretch:expanded; fst:e
font-stretch:extra-expanded; fst:ee
font-stretch:ultra-expanded; fst:ue
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:; pgbb
page-break-before:auto; pgbb:a
page-break-before:always; pgbb:aw
page-break-before:left; pgbb:l
page-break-before:right; pgbb:r .: PDF version by Shayanlinux – Compiled in OpenOffice.org Writer :.
page-break-inside:; pgbi


Zen codingcheatsheet

More Related Content

What's hot

Viewers also liked

Similar to Zen codingcheatsheet

Recently uploaded

Zen codingcheatsheet