Bajo el epígrafe de diseño visual se incluyen propiedades referidas a la forma en que podemos controlar como se muestra un elemento, como aparecerá una imagen en relación a otro elemento, el posicionamiento de un elemento respecto a su posición habitual o con una posición fija dentro de la página, la determinación de la visibilidad de un elemento y el orden en el que se mostrarán las capas si estas se superponen, la creación de recortes para mostrar la información y cómo mostrarla cuando supera el espacio asignado.

Cómo se muestran los elementos

Propiedad: display

Valores: aunque podríamos considerar otros recogidos en la especificación vamos a tener en cuenta sólo inline y block para intercambiar la forma de presentación de las dos principales disposiciones.

Posición flotante

Se trata de una propiedad que encuentra su principal aplicación en las imágenes, aunque también nos permitirá situar elementos textuales y conseguir interesantes efectos de inclusión, especialmente si utilizamos como complemento los fondos.

Propiedad: float

Valores: left hará flotar el elemento afectado en la zona izquierda, right en la derecha y none impedirá la flotación haciendo que el elemento se muestre en la posición que le corresponde en el flujo de texto.

Zonas de flotación prohibidas

Si no nos interesa que a un determinado elemento se le añadan zonas flotantes podemos indicarlo mediante una propiedad específica

Propiedad: clear

Valores: left impedirá la flotación de un elemento a la izquierda del que lleva la propiedad, right hará lo propio a la derecha y both afectará a ambos lados.

Antes de continuar recordemos cual es el proceso habitual de generación de páginas en una ventana de ordenador. Es lo que se denomina flujo normal:

• Los elementos de bloque generan cajas de bloque que se sitúan verticalmente, una a continuación de otra en su orden de aparición en la página, comenzando por la parte superior de la ventana. El espaciado vertical entre un elemento y el siguiente se calcula tomando el mayor valor de margen superior o inferior de los elementos implicados.
   
• Los elementos en línea generan cajas de línea que se disponen horizontalmente uno a continuación de otro en su orden de aparición en la página, desde el inicio del bloque que las contiene. Si hay dos cajas de línea contiguas sus espaciados horizontales se mantienen, sumándose sus anchuras. Cuando una caja de línea ocupa más del espacio disponible se rompe automáticamente generando una nueva caja en el renglón inferior. En ese caso, los bordes, márgenes y rellenos no tienen aplicación en el borde de ruputura ni en el de inicio de la siguiente caja.

Para poder modificar la apariencia visual disponemos en CSS2 de la posibilidad de alterar el flujo normal especificando la posición de los elementos. Se trata de una propiedad muy potente y, aunque podemos aplicarla directamente sobre cualquier elemento, la recomendación sería que lo hicieras creando contenedores de bloque con la etiqueta <div> y especificando en ellos la posición.

Así pues, antes de ver los valores y los efectos de los mismos comentemos que Mozilla dispone de un icono que nos permite generar una capa, que no es más que un contenedor en bloque, con una simple pulsación sobre el icono que creará una capa vacía que se irá rellenando con el contenido que vayamos tecleando.

Si lo que pretendemos es crear una capa a partir de contenidos que ya estaban incluidos en la página basta con que los señalemos arrastrando y pulsemos el mismo icono para que se genere el contenedor para englobarlos a todos.

Cuando nos situemos sobre una capa el programa lo indicará haciendo aparecer sus límites y modificando el icono de las capas que aparecerá como . Podremos moverla de un sitio a otro si pulsamos sobre y arrastramos hasta la nueva posición o bien modificar su tamaño utilizanod los tiradores de los vértices y el centro de los lados.

Para modificar los estilos que afectan a la capa bastará con hacer doble clic sobre su interior y modificar o añadir las propiedades que necesitemos.

Posición de un elemento

Habrás comprobado que al crear las capas Mozilla ha introducido unos códigos de estilo. Como las hemos movido hasta situarlas en un punto concreto de la página ha utilizado el valor absolute que es uno de los posibles.

Propiedad: position

Valores: Esta propiedad indicará la forma de calcular la posición del elemento utilizando los valores absolute, relative y fixed, pero para completar el cálculo será necesario añadir luego las propiedades left, top, bottom o right indicando las distancias en cualquiera de las unidades admitidas.

Visibilidad

Como el nombre de la propiedad sugiere se refiere a la posibilidad de hacer que un elemento resulte visible o invisible. Su utilidad reside en la combinación con scripts que permitan mostrar u ocultar capas al realizar determinadas acciones con el ratón, pero este tema excede los contenidos de este curso, aunque puedes realizar alguna búsqueda sobre "javascript para mostrar y ocultar capas" para encontrar referencias.

Propiedad: visibility

Valores: Visible que es el valor por defecto o hidden para ocultarla

Ejemplos: Ver el código del ejemplo

• Ver un ejemplo en funcionamiento
   
• Ver el código
   

Recortes

Tenemos la posibilidad de "encerrar" un elemento dentro de un recuadro con unas dimensiones determinadas. El resto del contenido quedará recortado y no se mostrará.

Propiedad: clip

Valores: Para definir la zona de recorte estableceremos las coordenadas de un rectángulo que hará de ventana visible del documento. Los valores que se aplican indican la posición de los bordes superior, derecho, inferior e izquierdo respecto al contenedor en el que se encuentra la imagen, y se anotan en la forma rect (valor, valor, valor, valor) Ver ejemplo

Desbordamiento

¿Qué ocurre cuando definimos unas dimensiones exactas para un elemento y el contenido del mismo desborda los límites establecidos? Dependerá de los valores que adopte la propiedad que controla el desbordamiento.

Propiedad: overflow

Valores: Si no se especifica valor de overflow los navegadores utilizarán visible como valor por defecto. Los valores posibles son:

• Visible: Se desprecia la altura establecida, ampliándola hasta el tamaño necesario para que se pueda mostrar todo el contenido. Hay una diferencia importante en el modo de realizar este ajuste automático de la altura: Internet Explorer desplaza hacia abajo el resto de los elementos, mientras que Mozilla, Konqueror o Galeón hacen la ampliación pero mantienen la referencia de la altura original para mostrar los siguientes elementos, con lo que el resultado es que el contenido del elemento que se autoamplia se superpone al de los siguientes.
  
• Hidden: Se recorta el contenido mostrando lo que cabe en las dimensiones establecidas, pero no se muestran barras de desplazamiento para poder acceder al resto del contenido
  
• Scroll: Se incorporan al bloque barras de desplazamiento horizontal y vertical, incluso si no son necesarias porque el contenido ocupe menos espacio que el establecido en las dimensiones del elemento. Igual que en el caso anterior se recorta el contenido, pero
  
• Auto: Si el contenido no puede mostrarse completo en las dimensiones marcadas se incorpora una barra de desplazamiento vertical para poder acceder a lo que no queda visible. Si existe algún elemento que desborde las dimensiones horizontales también se incluiría una barra de desplazamiento horizontal.

Ver ejemplo

Alineamiento vertical

Es una propiedad que tiene su principal aplicación para las imágenes, cosa que ya se podía hacer con HTML, pero puede aplicarse a cualquier elemento en línea.

Propiedad: vertical-align

Valores y ejemplos:

Se utiliza la imagen para mostrar el efecto de cada valor

• baseline el elemento afectado alinea su borde inferior con el borde inferior del elemento padre.
• sub el elemento afectado alinea su borde inferior como si fuera un subíndice
• super el elemento afectado alinea su borde inferior como si fuera un superíndice
• top el elemento afectado alinea su borde superior con el borde superior del elemento más alto de la línea, independientemente de que sea texto o imagen
• text-top el elemento afectado alinea su borde superior con el borde superior de la fuente base del elemento padre (nótese que no toma en cuenta las modificaciones del tamaño de la fuente)
• middle el elemento afectado alinea su línea central con con medio del elemento padre
• bottom el elemento afectado alinea su borde inferior con el elemento más bajo de la línea (en este caso se toma en cuenta la modificación de tamaño de la fuente que ha desplazado el borde inferior de la letra j)
• text-bottom el elemento afectado alinea su borde inferior con el borde inferior de la fuente base del elemento padre (nótese que no toma en cuenta el elemento más bajo)
• longitud expresada en cualquiera de las unidades válidas, tomando como referencia el borde inferior del elemento afectado e indicadas en positivo (.3cm) o en negativo (-10px)
• porcentaje donde la posición 0% equivaldría a baseline, pudiendo expresarlo en negativo (-50%)o positivo (100%)

Apariencia del cursor

El navegador modifica de forma automática el ratón en función de la posición sobre los elementos de la página, pero también podemos especificarlo mediante estilos-

Propiedad: cursor

Valores y ejemplos: Pasando el ratón sobre cada uno de los valores verás cambiar el cursor de acuerdo a cada uno de ellos: crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help.

Apilar capas

Además de poder colocar las capas en la posición que se desee, también se puede decidir el orden en el que se irán apilando, de forma que unas zonas se superpongan a otras. Esta propiedad sólo puede aplicarse a capas que tengan establecido el atributo position.

Propiedad: z-index

Valor: Se aplican valores numéricos, de forma que un valor más alto indica que el elemento está por encima de los demás que tengan valor más bajo o que no tengan establecida propiedad de profundidad