Tutorial de HTML y principalmente su version 5
Listas anidadas
Una lista puede ser anidada dentro de otra lista:
<ul>
<li>Chocolate</li>
<li>Te
<ul>
<li>te negro</li>
<li>te verde</li>
</ul>
</li>
<li>Leche</li>
</ul>
Nota: los ítems de una lista pueden contener una lista nueva, y otros elementos HTML, como imágenes y enlaces, etc.
Listas horizontales
Las listas HTML pueden ser estilizadas de varias maneras distintas con CSS.
Una de estas maneras, que es popular entre la comunidad, es desplegarlas horizontalmente, para crear menús:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: cyan;
}
li {
float: left;
background-color: green;
}
li a {
display: block;
color: red;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: grey;
}
</style>
</head>
<body>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#noticias">Noticias</a></li>
<li><a href="#contacto">Contacto</a></li>
<li><a href="#nosotros">Nosotros</a></li>
</ul>
</body>
</html>
Expliquemos parte del ejemplo
La propiedad CSS overflow para el elemento HTML <ul>:
La propiedad CSS overflow significa exceso o excedente, y se refiere a cuando un elemento contenido
excede al elemento que lo enmarca. Solo
funciona en elementos de bloque (reservan todo el ancho, para quedar “apilado” sobre el siguiente elemento como un bloque,
e insertan un salto de línea después de su aparición, pudiéndose modificar el ancho aun se respetara el salto de
“línea” y la siguiente línea no reservada albergara al próximo elemento) que tengan una altura definida
(no necesariamente, vea adelante).
El elemento body en las páginas web que visitamos es un gran ejemplo del uso de esta propiedad CSS.
La propiedad CSS float para los elementos HTML <li>:
Cuando la propiedad CSS float (vea, Usos adicionales de una Imagen HTML, función y estética) de los elementos contenidos esta en uso y la altura del contenedor o recuadro “está o no fijada”, entonces la propiedad CSS overflow del contenedor puede ser también empleada (si hay necesidad). Aunque la lógica normal cambiara un poco, esto se notara especialmente cuando la altura no esté definida y no haya contenido textual en el elemento, como en el ejemplo de arriba que seguimos explicando a continuación:
(Antes de todo usa la propiedad CSS border para colocarle bordes al contenedor y apreciar el efecto)
Otro valor para la propiedad CSS overflow es ‘ visible ’, que no se emplea en el ejemplo pero que trataremos por contraste:
Por ejemplo, en el código de arriba, el valor CSS visible (en español, visible, la opción por defecto que deja a la vista el excedente) como
sustituto del valor CSS hidden, el valor actual, mostraría o dejaría visibles los elementos contenidos cuya propiedad CSS
float está en uso, lo cual hace que califiquen como excedente al propiciar el colapso del borde inferior del
contenedor con el superior del mismo, pues ya no hay nada contenido en los
renglones del interlineado, sino mas bien sobre estos (es decir, ajeno a estos), dado el efecto de esta última, que los
abstrae/sustrae de este interlineado imaginario de fondo. Dando la apariencia de que el contenedor se esfumo sin embargo
esta allí arriba, con el contenido flotante y además ahora excedente luego de su borde superior, y pasando en cima
de su borde inferior (siempre hablando del contenedor).
El valor CSS hidden de la propiedad CSS overflow, mencionada arriba:
Pero el valor CSS actual hidden muestra o deja a la vista los elementos contenidos cuya propiedad CSS float está en uso
y que calificarían como excedente en el caso anterior, ahora NO como tal, sino como el contenido que no excede al contenedor, a pesar del efecto de float. Ya que en el ejemplo los elementos <li>, con la peculiar
propiedad CSS float en uso, también son los únicos (y peculiares por float), elementos-hijo dentro de su elemento-padre <ul>.
Por lo cual los afectados por float, recurriendo al sentido común, se consideran normales bajo estas circunstancias,
pues de lo contrario el contenido flotante seria ocultado del usuario de la página web aun cuando la intención sea el
exponerlo.
El valor CSS hidden significa oculto, e indica que las o la sección excedente se ocultara. En cuanto a esto,
recuerda también lo anterior.
Resumen de lo aprendido:
- Usa el elemento HTML <ul> para definir un lista sin orden
- Usa la propiedad CSS list-style-type para definir la señal que acompañara a los ítems de una lista sin orden
- Usa el elemento HTML <ol> para definir una lista con orden
- Usa el atributo HTML type para definir el tipo de ‘numeración’ que se empleara en una lista con orden
- Usa el elemento HTML <li> para definir un ítem de la lista
- Usa el elemento HTML <dl> para definir una lista de descripciones
- Usa el elemento HTML <dt> para definir el termino a describir
- Usa el elemento HTML <dd> para definir la descripción de un término en una lista de descripciones
- Una lista puede ser anidada dentro de otra lista
- Los ítems de una lista pueden contener otros elementos HMTL
- Usa código CSS para mostrar horizontalmente una lista: float:left, float:right, o display:inline
