Testen Sie Ihre Fähigkeiten: Werte und Einheiten
Ziel dieses Fähigkeitstests ist es, zu bewerten, ob Sie die verschiedenen Typen von Werten und Einheiten, die in CSS-Eigenschaften verwendet werden, verstehen.
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 Clipboard-Symbol) und in einen Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Wenn Sie nicht weiterkommen, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.
Aufgabe 1
In dieser Aufgabe wurde dem ersten Listenelement eine Hintergrundfarbe mit einem Hex-Farbcode 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 RGB-Farbe verwenden.
- Das dritte sollte HSL-Farbe verwenden.
- Das vierte sollte RGB-Farbe mit auf
0.6
eingestelltem Alphakanal verwenden.
Sie können die Hex-Farbe auf convertingcolors.com konvertieren. Sie müssen herausfinden, wie die Werte im CSS verwendet werden. Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie, den untenstehenden Code zu aktualisieren, um das fertige Beispiel zu erstellen:
<ul>
<li class="hex">hex color</li>
<li class="rgb">RGB color</li>
<li class="hsl">HSL color</li>
<li class="transparency">Alpha value 0.6</li>
</ul>
.hex {
background-color: #86defa;
}
/* Add styles here */
Klicken Sie hier, um die Lösung anzuzeigen
Durch die Verwendung eines Farbumwandlungstools sollten Sie in der Lage sein, verschiedene Farbfunktionen zu verwenden, um dieselbe Farbe auf unterschiedliche Weise zu definieren:
.hex {
background-color: #86defa;
}
.rgb {
background-color: rgb(134 222 250);
}
.hsl {
background-color: hsl(194 92% 75%);
}
.transparency {
background-color: rgb(134 222 250 / 60%);
}
Aufgabe 2
In dieser Aufgabe sollen Sie die Größe verschiedener Textelemente wie unten beschrieben festlegen:
- 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>
steht, sollte 120% betragen.
Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie, den untenstehenden Code zu aktualisieren, um das fertige Beispiel zu erstellen:
<h1>Level 1 heading</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<h2>Level 2 heading</h2>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
h1 {
}
h2 {
}
p {
}
h1 + p {
}
Klicken Sie hier, um die Lösung anzuzeigen
Sie können die folgenden Längenwerte verwenden:
h1 {
font-size: 50px;
}
h2 {
font-size: 2em;
}
p {
font-size: 16px;
}
h1 + p {
font-size: 120%;
}
Aufgabe 3
In dieser Aufgabe sollen Sie das Hintergrundbild so verschieben, dass es horizontal zentriert und 20% vom oberen Rand des Kastens entfernt ist.
Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie, den untenstehenden Code zu aktualisieren, um das fertige Beispiel zu erstellen:
<div class="box"></div>
.box {
background-image: url(https://mdn.github.io/shared-assets/images/examples/purple-star.png);
background-repeat: no-repeat;
}
Klicken Sie hier, um die Lösung anzuzeigen
Verwenden Sie background-position
mit dem center
-Schlüsselwort und einem Prozentwert:
.box {
background-image: url(https://mdn.github.io/shared-assets/images/examples/purple-star.png);
background-repeat: no-repeat;
background-position: center 20%;
}