Listas CSS

De la misma forma que las tablas, las listas también poseen sus propias propiedades específicas para alterar el estilo o características de listas HTML, tanto listas ordenadas <ol> como listas sin orden <ul>.

Listas CSS

Por ejemplo, las siguientes propiedades:

Propiedad Valor Significado
list-style-image: none | url(image.png) Especifica una imagen para usar como «punto» o viñeta de ítem.
list-style-position: inside | outside Establece o elimina indentación de ítems sobre la lista.

La primera propiedad, list-style-image permite indicar la URL de una imagen para utilizar de icono o viñeta en cada ítem de la lista. Con el valor none eliminamos el uso de cualquier imagen.

Por otro lado, la propiedad list-style-position permite establece una indentación a todos los ítems de la lista, estableciendolos desplazados a la derecha (inside) o sin desplazar (outside).

La tercera propiedad, list-style-type nos permite indicar que tipo de numeración tendrán las listas (en el caso de no estar utilizando ningun imagen). Se establecen tres grupos. El primero indicado para las listas que no requieren orden, el segundo para las listas numeradas y el tercero para las listas numeradas que queremos especificar con letras (números romanos, letras griegas, etc...).

Veamos cada uno de los valores posibles:

Propiedad Valor Significado
list-style-type: disc | circle | square | none Viñetas sin orden
list-style-type: decimal | decimal-leading-zero | lower-roman | upper-roman Viñetas numéricas
list-style-type: lower-alpha | | upper-alpha | lower-greek Viñetas alfabéticas

El primer grupo, indicado para listas sin orden <ul>:

  • disc: Un pequeño circulo relleno.
  • circle: Un circulo vacío.
  • square: Un cuadrado relleno.
  • none: No muestra ninguna marca a la izquierda de los ítems.

Si lo que queremos es establecer una lista numerada <ol>, podemos utilizar valores como:

  • decimal: Numeración decimal: 1, 2, 3, 4, 5...
  • decimal-leading-zero: Numeración decimal con ceros: 01, 02, 03, 04, 05...
  • lower-roman: Números romanos en minúsculas: i, ii, iii, iv, v...
  • upper-roman: Números romanos en mayúsculas: I, II, III, IV, V...
  • lower-alpha / lower-latin: Minúsculas: a, b, c, d, e...
  • upper-alpha / upper-latin: Mayúsculas: A, B, C, D, E...
  • Otras menos utilizadas generalmente, como lower-greek (letras griegas minúsculas), arabic-indic (números árabes), upper-armenian / armenian (letras armenias en mayúsculas), lower-armenian (letras armenias en minúsculas) o georgian (letras georgianas).

Existen otros valores como bengali, cambodian, hebrew, devanagari, gujarati, gurmukhi, kannada, lao, malayalam, mongolian, myanmar, oriya, persian, tamil, telugu. thai, tibetan, hiragana, hiragana-iroha, katakana, katakana-iroha, entre otros.

Atajo: Listas

Es posible utilizar la propiedad de atajo list-style para especificar varias propiedades en una sola. El orden aconsejado es el siguiente:

div {
    list-style: <type> <position> <image>
}

Por ejemplo:

div {
    list-style: circle inside none;
}
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.