Efectos visuales

1. Introducción al formato visual

Hemos visto hasta ahora algunas propiedades (bordes, márgenes, rellenos) que pueden aplicarse a las cajas. Ahora vamos a ver cómo se puede definir el tipo y dimensiones de esas cajas, su comportamiento y relación con las otras cajas en la estructura del documento. El modelo de formato visual rige el comportamiento de las cajas generadas por los elementos de la página. Desde el punto de vista de una hoja de estilos, todo elemento html, y los elementos que lo componen son cajas. El modelo de caja de CSS describe las cajas rectangulares que son generadas por los elementos. Cada elemento genera una caja que actúa como bloque de contención de las cajas generadas subsecuentemente.

En HTML existen tres tipos de elementos en cuanto al modo en que son mostrados:

Elementos de bloque: Son aquellos tratados visualmente como bloques separados de los elementos que lo rodean (por ejemplo: <p> o <div>). Para hacerlo más sencillo, podemos decir que son aquellos que comienzan una nueva línea dentro del documento. Los elementos a nivel de bloque generan una caja de bloque principal que sólo contiene otras cajas de bloque.
Elementos de línea: Son aquellos que no forman nuevos bloques de contenido; el contenido es distribuido a nivel de las líneas (por ejemplo: <b>, <em>) o <span>).
Elementos de lista: Son elementos de bloque que generan una caja principal y otras cajas adicionales (generalmente contienen una viñeta o caracteres alfanuméricos) que se agregan al costado del elemento. Ejemplos de estos elementos son <ul>, <ol> o <dl>.

Sin embargo, aunque cada elemento pertenece a uno de esos tres tipos, podemos alterar su comportamiento y hacer que actúe como si perteneciera a otra usando la propiedad display. Esta propiedad se verá con detalle más adelante, pero podemos adelantar algunos ejemplos:

em { display: block }

Hemos alterado el comportamiento visual de modo que un elemento a nivel de línea en HTML (en este caso <em>) se transforme en un elemento de bloque, de modo que cualquier texto marcado con <em></em> comenzaría en una nueva línea. De igual modo, podríamos hacer que cualquier elemento se comporte como una tabla o como parte de una tabla.

Aunque las hojas de estilo lo permiten, no parece muy recomendable cambiar las características del tipo de elemento usando la propiedad display. Siempre pueden usarse nuevos elementos de bloque usando clases del elemento <div> o nuevos elementos de línea usando clases del elemento <span>.

Con el formato visual vamos además a poder definir de cada elemento otras características como la posición, el desplazamiento, la superposición, etc.