5823

¿Que son las listas HTML? Aquí aprenderemos que son las famosas listas HTML, para que sirven y como se crean.

¿Que son las "Listas"?

Las listas son bloques de items ordenados uno abajo del otro, pueden ser ordenadas o desordenadas, para entenderlo mejor miremos este ejemplo:

Lista ordenada:

1. Primer item
2. Segundo
3. etc.

Lista desordenada:

• primer item de mi lista
• segundo
• tercero
• etc...

Crear una lista con HTML

El código para crear una lista con HTML desordenada es <ul> y </ul>, esta es la primera que escribiremos siempre que queramos crear una lista desordenada, y la segunda es <li> y </li>.

Crear lista desordenada:

<ul>
        <li>Este es el primer item de mi lista</li>
        <li>Segundo item</li>
        <li>Tercero</li>
</ul>

 Como podemos ver, con la etiqueta <ul> indicamos que queremos abrir una lista y con <li> creamos los items, un item por cada <li>.

Crear lista ordenada:

<ol>
        <li>Este es el primer item de mi lista</li>
        <li>Segundo item</li>
        <li>Tercero</li>
</ol>

Ahora apliquemos esto que aprendimos a la pagina que venimos haciendo a lo largo de este curso, el código quedaría así:

Quedaría así:

Aplicar estilos CSS a listas

Bien, ya sabemos que son las listas y como crearlas, que rapido ¿no?, ahora veremos como aplicar estilos a esas listas, por ejemplo, para sacarle los puntos negros horribles que tienen al costado.

Para sacarle el punto negro al costado sería asi:

ul{list-style:none;}

utilizamos la propiedad "list-style" que define el estilo de la lista, al poner ese atributo en "none" le estamos diciendo que a la etiqueta <ul> (contenedor de la lista en HTML, ¿recuerdas?) no le de ningun estilo, con esto sacamos el punto negro o los numeros en las listas ordenadas.

Si lo que queremos es darle color a los textos de los items, solo hacemos esto:

li{color: gray;}

Seleccionamos la etiqueta <li> y le aplicamos la propiedad "color" con el atributo "gray", es decir, gris en inglés, recuerda que tambien podemos hacer por el hexadecimal, osea "color: #cccccc;".

Podemos hacer lo que queramos, siempre y cuandos recuerdes que <ul> es el bloque entero de la lista y <li> son los items.

Siguiente lección: comenzando el maquetado con capas o divs

• • Curso completo de html
• • Dando formato al texto con html
• • Insertando contenido con html
• • Insertando parrafos y saltos de linea en nuestra pagina
• • Crear enlaces con html
• • Insertar imagen con html
• • Editores html