Crear listas con HTML
Ya vimos como aplicar margenes y padding con estilos CSS, esta leccion se hizo esperar pero trataremos de sacarle el maximo provecho jeje, por eso hoy vamos a ver que son las listas y como aplicarle estilos para hacer que se vean mejor.
¿Que son las "Listas"?
Las listas son bloques de items ordenados uno abajo del otro, para entenderlo mejor miremos este ejemplo:
- primer item de mi lista
- segundo
- tercero
- etc...
Como vemos no es una gran ciencia, solo un conjunto de items ordenados en forma de lista.
Crear una lista con HTML
El código para crear una lista con HTML es muy simple, para esto utilizaremos dos etiquetas nuevas, la primera es <ul> y </ul>, esta es la primera que escribiremos siempre que queramos crear una lista, y la segunda es <li> y </li>.
El modo de utilización es el siguiente:
<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 <li> y </li>.
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.
Como hicimos antes, para aplicar un estilo CSS a una determinada etiqueta solo tenemos que poner el nombre de esa etiqueta en la hoja de estilos seguido por un par de llaves { y }, y entre las llaves los atributos que queremos modificar, de esta forma:
etiqueta { propiedad:atributo; }
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.
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
Si tienes alguna duda puedes entrar al foro y registrarte para que te ayudemos entre todos.