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.
Además la propiedad CSS float, modifica, sin mayor relevancia, el efecto normal de la otra propiedad CSS display (el como se muestra/aparece o comporta un elemento: block (como bloque o apilado), inline (en línea) etcétera).
En el ejemplo, se usa como sustituto el valor block para la propiedad CSS display de los elementos inline <a> (que son los enlaces), para que el efecto de la propiedad CSS padding de los mismos sea enteramente visible. Pues de un elemento inline solo se toma en cuenta su sección horizontal de contenido, que es según el interlineado ‘imaginario’ de fondo (el cual es, podríamos decir bastante dinámico). Por lo que no se vería el resto del área del elemento (lo que añade padding) debido al valor hidden de la propiedad CSS overflow del contenedor principal <ul>.
(Hay algunas otras consideraciones pero son progresivas a estas ideas generales)
Si se usa “display: inline” en vez de “display: block”, la apariencia de botón o menú estilizado fácilmente distinguible, gracias al relleno o espacio que acomoda la propiedad CSS padding, se perdería. Ya que “inline” solo considera la sección media del elemento, en este caso <a>. Sección (horizontal, en el caso de un elemento inline) verticalmente equivalente a la altura por defecto (o la que hayamos fijado) para el espacio entre líneas o renglones, que alojara contenido textual y/o otros elementos HTML (siendo estos dos últimos, los que al fin de cuentas interactúan con y determinan el interlineado), excluyendo así de las consideraciones el espacio extra de arriba y abajo que añade la propiedad padding al elemento, aunque el elemento que lo contiene sea ‘block o apilado’ pues este no reconoce que su elemento-hijo de quien sabe es ‘inline o en linea’ está excediendo el espacio entre los renglones o líneas que le delimitan su participación o aporte infovisual dentro de la pagina según su tipo o valor para la propiedad CSS display (la línea o renglón inferior les alinea a menos que la propiedad float este activa en cuyo caso los elementos se alinean a la superior de la líneas o renglones (NO confundir con bordes del elemento)), volviéndose este un excedente tanto para el elemento <li> como para <ul>, el cual tiene en uso su propiedad overflow con el valor hidden que ocultara dicho exceso.
(De nuevo, hay algunas otras consideraciones pero son progresivas a estas ideas generales)
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
No hay comentarios.:
Publicar un comentario