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:
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:
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:
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.