Listas en CSS: Tipos y formato


La combinación entre las listas en HTML y CSS, se pueden crear listas de gran impacto visual rápidamente.

En HTML la manera correcta de presentar una lista es utilizando las etiquetas UL y OL. Las siglas UL proviene de Unordered List (listas sin orden) y OL de Ordered list (listas ordenadas). Al utilizar estas etiquetas en un documento HTML, el navegador se encarga de colocar viñetas (UL) o numerar los ítems (OL). También podemos hacer listas de definición con DL, Definition List, aunque WordPress no las interpreta. Veamos los tres tipos de listas y el código HTML para construirlas:

Lista con UL:

  • Campo 1
  • Campo 2
  • Campo 3
Lista con OL:

  1. Campo 1
  2. Campo 2
  3. Campo 3
Lista con DL:

Campo 1
Campo 1.1
Campo 1.2
Campo 2
Campo2.1
Código con UL:
Código con OL:
Código con DL:

Es posible dar formato a las listas sin modificar el código HTML mediante CSS, eligiendo por ejemplo que nuestro marcador sea una viñeta cuadrada (square), un círculo (disc, circle) o letras (lower-roman, lower-alpha, upper-alpha, etc.). Por ejemplo:

square:

  • Campo 1
  • Campo 2
  • Campo 3
lower-latin:

  • Campo 1
  • Campo 2
  • Campo 3
decimal-leading-zero:

  • Campo 1
  • Campo 2
  • Campo 3
upper-roman:

  • Campo 1
  • Campo 2
  • Campo 3

Y por supuesto, si se puede hacer lo anterior, podemos hacer lo anterior, con una imagen como marcador, lo cual se hace con el código siguiente:

Ejemplo con imagen:

  • Campo 1
  • Campo 2
  • Campo 3

Hay que tener en cuenta, que no todos los navegadores interpretan igual estas imágenes, por ejemplo, veamos en la siguiente imagen la comparación entre 3 navegadores:

Comparación varios navegadores:

En el ejemplo anterior se tomaron los valores por defecto de cada navegador, es decir, no se modificó el tamaño ni tipo de letra ni el interlineado de la lista. Otra opción es anular la viñeta y añadir una imagen de fondo, que permite desplazar la imagen en el eje X e Y.

Por ejemplo el siguiente código: anula la viñeta de la lista, indica el la imagen a utilizar, la posición con respecto al ítem de la lista (a la izquierda y abajo), establece que el fondo no se repita y desplaza la palabra 15px hacia la derecha para que no tape la imagen.

Resultado con imagen de fondo:

Dejar un Comentario