Hijos Distribuidos Igualmente: Dominio de CSS

Introducción

En este laboratorio, exploraremos los conceptos básicos de la programación CSS y aprenderemos cómo aplicar estilos a documentos HTML. A través de una serie de ejercicios prácticos, aprenderás cómo crear y modificar reglas CSS, usar selectores para enfocar elementos específicos y aplicar estilos a texto, fondos y bordes. Al final de este laboratorio, tendrás una comprensión sólida de CSS y serás capaz de utilizarlo para crear páginas web visualmente atractivas.

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.

Hijos Distribuidos Igualmente

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

Para distribuir los elementos hijos de manera equitativa dentro de un elemento padre, utiliza el diseño flexbox estableciendo la propiedad display del elemento padre en flex. Para distribuir los hijos horizontalmente con un espacio igual entre ellos, utiliza justify-content: space-between. Para distribuir los hijos con espacio alrededor de ellos, utiliza justify-content: space-around. Aquí hay un ejemplo:

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>

.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

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 Hijos Distribuidos Igualmente. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.