Tipos de listas
Las listas tienen diferentes objetivos dentro de la página web.
Son la fomar más adecuada de presentar información de forma esquemática
Muy útiles para construir barras de navegación.
Hay diferentes tipos de lista aplicables con diferentes fines: menus, lista de datos, esquemas...
Listas desordenadas
significa unordered list, literalmente lista desordenada, y se corresponde con las viñetas en los procesadores de texto: son listas donde cada elemento está precedido de un símbolo, como un punto o un disco. EL formato es el que sigue:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Miembros del claustro</title>
</head>
<body>
<h2>El equipo</h1>
<ul>
<li>Juan Pérez García</li>
<li>María López</li>
<li>Luis Pérez</li>
<li>Ana Díaz</li>
</ul>
<h2>Las Aulas</h2>
<ul type="circle">
<li>Aula 101</li>
<li>Aula 201</li>
<li>Aula 202</li>
<li>Aula 100</li>
</ul>
<h2>Días</h2>
<ul type="square">
<li>Lunes</li>
<li>Miércoles</li>
<li>Viernes</li>
</ul>
Prueba el ejemplo y verás las diferentes formas de viñeta o bullet, y si se no quieren usar las viñetas se puede poner la propiedad list-style-type a none.
La viñeta puede sustituirse por un icono, pero para ello se necesita CSS con el pseudo selector before.
También se puede usar la propiedad de estilo list-style-image, a la que se le da el valor de la url de nuestra imagen url('imagen.gif') .
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Formas de pago </title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" >
<style>
.lista{
list-style:none}
.lista li::before{
content:'\f35a';
font-family: "Font Awesome 5 Free";
margin-right: 4px;
</style>
</head>
<body>
<h2>Formas de pago</h1>
<ul class="lista">
<li>Pay Pal</li>
<li>Visa</li>
<li>Trasnferencia</li>
</ul>
Es simple: primero se le quita la viñeta por defecto y luego se añade optra mediante el psuedo selector before. Puedes usar un icono como en el ejemplo o un símbolo como +, $, # o inclluso en content podrís poner una imagen url('imagen.gif')
La etiqueta <ul> admite estos parámetros:
| Parámetro | Significado | Resultado |
|---|---|---|
| compact | Indica al navegador que debe representar la lista de la manera más compacta posible. |
|
| type="disc", "circle", "square", "none" | Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <li>. |
|
Pero actualmente se tiende a usar más las reglas CSS para definir el formato de las listas, en este caso en lugar del atributo ype, se usaría la propiedad list-style-type dentro de una definición de estilo CSS o en línea con el atributo style: style="list-style-type: circle"
Las listas ordenadas
Las listas también pueden presentarse con sus elementos ordenados. HTML no ordena solo añade una viñeta alfanumérica que va cambiando para cada item de la lsita, como 1,2,3 o a,b,c.
El tipo de ordenación o de indice se controla con el argumento type (1, a, A, i, I) o por las reglas de estilo CSS con la propiedad list-style (decimal, upper-alpha, lower-alpha, upper-roman, lower-alpha, y otros)
<ol type="a">
<li>Enero</li>
<li>Abril</li>
<li>Junio</li>
<li>Octubre</li>
</ol>
Las listas ordenadas admiten diferentes formas de numerar sus elementos, orden inverso y modificar los números de los elementos que la forman. Son útiles para situaciones donde el orden de los elementos sea importante, por ejemplo: pasos en una receta de cocina, capítulos en un curso de aprendizaje, orden de imprtancia de los elementos, etc.
- type:
- Este atributo permite cambiar la forma de numerar los elementos de las listas ordenadas. El valor puede ser
- 1: para numeros árabes, es el valor por defecto.
- I, i: para números romanos en mayúsculas o en minúsculas(I, II, III)
- A, a: usar letras mayúsculas o minúsculas.
- start
- Con este atributo puedes especificar el número de orden por donde comenzar a contar los elementos. Es un valor numérico, de manera que si el tipo de índice es alfabético (type="a") y se pone start="2", los elementos empiezan a numerarse por la letra b.
- reversed
- Es una marca sin atributo para ordenar los índices en forma descendente. La lsita no cambia de orden lo que cambia es el orden de los números o las letras que se usen para numerar cada elemento.
Listas de definiciones
Este tipo de lista utiliza se utiliza para crear llistas don dos niveles para sus items: una encabezado y un bloque. Habría una jerarquía de niveles ente ambos niveles. Los niveles se señalan mediante indentaciones: el bloque aparece indentado respecto a su encabezado.
Las etiquetas <dl></dl>
define la lista y en lugar de bloques <li>
se utilizan <dt>
para el encabezado y <dd>. para el bloque dependiente. Es como si tuvieramos una lista de conceptos y sus definiciones (el texto indentado). Para entenderlo lo mejor es verlas en marcha:
<dl>
<dt>HTML</dt>
<dd>Lenguaje para construir documentos web</dd>
<dt>CSS</dt>
<dd>Reglas para definir la apariencia de una página web</dd>
<dd>Se usan en style o en archivos independientes</dd>
</dl>
Con los estilos CSS pueden cambiarse la apariencia de encabezados y definiciones, por ejemplo colcando los primeros en negrita y el resto en cursiva.
La etiqueta <dl> sólo admite como parámetro el ya conocido compact, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores. Un elemento <dt>puede contener varios elementos <dd>.
<head>
<meta charset="utf-8">
<style>
dl {
display:grid;
grid-template-columns: 20px auto;
}
</style>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Lenguaje para construir documentos web</dd>
<dt>CSS</dt>
<dd>Reglas para definir la apariencia de una página web</dd>
</dl>
</body>
Este ejemplo se ve como romper la estructura de la lsita de definiciaón apra que encabezado y texto aparezcan en una misma linea. Más fácil que sar estilos basados en foat o displays inline. Una muestra más de la potencia de la estructura grid