Estilos de listas

Hola por enésima vez je, ahora arreglaremos un poco nuestra menú echo de listas desordenadas.

Como les dije en el apartado anterior vamos a hacerlo todo desde nuestra hoja de estilos. Abrimos nuestro Dreamweaver, luego nuestro index.html y nuestra hoja de estilos.css. Ahora en nuestra hoja de estilos en una línea nueva vamos a escribir lo siguiente:

 

 

 

 

 

El primero ya lo conocemos, se refiere a que dentro de los corchetes de menú pondremos los estilos del div menú. El segundo lleva incluido un “li” después de menú, esto nos hace referencia a todas las listas dentro del div menú, con esto podemos dar por separado estilos tanto a el div menú como a la listas del div menú.

Ahora vamos a darle los estilos, al final quedar así:

 

Dentro de .menu hemos colocado un padding de las dimensiones 2px 2px 10px 12px, en la sección vimos lo que es padding así que “espero” que no hayan olvidado eh ¬¬. Además, text-align: left nos indica que el texto dentro del div se alineará a la izquierda. Por otro lado, en .menu li hemos puesto el código list-style: none que nos permite quitarle esos puntos en cada elemento de la lista. line-height: 1.5 nos hace referencia al tamaño de espacio entre cada elemento de la lista, algo asi como el tamaño de reglon. Con font-family: Tahoma, Verdana, "Trebuchet MS" escojimos el mismo tipo de letra que esta presente en toda nuestra página. El color de la letra lo puse con el código color: #666 que es un color medio plomo tirando para blanco (plop!). Por último, text-decoration: none impide al texto tener algún tipo de característica o decoración por defecto.

 

Nos debio quedar ASI

Solo nos queda guardar los datos e ir a nuestro index y ver el resultado en vista previa. Mejor verda?

Que no? ¬¬

Bueno como se que son exigentes vamos a seguir dándole formas a nuestro primer menú, vamos.

 

 

 

<<<< Anterior Siguiente >>>>