zencoding使用技巧
Zen Coding 0 .6
.google .com/p/zen-coding
Selectors
div#name . . . . . . . . . . . . . <div id="name"></div> div.name . .
. . . . . . . . . . . . <div class="name"></div> div.one.two . . . . . . . . . . . <div class="one two"></div> div#name.one.two . . . . <div id="name" class="one two"></div> div>p . . . . . . . . . . . . . . . . . <div><p></p></div> p+p . . . . . . . . . . . . . . . . . . . <p></p><p></p> p*3 . . . . . . . . . . . . . . . . . . . . <p></p><p></p><p></p> p.name-$*2 . . . . . . . . . . . <p class="name-1"></p><p class="name-2"></p> ul + . . . . . . . . . . . . . . . . . . . . . . . . . .<ul><li></li></ul> table + . . . . . . . . . . . . . . . . . . . . . .<table><tr><td></td></tr></table> dl + . . . . . . . . . . . . . . . . . . . . . . . . . .<dl><dt></dt><dd></dd></dl> p.title|e 0 .6 . . . . . . . . . . . . . . . . . . .<p class="title"></p> p[title] 0 .6 . . . . . . . . . . . . . . . . . . . .<p title=""></p> td[colspan=2] 0 .6 . . . . . . . . . . . .<td colspan="2"></td> span[title="Hello" rel] 0 .6 . . . .<span title="Hello" rel=""></span>
Filters 0 .6
haml . . . HAML syntax filter html . . . . HTML syntax filter e . . . . . . . Escapes XML-unsafe characters: <, > and & c . . . . . . . Add comments around important tags fc . . . . . . . Add whitespace after CSS property name xsl . . . . . . This filter removes select attribute from <xsl:variable> and <xsl:with-param> tags if they have child nodes
html . . . . . . . . . . . . . . <html></html> :xml?xmlns :4t?HTML4?trans :4s?HTML4?strict :xt?XHTML?trans :xs?XHTML?strict :xxs?XHTML?1.1 :5
Document head & Metadata
head . . . . . . . . . . . . . <head></head> title . . . . . . . . . . . . . . <title></title> base . . . . . . . . . . . . . . <base href=""> link . . . . . . . . . . . . . . . <link> :css?css-link :print?print?css :favicon :touch?touch-icon :rss :atom meta . . . . . . . . . . . . . <meta> :utf? :win? :compat?X-UA-Compatible style . . . . . . . . . . . . . <style type="text/css"></style> script . . . . . . . . . . . . . <script type="text/javascript"> :src noscript . . . . . . . . . . <noscript></noscript>
pre . . . . . . . . . . . . . . . <pre></pre> dialog (dlg) . . . . . . <dialog></dialog> blockquote (bq) . . <blockquote></blockquote> ol + . . . . . . . . . . . . . . . . <ol></ol> ul + . . . . . . . . . . . . . . . . <ul></ul> li . . . . . . . . . . . . . . . . <li></li> dl + . . . . . . . . . . . . . . . . <dl></dl> dt . . . . . . . . . . . . . . . . <dt></dt> dd . . . . . . . . . . . . . . . . <dd></dd>
ruby . . . . . . . . . . . . . . <ruby></ruby> rt . . . . . . . . . . . . . . . . <rt></rt> rp . . . . . . . . . . . . . . . . <rp></rp> bdo . . . . . . . . . . . . . . <bdo dir=""></bdo> :r?rtl :l?ltr ins . . . . . . . . . . . . . . . <ins></ins> del . . . . . . . . . . . . . . . <del></del>
Forms
form . . . . . . . . . . . . . <form action=""></form> :get :post fieldset (fset) . . . . . <fieldset></fieldset> legend (leg) . . . . . . <legend></legend> label . . . . . . . . . . . . . <label for=""></label> input . . . . . . . . . . . . . <input type=""> :hidden (:h) :text (:t) :search :email :url :password (:p) :datetime :datetime-local :date :month :week :time :number :range :color :checkbox (:c) :radio (:r) :file (:f ) :submit (:s) :image (:i) :reset :button (:b) button (btn) . . . . . . <button></button> select + . . . . . . . . . . . <select id=""></select> optgroup (optg) + <optgroup></optgroup> option (opt) . . . . . . <option></option>
Embedded Content
figure (fig) . . . . . . . <figure></figure> img . . . . . . . . . . . . . . <img src="" alt=""> iframe (ifr) . . . . . . . <iframe src="" frameborder="0"></iframe> embed (emb) . . . . <embed src="" type=""> object (obj) . . . . . . <object data="" type=""></object> param . . . . . . . . . . . . <param name="" value=""> video . . . . . . . . . . . . . <video src=""></video> audio . . . . . . . . . . . . <audio src=""></audio> source (src) . . . . . . . <source> canvas . . . . . . . . . . . <canvas></canvas> map + . . . . . . . . . . . . . <map name=""></map> area . . . . . . . . . . . . . . <area shape="" coords="" href="" alt=""> :d default :c circle :r rect :p poly
Text-level Semantics
a . . . . . . . . . . . . . . . . <a href=""></a> :link http :mail?mailto q . . . . . . . . . . . . . . . . <q></q> cite . . . . . . . . . . . . . . . <cite></cite> em . . . . . . . . . . . . . . . <em></em> strong (str) . . . . . . . <strong></strong> small . . . . . . . . . . . . . <small></small> mark . . . . . . . . . . . . . <mark></mark> dfn . . . . . . . . . . . . . . . <dfn></dfn> abbr . . . . . . . . . . . . . . <abbr title=""></abbr> acronym (acr) . . . . <acronym title=""></acronym> time . . . . . . . . . . . . . . <time></time> progress (prog) . . <progress></progress> meter . . . . . . . . . . . . <meter></meter> code . . . . . . . . . . . . . <code></code> var . . . . . . . . . . . . . . . <var></var> samp . . . . . . . . . . . . . <samp></samp> kbd . . . . . . . . . . . . . . <kbd></kbd> sub . . . . . . . . . . . . . . . <sub></sub> sup . . . . . . . . . . . . . . . <sup></sup> span . . . . . . . . . . . . . <span></span> i . . . . . . . . . . . . . . . . <i></i> b . . . . . . . . . . . . . . . . <b></b>
Sections
body . . . . . . . . . . . . . <body></body> section (sect) . . . . . <section></section> nav . . . . . . . . . . . . . . . <nav></nav> article (art) . . . . . . . <article></article> aside . . . . . . . . . . . . . <aside></aside> h1–h6 . . . . . . . . . . . . <h1></h1> hgroup (hgr) . . . . . <hgroup></hgroup> header (hdr) . . . . . <header></header> footer (ftr) . . . . . . . <footer></footer> address (adr) . . . . . <address></address> div . . . . . . . . . . . . . . . <div></div>
Interactive Elements
datagrid (datag) . <datagrid></datagrid> datalist (datal) . . . <datalist></datalist> textarea (tarea) . . <textarea id="" cols="30" rows="10"></ textarea> keygen (kg) . . . . . . <keygen> output (out) . . . . . . <output></output> details (det) . . . . . . <details></details> command (cmd) . <command> bb . . . . . . . . . . . . . . . . <bb></bb> menu . . . . . . . . . . . . <menu></menu> :context (:c) :toolbar (:t)
Tables
table + . . . . . . . . . . . . <table></table> caption (cap) . . . . . <caption></caption> colgroup (colg) + . . <colgroup></colgroup> col . . . . . . . . . . . . . . . <col> tbody . . . . . . . . . . . . <tbody></tbody> thead . . . . . . . . . . . . <thead></thead> tfoot . . . . . . . . . . . . . <tfoot></tfoot> tr + . . . . . . . . . . . . . . . . <tr></tr> th . . . . . . . . . . . . . . . . <th></th> td . . . . . . . . . . . . . . . . <td></td>
Grouping Content
p . . . . . . . . . . . . . . . . <p></p> hr . . . . . . . . . . . . . . . . <hr> br . . . . . . . . . . . . . . . . <br>
Conditional Comments
cc:ie . . . . . . . . . . . . . . <!--[if IE]><![endif]--> cc:noie . . . . . . . . . . . <!--[if !IE]><!--><!--<![endif]-->
@import url() . . . . . . . . .@i @media print { } . . . . . . . .@m @font-face { ... } . . . . . . . .@f !important . . . . . . . . . . . .! expression() . . . . . . . . . . .exp
border-top-width . . . . . . .bdtw border-top-style . . . . . . .bdts :n?none border-top-color:#000 . . .bdtc border-right . . . . . . . . . .bdr + :n?none border-right-width . . . . .bdrw border-right-style . . . . . .bdrs :n?none Positioning border-right-color:#000 . . .bdrc position . . . . . . . . . . . . . .pos :s?static :a?absolute border-bottom . . . . . . . . .bdb + :n?none :r?relative :f?fixed border-bottom-width . . . .bdbw top . . . . . . . . . . . . . . . . .t :a auto border-bottom-style . . . .bdbs :n?none right . . . . . . . . . . . . . . . .r :a auto border-bottom-color:#000 .bdbc bottom . . . . . . . . . . . . . .b :a auto border-left . . . . . . . . . . . .bdl + :n?none left . . . . . . . . . . . . . . . . .l :a auto border-left-width . . . . . . .bdlw z-index . . . . . . . . . . . . . .z :a auto border-left-style . . . . . . .bdls :n?none Box behavior & properties border-left-color:#000 . . .bdlc border-radius . . . . . . . . . .bdrz :w?-webkit :m?-moz float . . . . . . . . . . . . . . . .fl :n?none :l?left :r?right Color & appearance border-top-right-radius . .bdtrrz clear . . . . . . . . . . . . . . . .cl :n?none :l?left :r?right outline . . . . . . . . . . . . . .o + :n?none border-top-left-radius . . .bdtlrz :b?both outline-offset . . . . . . . . .oo border-bottom-right-radius .bdbrrz display . . . . . . . . . . . . . .d :n?none :b?block outline-width . . . . . . . . .ow border-bottom-left-radius .bdblrz :i?inline :ib?inline-block outline-style . . . . . . . . . .os background . . . . . . . . . . .bg + :n?none :ie :mib?-moz-inline-box outline-color:#000 . . . . . .oc :i?invert background-color:#fff . . . .bgc :t?transp. :mis?-moz-inline-stack border . . . . . . . . . . . . . . .bd + :n?none background-image:url() . .bgi :n?none :li?list-item :ri?run-in border-break . . . . . . . . . .bdbk :c?close background-repeat . . . . . .bgr :r?repeat :x?repeat-x :cp?compact :tb?table border-collapse . . . . . . . .bdcl :c?collapse :s?separate :y?repeat-y :n?no-repeat :itb?inline-table border-color:#000 . . . . . .bdc background-attachment . .bga :f?fixed :s?scroll :tbcp?table-caption border-image . . . . . . . . .bdi + :n?none :w +?-webkit background-position:0 . . .bgp :tbcl?table-column :m +?-moz background-position-x . . .bgpx & bgpy :tbclg?table-column-group border-top-image . . . . . .bdti :n?none background-break . . . . . .bgbk :bb?bounding-box :tbhg?table-header-group border-right-image . . . . .bdri :n?none :eb?each-box :c?continuous :tbfg?table-footer-group border-bottom-image . . .bdbi :n?none background-clip . . . . . . . .bgcp :bb?border-box :tbr?table-row border-left-image . . . . . .bdli :n?none :pb?padding-box :tbrg?table-row-group border-corner-image . . . .bdci :n?none :c?continue :cb?content-box :nc?no-clip :tbc?table-cell border-top-left-image . . .bdtli :n?none :c?continue background-origin . . . . . .bgo :bb?border-box visibility . . . . . . . . . . . . .v :v?visible :h?hidden border-top-right-image . .bdtri :n?none :c?continue :pb?padding-box :c?collapse border-bottom-right-image .bdbri :n?none :c?continue :cb?content-box overflow . . . . . . . . . . . . .ov :v?visible :h?hidden border-bottom-left-image .bdbli :n?none :c?continue background-size . . . . . . . .bgz :a?auto :ct?contain :s?scroll :a?auto border-fit . . . . . . . . . . . .bdf :c?clip :r?repeat :cv?cover overflow-x . . . . . . . . . . . .ovx & ovy :sc?scale :st?stretch color:#000 . . . . . . . . . . . .c :v?visible :h?hidden :ow?overwrite :s?scroll :a?auto Special content types :of?overflow :sp?space overflow-style . . . . . . . . .ovs :a?auto :s?scrollbar border-length . . . . . . . . .bdlt :a?auto table-layout . . . . . . . . . .tbl :a?auto :f?fixed :p?panner :m?move border-spacing . . . . . . . .bdsp caption-side . . . . . . . . . .cps :t?top :b?bottom :mq?marquee border-style . . . . . . . . . . .bds :n?none :h?hidden empty-cells . . . . . . . . . . .ec :s?show :h?hide zoom:1 . . . . . . . . . . . . . .zoo :dt?dotted :ds?dashed list-style . . . . . . . . . . . . .lis :n?none clip . . . . . . . . . . . . . . . . .cp :a?auto :r?rect :s?solid :db?double list-style-position . . . . . . .lisp :i?inside :o?outside box-sizing . . . . . . . . . . . .bxz :cb?content-box :dtds?dot-dash list-style-type . . . . . . . . .list :n?none :d?disc :bb?border-box :dtdtds?dot-dot-dash :c?circle :s?square box-shadow . . . . . . . . . . .bxsh + :n none :w?wave :g?groove :r?ridge :dc?decimal :w +?-webkit :m +?-moz :i?inset :o?outset :dclz?decimal-leading-zero Sizing border-width . . . . . . . . . .bdw :lr?lower-roman border-top . . . . . . . . . . . .bdt + :n?none :ur?upper-roman margin . . . . . . . . . . . . . .m :a?auto :0 – 4
margin-top . . . . . . . . . . .mt :a?auto margin-right . . . . . . . . . .mr :a?auto margin-bottom . . . . . . . .mb :a?auto margin-left . . . . . . . . . . .ml :a?auto padding . . . . . . . . . . . . .p :0 – 4 padding-top . . . . . . . . . .pt padding-right . . . . . . . . .pr padding-bottom . . . . . . .pb padding-left . . . . . . . . . .pl width . . . . . . . . . . . . . . .w :a?auto height . . . . . . . . . . . . . . .h :a?auto max-width . . . . . . . . . . .maw :n?none max-height . . . . . . . . . . .mah :n?none min-width . . . . . . . . . . . .miw min-height . . . . . . . . . . .mih
list-style-image . . . . . . . .lisi :n?none quotes . . . . . . . . . . . . . . .q :n?none :ru :en content . . . . . . . . . . . . . .ct :n?normal :oq?openquote :noq?no-openquote :cq?close-quote :ncq?no-close-quote :a?attr() :c?counter() :cs?counters() counter-increment . . . . . .coi counter-reset . . . . . . . . . .cor
Text
vertical-align . . . . . . . . . .va :sup?super :t?top :tt?text-top :m?middle :bl?baseline :b?bottom :tb?text-bottom :sub?sub text-align . . . . . . . . . . . .ta :l?left :c?center :r?right :j?justify text-align-last . . . . . . . . .tal :a?auto :l?left :c?center :r?right text-decoration . . . . . . . .td :n?none :o?overline :l?line-through :u?underline text-emphasis . . . . . . . . .te :n?none :ac?accent :dt?dot :c?circle :ds?disc :b?before :a?after text-height . . . . . . . . . . .th :a?auto :f?font-size :t?text-size :m?max-size text-indent . . . . . . . . . . .ti :-?-9999px text-justify . . . . . . . . . . .tj :a?auto :i?inter-word :ii?inter-ideograph :ic?interVisual properties cluster :d?distribute :k?kashida :t?tibetan opacity . . . . . . . . . . . . . .op :ie :ms text-outline . . . . . . . . . . .to + :n?none resize . . . . . . . . . . . . . . .rz :n?none :b?both :h?horizontal :v?vertical text-replace . . . . . . . . . . .tr :n?none text-transform . . . . . . . . .tt :n?none :u?uppercase cursor . . . . . . . . . . . . . . .cur :a?auto :d?default :c?crosshair :ha?hand :c?capitalize :l?lowercase text-wrap . . . . . . . . . . . .tw :n?normal :no?none :he?help :m?move :u?unrestricted :s?suppress :p?pointer :t?text text-shadow . . . . . . . . . .tsh + :n?none Print line-height . . . . . . . . . . .lh page-break-before . . . . . .pgbb :a?auto white-space . . . . . . . . . . .whs :n?normal :p?pre :aw?always :l?left :r?right :nw?nowrap :pw?prepage-break-inside . . . . . .pgbi :a?auto :av?avoid wrap :pl?pre-line page-break-after . . . . . . .pgba :a?auto white-space-collapse . . . .whsc :n?normal :aw?always :l?left :r?right :k?keep-all :l?loose orphans . . . . . . . . . . . . . .orp :bs?break-strict widows . . . . . . . . . . . . . .wid :ba?break-all word-break . . . . . . . . . . .wob :n?normal :k?keep-all :l?loose :bs?break-strict :ba?break-all word-spacing . . . . . . . . . .wos Cheatsheet by Alexander Shabunevich [aether .ru]
word-wrap . . . . . . . . . . .wow :n?normal :no?none :u?unrestricted :s?suppress letter-spacing . . . . . . . . .lts font . . . . . . . . . . . . . . . . .f + font-weight . . . . . . . . . . .fw :n?normal :b?bold :br?bolder :lr?lighter font-style . . . . . . . . . . . .fs :n?normal :i?italic :o?oblique font-variant . . . . . . . . . . .fv :n?normal :sc?small-caps font-size . . . . . . . . . . . . .fz font-size-adjust . . . . . . . .fza :n?none font-family . . . . . . . . . . .ff :s?serif :ss?sans-serif :c?cursive :m?monospace font-effect . . . . . . . . . . . .fef :n?none :eg?engrave :eb?emboss :o?outline font-emphasize . . . . . . . .fem font-emphasize-position .femp :b?before :a?after font-emphasize-style . . . .fems :n?none :ac?accent :dt?dot :c?circle :ds?disc font-smooth . . . . . . . . . .fsm :a?auto :n?never :aw?always font-stretch . . . . . . . . . . .fst :n?normal :uc?ultracondensed :ec?extracondensed :c?condensed :se?semi-expanded :e?expanded :ee?extraexpanded :ue?ultraexpanded
相关文章
精彩导读
热门资讯
关注我们
