Patrón de fondo de puntos de lunares: Conceptos esenciales de estilos CSS

Introducción

En este laboratorio, exploraremos los conceptos básicos de la programación CSS y aprenderemos cómo utilizar CSS para dar estilo y formato a páginas web. A través de una serie de ejercicios prácticos, adquirirás una comprensión sólida de la sintaxis, selectores, propiedades y valores de CSS, y podrás crear páginas web visualmente atractivas y receptivas. Al final de este laboratorio, tendrás una base sólida en CSS y estarás listo para abordar proyectos de desarrollo web más avanzados.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Patrón de fondo de puntos de lunares

index.html y style.css ya se han proporcionado en la máquina virtual (VM).

Para crear un patrón de fondo de puntos de lunares, puedes seguir estos pasos:

Establece la propiedad background-color en negro.
Utiliza la propiedad background-image con dos valores de radial-gradient() para crear dos puntos.
Especifica el tamaño del patrón utilizando la propiedad background-size. Utiliza background-position para colocar adecuadamente los dos gradientes.
Establece background-repeat en repeat.
Ten en cuenta que la altura (height) y el ancho (width) fijos del elemento son solo con fines de demostración.

A continuación, se muestra un ejemplo de código HTML para un elemento div con la clase polka-dot:

<div class="polka-dot"></div>

Y aquí está el código CSS correspondiente:

.polka-dot {
  width: 240px;
  height: 240px;
  background-color: #000;
  background-image:
    radial-gradient(#fff 10%, transparent 11%),
    radial-gradient(#fff 10%, transparent 11%);
  background-size: 60px 60px;
  background-position:
    0 0,
    30px 30px;
  background-repeat: repeat;
}

Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para ver una vista previa de la página web.

Resumen

¡Felicidades! Has completado el laboratorio (lab) de Patrón de fondo de puntos de lunares. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.