Cómo se define la presentación de los elementos de una página web

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a explicar cómo se define con CSS el estilo de una lista.

Este vídeo es la segunda parte del vídeo: CSS definir el estilo de una lista. En ese vídeo se vieron las principales propiedades que se emplean para definir la presentación de una lista, list-style-type, list-style-position y list-style-image. Ahora, en este vídeo, vamos a ver un ejemplo.

Las listas se pueden, y en realidad se deben emplear, para crear las barras de navegación de un sitio web, ya que una barra de navegación horizontal o vertical es en realidad un conjunto de enlaces, una lista de enlaces. Supongamos que tenemos un sitio web que posee cuatro páginas principales, la página principal, la página de productos, la página de servicios y la página de contacto. Esta lista formada por cuatro enlaces, inicio, productos, servicios y contacto, puede ser la barra de navegación principal de este sitio web.

¿Cómo se puede lograr que esta lista, que por defecto se visualiza de esta forma, se muestre como una barra de navegación vertical u horizontal? En primer lugar, este es el código HTML que define una lista con cuatro enlaces. Las URLs que aparecen, no tienen ninguna importancia en este ejemplo. Este código HTML sirve tanto para la barra de navegación vertical como para la barra de navegación horizontal.

En primer lugar, vamos a realizar varios cambios en la presentación de la lista. Por un lado, vamos a eliminar el subrayado que aparece por defecto en los enlaces, esto se logra con esta regla de CSS, en la que se emplea la propiedad text-decoration y el valor none. A continuación, vamos a eliminar el punto que aparece en la lista, para ello definimos esta clase de CSS que voy a aplicar a la lista. La propiedad list-style-type con el valor none, hace que desaparezca el marcador de la lista.

Ahora ya tenemos la lista preparada para darle formato, ya sea vertical u horizontal. Vamos a ver primero la barra de navegación vertical. En la barra vertical voy a poner un efecto con CSS, cuando el cursor del ratón se sitúa encima de un enlace o un enlace reciba el foco, el enlace se va a destacar con un color de fondo distinto, tal como se puede ver en la lista que aparece a la derecha. Para ello defino estas dos reglas de CSS. La primera regla define la presentación de los enlaces de la lista, cambia su modo de visualización a bloque para poder definir una anchura. Define el color del texto como blanco y un color de fondo verde, centra el texto y le añade un espacio interior, con la propiedad padding, para que sea más grande el enlace. La segunda regla define el comportamiento del enlace, cuando se sitúe el cursor del ratón encima o reciba el foco, cambia el color de fondo a un verde más oscuro. En la lista, simplemente hay que añadir las dos clases para lograr el efecto deseado.

Veamos ahora el código CSS para lograr una barra de navegación horizontal. En este caso, también vamos a tener un efecto con CSS. Cuando el cursor del ratón se sitúe encima de un enlace o un enlace reciba el foco, el enlace se va a destacar con un color de fondo distinto. Para definir la barra de navegación horizontal, defino estas tres reglas de CSS. En la primera, los elementos de la lista se definen como flotantes, para que se coloquen uno a continuación del otro de forma horizontal. La segunda regla es muy similar a la misma regla que se emplea en la barra de navegación vertical, elimina los márgenes, define el color del texto como blanco y un color de fondo verde, centra el texto y le añade un espacio interior, con la propiedad padding, para que sea más grande. Por último, en la tercera regla, se define el comportamiento de los enlaces cuando el cursor del ratón se sitúa encima de ellos o reciben el foco.

Por último, en la lista simplemente hay que añadir las dos clases para lograr el efecto deseado.