Dominando CSS: Padrão de Fundo de Listras Verticais

Introdução

Neste laboratório, exploraremos os fundamentos da programação CSS. O objetivo deste laboratório é apresentar aos alunos os conceitos básicos de estilização de páginas web com CSS. Ao final deste laboratório, os alunos terão uma sólida compreensão de como usar CSS para criar páginas web visualmente atraentes.

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

Padrão de Fundo de Listras (Stripes Background Pattern)

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

Este código cria um padrão de listras verticais em um fundo branco.

Para criar o padrão:

Defina a propriedade background-color para branco.
Use background-image com um valor linear-gradient() para criar uma listra vertical.
Defina a propriedade background-size para especificar o tamanho de cada listra.
Defina background-repeat para repeat para permitir que o padrão preencha o elemento.

Observe que a width e height fixas do elemento são apenas para fins de demonstração.

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

<div class="stripes"></div>

.stripes {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(90deg, transparent 50%, #000 50%);
  background-size: 60px 60px;
  background-repeat: repeat;
}

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 Padrão de Fundo de Listras (Stripes Background Pattern). Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.