En el ejemplo anterior, usamos la regla CSS
p {
color: red;
}
Intuitivamente sabes que esto aplica el color rojo a las etiquetas p.
Antes de adentrarnos en temas más complejos de CSS, hablemos un poco más sobre los colores.
Trabajarás con colores todo el tiempo.
Las dos propiedades principales que usarás son color y background-color.
Ambas aceptan un valor de color, que puede estar en diferentes formas.
Colores nombrados
Primero, tenemos palabras clave CSS que definen colores.
¡Tenemos muchos! Como blanco, negro, rojo, azul, amarillo, pero también otros más sofisticados como darkviolet, floralwhite, forestgreen.
En mi blog, tengo este artículo https://flaviocopes.com/rgb-color-codes/ con la lista completa de colores y conversiones entre nombres, RGB y notaciones hexadecimales.
RGB y RGBa (rgb() / rgba())
Los colores nombrados no son la única opción.
Puedes usar rgb() para calcular un color a partir de su código de color RGB, que establece el color basado en sus partes de rojo-verde-azul que van de 0 a 255:
p {
color: rgb(255, 255, 255); /* blanco */
background-color: rgb(0, 0, 0); /* negro */
}
rgba() te permite agregar el canal alfa para introducir una parte transparente, por lo que la imagen puede ser translúcida. Eso puede ser un número de 0 a 1:
p {
background-color: rgba(0, 0, 0, 0.5);
}
Notación hexadecimal (#nnnnnn)
Otra opción comúnmente utilizada es expresar las partes RGB de los colores en notación hexadecimal, que está compuesta por 3 bloques.
Negro, que es rgb(0,0,0) en RGB se expresa como #000000 . Podemos abreviar los 2 números en cada par a 1 si son iguales, por lo que se convierte en #000 .
Blanco, rgb(255,255,255) puede expresarse como #ffffff o #fff.
La notación hexadecimal permite expresar un número de 0 a 255 en solo 2 dígitos ya que pueden ir de 0 a «15» (f).
Puedes ver una calculadora aquí.
Podemos agregar el canal alfa para admitir transparencia u opacidad agregando 1 o 2 dígitos más al final, por ejemplo, #00000033. No todos los navegadores admiten la notación abreviada, por lo que usa los 6 dígitos para expresar la parte RGB.
También tenemos otras notaciones, pero creo que esas son las más comunes que debes conocer.