Testen Sie Ihre Fähigkeiten: Schreibmodi und logische Eigenschaften
Ziel dieses Fähigkeitstests ist es zu überprüfen, ob Sie verstehen, wie man verschiedene Textausrichtungen mit Schreibmodi und logischen Eigenschaften in CSS handhaben kann.
Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.
Wenn Sie nicht weiterkommen, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.
Aufgabe 1
In dieser Aufgabe wird das Kästchen mit einem horizontalen Schreibmodus angezeigt. Können Sie eine CSS-Zeile hinzufügen, um es so zu ändern, dass ein vertikaler Schreibmodus mit Text von rechts nach links verwendet wird?
Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 2
In dieser Aufgabe möchten wir, dass Sie logische Eigenschaften verwenden, um width und height zu ersetzen, um das Seitenverhältnis des Kästchens bei vertikaler Drehung beizubehalten.
Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 3
In dieser Aufgabe möchten wir, dass Sie die logischen Versionen der Eigenschaften für Rand, Rahmen und Abstand verwenden, sodass die Kanten des Kästchens nicht den oberen, linken, unteren und rechten Seiten folgen, sondern sich am Text orientieren.
Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.