Atajos CSS con Emmet

Posición

pos:a se convierte en:

position: absolute;

pos:r se convierte en:

position: relative;

t se convierte en:

top:

b se convierte en:

bottom:

l se convierte en:

left:

r se convierte en:

right:

Display

d:n se convierte en:

display: none;

d:b se convierte en:

display: block;

d:f se convierte en:

display: flex;

d:t se convierte en:

display: table;

Flex

ai se convierte en:

align-items:

ai:c se convierte en:

align-items: center;

ai:b se convierte en:

align-items: baseline;

ai:fe se convierte en:

align-items: flex-end;

fx se convierte en:

flex:

fw se convierte en:

flex-wrap:

fw:n se convierte en:

flex-wrap: nowrap;

fw:w se convierte en:

flex-wrap: wrap;

jc se convierte en:

justify-content:

jc:c se convierte en:

justify-content: center;

jc:fe se convierte en:

justify-content: flex-end;

jc:sa se convierte en:

justify-content: space-around;

jc:sb se convierte en:

justify-content: space-between;

Visibilidad

v se convierte en:

visibility: visible;

v:h se convierte en:

visibility: hidden;

v:v se convierte en:

visibility: visible;

Margen

m se convierte en:

margin:

mt se convierte en:

margin-top:

mb se convierte en:

margin-bottom:

ml se convierte en:

margin-left:

mr se convierte en:

margin-right:

m:a se convierte en:

margin: auto;

Relleno

p se convierte en:

padding:

pt se convierte en:

padding-top:

pb se convierte en:

padding-bottom:

pl se convierte en:

padding-left:

pr se convierte en:

padding-right:

Tamaño

w se convierte en:

width:

h se convierte en:

height:

maw se convierte en:

max-width:

mah se convierte en:

max-height:

miw se convierte en:

min-width:

mih se convierte en:

min-height:

Peso de fuente

fw se convierte en:

font-weight:

fw:n se convierte en:

font-weight: normal;

fw:b se convierte en:

font-weight: bold;

Estilo de fuente

fs se convierte en:

font-style:

fs:n se convierte en:

font-style: normal;

fs:i se convierte en:

font-style: italic;

Familia de fuente

ff se convierte en:

font-family:

ff:a se convierte en:

font-family: Arial;

ff:t se convierte en:

font-family: Times New Roman;

ff:v se convierte en:

font-family: Verdana;

ff:m se convierte en:

font-family: Monospace;

Alineación de texto

ta se convierte en:

text-align:

ta:l se convierte en:

text-align: left;

ta:c se convierte en:

text-align: center;

ta:r se convierte en:

text-align: right;

ta:j se convierte en:

text-align: justify;

Decoración de texto

td:n se convierte en:

text-decoration: none;

td:u se convierte en:

text-decoration: underline;

Sombra de texto

tsh se convierte en:

text-shadow:

tsh:r se convierte en:

text-shadow: 1px 1px 2px black;

tsh:ra se convierte en:

text-shadow: 0 0 5px rgba(0,0,0,0.5);

tsh:n se convierte en:

text-shadow: none;

Fondo

bg se convierte en:

background:

Color de fondo

bgc se convierte en:

background-color:

bgc:t se convierte en:

background-color: transparent;

Imagen de fondo

bgi se convierte en:

background-image:

bgi:n se convierte en:

background-image: none;

Color

c se convierte en:

color:

c:r se convierte en:

color: red;

c:ra se convierte en:

color: rgba(0,0,0,0.5);

Opacidad

op se convierte en:

opacity:

Borde

bd se convierte en:

border:

bd:n se convierte en:

border: none;

Transformaciones

trf se convierte en:

transform:

trf:r se convierte en:

transform: rotate(45deg);

trf:sc se convierte en:

transform: scale(1.5);

trf:t se convierte en:

transform: translate(10px, 20px);

trf:o se convierte en:

transform: skewX(30deg);

Otros

Important

! se convierte en:

!important;

FontFace

@f se convierte en:

@font-face { }

@media

@m se convierte en:

@media { }

Comentarios

Artículos relacionados

herramientas

Conceptos básicos de Emmet

6 mins

12 jul 2024

herramientas

Otros atajos de Emmet

3 mins

12 jul 2024