Meister der Stilrücksetzung

Einführung

In diesem Lab werden wir das Konzept des Zurücksetzens aller Stile auf die Standardwerte mithilfe der all-Eigenschaft untersuchen. Am Ende dieses Labs werden Sie einen klaren Überblick darüber haben, wie diese Eigenschaft verwendet wird, um alle Stile, sowohl vererbte als auch nicht vererbte, auf ihre ursprünglichen Werte zurückzusetzen. Dadurch können Sie die Gestaltung eines Elements schnell und einfach zurücksetzen, ohne jedes einzelne Attribut einzeln zurücksetzen zu müssen.

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{{"Alle Stile zurücksetzen"}} end

Alle Stile zurücksetzen

index.html und style.css wurden bereits in der VM bereitgestellt.

Um alle Stile auf ihre Standardwerte zurückzusetzen, verwenden Sie die all-Eigenschaft. Diese Eigenschaft hat keine Auswirkungen auf die direction- und unicode-bidi-Eigenschaften. Hier ist ein Beispiel dafür, wie Sie sie verwenden können:

<div class="reset-all-styles">
  <h5>Title</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;
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Alle Stile zurücksetzen" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.