Testen Sie Ihre Fähigkeiten: Schreibmodi und logische Eigenschaften

Ziel dieses Fähigkeitstests ist es zu beurteilen, ob Sie verstehen, wie man verschiedene Textausrichtungen mit Schreibmodi und logischen Eigenschaften in CSS handhabt.

Hinweis: Klicken Sie auf "Play" in den Codeblöcken unten, um die Beispiele im MDN Playground zu bearbeiten. Sie können den Code auch kopieren (klicken Sie auf das Zwischenablage-Symbol) und in einen Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Wenn Sie feststecken, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.

Aufgabe 1

In dieser Aufgabe wird das Feld mit einem horizontalen Schreibmodus angezeigt. Können Sie eine Zeile CSS hinzufügen, um es so zu ändern, dass es einen vertikalen Schreibmodus mit Text von rechts nach links verwendet?

Das Endergebnis sollte wie das Bild unten aussehen:

Ein Feld mit einem vertikalen Schreibmodus

Versuchen Sie, den untenstehenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:

html

<div class="box">Turn me on my side.</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

css

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
}

Klicken Sie hier, um die Lösung anzuzeigen

Sie sollten die Eigenschaft writing-mode mit dem Wert vertical-rl für vertikalen Script von rechts nach links verwenden:

css

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  writing-mode: vertical-rl;
}

Aufgabe 2

In dieser Aufgabe möchten wir, dass Sie logische Eigenschaften verwenden, um width und height zu ersetzen, um das Seitenverhältnis des Feldes beizubehalten, wenn es vertikal gedreht wird.

Das Endergebnis sollte wie das Bild unten aussehen:

Zwei Boxen, eine horizontal, die andere vertikal

Versuchen Sie, den untenstehenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:

html

<div class="box">Horizontal.</div>
<div class="box vertical">Vertical.</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

css

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 200px;
  height: 100px;
}

Klicken Sie hier, um die Lösung anzuzeigen

Zusätzlich zur Festlegung von writing-mode: vertical-rl auf der .vertical-Box müssen Sie die Eigenschaften inline-size und block-size anwenden, um width und height zu ersetzen:

css

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  inline-size: 200px;
  block-size: 100px;
}
.vertical {
  writing-mode: vertical-rl;
}

Aufgabe 3

In dieser Aufgabe möchten wir, dass Sie logische Versionen der Eigenschaften für Rand, Rahmen und Abstände verwenden, sodass sich die Kanten der Box auf den Text beziehen, anstatt den oberen, linken, unteren und rechten zu folgen.

Das Endergebnis sollte wie das Bild unten aussehen:

Zwei Boxen, eine horizontal, eine vertikal mit unterschiedlichem Rand, Rahmen und Abstand

Versuchen Sie, den untenstehenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:

html

<div class="box">Horizontal.</div>
<div class="box vertical">Vertical.</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.vertical {
  writing-mode: vertical-rl;
}

css

.box {
  width: 150px;
  height: 150px;
  border-top: 5px solid rebeccapurple;
  border-right: 5px solid grey;
  border-bottom: 5px dotted red;
  border-left: 5px dotted blue;
  padding-top: 40px;
  margin-bottom: 30px;
}

Klicken Sie hier, um die Lösung anzuzeigen

Um dies zu lösen, benötigen Sie ein Verständnis für die logischen, flussrelativen Zuordnungen der physischen Eigenschaften von Rand, Rahmen und Abstand:

css

.box {
  width: 150px;
  height: 150px;
  border-block-start: 5px solid rebeccapurple;
  border-inline-end: 5px solid grey;
  border-block-end: 5px dotted red;
  border-inline-start: 5px dotted blue;
  padding-block-start: 40px;
  margin-block-end: 30px;
}

Siehe auch

Grundlagen der CSS-Stilgestaltung