Dreamweaver CS3

Hemos visto muchas propiedades que afectan al modo en el que se muestran los textos de nuestras páginas.

Ahora haremos un alto para ver unas cuantas propiedades que utilizaremos para dar estilo a nuestras listas.

list-style-type permite establecer el tipo de viñeta utilizada en las listas, puede tomar los valores disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha y none.

Este estilo debe ir asociado a la etiqueta li, ul o ol.

list-style-image permite mostrar una imagen en lugar de una viñeta.

La forma en la que lo haremos será la siguiente:

ul { list-style-image: url(graficos/lista.gif); }

Así declararemos el estilo. Luego bastará con escribir una lista desordenada, pues hemos utilizado el selector ul para marcar el estilo.

• elemento 1
• elemento 2
• elemento 3
• elemento 4

Observa que hemos utilizado una URL. Esta ruta debe ser o bien absoluta, o relativa a la hoja de estilos. Nunca al documento donde se aplica!

list-style-position sirve para establecer sangrados colgantes. Puede tomar dos valores outside (fuera) e inside (dentro).

Veamos un ejemplo que lo ilustrará perfectamente:

• elemento 1
• elemento 2 con valor outside
• elemento 3
• elemento 4 con valor inside
• elemento 5

Como puedes ver el valor inside alinea la viñeta con el principio del texto del elemento anterior. Outside alinea la viñeta del elemento en la posición predefinida. Utiliza este último valor para destacar listas definidas como inside.

Por último, como en los controles de fuente, existe un modo en el que podemos escribir todas estas reglas sin tener que escribirlas una a una. Para ello utilizaremos la propiedad list-style.

De este modo el siguiente bloque:

ol {

list-style-type: upper-alpha;

list-style-position: outside;

list-style-image: url(imagenes/bullet.gif);

}

Puede escribirse como:

ol {

list-style: upper-alpha outside url(imagenes/bullet.gif);

}

Ten en cuenta siempre el orden type, position e image. Si no quieres utilizar alguna de ellas, simplemente omítela.

Pág. 17.8

 Cursos Informática Gratuitos