Cheatography
https://cheatography.com
Syntax> | Child - nav>ul>li | + | Sibling - div+p+bq | ^ | Climb up - div+div>p>span+em^bq | ( ) | Grouping - div>(header>ul>li*2>a)+footer>p | * | Multiplication - ul>li*5 | $ | Numbering - ul>li.item$*5 | . | Class - h1.title or p.class1.class2.class3 | # | ID - div.#header or form#search.wide | [ ] | Custom attributes - td[rowspan=2 colspan=3 title] | { } | Text - p>{Click }+a{here}+{ to continue} |
HTML! | Create HTML5 template | a | <a href=""></a>
| a:link | <a href="http://"></a>
| a:mail | <a href="mailto:"></a>
| link | <link rel="stylesheet" href="" />
| meta | <meta />
| meta:utf | <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
| style | <style></style>
| script | <script></script>
| script:src | <script src=""></script>
| img | <img src="" alt="" />
| form | <form action=""></form>
| form:get | <form action="" method="get"></form>
| form:post | <form action="" method="post"></form>
| label | <label for=""></label>
| inp | <input type="text" name="" id="" />
| input:email | <input type="email" name="" id="" />
| input:p | <input type="password" name="" id="" />
| input:c | <input type="checkbox" name="" id="" />
| input:r | <input type="radio" name="" id="" />
| input:f | <input type="file" name="" id="" />
| select | <select name="" id=""></select>
| option | <option value=""></option>
| textarea | <textarea name="" id="" cols="30" rows="10"></textarea>
| btn:s | <button type="submit"></button>
| btn | <button></button>
| sect | <section></section>
| art | <article></article>
| hdr | <header></header>
| ftr | <footer></footer>
| mn | <main></main>
| 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>
|
| | CSSpos:(a|r|f) | position:absolute|relative|fixed;
| t | top
| r | right
| b | bottom
| l | left
| z | z-index
| fl:(n|r|l) | float:none|right|left;
| cl:(n|b|l|r) | clear: none|both|left|right;
| d:(n|b|f|i|ib) | display: none|block|flex|inline|inline-block;
| v:(v|h) | visibility: visible|hidden;
| ov:(v|h|s) | overflow: visible|hidden|scroll;
| ovx:() | overflow-x: visible|hidden|scroll;
| ovy:() | overflow-y: visible|hidden|scroll;
| m | margin
| m(r|t|b|l) | margin-right|top|bottom|left;
| p | padding
| p(t|r|b|l) | padding-top|right|bottom|left;
| bxz:bb | box-sizing: border-box;
| w | width
| h | height
| maw | max-width
| mah | max-height
| miw | min-width
| mih | min-height
| fw | font-weight
| fz | font-size
| ff | font-family
| ta:(l|c|r|j) | text-align: left|center|right|justify;
| td:n | text-decoration: none;
| lh | line-height
| bg:n | background: none
| bg+ | background: #fff url() 0 0 no-repeat;
| c:(r|ra) | color: rgb()|rgba();
| op | opacity
| cnt | content:'';
| ol:n | outline: none;
| bd+ | border: 1px solid #000;
| bd:n | border: none;
| bd(t|r|l|b)+ | border-top|right|left|bottom: 1px solid #000;
| bdrs | border-radius
| lis:n | list-style: none;
| ! | !important
| @f | font-face
| @kf | keyframes
| @m | media
| anim- | animation
| ai:(b|c|fe|fs|s|sa|sb) | align-items: baseline|center|flex-end|flex-start|stretch|space-around|space-between;
| fxd:(c|r) | flex-direction: column|row;
| jc:(c|fe|fs|sa|sb) | justify-content: baseline|flex-end|flex-start|space-around|space-between;
| trf:(r|sc|skx|sky|t) | transform: rotate|scale|skewX|skewY|translate;
| trs | transition
| trfo | transform-origin
|
|
Help Us Go Positive!
We offset our carbon usage with Ecologi. Click the link below to help us!
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by deftcode