LabEx
EntrarÚnete

Guía para Principiantes en los Fundamentos de CSS

Beginner

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

Introducción

En este laboratorio, exploraremos los fundamentos de la programación CSS. Este laboratorio está diseñado para ayudar a los principiantes a comenzar con CSS y a aprender cómo utilizarlo para crear páginas web hermosas y responsivas. A lo largo del laboratorio, cubriremos diversos temas como selectores, propiedades y valores, y proporcionaremos ejercicios prácticos para reforzar los conceptos.

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

Triángulo

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

Para crear una forma triangular con CSS puro, siga estos pasos:

  1. Utilice tres bordes con el mismo border-width (20px) para crear la forma triangular.
  2. Establezca el border-color del lado opuesto al que apunta el triángulo al color deseado. Los bordes adyacentes deben tener un border-color de transparent.
  3. Para ajustar el tamaño del triángulo, altere los valores de border-width.

A continuación, se muestra un fragmento de código de ejemplo:

<div class="triangle"></div>
.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #9c27b0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

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