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.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 96% von den Lernenden erhalten.

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.