MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Hay muchos valores de propiedades CSS, valores numéricos, colores o funciones que realizan una acción (como mostrar una imagen de fondo o rotar un elemento). Algunos dependen de las unidades en que se expresen los valores a representar — como la medida de una caja: ¿30 pixels, 30 cm. o 30 ems? En esta guía veremos valores usuales como longitud, color y funciones simples, y otros menos comunes como grados o valores numéricos sin unidades.

Prerequisitos: Conocimientos básicos de ordenadores, SW básico instalado, conocimiento básico de manejo de ficheros, y HTML básico (ver Introducción a HTML). Y una idea de cómo funciona CSS.
Objetivo: Aprender los tipos más usuales de valores y unidades asociadas a propiedades CSS.

Hay gran variedad de valores CSS, algunos de ellos muy usuales y otros que rara vez nos encontraremos. En este artículo no los vamos a estudiar todos de manera exhaustiva; solo aquellos que nos servirán en nuestro camino de aprendizaje de CSS por ser los más usuales. Vamos a ver los siguientes valores CSS:

  • Valores numéricos: Valores de longitud para expresar el ancho de elementos, de bordes, o tamaño de fuentes; también enteros sin unidades para expresar anchos de línea o veces que se repite una animación.

  • Porcentajes: Se usan para expresar tamaño o longitud — relativos por ejemplo al ancho y alto del contenedor previo o al tamaño de fuente predeterminado.
  • Colores: Para expresar colores de fondo, de texto, etc.
  • Coordenadas: Para expresar la posición relativa de un elemento desde, por ejemplo, el margen superior izquierdo de la pantalla.
  • Funciones: Para expresar imágenes de fondo o el degradado de la imagen de fondo.

Veremos ejemplos de unidades que encontraremos en el resto del tema CSS, y nos servirán para ¡cualquier CSS que nos encontremos! Nos acostumbraremos con rapidez.

Nota: Tenemos la lista completa de unidades CSS en Referencia CSS; las unidades son las entradas entre < >, como <color>.

Valores numéricos

Veremos los números utilizados en muchos sitios en unidades CSS. Esta sección trata acerca de los tipos más utilizados de valores numéricos.

Longitud y tamaño

Usamos unidades de longitud/tamaño (ver <length> como referencia) muy a menudo en diseños CSS, tipografía y otros. Veamos un ejemplo — primero el HTML:

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

Y el CSS:

p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

El resultado será:

En este código estamos haciendo lo siguiente:

  • Establecemos margin, padding (relleno) y border-width de los párrafos en 5, 10 y 2 pixeles respectivamente. Al haber un solo valor para el margen/relleno, los cuatro lados tendrán el mismo valor. El ancho del borde se establece mediante el valor de border.

  • Establecemos el ancho width de los tres párrafos a valores cada vez con más píxeles, así conseguimos que las cajas sean más grandes a medida que bajamos.
  • Establecemos font-size en los tres párrafos valores cada vez más grandes, así conseguimos que el texto se haga más grande a medida que bajamos. font-size hace referencia a la altura de cada carácter.

Nos referimos a píxeles (px) como unidades absolutas pues siempre tienen el mismo tamaño independientemente de cualquier otra medida. Otras unidades absolutas:

  • mm, cm, in: Milímetros, centímetros, o pulgadas.
  • pt, pc: Puntos (1/72 de una pulgada) or picas (12 puntos.)

Probablemente sólo usaremos los píxeles.

También disponemos de unidades relativas, que lo son respecto al tamaño de fuente font-size o a la ventana actual (viewport):

  • em: 1em es el tamaño de fuente del elemento actual (es el ancho de la letra M mayúscula). El tamaño de fuente por defecto que los navegadores usan antes de aplicar CSS es de 16 píxeles, lo que significa que este es el valor asignado por defecto a un elemento (1em). Ojo — los tamaños de fuente de los elementos se heredan de los padres, por lo que si a los padres se les aplica otros tamaños de fuente, la equivalencia en pixel de un em puede complicarse. No nos vamos a ocupar de esto ahora — las herencias y los tamaños de fuentes los veremos en posteriores artículos y módulos. ems son las unidades relativas más usadas en el desarrollo web.
  • ex, ch: Son respectivamente la altura de la x minúscula, y el ancho del número 0. Aunque no son tan soportadas por los navegadores como los ems.
  • rem: (em raiz) funciona igual que em, excepto que esta siempre igualará el tamaño del tamaño de fuente por defecto; los tamaños de fuente heredados no afectan, por lo que parece mejor solución que ems, rem no funciona en versiones antiguas de Internet Explorer (ver navegadores soportados en Depurando CSS.)
  • vw, vh: Estas son respectivamente 1/100 del ancho de la ventana, y 1/100 de la altura de la ventana. Tampoco son tan soportadas como los rems.

Usar unidades relativas es bastante práctico — se puede redimensionar los elementos HTML respecto al tamaño de la fuente o de la ventana, haciedo que la apariencia permanezca correcta si por ejemplo el tamaño del texto se duplica en el sitio web al ser utilizado por un usuario con deficiencia visual.

Valores sin unidades

En algunas ocasiones encontramos en CSS valores sin unidades — no siempre es un error, de hecho, es algo permitido bajo determinadas circunstancias. Imaginemos que queremos eliminar el margen o el relleno de un elemento, simplemente usaremos el 0, ya que 0 es 0 cualesquiera que fueran las unidades anteriores.

margin: 0;

Altura de línea sin unidades

Otro ejemplo es line-height, que establece la altura de cada línea de texto en un elemento. Podemos usar unidades para establecer la altura de la línea, pero normalmente es más fácil usar simplemente un valor que actúe como factor multiplicador. Supongamos el siguiente código HTML:

<p>Blue ocean silo royal baby space glocal evergreen relationship housekeeping
native advertising diversify ideation session. Soup-to-nuts herding cats resolutionary
virtuoso granularity catalyst wow factor loop back brainstorm. Core competency 
baked in push back silo irrational exuberance circle back roll-up.</p>

Y el siguiente CSS:

p {
  line-height: 1.5;
}

El resultado será:

El (tamaño de fuente) font-size son 16px; la altura de linea 1.5 veces esta, o sea 24px.

Número de animaciones

Las animaciones CSS nos permiten animar elementos HTML en la página. Veamos un sencillo ejemplo que haga rotar un párrafo cuando pasa el ratón. El HTML:

<p>Hello</p>

El CSS un poco más complicado:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

Hemos usado funciones fuera del alcance explícito de este artículo (<angle>s, <time>s, <timing-function>s, <string>s...), pero la que nos interesa es la línea animation-iteration-count: 5; — que controla el número de veces que ocurrirá la animación cuando se active (el ratón pasa por encima), y esto es un simple número sin unidades (un entero - integer en idioma informático).

El resultado que obtendremos de este código será:

Porcentajes

También podemos usar valores porcentuales para expresar la mayoría de cosas que requieran de valores numéricos, lo que nos permite crear, por ejemplo, cajas cuya anchura siempre cambie según el ancho del contenedor padre. En contraposición a las cajas cuya anchura este definida por un cierto valor (en px o en ems), que siempre serán de la misma longitud, incluso aunque cambie el ancho de los contenedores padres.

Mejor verlo con un ejemplo:

Primero dos cajas parecidas, expresadas en HTML:

<div>Fixed width layout with pixels</div>
<div>Liquid layout with percentages</div>

Y el CSS de estilos:

div {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

div:nth-child(1) {
  background-color: red;
  width: 650px;
}

div:nth-child(2) {
  background-color: blue;
  width: 75%;
}

Nos proporciona el siguiente resultado:

Primero les hemos dado a ambos divs (margen, altura, tamaño de fuente, marco y color) margin, height, font-size, border y color. Luego hemos cambiado los colores del primer y el segundo div background-color para diferenciarlos. Hemos establecido el ancho del primer div con width en 650px, y del segundo al 75%, por lo que el primer div siempre tendrá el mismo ancho, aunque se redimensione la ventana (desaparecerá de la pantalla si la ventana es más estrecha que la pantalla), mientras que el segundo irá cambiando a medida que cambie su padre (en este caso el elemento <body>, que por defecto es el 100% del ancho de la ventana.

Nota: Podemos observar este efecto redimensionando la ventana del navegador que tienes abierta; intenta hacer lo mismo en los ejemplos que encontrarás en Github.

También hemos establecido el font-size como un valor porcentual: 200%. Esto funciona diferente de como podríamos esperar, pero tiene sentido — nuevamente, esta nueva medida es relativa a la del predecesor, pues la hemos expresado con ems. En este caso, el tamaño de fuente del predecesor es de 16px — por defecto, entonces el valor calculado será el 200% de este, o sea, 32px. En realidad funciona de manera muy parecida a ems — pues el 200% es el equivalente a 2ems.

Estas dos maneras diferentes de formar las cajas se conocen como formato líquido (se redimensiona con la ventana del navegador), y formato de ancho fijo (permanece invariable). Ambos tienen distintos usos, por ejemplo:

  • Un formato líquido podríamos usarlo para asegurarnos que un documento estándar cabrá siempre en la pantalla y se verá bien independientemente del tamaño de la pantalla del móvil.
  • Un formato de ancho fijo lo usaremos para mantener el tamaño de un mapa online; la ventana del navegador podrá moverse por el mapa, viendo solo la parte del mapa escogida. La parte que veremos dependerá del tamaño de la ventana

Aprenderemos mucho más sobre formatos más adelante en el curso, en los módulos de Formato CSS y Diseño a medida (TBD).

Aprendizaje activo: Pruebas con medidas

En este aprendizaje activo no hay respuestas correctas. Solo queremos que hagas  probaturas en .inner y .outer divs para comprovar los resultados que ofrecen los distintos valores. Prueba un valor porcentual para el .inner div, y comprueba cómo se ajusta al cambiar la anchura del div .outer. Prueba también algunos valores fijos, como pixels y ems.

Si te equivocas puedes comenzar de nuevo pulsando el botón Reset.

Colores

Hay varias formas de referenciar colores en CSS, algunas más recientes que otras. Los mismos valores de color pueden utilizarse en todos los sitios en CSS, si nos referimos a color de texto, de fondo o cualquier otro.

El sistema de color estándar en los ordenadores actuales es el de 24 bits, que permite representar unos 16,7 millones de colores diferentes por canal (256 x 256 x 256 = 16.777.216).

Veamos los valores de los distintos tipos de sistemas de colores.

Nota: Para pasar los valores de unos sistemas de colores a otros, necesitaremos un conversor de colores. Estos son algunos de los conversores disponibles online: HSL to RGB / RGB to HSL / Hex Colour Converter.

Claves

El sistema de color más antiguo y sencillo en CSS son las claves de color. Son cadenas de texto que representan valores de color. Veamos el siguiente código como ejemplo:

<p>This paragraph has a red background</p>
p {
  background-color: red;
}

Nos ofrece el resultado:

Es fácil de entender, aunque solo nos permite referenciar unos cuantos colores primitivos. Existen alrededor de 165 claves diferentes para su uso en los distintos navegadores — ver la lista completa de claves de color.

Seguramente en nuestro trabajo utilicemos colores como el rojo, negro o blanco, pero además de estos necesitaremos conocer otro sistema de colores.

Valores hexadecimales

El siguiente sistema de color universal es el sistema hexadecimal, o códigos hex. Cada valor hex está compuesto por una almohadilla (#) seguida por seis números hexadecimales, cada uno de los cuales puede estar comprendido entre el 0 y la f (que representa el 15) — 0123456789abcdef (16 símbolos). Cada par de valores representa uno de los canales primarios — rojo, verde y azul — y nos permite referenciar cualquiera de los 256 valores disponibles para cada uno (16 x 16 = 256). 

Por ejemplo, el código:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: #ff0000;
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: #0000ff;
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: #e0b0ff;
}

Ofrece el siguiente resultado:

Estos valores son un poco más complejos y difíciles de entender, pero es mucho más versátil que las claves — podemos utilizar valores hex para representar cualquier color que queramos usar en nuestra paleta de colores.

RGB

El tercer sistema al que vamos a hacer referencia es RGB. Un valor RGB es una función — rgb() — a la que pasamos tres parámetros que representas los colores primarios rojo, verde y azul, parecido al sistema hex. La diferencia radica en que, en lugar de representar cada canal por un par de números, ahora lo hacemos simplemente por un número decimal entre el 0 y el 255.

Reescribamos el ejemplo anterior con el sistema RGB:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: rgb(224,176,255);
}

Nos ofrece el siguiente resultado:

El sistema RGB es casi tan soportado como el hexadecimal — probablemente no nos encontremos en nuestro trabajo ningún navegador que no los reconozca ambos. Los valores RGB son sin duda un poco más intuitivos y fáciles de comprender que los RGB.

Nota: Porqué 255 y no 256? Los ordenadores tienden a contar desde 0 y no desde 1. Para permitir 256 posibles valores, RGB toma valores entre 0-255, y no 0-256.

HSL

Un poco menos soportado que RGB está el modelo HSL (no en viejas versiones de IE), que fueron implementadas con mucho interés de los diseñadores — en vez de valores rojo, verde y azul, la función hsl() admite los valores tono(hue), saturación y brillo (lightness), para referenciar 16,7 millones de colores, pero de forma diferente:

  1. hue (tono): Es el color básico. Toma un valor entre 0-360, como los ángulos de una rueda de color.
  2. saturación: ¿Cómo está el color de saturado? Con valores entre 0 y 100%, en 0 no hay color (aparece como una sombra gris), y 100% es la saturación total del color.
  3. lightness (brillo): Representa la claridad del color. Toma valores entre 0 y 100%, donde 0 es la ausencia de luz (completamente negro) y 100% es el brillo total (completamente blanco).

Nota: Para visualizar el funcionamiento de este sistema de colores es útil visualizar un cilindro HSL. Ver el artículo HSL y HSV en la Wikipedia.

Reescribamos ahora nuestro ejemplo de nuevo con HSL:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: hsl(0,100%,50%);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: hsl(276,100%,85%);
}

Proporciona el siguiente resultado:

El modelo de colores HSL es intuitivo para los diseñadores acostumbrados a trabajar con estas caracteristicas de color. Es útil, por ejemplo, para representar una paleta de sombras en un sistema monocromático:

/* three different shades of red*/
background-color: hsl(0,100%,50%);
background-color: hsl(0,100%,60%);
background-color: hsl(0,100%,70%);

RGBA y HSLA

RGB y HSL tienen sus correspondientes modos — RGBA and HSLA — que nos permiten representar, no solo el color, sino también la transparencia a representar. Sus funciones correspondientes toman los mismos parámetros, más un cuarto valor entre 0–1 — que establece la transparencia, o el llamado canal alfa. 0 es totalmente transparente y 1 completamente opaco.

Veamos otro rápido ejemplo — primero el HTML:

<p>This paragraph has a transparent red background</p>
<p>This paragraph has a transparent blue background</p>

Ahora el CSS — aquí, bajamos el primer párrafo con algún posicionamiento, para mostrar el efecto de superposición de los párrafos (aprenderemos más sobre posicionamiento más adelante):

p {
  height: 50px;
  width: 350px;
}

/* Transparent red */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
  position: relative;
  top: 30px;
  left: 50px;
}

/* Transparent blue */
p:nth-child(2) {
  background-color: hsla(240,100%,50%,0.5);
}

Este es el resultado:

Los colores transparentes son muy útiles para proporcionar ricos efectos visuales — mezcla de fondos, elementos UI semi-transparentes, etc.

Opacidad

Existe otra forma de especificar la transparencia vía CSS — la propiedad opacity. En lugar de fijar la transparencia de un determinado color, aquí fijamos la transparencia de todos los elementos seleccionados y sus hijos. De nuevo, veamos un ejemplo para estudiar la diferencia:

<p>This paragraph is using RGBA for transparency</p>
<p>This paragraph is using opacity for transparency</p>

El CSS:

/* Red with RGBA */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}

/* Red with opacity */
p:nth-child(2) {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

Este es el resultado:

Veamos la diferencia — la primera caja, que usa RGBA, solo tiene semi-transparente el fondo, mientras que la segunda caja es transparente. Pensemos cuando usar cada una — por ejemplo, RGBA es útil cuando queremos crear un pie de foto recubierto donde la imagen se muestra a través de la caja, pero el texto también se puede leer. Por otra parte, la opacidad es útil cuando queremos crear un efecto animado en que todo el elemento UI va, desde completamente visible a invisible.

Aprendizaje activo: Pruebas con colores

Este ejercicio tampoco tiene respuestas correctas o incorrectas — simplemente que experimentes con los valores de los colores de fondo de las tres cajas de abajo ligeramente montadas unas en otras. Prueba con claves, hex, RGB/HSL/RGBA/HSLA, y la con la propiedad de opacidad. Cómo te vas a divertir.

Si te equivocas puedes comenzar de nuevo pulsando el botón Reset.

Funciones

En programación, una function es una sección de código reutilizable que puede ser ejecutada muchas veces para realizar una tarea repetitiva con el mínimo esfuerzo para el desarrollador y para el ordenador. Las funciones se asocian normalmente con lenguajes como JavaScript, Python, o C++, pero también existen en CSS, como valores de propiedad. Ya hemos visto las funciones rgb(), hsl(), etc. en la sección Colors :

background-color: rgba(255,0,0,0.5);
background-color: hsla(240,100%,50%,0.5);

Estas funciones calculan qué color usar.

Pero también encontraremos funciones en otros sitios — cada vez que veamos paréntesis detrás de un nombre, con valores o no, separados por comas, estaremos delante de una función. Por ejemplo:

/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90%-15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');

Hay muchas funciones en CSS, las veremos a lo largo del curso.

Resumen

Espero que hayas disfrutado aprendiendo unidades y valores CSS — no te preocupes si no le ves todo el significado ahora mismo; irás cogiendo práctica con esta parte fundamental de la sintaxis CSS según vayas avanzando.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: javierpolit
 Última actualización por: javierpolit,