Testen Sie Ihre Fähigkeiten: Werte und Einheiten

Das Ziel dieses Fähigkeitstests ist es, zu beurteilen, ob Sie die verschiedenen Arten von Werten und Einheiten, die in CSS-Eigenschaften verwendet werden, verstehen.

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 uns über einen unserer Kommunikationskanäle erreichen.

Aufgabe 1

In dieser Aufgabe wurde dem ersten Listenelement eine Hintergrundfarbe mithilfe eines Hex-Farbcodes zugewiesen. Ihre Aufgabe ist es, das CSS zu vervollständigen, indem Sie dieselbe Farbe in verschiedenen Formaten verwenden, plus ein letztes Listenelement, bei dem Sie den Hintergrund halbtransparent machen sollten.

  • Das zweite Listenelement sollte die RGB-Farbe verwenden.
  • Das dritte sollte die HSL-Farbe verwenden.
  • Das vierte sollte die RGB-Farbe verwenden, aber mit dem Alpha-Kanal auf 0.6 gesetzt.

Sie können die Umrechnungen für die Hex-Farbe über diesen Link finden. Sie müssen herausfinden, wie Sie die Werte in CSS verwenden. Ihr Endergebnis sollte wie das Bild unten aussehen:

Vier Listenelemente. Die ersten drei mit derselben Hintergrundfarbe und das letzte mit einem helleren Hintergrund.

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 daran zu arbeiten.

Aufgabe 2

In dieser Aufgabe möchten wir, dass Sie die Größe verschiedener Textobjekte einstellen, wie unten beschrieben:

  • Das <h1>-Element sollte 50 Pixel groß sein.
  • Das <h2>-Element sollte 2em groß sein.
  • Alle <p>-Elemente sollten 16 Pixel groß sein.
  • Ein <p>-Element, das direkt nach einem <h1> kommt, sollte 120% groß sein.

Ihr Endergebnis sollte wie das Bild unten aussehen:

Einige Texte in unterschiedlichen Größen.

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 daran zu arbeiten.

Aufgabe 3

In dieser Aufgabe möchten wir, dass Sie das Hintergrundbild so verschieben, dass es horizontal zentriert und 20% vom oberen Rand der Box entfernt ist.

Ihr Endergebnis sollte wie das Bild unten aussehen:

Ein statistisch zentrierter Punkt in einer Box, die sich in geringer Entfernung vom oberen Rand der Box befindet.

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 daran zu arbeiten.