Apuntes css

¿Para qué quieres herencias cuando tienes !important?

Color y fondo en CSS

El color y el fondo son la base para darle vida a tus páginas web. Con CSS, puedes controlar el color del texto, los fondos de cualquier elemento, e incluso añadir imágenes o efectos como gradientes. En este apartado, vamos a explorar las propiedades color y background, desde lo más básico hasta algunos trucos modernos de CSS3.

La propiedad color

Define el color del texto (tambien llamado "color de primer plano") de un elemento. Puedes usar nombres, códigos hexadecimales, RGB, HSL, o valores especiales como currentColor.

em {
    color: red; /* Nombre */
    color: #FF0000; /* Hexadecimal */
    color: rgb(255, 0, 0); /* RGB */
}

Formas de especificar colores

Nombres: CSS permite más de 140 nombres predefinidos. Los 16 básicos que todos los navegadores reconocen son: black, white, red, green, blue, yellow, etc.

Hexadecimal: Usan el formato #RRGGBB (por ejemplo #FF0000) o abreviado #RGB. CSS3 permite #RRGGBBAA para incluir opacidad.

RGB/RGBA: rgb(255, 0, 0) es rojo. rgba(255, 0, 0, 0.5) es rojo con 50% de transparencia.

HSL/HSLA: hsl(0, 100%, 50%) es rojo. hsla() incluye transparencia.

Otros: currentColor (hereda del padre), transparent, y variables CSS (var(--mi-color)).

<p style="color: hsl(120, 100%, 50%);">Verde brillante</p>
<p style="color: rgba(0, 0, 255, 0.7);">Azul semitransparente</p>
a {
    color: #3366cc;
    border: 1px solid currentColor; /* El borde usa el mismo color del texto */
}

Tip: currentColor es muy útil cuando quieres que bordes, sombras o SVGs usen el mismo color del texto sin repetirlo.

Accesibilidad: Asegúrate de que el contraste entre texto y fondo sea suficiente para una lectura clara.

Nota: color se hereda por defecto. En cambio, propiedades de fondo como background-color y background-image no se heredan, salvo que las declares con inherit.

La propiedad background-color

Permite aplicar un color de fondo a cualquier elemento. Puedes usar los mismos formatos que en color, o usar transparent.

body { background-color: #F0F0F0; }
h1 { background-color: yellow; }

Consejo: Especifica siempre color junto a background-color para asegurar legibilidad.

h1 {
    color: black;
    background-color: yellow;
}

La propiedad background-image

Permite establecer una imagen como fondo de un elemento, usando una URL o un gradiente.

section {
    background-image: url("/images/fondo.jpg");
}

Consejo: Incluye también un background-color como respaldo:

section {
    background-color: #E0E0E0;
    background-image: url("/images/fondo.jpg");
}

CSS3: Puedes usar gradientes como fondo:

div {
    background-image: linear-gradient(to right, blue, white);
}

Accesibilidad: Si usas imágenes como fondo, considera superponer un color semitransparente o aplicar sombra al texto para asegurar legibilidad.

h2 {
    background-image: url("header.jpg");
    background-size: cover;
    color: white;
    text-shadow: 1px 1px 4px black;
}

La propiedad background-repeat

Controla si la imagen de fondo se repite:

  • repeat: en ambas direcciones (por defecto).
  • repeat-x: solo horizontal.
  • repeat-y: solo vertical.
  • no-repeat: no se repite.
  • space / round: nuevas en CSS3.
body {
    background-image: url("patron.png");
    background-repeat: no-repeat;
}

La propiedad background-attachment

Define si el fondo se mueve al hacer scroll:

  • scroll: se mueve con el contenido (valor por defecto).
  • fixed: queda fijo en la ventana.
  • local: se desplaza con el contenido interno del elemento.
body {
    background-image: url("fondo.jpg");
    background-attachment: fixed;
}

La propiedad background-position

Indica dónde colocar la imagen de fondo. Puedes usar palabras clave, porcentajes o valores en px.

div {
    background-image: url("logo.png");
    background-position: top right;
}

Nota: Si solo das un valor (ej. 10px), el otro se asume como center.

La propiedad background-size

Controla el tamaño de la imagen de fondo:

  • auto: tamaño original.
  • cover: cubre el elemento (puede recortar).
  • contain: se ajusta sin recortar.
  • Valores exactos como 100px 200px o 50%.
section {
    background-image: url("fondo.jpg");
    background-size: cover;
}

La propiedad background (abreviada)

Permite combinar todas las propiedades anteriores en una sola línea.

body {
    background: #F0F0F0 url("fondo.jpg") no-repeat fixed center / cover;
}

CSS3: Puedes incluir múltiples fondos separados por comas:

div {
    background: url("patron.png") repeat, url("fondo.jpg") no-repeat center / cover;
}

Buenas prácticas

Contraste: Asegura buena legibilidad entre fondo y texto.

Optimización: Usa imágenes livianas y considera gradientes.

Pruebas: Verifica en distintos tamaños y dispositivos (usa @media si es necesario).

Herencia: color se hereda, pero background no.

Compatibilidad: Las propiedades modernas como cover, contain, gradientes o múltiples fondos son compatibles con los navegadores actuales, pero podrían no funcionar en navegadores antiguos como Internet Explorer 8 o anteriores.

TOP