Contenido del Curso
CSS Fundamentals
1. Introducción a CSS
3. Modelo de Caja y Espaciado de Elementos
CSS Fundamentals
Colores de Texto
Aplicar color al texto
El color del texto puede añadirse a un elemento de texto con la ayuda de la propiedad CSS color
, dándole un valor de cualquier color. Los navegadores modernos soportan tres variantes de valores de color: RGB, hex y nombres de colores. Veamos el siguiente ejemplo. Aplicaremos el color rojo al texto.
index.html
index.css
index.js
Nota
Podemos encontrar algunas plantillas de colores interesantes en colorhunt.co.
Color de fondo
Podemos establecer el color de fondo de un elemento con la ayuda de la propiedad background-color
.
index.html
index.css
index.js
Formas de especificar el color
Hay tres formas principales: nombre del color, hex, rgb.
Nombre del color
Podemos utilizar palabras de color reservadas. La lista de colores reservados se encuentra en htmlcolorcodes.com
Formato hexadecimal
**El formato hexadecimal representa los colores como un código de seis dígitos formado por tres pares de valores de dos dígitos. Cada par representa la intensidad de rojo, verde y azul (en ese orden).
Los valores en formato hexadecimal van de 00
(sin intensidad) a FF
(intensidad máxima).
Formato RGB
RGB representa los colores como una serie de tres números que corresponden a la intensidad del rojo, verde y azul (en ese orden)
Los valores del formato RGB van de 0
(sin intensidad) a 255
(intensidad máxima).
Nota
Tanto los valores hex como rgb son ampliamente utilizados en el diseño web, y la elección entre ellos dependerá de las preferencias personales y los requisitos del proyecto.
Transparencia
La transparencia en colores rgb se puede conseguir utilizando la notación rgba
(rojo, verde, azul, alfa), donde alfa es el nivel de opacidad o transparencia del color.
El valor alfa puede ir de 0
(completamente transparente) a 1
(completamente opaco). Por ejemplo, el valor RGBA rgba(0, 255, 0, 0.5)
representa un color verde con un 50% de opacidad.
index.html
index.css
index.js
¿Todo estuvo claro?
Contenido del Curso
CSS Fundamentals
1. Introducción a CSS
3. Modelo de Caja y Espaciado de Elementos
CSS Fundamentals
Colores de Texto
Aplicar color al texto
El color del texto puede añadirse a un elemento de texto con la ayuda de la propiedad CSS color
, dándole un valor de cualquier color. Los navegadores modernos soportan tres variantes de valores de color: RGB, hex y nombres de colores. Veamos el siguiente ejemplo. Aplicaremos el color rojo al texto.
index.html
index.css
index.js
Nota
Podemos encontrar algunas plantillas de colores interesantes en colorhunt.co.
Color de fondo
Podemos establecer el color de fondo de un elemento con la ayuda de la propiedad background-color
.
index.html
index.css
index.js
Formas de especificar el color
Hay tres formas principales: nombre del color, hex, rgb.
Nombre del color
Podemos utilizar palabras de color reservadas. La lista de colores reservados se encuentra en htmlcolorcodes.com
Formato hexadecimal
**El formato hexadecimal representa los colores como un código de seis dígitos formado por tres pares de valores de dos dígitos. Cada par representa la intensidad de rojo, verde y azul (en ese orden).
Los valores en formato hexadecimal van de 00
(sin intensidad) a FF
(intensidad máxima).
Formato RGB
RGB representa los colores como una serie de tres números que corresponden a la intensidad del rojo, verde y azul (en ese orden)
Los valores del formato RGB van de 0
(sin intensidad) a 255
(intensidad máxima).
Nota
Tanto los valores hex como rgb son ampliamente utilizados en el diseño web, y la elección entre ellos dependerá de las preferencias personales y los requisitos del proyecto.
Transparencia
La transparencia en colores rgb se puede conseguir utilizando la notación rgba
(rojo, verde, azul, alfa), donde alfa es el nivel de opacidad o transparencia del color.
El valor alfa puede ir de 0
(completamente transparente) a 1
(completamente opaco). Por ejemplo, el valor RGBA rgba(0, 255, 0, 0.5)
representa un color verde con un 50% de opacidad.
index.html
index.css
index.js
¿Todo estuvo claro?