Fondos de página web
El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML se crea una nueva caja rectangular que encierra los contenidos de ese elemento.
Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde.
Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características, de manera que cada una de las cajas está formada por seis partes:
- Contenido (texto)
- Relleno (padding), siempre es un elemento transparente
- Borde (border), con canal alfa variamos su transparencia
- Imagen de fondo (background-image)
- Color de fondo (background-color), con canal alfa variamos su transparencia
- Margen (margin), siempre es un elemento transparente
Teniendo en cuenta esta distribución, podemos crear fondos de distintos tipos tanto para los elementos HTML como para toda la página web si modificamos las características de la etiqueta body.
Tipos de fondos
Antes de cambiar el fondo, colocaremos estas propiedades CSS
*, *::after, *::before { box-sizing: border-box; }
* { margin:0; padding:0; border: 0 none transparent; }
html { font: 16px/1.3 sans-serif; color: #aaa;}
Todos los fondos de los ejemplos son "Responsive Design"
