1. Colores en CSS
Hay varias formas de definir colores:
- Nombres:
red,blue,green. - Hexadecimal:
#ff0000,#00ff00. - RGB:
rgb(255, 0, 0). - RGBA:
rgba(255, 0, 0, 0.5)(con transparencia).
2. Fondos (Backgrounds)
La propiedad background-color define el color de fondo.
También puedes usar imágenes con background-image.
div {
background-color: #f0f0f0;
background-image: linear-gradient(to right, #f0f0f0, #e0e0e0);
}3. Propiedades Shorthand (Atajo) y el peligro de "Machacar"
Existen propiedades "shorthand" o de atajo, como background, border,
font, margin o padding, que permiten establecer varios valores a
la vez.
¡Cuidado! Si usas una propiedad shorthand, esta resetea todos los
valores relacionados a sus valores iniciales antes de aplicar los nuevos. Esto significa que puede
"machacar" o sobrescribir estilos que definiste antes.
El Error Común
Si defines un color de fondo específico y luego usas background para poner una imagen,
perderás el color si no tienes cuidado.
/* ? MAL: 'background' resetea el color a transparente */
.caja {
background-color: red;
background: url('imagen.png'); /* ¡El rojo desaparece! */
}La Forma Correcta
Usa las propiedades específicas para evitar conflictos, o pon el shorthand primero.
/* ? BIEN: Usando propiedades específicas */
.caja {
background-color: red;
background-image: url('imagen.png');
}
/* ? TAMBIÉN BIEN: Shorthand primero, específico después */
.caja {
background: url('imagen.png');
background-color: red;
}Esto mismo ocurre con border (sobrescribe border-width,
border-style, etc.) y otras propiedades de atajo.