LabEx
EntrarJunte-se

Técnicas de Estilização CSS para Desenvolvimento Web

Beginner

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

Introdução

Neste laboratório, exploraremos a programação CSS praticando diferentes técnicas para estilizar elementos HTML. Através de exercícios práticos, aprenderemos a usar seletores, propriedades e valores para criar páginas web visualmente atraentes. Ao final deste laboratório, você terá uma sólida compreensão de CSS e poderá aplicá-la aos seus próprios projetos de desenvolvimento web.

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 89%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Círculo

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

Para criar uma forma circular usando CSS puro, use a propriedade border-radius: 50% para curvar as bordas do elemento. Certifique-se de definir tanto width quanto height para o mesmo valor para garantir um círculo perfeito. Se valores diferentes forem usados, uma elipse será criada em vez disso. Aqui está um trecho de código de exemplo:

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

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

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 Círculo. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.