1.5 Listas

En HTML, tenemos dos tipos de listados:

• (ul) listas desordenadas - la bala marcará artículos diferentes
• (ol) listas ordenadas - usaremos números o letras

Con CSS, también podemos usar imágenes.

List Item

The type of list item marker is specified with the list-style-type property:

Marcadores de listas de imagenes

Crossbrowser Solution

The following example displays the image-marker equally in all browsers:

Example explained:

• For ul:
  • Set the list-style-type to none to remove the list item marker
  • Set both padding and margin to 0px (for cross-browser compatibility)
• For all li in ul:
  • Set the URL of the image, and show it only once (no-repeat)
  • Position the image where you want it (left 0px and down 5px)
  • Position the text in the list with padding-left

List - Shorthand property

It is also possible to specify all the list properties in one, single property. This is called a shorthand property.

The shorthand property used for lists, is the list-style property:

When using the shorthand property, the order of the values are:

• list-style-type
• list-style-position (for a description, see the CSS properties table below)
• list-style-image

It does not matter if one of the values above are missing, as long as the rest are in the specified order.

All the different list-item markers for lists

This example demonstrates all the different list-item markers in CSS.

All CSS List Properties

Ejercicio