# Listas

En esta página aprenderás las propiedades que se pueden aplicar a una lista:

## La propiedad compuesta list-style

La propiedad compuesta list-style permite establecer en una sola propiedad los valores de las propiedades list-style-type, list-style-image y list-style-position.

## Tipo predefinidos de marcador: list-style-type

El marcador de las listas ordenadas (<ol>) o no ordenadas (<ul>) se modifica con la propiedad list-style-type.

    ul {
      list-style-type: none;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: disc;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: circle;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: square;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: decimal;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: decimal-leading-zero;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: lower-roman;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: upper-roman;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: lower-greek;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: lower-alpha;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: lower-latin;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: upper-alpha;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: upper-latin;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: hebrew;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: georgian;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: armenian;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: cjk-ideographic;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: hiragana;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: katakana;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: hiragana-iroha;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: katakana-iroha;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista

Las listas ordenadas y no ordenadas son equivalentes. Los navegadores muestran números en las listas ordenadas y símbolos en las listas no ordenadas, pero desde la hoja de estilo se puede invertir la presentación:

    <ul>
      <li>Esto es un punto de una lista no ordenada</li>
      <li>Esto es otro punto de la misma lista no ordenada
        <ol>
          <li>Esto es un punto de una sublista ordenada</li>
          <li>Esto es otro punto de la misma sublista ordenada</li>
        </ol>
      </li>
    </ul>
| Esto es un punto de una lista no ordenada Esto es otro punto de la misma lista no ordenada Esto es un punto de una sublista ordenada Esto es otro punto de la misma sublista ordenada
    ul {
      list-style-type: decimal;
    }

    ol {
       list-style-type: disc;
    }
| Esto es un punto de una lista no ordenada Esto es otro punto de la misma lista no ordenada Esto es un punto de una sublista ordenada Esto es otro punto de la misma sublista ordenada

Los estilos lower-latin y lower-alpha son los mismos, así como los estilos upper-latin y upper-alpha. Como Internet Explorer 7 y anteriores no eran capaces de representar lower-latin ni upper-latin, es mejor utilizar sólo lower-alpha y upper-alpha.

Firefox es capaz de representar todos los estilos, pero en algunos casos es necesario tener instaladas las fuentes correspondientes. Si no están instaladas las fuentes, Firefox muestra un cuadro con el código Unicode del carácter no mostrado (en Firefox 2 y anteriores se mostraba un signo de interrogación (?)). Internet Explorer muestra el punto de las listas no ordenadas cuando no es capaz de representar el estilo.

La recomendación CSS 2 no especifica qué debe hacerse cuando se utiliza un estilo alfabético y la lista tiene más elementos que el alfabeto correspondiente. los navegadores hacen como en las antiguas matrículas de los coches, es decir, después de Z ponen AA, como puede comprobarse en esta página de ejemplo de lista larga con upper-alpha.

En el estilo decimal-leading-zero, los navegadores sólo ponen un cero delante de los primeros nueve elementos (los que llevan los números del 1 al 9), aunque la lista tenga más de 100 elementos, como puede comprobarse en esta página de ejemplo de lista larga con decimal-leading-zero.

Los estilos hebrew, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha no aparecen en la recomendación CSS 2.1, aunque sí en la futura recomendación CSS3: listas (actualmente -noviembre de 2011- en fase de borrador). Amaya muestra un mensaje de error cuando se utiliza alguno de estos estilos.

Volver al principio de la página

## Imágenes como marcador: list-style-image

La propiedad list-style-image permite utilizar la imagen que se quiera como marcador de una lista. El único inconveniente es que el tamaño del marcador no cambia al cambiar desde el navegador el tamaño de la fuente.

    ul {
      list-style-image: url("cruz7x7.png");
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-image: url("smiley.png");
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista

Volver al principio de la página

## Posición del marcador: list-style-position

La propiedad list-style-position establece la posición del marcador con respecto al resto del elemento de la lista: dentro (inside) o fuera (outside). los navegadores aplican por omisión el valor outside.

    ul {
    }

    li {
      background-color: lightblue;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-position: inside;
    }

    li {
      background-color: lightblue;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-position: outside;
    }

    li {
      background-color: lightblue;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista

Volver al principio de la página

## Distancia del marcador: marker-offset

La propiedad marker-offset debería establecer la distancia del marcador al elemento de la lista. Esta propiedad afectaría a los marcadores creados con los pseudo-elementos :before y :after.

    ul {
      list-style-type: none;
    }

    li:before {
      content: "***";
      display: marker;
      marker-offset: 40px;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista Esto es otro punto de la misma lista, bastante más largo para que ocupe más de una línea y se pueda comprobar la posición del marcador

los navegadores no son capaces de interpretar esta propiedad, ni probablemente lo hagan nunca, ya que ni la propiedad marker-offset ni el valor marker de la propiedad display están incluidas en la recomendación CSS 2.1 ni en la futura recomendación CSS3: listas, actualmente (noviembre de 2011) en elaboración. La recomendación CSS3: listas introducirá el pseudo-elemento ::marker para establecer el estilo del marcador.

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.