Estilos CSS para listas

Imprimir

Ya hemos visto en el artículo [ listas en XHTML ] que las listas son unas etiquetas muy utilizadas en las páginas web. Por defecto los navegadores muestran ítems de las listas ordenadas con la numeración decimal, las listas desordenadas con un pequeño círculo negro y las listas de definición con una sangría. Este comportamiento se puede cambiar fácilmente con algunas reglas CSS, así podemos cambiar:

  • El tipo de viñeta con la propiedad: list-style-type
  • Posición dentro de la lista de los ítems con la propiedad: list-style-position
  • Cambiar las viñetas por pequeñas imágenes, con la propiedad: list-style-image
  • O estas tres propiedades a la vez con la propiedad resumida (shorthand): list-style

La sintaxis de las propiedades anteriores podemos verlas en alguna de las guías o manuales que he puesto en el artículo [ P08 .- Contenidos: resúmenes, guías y utilidades ].

Además, las listas se pueden convertir en menús sencillos, tanto horizontales como verticales utilizandolas conjuntamente con etiquetas de enlace. Para eso debemos quitar las viñetas a las listas y la decoración a los enlaces como decribo en el artículo [ menús con CSS ].

Ejemplos:

En el código XHTML siempre es el mismo (evidentemente, poniendo <ol>, <ul> o <dt> cuando proceda):

<ul>
    <li>Item de lista 1</li>
    <li>Item de lista 2
        <ol>
            <li>Subitem de lista A</li>
            <li>Subitem de lista B</li>
            <li>Subitem de lista C</li>
        </ol>
    </li>
    <li>Item de lista 3</li>
</ul>

Distintas variaciones, según las reglas utilizadas:

En el archivo de estilos CSS Vista previa en el navegador
ul {
list-style-type: circle;
}
listas1
ul {
list-style-type: square;
list-style-position: inside;
}
ol {
list-style-type: lower-alpha;
}
listas2
ul {
list-style-image: url(flecha.png);
}
ol {
list-style-image: url(angulo.png);
}
li {
line-height: 1.2em;
}
listas3
aula_virtual_3con14

Utilidades

imprescindibles FireFox Google Chrome Opera Safari Acrobat Reader 7zip Flash Player Java FileHippo

Visitas...

TOTAL168543