Maîtriser la sélection de texte personnalisée avec CSS

Introduction

Dans ce laboratoire, nous allons explorer le monde de la programmation CSS et apprendre à styliser les pages web à l'aide de diverses propriétés et sélecteurs CSS. Le but de ce laboratoire est de fournir une expérience pratique aux développeurs débutants et intermédiaires pour améliorer leurs compétences dans la création de pages web visuellement attrayantes. Grâce à ce laboratoire, vous apprendrez également à résoudre les problèmes courants de CSS et à utiliser les meilleures pratiques dans votre codage.

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 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Sélection de texte personnalisée

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

Pour modifier le style du texte sélectionné, utilisez le pseudo-sélecteur ::selection. Voici un extrait de code d'exemple pour sélectionner et styliser le texte à l'intérieur d'un élément de paragraphe :

<p class="custom-text-selection">Sélectionnez un peu de ce texte.</p>

::selection {
  background: aquamarine;
  color: black;
}

.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

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.

Sommaire

Félicitations ! Vous avez terminé le laboratoire de Sélection de texte personnalisée. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.