Maîtriser l'art de la réinitialisation de styles

Introduction

Dans ce laboratoire, nous allons explorer le concept de réinitialisation de tous les styles à leurs valeurs par défaut en utilisant la propriété all. À la fin de ce laboratoire, vous aurez une compréhension claire de la manière d'utiliser cette propriété pour réinitialiser tous les styles, hérités et non hérités, à leurs valeurs d'origine. Cela vous permettra de réinitialiser rapidement et facilement le style d'un élément sans avoir à réinitialiser individuellement chaque propriété.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") subgraph Lab Skills css/selectors -.-> lab-35233{{"Réinitialiser tous les styles"}} end

Réinitialiser tous les styles

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

Pour réinitialiser tous les styles à leurs valeurs par défaut, utilisez la propriété all. Cette propriété n'affectera pas les propriétés direction et unicode-bidi. Voici un exemple de manière à l'utiliser :

<div class="reset-all-styles">
  <h5>Titre</h5>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id
    exercitationem nulla qui repellat laborum vitae, molestias tempora velit
    natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>

.reset-all-styles {
  all: initial;
}

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

Sommaire

Félicitations ! Vous avez terminé le laboratoire Réinitialiser tous les styles. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.