⇪

Unidades CSS

facebook-svg gplus-svg twitter-svg

Unidades relativas

Las unidades relativas especifican el valor de la longitud relativo al valor de otra longitud. Las hojas de estilo que utilizan unidades relativas pueden ser redimensionadas fácilmente.

Unidad Ejemplo Descripción
% p {
font-size:16px;
line-height:150%;
}		 El valor de una propiedad expresado en porcentajes.
Relativo a otro valor, normalmente un valor heredado del elemento padre.
Utilizados para unidades de longitud, ángulos, tiempo, números, frecuencia.
em span {
display:inline-block;
width:5em;
}		 Representa el tamaño de una letra "M" de la fuente del elemento.
ex span {
display:inline-block;
width:5ex;
}		 Representa la altura de una letra "x" de la fuente del elemento.
ch span {
display:inline-block;
width:5ch;
}		 Representa el tamaño de "0" (ZERO, U+0030) de la fuente del elemento.
rem h1 {
font-size:2rem;
}		 Representa el tamaño de fuente del elemento raiz. ( En el HTML el tamaño de fuente del elemento <html> )
vw div {
width:50vw;
}		 Represemta el 1% de la anchura del viewport
vh div {
height:50vh;
}		 Represemta el 1% de la altura del viewport
vmin div {
width:50vmin;
} 		Representa el menor entre vw y vh
vmax div {
width:50vmax;
} 		Representa el mayor entre vw y vh

Unidades absolutas

Las unidades absolutas son fijas en relación con otras. Estas medidas son dadas en unidades físicas conocidas como centímetros, milímetros pulgadas, o pixeles , y pueden ser muy útiles en diseños de página con dimensiones fijas.

Unidad Ejemplo Descripción
cm h2{line-height:3cm;} 1 cm = 96 px/2.54
1 cm = 37.79528 px
mm h3{word-spacing:4mm;} 1mm = 1/10 cm
1 mm = 3.779528 px
Q h3{letter-spacing:1Q;} un cuarto de milímetro
1 Q = 1/40 cm
1 Q = 0.94 px
in h1{margin: 0.5in;} 1 pulgada = 2.54cm
1 pulgada = 96px o
1 pulgada = 72pt
pc h4{font-size:1pc;} El cícero o pica es una unidad de medida tipográfica de aproximativamente 1/6 pulgadas
1 pc = 16 px
pt h4{font-size:12pt;} 1pt = 1/72 in
1 pt = 1.333333 px
px p { font-size: 12px } Píxeles

Unidades para ángulos

Utilizadas para crear gradientes o para trasformaciones CSS (rotate).

Unidad Ejemplo Descripción
deg .giro{transform: rotate(-90deg);} Grado sexagesimal. Hay 360 grados en un circulo completo.
grad .giro{transform: rotate(-100grad);} Grado centesimal o gon, también llamado gradián. Hay 400 gradianes en un circulo completo.
rad .giro{transform: rotate(-1.57rad);} Radián. Hay 2*Math.PI radianes en un circulo completo.
turn .giro{transform: rotate(-.25turn);} Un giro completo de 360deg

Unidades de tiempo

En CSS el tiempo se expresa en segundos ( s ) o milisegundos ( ms ), y es utilizado para crear animaciones y transiciones.

Unidad Ejemplo Descripción
s div {
transition-duration: .5s;
}		 Segundo
ms div {
transition-duration: 500ms;
}		 Milisegundo. Hay 1000 milisegundos en un segundo