|
>
|
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} |
|
!
|
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> |
|
ul+
|
<ul> |
|
dl+
|
<ol> |
|
table+
|
<table> |
|
tr+
|
<tr> |
|
pos:(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 |
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
