CSS Listas

Define que aspecto le quieres dar a las listas de tu sitio: numerado, con letras, números romanos, un pequeño gráfico, etc.


Listas con CSS


Las propiedades de las listas nos permiten establecer el estilo de las mismas, la imagen, número o letra de los diferentes Items y la posición de la misma.


El tipo de estilo de las listas

La propiedad list-style-type especifica el formato visual de la lista.
Esta propiedad se aplica a todo elemento con "display: list-item".

Sintaxis

selector {list-style-type: valor}

Los posibles valores para definir el estilo de las listas

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none

Ejemplo

Vamos a aplicar un estilo a una lista.

Código
<head>
<style type="text/css">
ol{list-style-type: lower-latin}
</style>
</head>

<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
Resultado
  1. HTML
  2. CSS
  3. JavaScript

Listas con imágenes

La propiedad list-style-image define la imagen que va a ser usada como marca de cada ítem.
Esta propiedad se aplica a todo elemento con "display: list-item".

Sintaxis

selector {list-style-image: valor}

Los posibles valores para definir las imágenes de las listas

URL | none

Ejemplo

Vamos a aplicar una imagen a una lista.

Código
<head>
<style type="text/css">
ul{list-style-image: url("punto.gif")}
</style>
</head>

<body>
<ul>
<li>XML</li>
<li>VBScript</li>
<li>AJAX</li>
</ul>
</body>
Resultado
  • XML
  • VBScript
  • AJAX

La posición de la marca en la lista

La propiedad list-style-position especifica la posición del marcador de los ítems con respecto a la caja de la lista.
Esta propiedad se aplica a todo elemento con "display: list-item".

Sintaxis

selector {list-style-position: valor}

Los posibles valores para definir la posición de los marcadores

inside | outside

Ejemplo

Vamos a ubicar los marcadores en diferentes posiciones.

Código
<head>
<style type="text/css">
ul.dentro{list-style-position: inside}
ul.fuera{list-style-position: outside}
</style>
</head>

<body>
<ul class="dentro">
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ul>

<ul class="fuera">
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ul>
</body>
Resultado
  • Primer elemento de la lista
  • Segundo elemento de la lista
  • Tercer elemento de la lista

  • Primer elemento de la lista
  • Segundo elemento de la lista
  • Tercer elemento de la lista

Todas las propiedades de las listas

La propiedad list-style se usa para definir todos los valores de las listas a la vez.

Sintaxis

selector {list-style: valor1 valor2 valor-n }

Los posibles valores para definir las imágenes de las listas

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | URL | none | inside | outside

Ejemplo

Vamos a aplicar diferentes propiedades a una lista.

Código
<head>
<style type="text/css">
ul{list-style: square inside}
</style>
</head>

<body>
<ul>
<li>XML</li>
<li>VBScript</li>
<li>AJAX</li>
</ul>
</body>
Resultado
  • XML
  • VBScript
  • AJAX

Tabla de las propiedades de las listas

PropiedadDescripciónValoresDetallesEj.
list-style Permite establecer el estilo de la lista, la imagen y/o la posición. list-style-type Tipos de listas
list-style-position Posición de la lista
list-style-image Imagen de la lista
list-style-type Estilo aplicable a los marcadores visuales de las listas. disc Disco Ejemplo de marcadores de lista disco, círculo y cuadrado
circle Círculo
square Cuadrado
decimal Nro.decimal Ejemplo de marcadores de lista decimal, decimal comenzando de 0, número romano en mayúscula y minúscula
decimal-leading-zero Nro.decimal comenzando de 0
No funciona en IE 5, 6 y 7
lower-roman Nro.romano minúscula
upper-roman Nro.romano mayúscula
lower-greek Letra griega minúscula
No funciona en IE 5, 6 y 7
Ejemplo de marcadores de lista letras griegas minúscula, latina minúscula y mayúscula
lower-latin Letra latina minúscula
No funciona en IE 5, 6 y 7
upper-latin Letra latina mayúscula
No funciona en IE 5, 6 y 7
armenian Letra armenia
No funciona en IE 5, 6 y 7
georgian Letra gregoriana
No funciona en IE 5, 6 y 7
Ejemplo de marcadores de lista con letras gregorianas, alfabeto en minúscula y mayúscula
lower-alpha Letra alfabeto en minúscula
upper-alpha Letra alfabeto en mayúscula
none Nada
list-style-image Imagen aplicable a los elementos de las listas. URL URL Ejemplo del uso de una imagen como ítem de una lista
none Nada
list-style-position Posición dentro de la lista de los elementos marcadores de las listas. inside Dentro Ejemplo de como ubicar los ítems de una lista en diferentes niveles
outside Fuera


<<< Contorno - Outline en CSS Tablas - Table en CSS >>>

En la Web