Curso de CSS / colores y unidades: px, em, rem y porcentajes

Los colores de CSS se pueden escribir usando nombres, valores hexadecimales y funciones como rgb(). Las unidades de longitud usan diferentes puntos de referencia: px es una longitud absoluta de CSS, em depende del tamaño de fuente, rem usa el tamaño de fuente raíz, y los porcentajes dependen de la propiedad que se está estableciendo.

Compara nombres de colores, notación hexadecimal y RGB

teal, #008080 y rgb(0, 128, 128) expresan el mismo color. Los nombres de colores son fáciles de leer, pero existen nombres predefinidos que se pueden usar, y el hexadecimal y RGB son buenos para controlar numéricamente la cantidad de rojo, verde y azul. RGB significa Red, Green, Blue: rojo, verde y azul.

Alpha describe la opacidad del color: 20% permite que se vea gran parte del color subyacente, mientras que 100% es opaco. El resultado mostrado depende de ese color subyacente. Agregar alpha solo al fondo difiere de establecer opacity en todo el elemento, lo que también hace que su texto y descendientes sean translúcidos. Ver MDN: color.

Comprende las referencias de px, em y rem

px es un píxel CSS. Esto no siempre equivale a un píxel físico en la pantalla, y puede aparecer de manera diferente dependiendo de la escala de la pantalla y la densidad de píxeles del dispositivo. Usar 16px no significa que la función de aumento de pantalla no funcione.

En font-size, em usa el tamaño de fuente heredado. En una declaración como padding: 1em, utiliza el tamaño de fuente del propio elemento. rem usa el tamaño de fuente del elemento raíz. Los siguientes cálculos asumen que tanto el tamaño de fuente raíz como el del padre son de 16px. Para más detalles, véase CSS Fuentes, Tamaños de Fuente y Altura de Línea.

Si repites font-size: 1.25em en cada paso en el que el tamaño del contenedor principal aumenta, este aumenta de 16 → 20 → 25px. Repite 1.25rem sobre la misma estructura, ambos pasos son de 20px. em es conveniente para componentes pequeños que necesitan ser proporcionales a las letras circundantes, y rem es conveniente para compartir una referencia constante en toda la página. Elige qué criterio seguir en lugar de la respuesta absoluta correcta. Para la definición de la unidad, consulta el valor de CSS de MDN y la guía de unidades .

Encuentra la referencia para el ancho en porcentaje

width: 50% generalmente se calcula en función del ancho del contenido del bloque contenedor. No todos los porcentajes de propiedades se basan en el mismo objetivo. Por ejemplo, font-size: 125% se basa en el tamaño de fuente heredado del elemento padre, por lo que debe diferenciarse del % de ancho.

.wrapper { width: 100%; max-width: 640px; padding: 1rem; }

.inner { width: 50%; font-size: 1.25rem; padding: 1em; }

Este ejemplo usa border-box, por lo que el relleno encaja dentro del ancho declarado. Con una fuente raíz de 16px, espacio suficiente y sin bordes, la caja externa tiene un ancho de 640px. Su relleno de 16px en cada lado deja un ancho de contenido de 608px. El ancho del 50% de la caja interna es de 304px; su relleno de 20px en cada lado deja 264px para el contenido. Para más detalles, consulte Anchura, altura, límites min/max y box-sizing en CSS.

Si la pantalla es estrecha, el ancho del cuadro exterior también se reducirá. En este momento, el ancho interno no está fijo en 304px, sino que se recalcula en función del nuevo ancho del contenido del cuadro exterior. max-width en el ejemplo es una configuración secundaria que limita que el cuadro sea más ancho de 640px.

Ejecuta el ejemplo completo

Introduce el código a continuación en units.html guardado como UTF-8 y ábrelo en tu navegador. El código incluye comparación de colores, unidades anidadas y cálculos de ancho. El 100% raíz sigue el tamaño de fuente predeterminado del navegador, por lo que la condición de 16px en el ejercicio a continuación se verifica primero en las herramientas de desarrollo.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing colors and units</title>
  <style>
    html { font-size: 100%; }
    * { box-sizing: border-box; }
    body { margin: 16px; font-family: sans-serif; line-height: 1.7; }
    .wrapper { width: 100%; max-width: 640px; padding: 1rem; background: #e9f7ef; }
    .inner { width: 50%; padding: 1em; font-size: 1.25rem; background: white; }
    .color-name { color: teal; }
    .color-hex { color: #008080; }
    .color-rgb { color: rgb(0, 128, 128); }
    .alpha { padding: 1rem; background: rgb(0 128 128 / 20%); }
    .nest { font-size: 16px; }
    .em-step { font-size: 1.25em; }
    .rem-step { font-size: 1.25rem; }
  </style>
</head>
<body>
  <h1>Colors and units</h1>
  <h2>Three notations of the same color</h2>
  <p class="color-name">Character specified by teal</p>
  <p class="color-hex">Characters specified as #008080</p>
  <p class="color-rgb">Character specified by rgb(0, 128, 128)</p>
  <p class="alpha">Only this box's background color has 20% opacity.</p>
  <h2>Width and spacing</h2>
  <div class="wrapper"><div class="inner">Text and padding in the inner box</div></div>
  <h2>Nested em</h2>
  <div class="nest"><div class="em-step">First step<div class="em-step">Second step</div></div></div>
  <h2>Nested rem</h2>
  <div class="nest"><div class="rem-step">First step<div class="rem-step">Second step</div></div></div>
</body>
</html>

Cambia un valor cada vez

1. Comprueba en las herramientas de desarrollo el font-size calculado de html. Si es 16px, los niveles em miden 20px y 25px, y ambos niveles rem miden 20px. Si la raíz tiene otro tamaño, recalcula los rem multiplicándolo por 1.25. Los em de este ejemplo siguen midiendo 20px y 25px porque su contenedor .nest tiene un font-size explícito de 16px.
2. Cambiemos brevemente el html a font-size: 20px. Los textos .rem-step y .inner pasan a 25px, y .nest mantiene los 16px especificados, por lo que el nivel de em es 20px·25px. El padding de .inner es 25px. Después de la comparación, vuelve al 100% original.
3. Haz la ventana más ancha y verifica los tamaños de caja de .wrapper y .inner. En la condición original de 16px, es 640px·304px. Al estrechar la ventana, asegúrate de que ambos lados se encojan juntos.
4. Verifica los colores calculados de los tres párrafos de color. Todos deben tener el mismo valor RGB. Asegúrate de que cambiar el fondo de .alpha no difumine el texto en sí.

Si no es lo que esperabas, revisa los criterios de cálculo antes de simplemente cambiar las unidades. El tamaño de fuente del elemento padre y de la raíz, el padding, el box-sizing y las reglas CSS que sobrescriben pueden tener un efecto. Los cambios realizados en las herramientas de desarrollador generalmente desaparecen al actualizar, y los cambios guardados en archivos deben revertirse manualmente a sus valores originales.