LabEx
EntrarJunte-se

Guia para Iniciantes em Fundamentos de CSS

Beginner

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

Introdução

Neste laboratório, exploraremos os fundamentos da programação CSS. Este laboratório foi projetado para ajudar iniciantes a começar com CSS e aprender a usá-lo para criar páginas web bonitas e responsivas. Ao longo do laboratório, abordaremos vários tópicos, como seletores, propriedades e valores, e forneceremos exercícios práticos para reforçar os conceitos.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 95%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Triângulo

index.html e style.css já foram fornecidos na VM.

Para criar uma forma triangular com CSS puro, siga estes passos:

  1. Use três bordas com a mesma border-width (20px) para criar a forma do triângulo.
  2. Defina a border-color do lado oposto de onde o triângulo aponta para a cor desejada. As bordas adjacentes devem ter uma border-color de transparent.
  3. Para ajustar o tamanho do triângulo, altere os valores de border-width.

Aqui está um exemplo de trecho de código:

<div class="triangle"></div>

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #9c27b0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório do Triângulo. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.