CSS

CSS Listas

<<< Relleno - Padding en CSS Tablas - Table en CSS >>>

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.

Listas ordenadas

Código


<html>
<head>
 <style type="text/css">
  ol{list-style-type:upper-roman}
 </style>
</head>

<body>
<p>Lista ordenada con números romanos</p>
 <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
 </ol>
</body>
</html>

Resultado

Lista ordenada con números romanos

HTML
CSS
JavaScript

Listas desordenadas

Código


<html>
<head>
 <style type="text/css">
  ul{list-style-type:square}
 </style>
</head>

<body>
 <p>Lista señalada con cuadrados</p>
 <ul>
 <li>ASP</li>
 <li>PHP</li>
 <li>ADO</li>
 </ul>
</body>
</html>

Resultado

Lista señalada con cuadrados

Uso de una imagen

También podemos incluir un pequeño símbolo de nuestra creación en lugar de los símbolos estándard del lenguaje.

Código


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

<body>
 <p>Lista señalada con un gráfico</p>
 <ul>
 <li>XML</li>
 <li>VBScript</li>
 <li>AJAX</li>
 </ul>
</body>
</html>

Resultado

Lista señalada con un gráfico

XML
VBScript
AJAX

Tabla de las propiedades de las listas

Propiedad	Descripción	Valores	Detalles
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
		circle	Círculo
		square	Cuadrado
		decimal	Nro.decimal
		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
		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
		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
list-style-image	Imagen aplicable a los elementos de las listas.	none	Nada
list-style-position	Posición dentro de la lista de los elementos marcadores de las listas.	inside	Dentro
list-style-position		outside	Fuera