Junto a párrafos y encabezados, las listas son uno de los elementos más empleados para insertar texto en una web.
Utilizamos listas para mostrar una sucesión de elementos. Podemos distinguir entre listas ordenadas (orderer list) con la etiqueta <ol> y listas sin ordenar (unorderer list), con la etiqueta <ul>. Ambas listas deben de contener una serie de elementos de lista (list items), delimitados por las etiquetas <li></li>.
La diferencia entre ambas, es que al mostrarlas el navegador las enumera en el caso de las listas ordenadas, o muestra viñetas, en las no ordenadas.
<ol> <li>Abrir</li> <li>Editar</li> <li>Guardar</li> <li>Cerrar</li> </ol> <ul> <li>Plátanos</li> <li>Naranjas</li> <li>Manzanas</li> </ul>
Las listas pueden estar anidadas, colocando dentro de un elemento otra lista.
<ul>
<li>Elemento</li>
<li>Elemento
<ul>
<li>Sub elemento</li>
<li>Sub elemento</li>
</ul>
</li>
<li>Guardar</li>
<li>Cerrar</li>
</ul>
Nota: Para referirnos a las listas de subelementos en el estilo, podemos utilizar los selectores anidados, en el caso anterior el selector ul ul.
El navegador muestra un marcador delante de cada elemento de la lista. Este marcador podemos cambiarlo con la propiedad de estilo list-style-type, que debemos de aplicar a la lista. Los valores más utilizados son los siguientes:
none: No muestra ningún marcador.disc: Muestra un punto negro.circle: Un círculo vacío.square: Un cuadrado.decimal: Números decimales: 1, 3, 3... 10, 11...lower-roman: Números romanos en minúsculas: i , ii, iii, iv, v...upper-roman: Númeors romanos en mayúsculas: I, II, III, IV, V...lower-alpha: Letras en minúscula: a, b, c, d...upper-alpha: Letras en mayúscula: A, B, C, D...Existen otros estilos, como carácteres de otros alfabetos, pero no se muestran correctamente en Internet Explorer 7.
En vez de utilizar estos elementos, podemos optar por utilizar una imagen, con la propiedad list-style-image:url(imagen.png).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title>Listas</title> </head> <body> <ol> <li>Elemento</li> <li>Otro elemento</li> <li>Y otro elemento</li> </ol> <ol style="list-style-type:none"> <li>Elemento</li> <li>Otro elemento</li> <li>Y otro elemento</li> </ol> <ol style="list-style-type:lower-roman"> <li>Elemento</li> <li>Otro elemento</li> <li>Y otro elemento</li> </ol> <ol style="list-style-type:upper-roman"> <li>Elemento</li> <li>Otro elemento</li> <li>Y otro elemento</li> </ol> <ol style="list-style-type:lower-alpha"> <li>Elemento</li> <li>Otro elemento</li> <li>Y otro elemento</li> </ol> <ol style="list-style-type:upper-alpha"> <li>Elemento</li> <li>Otro elemento</li> <li>Y otro elemento</li> </ol> <ul> <li>Elemento</li> <li>Otro elemento</li> <li>Y otro elemento</li> </ul> <ul style="list-style-type:disc"> <li>Elemento</li> <li>Otro elemento</li> <li>Y otro elemento</li> </ul> <ul style="list-style-type:circle"> <li>Elemento</li> <li>Otro elemento</li> <li>Y otro elemento</li> </ul> <ul style="list-style-type:square"> <li>Elemento</li> <li>Otro elemento</li> <li>Y otro elemento</li> </ul> <ul style="list-style-image:url(comunes/orangeball.gif)"> <li>Elemento</li> <li>Otro elemento</li> <li>Y otro elemento</li> </ul> </body> </html>
Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código 
.
Al definir el estilo de una lista, encontramos una diferencia entre navegadores. Internet Explorer deja un margen a la izquierda de la lista, mientras que otros como Firefox o Chrome, dejan un padding.
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.