Anführungszeichen mit CSS anpassen

Einführung

In diesem Lab werden wir die quotes-Eigenschaft in CSS erkunden, mit der wir die Anführungszeichen für Inline-Zitate anpassen können. Wir werden lernen, wie diese Eigenschaft verwendet wird, um unsere eigenen Anfangs- und Endanführungszeichen zu definieren und auf <q>-Elemente in unserer HTML anzuwenden. Am Ende dieses Labs werden Sie einen besseren Überblick darüber haben, wie Sie Ihrem Webauftritt eine persönliche Note verleihen können.

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 100% von den Lernenden erhalten.

Stilvolle Anführungszeichen

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

Um die Inline-Anführungszeichen anzupassen, modifizieren Sie die quotes-Eigenschaft innerhalb eines <q>-Elements.

Beispielsweise:

<p><q>Do or do not, there is no try.</q> – Yoda</p>

kann mit geschweiften Anführungszeichen mit CSS formatiert werden:

q {
  quotes: "“" "”";
}

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 Stilvolle Anführungszeichen abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.