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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35229{{"Patrón de fondo de puntos de lunares"}} css/colors -.-> lab-35229{{"Patrón de fondo de puntos de lunares"}} css/width_and_height -.-> lab-35229{{"Patrón de fondo de puntos de lunares"}} css/positioning -.-> lab-35229{{"Patrón de fondo de puntos de lunares"}} css/backgrounds -.-> lab-35229{{"Patrón de fondo de puntos de lunares"}} end

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.