LabEx
EntrarÚnete

Técnicas de Estilado CSS para el Desarrollo Web

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, exploraremos la programación CSS practicando diferentes técnicas para dar estilo a los elementos HTML. A través de ejercicios prácticos, aprenderemos cómo usar selectores, propiedades y valores para crear páginas web visualmente atractivas. Al final de este laboratorio, tendrás una comprensión sólida de CSS y serás capaz de aplicarla a tus propios proyectos de desarrollo web.

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 89%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Círculo

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

Para crear una forma circular usando puro CSS, utiliza la propiedad border-radius: 50% para curvar los bordes del elemento. Asegúrate de establecer tanto width como height con el mismo valor para asegurar un círculo perfecto. Si se usan valores diferentes, se creará una elipse en lugar de eso. Aquí hay un fragmento de código de ejemplo:

<div class="circle"></div>

.circle {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #9c27b0;
}

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 Círculo. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.