LabEx
EntrarJunte-se

Fundamentos de CSS para Web Atraente Visualmente

Beginner

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

Introdução

Neste laboratório, exploraremos os fundamentos da programação CSS (Cascading Style Sheets). Este laboratório cobrirá os conceitos básicos da sintaxe CSS, seletores, propriedades e valores. Ao final deste laboratório, você terá uma base sólida em programação CSS e será capaz de 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.

Texto Alternado

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

Para criar uma animação de texto alternado, siga estes passos:

  1. Crie um elemento <span> com a classe "alternating" e um id de "alternating-text" para conter o texto que será alternado:
<p>
  Eu amo programar em <span class="alternating" id="alternating-text"></span>.
</p>
  1. No CSS, defina uma animação chamada alternating-text que fará com que o elemento <span> desapareça, definindo display: none:
.alternating {
  animation-name: alternating-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes alternating-text {
  90% {
    display: none;
  }
}
  1. Em JavaScript, defina um array das diferentes palavras que serão alternadas e use a primeira palavra para inicializar o conteúdo do elemento <span>:
const texts = ["Java", "Python", "C", "C++", "C#", "Javascript"];
const element = document.getElementById("alternating-text");

let i = 0;
element.innerHTML = texts[0];
  1. Use EventTarget.addEventListener() para definir um ouvinte de evento para o evento 'animationiteration'. Isso executará o manipulador de eventos sempre que uma iteração da animação for concluída. No manipulador de eventos, use Element.innerHTML para exibir o próximo elemento no array texts como o conteúdo do elemento <span>:
const listener = (e) => {
  i = i < texts.length - 1 ? i + 1 : 0;
  element.innerHTML = texts[i];
};

element.addEventListener("animationiteration", listener, false);

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