Emmet (3): CSS Shortcut Syntax

Position related syntax

pos
Syntax
position: relative;
Result

pos:s
Syntax
position: static;
Result

pos:r
Syntax
position: relative;
Result

pos:a
Syntax
position: absolute;
Result

pos:f
Syntax
position: fixed;
Result

t
Syntax
top: ;
Result

r
Syntax
right: ;
Result

b
Syntax
bottom: ;
Result

l
Syntax
left: ;
Result

z
Syntax
z-index: ;
Result

Float Related syntax

fl
Syntax
float: left;
Result

fr
Syntax
float: right;
Result

cl, cl:b
Syntax
clear: both;
Result

cl:n
Syntax
clear: none;
Result

Display Related syntax

d, d:b
Syntax
display: block;
Result

d:n
Syntax
display: none;
Result

d:i
Syntax
display: inline;
Result

d:ib
Syntax
display: inline-block;
Result

d:tb
Syntax
display: table;
Result

d:tbc
Syntax
display: table-cell;
Result

ac
Syntax
align-content: ;
Result

ai
Syntax
-ms-align-items: ;
align-items: ;
Result

fx
Syntax
-webkit-flex: ;
-moz-flex: ;
-ms-flex: ;
-o-flex: ;
flex: ;
Result

jc
Syntax
justify-content: ;
Result

v, v:h
Syntax
visibility: hidden;
Result

v:v
Syntax
visibility: visible;
Result

cp:r
Syntax
clip: rect(top right bottom left);
Result

Overflow related syntax

ov, ov:h
Syntax
overflow: hidden;
Result

ov:s
Syntax
overflow: scroll;
Result

ov:a
Syntax
overflow: auto;
Result

ovx, ovx:h
Syntax
overflow-x: hidden;
Result

ovx:v
Syntax
overflow-x: visible;
Result

ovx:s
Syntax
overflow-x: scroll;
Result

ovy, ovy:h
Syntax
overflow-y: hidden;
Result

ovy:v
Syntax
overflow-y: visible;
Result

ovy:s
Syntax
overflow-y: scroll;
Result

Cursor related syntax

cur
Syntax
cursor: pointer;
Result

cur:d
Syntax
cursor: default;
Result

Margin related syntax

m
Syntax
margin: ;
Result

m:a
Syntax
margin: auto;
Result

mt
Syntax
margin-top: ;
Result

mr
Syntax
margin-right: ;
Result

mb
Syntax
margin-bottom: ;
Result

ml
Syntax
margin-left: ;
Result

Padding related syntax

p
Syntax
padding: ;
Result

pt
Syntax
padding-top: ;
Result

pr
Syntax
padding-right: ;
Result

pb
Syntax
padding-bottom: ;
Result

pl
Syntax
padding-left: ;
Result

Box-Related syntax

bxz, bxz:bb
Syntax
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Result

bxz:cb
Syntax
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
Result

bxsh
Syntax
-webkit-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
Result

bxsh:ra
Syntax
-webkit-box-shadow: inset h v blur spread rgba(0, 0, 0, .5);
box-shadow: inset h v blur spread rgba(0, 0, 0, .5);
Result

Size related syntax

w
Syntax
width: ;
Result

w:a
Syntax
width: auto;
Result

maw
Syntax
max-width: ;
Result

mah
Syntax
max-height: ;
Result

miw
Syntax
min-width: ;
Result

mih
Syntax
min-height: ;
Result

Font Related syntax

f
Syntax
font: ;
Result

f+
Syntax
font: 1em Arial,sans-serif;
Result

fw
Syntax
font-weight: ;
Result

fw:n
Syntax
font-weight: normal;
Result

fw:b
Syntax
font-weight: bold;
Result

fw:br
Syntax
font-weight: bolder;
Result

fw:lr
Syntax
font-weight: lighter;
Result

fs
Syntax
font-style: ;
Result

fs:i
Syntax
font-style: italic;
Result

fs:n
Syntax
font-style: normal;
Result

fs:o
Syntax
font-style: oblique;
Result

fz
Syntax
font-size: ;
Result

fza
Syntax
font-size-adjust: ;
Result

fza:n
Syntax
font-size-adjust: none;
Result

ff
Syntax
font-family: ;
Result

ff:s
Syntax
font-family: serif;
Result

ff:ss
Syntax
font-family: sans-serif;
Result

ff:a
Syntax
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
Result

ff:t
Syntax
font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
Result

ff:v
Syntax
font-family: Verdana, Geneva, sans-serif;
Result

Text Related syntax

va, va:t
Syntax
vertical-align: top;
Result

va:sup
Syntax
vertical-align: super;
Result

va:m
Syntax
vertical-align: middle;
Result

va:b
Syntax
vertical-align: bottom;
Result

va:sub
Syntax
vertical-align: sub;
Result

ta, ta:l
Syntax
text-align: left;
Result

ta:c
Syntax
text-align: center;
Result

ta:r
Syntax
text-align: right;
Result

ta:j
Syntax
text-align: justify;
Result

td, td:n
Syntax
text-decoration: none;
Result

td:u
Syntax
text-decoration: underline;
Result

td:o
Syntax
text-decoration: overline;
Result

td:l
Syntax
text-decoration: line-through;
Result

ti
Syntax
text-indent: ;
Result

ti:-
Syntax
text-indent: -9999px;
Result

tj
Syntax
-ms-text-justify: ;
text-justify: ;
Result

tt, tt:u
Syntax
text-transform: uppercase;
Result

tt:c
Syntax
text-transform: capitalize;
Result

tt:l
Syntax
text-transform: lowercase;
Result

tsh
Syntax
text-shadow: hoff voff blur #000;
Result

tsh:r
Syntax
text-shadow: h v blur rgb(0, 0, 0);
Result

tsh:ra
Syntax
text-shadow: h v blur rgba(0, 0, 0, .5);
Result

tov, tov:e
Syntax
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
Result

tov:c
Syntax
-ms-text-overflow: clip;
text-overflow: clip;
Result

lh
Syntax
line-height: ;
Result

lts
Syntax
letter-spacing: ;
Result

lts-n
Syntax
letter-spacing: normal;
Result

whs
Syntax
white-space: ;
Result

whs:n
Syntax
white-space: normal;
Result

whs:nw
Syntax
white-space: nowrap;
Result

wob
Syntax
-ms-word-break: ;
word-break: ;
Result

wob:ba
Syntax
-ms-word-break: break-all;
word-break: break-all;
Result

wos
Syntax
word-spacing: ;
Result

wow
Syntax
word-wrap: ;
Result

wow:n
Syntax
word-wrap: none;
Result

wow:b
Syntax
word-wrap: break-word;
Result

Background syntax

bg
Syntax
background: #000;
Result

bg+
Syntax
background: #fff url() 0 0 no-repeat;
Result

bg:n
Syntax
background: none;
Result

bgc
Syntax
background-color: #fff;
Result

bgc:t
Syntax
background-color: transparent;
Result

bgi
Syntax
background-image: url();
Result

bgr
Syntax
background-repeat: ;
Result

bgr:n
Syntax
background-repeat: no-repeat;
Result

bgr:x
Syntax
background-repeat: repeat-x;
Result

bgr:y
Syntax
background-repeat: repeat-y;
Result

bgp
Syntax
background-position: 0 0;
Result

bgcp
Syntax
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
Result

bgo
Syntax
-webkit-background-origin: ;
background-origin: ;
Result

bgsz
Syntax
-webkit-background-size: ;
background-size: ;
Result

bgsz:a
Syntax
-webkit-background-size: auto;
background-size: auto;
Result

bgsz:ct
Syntax
-webkit-background-size: contain;
background-size: contain;
Result

bgsz:cv
Syntax
-webkit-background-size: cover;
background-size: cover;
Result

Color related syntax

c
Syntax
color: #000;
Result

c:r
Syntax
color: rgb(0, 0, 0);
Result

c:ra
Syntax
color: rgba(0, 0, 0, .5);
Result

op
Syntax
opacity: ;
Result

Table Related syntax

tbl
Syntax
table-layout: ;
Result

tbl:a
Syntax
table-layout: auto;
Result

tbl:f
Syntax
table-layout: fixed;
Result

Border Related syntax

bd
Syntax
border: ;
Result

bd+
Syntax
border: 1px solid #000;
Result

bd:n
Syntax
border: none;
Result

bdcl
Syntax
border-collapse: ;
Result

bdcl:c
Syntax
border-collapse: collapse;
Result

bdcl:s
Syntax
border-collapse: separate;
Result

bdc
Syntax
border-color: transparent;
Result

bdw
Syntax
border-width: ;
Result

bdt
Syntax
border-top: ;
Result

bdt+
Syntax
border-top: 1px solid #000;
Result

bdt:n
Syntax
border-top: none;
Result

bdr
Syntax
border-right: ;
Result

bdr+
Syntax
border-right: 1px solid #000;
Result

bdb
Syntax
border-bottom: ;
Result

bdb+
Syntax
border-bottom: 1px solid #000;
Result

bdl
Syntax
border-left: ;
Result

bdl+
Syntax
border-left: 1px solid #000;
Result

List Related syntax

lis
Syntax
list-style: ;
Result

lis:n
Syntax
list-style: none;
Result

list
Syntax
list-style-type: ;
Result

list:n
Syntax
list-style-type: none;
Result

list:d
Syntax
list-style-type: disc;
Result

list:c
Syntax
list-style-type: circle;
Result

list:s
Syntax
list-style-type: square;
Result

list:dc
Syntax
list-style-type: decimal;
Result

list:lr
Syntax
list-style-type: lower-roman;
Result

list:ur
Syntax
list-style-type: upper-roman;
Result

Animation related syntax

anim
Syntax
-webkit-animation: ;
-o-animation: ;
animation: ;
Result

anim-
Syntax
-webkit-animation: name duration timing-function delay iteration-count direction fill-mode;
-o-animation: name duration timing-function delay iteration-count direction fill-mode;
animation: name duration timing-function delay iteration-count direction fill-mode;
Result

animdel
Syntax
-webkit-animation-delay: time;
-o-animation-delay: time;
animation-delay: time;
Result

animdir
Syntax
-webkit-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
Result

animdir:a
Syntax
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
Result

animdir:ar
Syntax
-webkit-animation-direction: alternate-reverse;
-o-animation-direction: alternate-reverse;
animation-direction: alternate-reverse;
Result

animdir:n
Syntax
-webkit-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
Result

animdir:r
Syntax
-webkit-animation-direction: reverse;
-o-animation-direction: reverse;
animation-direction: reverse;
Result

animdur
Syntax
-webkit-animation-duration: 0s;
-o-animation-duration: 0s;
animation-duration: 0s;
Result

Column related syntax

colm
Syntax
-webkit-columns: ;
-moz-columns: ;
-o-columns: ;
columns: ;
Result

colmc
Syntax
-webkit-column-count: ;
-moz-column-count: ;
-o-column-count: ;
column-count: ;
Result

colmg
Syntax
-webkit-column-gap: ;
-moz-column-gap: ;
-o-column-gap: ;
column-gap: ;
Result

colmr
Syntax
-webkit-column-rule: ;
-moz-column-rule: ;
-o-column-rule: ;
column-rule: ;
Result

colmw
Syntax
-webkit-column-width: ;
-moz-column-width: ;
-o-column-width: ;
column-width: ;
Result

Transform Related syntax

trf
Syntax
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
Result

trf:r
Syntax
-webkit-transform: rotate(angle);
-ms-transform: rotate(angle);
-o-transform: rotate(angle);
transform: rotate(angle);
Result

trf:rx
Syntax
-webkit-transform: rotateX(angle);
-ms-transform: rotateX(angle);
-o-transform: rotateX(angle);
transform: rotateX(angle);
Result

trf:ry
Syntax
-webkit-transform: rotateY(angle);
-ms-transform: rotateY(angle);
-o-transform: rotateY(angle);
transform: rotateY(angle);
Result

trf:rz
Syntax
-webkit-transform: rotateZ(angle);
-ms-transform: rotateZ(angle);
-o-transform: rotateZ(angle);
transform: rotateZ(angle);
Result

trf:sc
Syntax
-webkit-transform: scale(x, y);
-ms-transform: scale(x, y);
-o-transform: scale(x, y);
transform: scale(x, y);
Result

trf:sc3
Syntax
-webkit-transform: scale3d(x, y, z);
-ms-transform: scale3d(x, y, z);
-o-transform: scale3d(x, y, z);
transform: scale3d(x, y, z);
Result

trf:scx
Syntax
-webkit-transform: scaleX(x);
-ms-transform: scaleX(x);
-o-transform: scaleX(x);
transform: scaleX(x);
Result

trf:scy
Syntax
-webkit-transform: scaleY(y);
-ms-transform: scaleY(y);
-o-transform: scaleY(y);
transform: scaleY(y);
Result

trf:scz
Syntax
-webkit-transform: scaleZ(z);
-ms-transform: scaleZ(z);
-o-transform: scaleZ(z);
transform: scaleZ(z);
Result

trf:t
Syntax
-webkit-transform: translate(x, y);
-ms-transform: translate(x, y);
-o-transform: translate(x, y);
transform: translate(x, y);
Result

trf:t3
Syntax
-webkit-transform: translate3d(tx, ty, tz);
-ms-transform: translate3d(tx, ty, tz);
-o-transform: translate3d(tx, ty, tz);
transform: translate3d(tx, ty, tz);
Result

trf:tx
Syntax
-webkit-transform: translateX(x);
-ms-transform: translateX(x);
-o-transform: translateX(x);
transform: translateX(x);
Result

trf:ty
Syntax
-webkit-transform: translateY(y);
-ms-transform: translateY(y);
-o-transform: translateY(y);
transform: translateY(y);
Result

trf:tz
Syntax
-webkit-transform: translateZ(z);
-ms-transform: translateZ(z);
-o-transform: translateZ(z);
transform: translateZ(z);
Result

trfo
Syntax
-webkit-transform-origin: ;
-moz-transform-origin: ;
-ms-transform-origin: ;
-o-transform-origin: ;
transform-origin: ;
Result

trs
Syntax
-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;
Result

trsde
Syntax
-webkit-transition-delay: time;
-o-transition-delay: time;
transition-delay: time;
Result

trsdu
Syntax
-webkit-transition-duration: time;
-o-transition-duration: time;
transition-duration: time;
Result

us
Syntax
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
Result

Other CSS related syntax

!
Syntax
!important
Result

@f
Syntax
@font-face {
	font-family:;
	src:url();
}
Result

@i
Syntax
@import url();
Result

@kf
Syntax
@-webkit-keyframes identifier {
	from {  }
	to {  }
}
@-o-keyframes identifier {
	from {  }
	to {  }
}
@-moz-keyframes identifier {
	from {  }
	to {  }
}
@keyframes identifier {
	from {  }
	to {  }
}
Result

@m
Syntax
@media screen {

}
Result

Share This Post

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Post

  • Mastering the daily conversation in 4 languagesBasic sentences expressing my mood – I’m
  • 8 things you need to think about for work-life balance
    View on Youtube Image: juliezhuo.com who works as a design VP for Facebook, presented 8 ways for work and life balance in her article “The
  • 10 special abilities of Smartphone
    View on Youtube No matter where you go or what you do, your smartphone is always with us. We use the internet with a smartphone,
  • Java: abstract class, abstract method
    An abstract class in Java is a class that declares an abstract function to be implemented in a subclass as an abstract method. An abstract
  • Java: inheritance and constructors
    When an object is created from an inherited class, the constructor of the superclass is performed before the constructor of the subclass. That is, when
  • Java reserved words: super, final
    super is a Java reserved word that is used to access member variables or methods of a superclass that is obscured by a subclass. Access
  • Java: finalize method and garbage collection
    The Java Virtual Machine(JVM) automatically performs garbage collection for objects that are no longer needed for efficient system operation. At this point, the JVM calls
  • Java: Method overloading
    Method overloading is the same concept as constructor overloading. That is, you can use methods of the same name in the same class, but methods
  • Java final variable
    You can specify an end variable using the reserved word final. The final variable represents a constant value that can not be changed. Typically, final
  • Java class variables
    Class variables are declared with static and have the concept of global variables. Class variables are used for the following purposes. Object references and object