InicioCrear web desde cero › Crear listas con HTML

Crear listas con HTML

¿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í:

 Crear listas con HTML

Quedaría así:

Listas en HTML

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