Unidad 17. Estilos CSS Avanzados (XI)


17.11. Controles de lista

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.

  • disc 1
  • disc 2
  • disc 3
  • circle 1
  • circle 2
  • circle 3
  • square 1
  • square 2
  • square 3
  • decimal 1
  • decimal 2
  • decimal 3
  • lower-roman 1
  • lower-roman 2
  • lower-roman 3
  • upper-roman 1
  • upper-roman 2
  • upper-roman 3
  • lower-alpha 1
  • lower-alpha 2
  • lower-alpha 3
  • upper-alpha 1
  • upper-alpha 2
  • upper-alpha 3
  • none 1
  • none 2
  • none 3

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.

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

list-style-position sirve para establecer sangrados colgantes. Puede tomar dos valores outside (fuera, opción por defecto) e inside (dentro).

Veamos un ejemplo mostrando bordes en los elementos que lo ilustrará perfectamente:

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.

 

• Para practicar realiza el ejercicio paso a paso Controles de Lista.


Marzo-2015
Pág. 17.11
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.