Estilo de Listas CSS

Introducción

En este laboratorio, aprenderá a transformar una lista HTML estándar sin estilo en un menú de navegación horizontal visualmente atractivo utilizando CSS. Por defecto, las listas HTML (<ul>) se muestran verticalmente con puntos. Utilizaremos varias propiedades CSS fundamentales para eliminar el estilo predeterminado y crear una barra de navegación limpia y moderna.

Aprenderá a utilizar las siguientes propiedades CSS:

• list-style-type
• padding
• display
• background-color
• margin

Al final de este laboratorio, tendrá una comprensión sólida de cómo estilizar listas, una tarea común en el desarrollo web para crear menús, listas de elementos y más.

Establecer list-style-type none en el elemento ul

En este paso, comenzará eliminando los puntos predeterminados de la lista no ordenada. La propiedad list-style-type en CSS se utiliza para controlar la apariencia del marcador de los elementos de la lista.

Primero, localice el archivo styles.css en el explorador de archivos en el lado izquierdo del WebIDE y ábralo. El archivo está actualmente vacío.

Ahora, agregue la siguiente regla CSS a styles.css. Esta regla apunta al elemento <ul> y establece su list-style-type a none, lo que ocultará los puntos.

ul {
  list-style-type: none;
}

Después de agregar el código, guarde el archivo styles.css. Para ver el resultado, haga clic en la pestaña "Web 8080" en la parte superior de la interfaz de LabEx. Debería ver la lista de elementos sin los puntos.

Aplicar padding 0 para eliminar la sangría predeterminada

En este paso, eliminará la sangría predeterminada que los navegadores aplican automáticamente a las listas no ordenadas. Esta sangría es en realidad un padding en el lado izquierdo del elemento <ul>.

Para eliminarla, actualizará la regla ul existente en su archivo styles.css. Agregue la propiedad padding: 0; a la regla. Esto establece el relleno en los cuatro lados del elemento a cero, eliminando efectivamente la sangría del lado izquierdo.

Actualice su archivo styles.css para que se vea así:

ul {
  list-style-type: none;
  padding: 0;
}

Guarde el archivo y cambie a la pestaña "Web 8080" para previsualizar sus cambios. Notará que la lista ahora está alineada al extremo izquierdo de su contenedor.

Usar display inline-block para lista horizontal

En este paso, cambiará la disposición de los elementos de la lista de vertical a horizontal. Por defecto, los elementos de lista (<li>) son elementos de nivel de bloque, lo que significa que cada uno ocupa todo el ancho disponible y comienza en una nueva línea.

Para colocarlos uno al lado del otro, puede cambiar su propiedad display. Usaremos el valor inline-block, que permite que los elementos se coloquen uno al lado del otro como elementos en línea, pero conserven propiedades de nivel de bloque como width, height y padding.

Agregue una nueva regla CSS para el elemento li en su archivo styles.css.

li {
  display: inline-block;
}

Su archivo styles.css completo debería verse ahora así:

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
}

Guarde el archivo y revise la pestaña "Web 8080". Los elementos de la lista ahora deberían estar dispuestos en una sola línea horizontal.

Añadir background-color a los elementos li

En este paso, agregará estilo visual a los elementos de la lista para que parezcan más botones de navegación. Añadiremos un color de fondo y algo de relleno interno.

La propiedad background-color establece el color de fondo de un elemento, y la propiedad padding agrega espacio dentro del borde del elemento.

Modifique la regla li existente en styles.css para incluir estas nuevas propiedades.

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
}

Aquí, background-color: #f2f2f2; establece un fondo gris claro. padding: 8px 16px; agrega 8 píxeles de relleno a la parte superior e inferior, y 16 píxeles a la izquierda y derecha del texto dentro de cada elemento de lista.

Guarde el archivo y actualice la pestaña "Web 8080". Verá que cada elemento de la lista ahora tiene un fondo gris y más espacio alrededor del texto, lo que hace que parezcan botones distintos.

Implementar margen entre elementos li

En este último paso de estilo, agregará espacio entre los elementos de la lista para evitar que se toquen. La propiedad margin se utiliza para crear espacio alrededor de un elemento, fuera de su borde.

Para agregar espacio solo entre los elementos, podemos aplicar un margen al lado derecho de cada elemento de lista usando la propiedad margin-right.

Actualice la regla li en su archivo styles.css por última vez:

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
  margin-right: 5px;
}

Esto agrega un margen de 5 píxeles al lado derecho de cada elemento de lista, separándolos entre sí. El último elemento también tendrá un margen, pero no será visible ya que no hay ningún elemento junto a él.

Guarde el archivo y vea la pestaña "Web 8080". Su menú de navegación horizontal ahora está completo, con el espaciado adecuado entre cada botón.

Resumen

¡Felicitaciones! Ha completado con éxito este laboratorio sobre estilos de listas CSS.

Comenzó con una lista HTML vertical estándar y la transformó en un menú de navegación horizontal con estilo. En el camino, aprendió y aplicó varias propiedades CSS esenciales:

• list-style-type para eliminar los marcadores de lista predeterminados.
• padding para eliminar la sangría predeterminada de la lista.
• display: inline-block para organizar los elementos de la lista horizontalmente.
• background-color y padding para dar estilo a los elementos como botones.
• margin-right para crear espacio entre los elementos.

Estas técnicas son fundamentales para construir barras de navegación y otros componentes basados en listas en sitios web modernos.