Fondamentaux de la programmation CSS | Développement web | Laboratoire

Introduction

Dans ce laboratoire, nous allons explorer les bases de la programmation CSS (Cascading Style Sheets). Ce laboratoire couvrira les bases de la syntaxe CSS, des sélecteurs, des propriétés et des valeurs. À la fin de ce laboratoire, vous aurez une solide base en programmation CSS et serez capable de créer des pages web visuellement attrayantes.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 94%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Alternating Text

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer une animation de texte alterné, suivez ces étapes :

Créez un élément <span> avec une classe de "alternant" et un id de "alternating - text" pour contenir le texte qui sera alterné :

<p>
  J'aime coder en <span class="alternating" id="alternating - text"></span>.
</p>

Dans le CSS, définissez une animation appelée alternating - text qui fera disparaître l'élément <span> en définissant display: none :

.alternating {
  animation - name: alternating - text;
  animation - duration: 3s;
  animation - iteration - count: infinite;
  animation - timing - function: ease;
}

@keyframes alternating - text {
  90% {
    display: none;
  }
}

En JavaScript, définissez un tableau des différents mots qui seront alternés et utilisez le premier mot pour initialiser le contenu de l'élément <span> :

const texts = ["Java", "Python", "C", "C++", "C#", "Javascript"];
const element = document.getElementById("alternating - text");

let i = 0;
element.innerHTML = texts[0];

Utilisez EventTarget.addEventListener() pour définir un écouteur d'événements pour l'événement 'animationiteration'. Cela exécutera le gestionnaire d'événements chaque fois qu'une itération de l'animation est terminée. Dans le gestionnaire d'événements, utilisez Element.innerHTML pour afficher l'élément suivant dans le tableau texts comme contenu de l'élément <span> :

const listener = (e) => {
  i = i < texts.length - 1 ? i + 1 : 0;
  element.innerHTML = texts[i];
};

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

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Summary

Félicitations! Vous avez terminé le laboratoire Alternating Text. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.

Fondamentaux de CSS pour des pages web visuellement attrayantes

Introduction

Alternating Text

Summary