Dominando CSS: Patrón de Fondo de Rayas Verticales

Introducción

En este laboratorio, exploraremos los fundamentos de la programación CSS. El propósito de este laboratorio es introducir a los aprendices en los conceptos básicos de la estilización de páginas web con CSS. Al final de este laboratorio, los aprendices tendrán una comprensión sólida de cómo utilizar CSS para crear páginas web visualmente atractivas.

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/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35244{{"Patrón de Fondo de Rayas"}} css/colors -.-> lab-35244{{"Patrón de Fondo de Rayas"}} css/width_and_height -.-> lab-35244{{"Patrón de Fondo de Rayas"}} css/backgrounds -.-> lab-35244{{"Patrón de Fondo de Rayas"}} end

Patrón de Fondo de Rayas

index.html y style.css ya se han proporcionado en la VM.

Este código crea un patrón de rayas verticales sobre un fondo blanco.

Para crear el patrón:

Establece la propiedad background-color en blanco.
Utiliza background-image con un valor de linear-gradient() para crear una raya vertical.
Establece la propiedad background-size para especificar el tamaño de cada raya.
Establece background-repeat en repeat para permitir que el patrón llene el elemento.

Tenga en cuenta que el ancho y alto fijos del elemento son solo para fines de demostración.

Aquí hay un fragmento de código de ejemplo:

<div class="stripes"></div>

.stripes {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(90deg, transparent 50%, #000 50%);
  background-size: 60px 60px;
  background-repeat: repeat;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Patrón de Fondo de Rayas. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.