CSS (hojas de estilo en cascada) es un componente crucial del diseño web moderno. Es el idioma que le da a su sitio web su apariencia. Pero para dominar realmente CSS, debe comprender las unidades que utiliza para medir cosas como la longitud, el ángulo, el tiempo y la resolución.
En esta guía, echamos un vistazo a cada tipo de unidad CSS, brindando explicaciones y ejemplos prácticos para ayudarlo a comprender su uso. Cubriremos todo, desde unidades de longitud absoluta y relativa como px, em, remy unidades de ventana gráfica como vw, vha unidades más especializadas como grados deg por rotación, segundos s y milisegundos ms para duraciones de animación, e incluso puntos por pulgada dpi para la resolución.
Al comprender estas unidades de CSS, obtendrá más control sobre sus diseños, lo que dará lugar a diseños más precisos, receptivos y visualmente atractivos.
1. Longitudes absolutas
px (píxeles)
Esta es la unidad más utilizada en el diseño web. Un píxel representa un solo punto en la pantalla de una computadora.
Ejemplo: font-size: 16px; establece el tamaño de fuente en 16 píxeles.
cm (Centímetros)
Esta unidad no se usa comúnmente en el diseño web porque los tamaños de pantalla y las resoluciones varían mucho entre dispositivos. Sin embargo, puede ser útil para medios impresos.
Ejemplo: width: 10cm; establece el ancho de un elemento en 10 centímetros.
mm (milímetros)
Al igual que los centímetros, los milímetros no se usan comúnmente en el diseño web, pero pueden ser útiles para los medios impresos.
Ejemplo: width: 100mm; establece el ancho de un elemento en 100 milímetros.
in (Pulgadas)
Esta unidad también es más útil para los medios impresos que para el diseño web.
Ejemplo: width: 4in; establece el ancho de un elemento en 4 pulgadas.
pt (Puntos)
Los puntos se utilizan tradicionalmente en los medios impresos (1 punto equivale a 1/72 de pulgada). En CSS, los puntos son útiles para crear estilos que se pueden imprimir con precisión.
Ejemplo: font-size: 12pt; establece el tamaño de fuente en 12 puntos.
pc (Picas)
Una pica equivale a 12 puntos. Es otra unidad que se usa más comúnmente en la impresión que en el diseño web.
Ejemplo: font-size: 1pc; establece el tamaño de fuente en 12 puntos.
Longitud absoluta en CSS:
Este es un ejemplo de cómo se pueden usar estas unidades en una regla CSS:
div {
width: 300px;
height: 20cm;
padding: 5mm;
border: 1in solid black;
font-size: 14pt;
margin: 1pc;
}
Explicación del código:
El div El elemento tendría un ancho de 300 píxeles, una altura de 20 centímetros, un relleno de 5 milímetros, un borde de 1 pulgada de ancho, un tamaño de fuente de 14 puntos y un margen de 1 pica.
Sin embargo, tenga en cuenta que estas unidades pueden mostrarse de manera diferente en diferentes pantallas y dispositivos debido a las distintas densidades de píxeles y tamaños de pantalla.
2. Longitudes relativas
em
Esta unidad es relativa al tamaño de fuente del elemento.
Ejemplo: Si un elemento tiene un tamaño de fuente de 16px, entonces 1em = 16px para ese elemento. si configuras margin: 2em;el margen será el doble del tamaño de fuente actual.
rem
Esta unidad es relativa al tamaño de fuente del elemento raíz (generalmente el <html> elemento). Si el elemento raíz tiene un tamaño de fuente de 20px, entonces 1rem = 20px para cualquier elemento de la página.
Ejemplo: font-size: 1.5rem; establecerá el tamaño de fuente en 1,5 veces el tamaño de fuente del elemento raíz.
ex
Esta unidad es relativa a la altura x de la fuente actual (aproximadamente la altura de las letras minúsculas). No es de uso común.
ch
Esta unidad es igual al ancho del “0” (cero) de la fuente actual.
Ejemplo: width: 20ch; hará un elemento de 20 «0» caracteres de ancho.
vw (Ancho de la ventana gráfica)
Esta unidad es igual al 1% del ancho de la ventana gráfica.
Ejemplo: width: 50vw; hará que un elemento sea un 50% más ancho que la ventana gráfica.
vh (Altura de la ventana gráfica)
Esta unidad es igual al 1% de la altura de la ventana gráfica.
Ejemplo: height: 70vh; hará que un elemento sea un 70% más alto que la ventana gráfica.
vmin
Esta unidad es igual al 1% de la dimensión más pequeña (ancho o alto) de la ventana gráfica.
Ejemplo: font-size: 4vmin; establecerá el tamaño de fuente al 4% de la dimensión más pequeña de la ventana gráfica.
vmax
Esta unidad es igual al 1% de la dimensión más grande (ancho o alto) de la ventana gráfica.
Ejemplo: font-size: 4vmax; establecerá el tamaño de fuente al 4% de la dimensión más grande de la ventana gráfica.
%
Esta unidad es relativa al elemento padre.
Ejemplo: si configuras width: 50%;el elemento ocupará la mitad del ancho de su elemento principal.
Longitud relativa en CSS:
Este es un ejemplo de cómo se pueden usar estas unidades en una regla CSS:
div {
font-size: 2em;
padding: 1.5rem;
width: 75vw;
height: 50vh;
margin: 5vmin;
line-height: 200%;
}
Explicación:
El div El elemento tendría un tamaño de fuente dos veces mayor que el de su padre, un relleno de 1,5 veces el tamaño de fuente raíz, un ancho del 75 % del ancho de la ventana gráfica, un alto del 50 % de la altura de la ventana gráfica y un margen del 5 % de la dimensión más pequeña de la ventana gráfica. La altura de la línea es el 200% del tamaño de fuente actual.
3. Unidades de tiempo
s (Segundos)
Esta unidad representa una duración de tiempo en segundos. Se usa comúnmente con propiedades de animación y transición.
Ejemplo: animation-duration: 2s; haría que una animación durara 2 segundos.
ms (Milisegundos)
Esta unidad representa una duración de tiempo en milisegundos, donde 1000 milisegundos equivalen a 1 segundo. También se usa con propiedades de animación y transición.
Ejemplo: transition-duration: 500ms; haría que una transición durara 500 milisegundos, o medio segundo.
Unidades de tiempo en CSS #1:
Este es un ejemplo de cómo se pueden usar estas unidades en una regla CSS:
div {
transition: background-color 0.5s ease-in-out;
animation: move 2s infinite;
}
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
Explicación del código:
El div El elemento tendría una transición que cambia el color de fondo durante 0,5 segundos y una animación que mueve el elemento desde su posición actual a 100 píxeles a la derecha durante 2 segundos. La animación se repite indefinidamente debido a la infinite palabra clave.
Unidades de tiempo en CSS #2:
Otro ejemplo podría ser un demora en transition o animation:
div {
transition: all 2s ease 1s; /* transition will start after 1 second delay */
animation: spin 4s linear 0.5s infinite; /* animation will start after 0.5 second delay */
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Explicación del código:
El div elemento tiene una transición que comienza después de un retraso de 1 segundo y una animación que comienza después de un retraso de 0,5 segundos. La animación hace que div girar indefinidamente.
4. Unidades de resolución
Las unidades de resolución en CSS se utilizan para especificar la densidad de píxeles de los dispositivos de salida. Se utilizan principalmente en consultas de medios para servir diferentes estilos a dispositivos con diferentes densidades de píxeles.
dpi (Puntos por pulgada)
Esta unidad representa el número de píxeles por pulgada.
Ejemplo: Una consulta de medios como @media (min-resolution: 300dpi) {...} aplicaría los estilos entre llaves solo a dispositivos con una densidad de píxeles de al menos 300 puntos por pulgada.
dpcm (puntos por centímetro)
Esta unidad representa el número de píxeles por centímetro. Es similar a dpi, pero usa centímetros en lugar de pulgadas.
Ejemplo: @media (min-resolution: 118dpcm) {...} aplicaría los estilos a dispositivos con una densidad de píxeles de al menos 118 puntos por centímetro.
dppx (Puntos por unidad de px)
Esta unidad representa el número de puntos por unidad de píxel CSS. Un píxel CSS puede corresponder a múltiples píxeles físicos en una pantalla de alta densidad.
Ejemplo: @media (min-resolution: 2dppx) {...} aplicaría los estilos a dispositivos con una densidad de píxeles de al menos 2 puntos por unidad de píxeles CSS.
Unidades de resolución en CSS:
Este es un ejemplo de cómo se pueden usar estas unidades en una regla CSS:
@media (min-resolution: 2dppx) {
body {
background-image: url("high-res-background.png");
}
}
@media (max-resolution: 1.5dppx) {
body {
background-image: url("low-res-background.png");
}
}
Explicación del código:
Los dispositivos con una densidad de píxeles de 2 puntos por unidad de píxeles CSS o superior utilizarían la imagen de fondo de alta resolución, mientras que los dispositivos con una densidad de píxeles de 1,5 puntos por unidad de píxeles CSS o inferior utilizarían la imagen de fondo de baja resolución.
5. Unidades de ángulo
Las unidades de ángulo en CSS se utilizan para especificar la rotación y la dirección. A menudo se utilizan con propiedades como transform y gradient.
deg (Grados)
Esta unidad representa un ángulo en grados.
Ejemplo:
transform: rotate(45deg); rotaría un elemento 45 grados en el sentido de las agujas del reloj.
grad (Gradianes)
Esta unidad representa un ángulo en gradianes, donde 100 gradianes equivalen a un ángulo recto.
Ejemplo:
transform: rotate(100grad); rotaría un elemento 90 grados en el sentido de las agujas del reloj.
rad (radianes)
Esta unidad representa un ángulo en radianes, donde 2à € radianes equivalen a un círculo completo.
Ejemplo:
transform: rotate(3.14159rad); rotaría un elemento 180 grados.
turn
Esta unidad representa un círculo completo.
Ejemplo:
transform: rotate(0.5turn); rotaría un elemento 180 grados.
Unidades angulares en CSS:
un ejemplo de cómo se pueden usar estas unidades en una regla CSS:
div {
transform: rotate(45deg);
}
div:hover {
transform: rotate(0.5turn);
}
Explicación del código:
El div el elemento se rotaría 45 grados por defecto. Cuando pasas el cursor sobre el divgiraría 180 grados (0,5 de una vuelta completa).
Prima: Doblar
fr (Unidad fraccionaria)
Esta unidad se usa con CSS Grid Layout y representa una fracción del espacio disponible en el contenedor de cuadrícula. Si tiene una cuadrícula con dos columnas definidas como 1fr 2frla primera columna ocupará un tercio del espacio disponible y la segunda columna ocupará dos tercios.
Ejemplo:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}
El espacio total disponible se divide en 3 partes iguales (1fr + 2fr = 3fr), la primera columna ocupa 1/3 del espacio y la segunda columna ocupa 2/3 del espacio.