En CSS, los estilos de color y fondo son fundamentales para definir la apariencia visual de los elementos en una página web. Estos estilos controlan el color del texto, el fondo de los elementos y otros aspectos relacionados.
1. Color del Texto
La propiedad color se utiliza para definir el color del texto dentro de un elemento HTML.
- Sintaxis:
selector {
color: valor;
}Valores Comunes:
- Nombres de Color:
red,blue,green, etc. - Códigos Hexadecimales:
#FF5733,#333333. - Valores RGB:
rgb(255, 87, 51). - Valores RGBA (con opacidad):
rgba(255, 87, 51, 0.8).
Ejemplo:
p {
color: #2c3e50; /* Un azul oscuro */
}2. Color de Fondo
La propiedad background-color se utiliza para establecer el color de fondo de un elemento.
- Sintaxis:
selector {
background-color: valor;
}Valores Comunes:
- Nombres de Color:
yellow,lightblue. - Códigos Hexadecimales:
#EFEFEF,#FFDDC1. - Valores RGB:
rgb(239, 239, 239). - Valores RGBA:
rgba(255, 221, 193, 0.5).
Ejemplo:
div {
background-color: #f1c40f; /* Un amarillo brillante */
}3. Imágenes de Fondo
Además de colores planos, CSS permite usar imágenes como fondo con la propiedad background-image.
- Sintaxis:
selector {
background-image: url('ruta/de/la/imagen.jpg');
}Propiedades Adicionales:
background-repeat: Controla si la imagen se repite (repeat,no-repeat,repeat-x,repeat-y).background-size: Define el tamaño de la imagen (cover,contain,auto,100% 100%).background-position: Controla la posición de la imagen (center,top left, etc.).
Ejemplo:
header {
background-image: url('header-bg.jpg');
background-size: cover;
background-position: center;
}4. Combinación de Color y Fondo
Puedes combinar propiedades de color y fondo para crear elementos visualmente atractivos.
- Ejemplo:
.highlight {
color: white; /* Color del texto */
background-color: #e74c3c; /* Fondo rojo */
padding: 10px; /* Espaciado interior */
}5. Transparencia
La transparencia se puede aplicar al fondo usando colores rgba o a través de la propiedad opacity.
- Ejemplo con
rgba:
.transparent-bg {
background-color: rgba(0, 0, 0, 0.5); /* Negro con 50% de transparencia */
}Ejemplo con opacity:
.transparent-box {
background-color: #3498db;
opacity: 0.7; /* 70% de opacidad */
}