Fundamentos de CSS | Tutorial de Desarrollo Web

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.

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/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") subgraph Lab Skills css/selectors -.-> lab-35251{{"Guía para Principiantes en los Fundamentos de CSS"}} css/colors -.-> lab-35251{{"Guía para Principiantes en los Fundamentos de CSS"}} css/borders -.-> lab-35251{{"Guía para Principiantes en los Fundamentos de CSS"}} css/width_and_height -.-> lab-35251{{"Guía para Principiantes en los Fundamentos de CSS"}} end

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:

Utilice tres bordes con el mismo border-width (20px) para crear la forma triangular.
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.
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.