Padrão de Fundo de Bolinhas: Fundamentos de Estilização CSS

Introdução

Neste laboratório, exploraremos os fundamentos da programação CSS e aprenderemos a usar CSS para estilizar e formatar páginas web. Através de uma série de exercícios práticos, você obterá uma sólida compreensão da sintaxe CSS, seletores, propriedades e valores, e será capaz de criar páginas web visualmente atraentes e responsivas. Ao final deste laboratório, você terá uma base sólida em CSS e estará pronto para enfrentar projetos de desenvolvimento web mais avançados.

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

Padrão de Fundo de Bolinhas (Polka Dot)

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

Para criar um padrão de fundo de bolinhas (polka dot), você pode seguir estes passos:

Defina a propriedade background-color para preto.
Use a propriedade background-image com dois valores radial-gradient() para criar duas bolinhas.
Especifique o tamanho do padrão usando a propriedade background-size. Use background-position para posicionar adequadamente os dois gradientes.
Defina background-repeat para repeat.
Observe que a height e width fixas do elemento são apenas para fins de demonstração.

Aqui está um exemplo de código HTML para um elemento div com a classe polka-dot:

<div class="polka-dot"></div>

E aqui está o código CSS correspondente:

.polka-dot {
  width: 240px;
  height: 240px;
  background-color: #000;
  background-image:
    radial-gradient(#fff 10%, transparent 11%),
    radial-gradient(#fff 10%, transparent 11%);
  background-size: 60px 60px;
  background-position:
    0 0,
    30px 30px;
  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 de Padrão de Fundo de Bolinhas (Polka Dot). Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.