Testen Sie Ihre Fähigkeiten: Werte und Einheiten

Ziel dieses Tests ist es, zu beurteilen, ob Sie die verschiedenen Werte und Einheiten, die in CSS-Eigenschaften verwendet werden, verstehen.

Hinweis: Klicken Sie auf "Abspielen" in den Code-Blö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 nicht weiterkommen, können Sie uns über einen unserer Kommunikationskanäle kontaktieren.

Aufgabe 1

In dieser Aufgabe wurde dem ersten Listenelement eine Hintergrundfarbe mit einem Hex-Farbcode zugewiesen. Ihre Aufgabe ist es, das CSS mit demselben Farbcode in verschiedenen Formaten zu vervollständigen, plus ein letztes Listenelement, bei dem Sie den Hintergrund halbtransparent machen sollen.

Das zweite Listenelement sollte die Farbe im RGB-Format verwenden.
Das dritte Listenelement sollte die Farbe im HSL-Format verwenden.
Das vierte Listenelement sollte die Farbe im RGB-Format verwenden, jedoch mit einem Alpha-Kanal von 0.6.

Sie können die hexadezimale Farbe bei convertingcolors.com umrechnen. Sie müssen herausfinden, wie Sie die Werte in CSS verwenden. Ihr endgültiges Ergebnis sollte wie das Bild unten aussehen:

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

Versuchen Sie, den unten stehenden Code zu aktualisieren, um das fertige Beispiel zu reproduzieren:

html

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

body {
  font: 1.2em / 1.5 sans-serif;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 1em;
  padding: 0.5em;
}

css

.hex {
  background-color: #86defa;
}

/* Add styles here */

Klicken Sie hier, um die Lösung zu zeigen

Mit Hilfe eines Werkzeugs zur Farbumrechnung sollten Sie in der Lage sein, unterschiedliche Farbfunktionen zu verwenden, um dieselbe Farbe auf unterschiedliche Weise zu definieren:

css

.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 möchten wir, dass Sie die Größe verschiedener Textobjekte festlegen, 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> folgt, sollte 120% groß sein.

Ihr endgültiges Ergebnis sollte wie das Bild unten aussehen:

Einige Texte in unterschiedlichen Größen.

Versuchen Sie, den unten stehenden Code zu aktualisieren, um das fertige Beispiel zu reproduzieren:

html

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

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

css

h1 {
}

h2 {
}

p {
}

h1 + p {
}

Klicken Sie hier, um die Lösung zu zeigen

Sie können die folgenden Längenwerte verwenden:

css

h1 {
  font-size: 50px;
}

h2 {
  font-size: 2em;
}

p {
  font-size: 16px;
}

h1 + p {
  font-size: 120%;
}

Aufgabe 3

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

Ihr endgültiges Ergebnis sollte wie das Bild unten aussehen:

Ein statisches Element, das horizontal in einer Box zentriert ist und sich ein Stück vom oberen Rand der Box entfernt befindet.

Versuchen Sie, den unten stehenden Code zu aktualisieren, um das fertige Beispiel zu reproduzieren:

html

<div class="box"></div>

.box {
  border: 5px solid #000;
  height: 350px;
}

css

.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 zu zeigen

Verwenden Sie background-position mit dem Schlüsselwort center und einem Prozentsatz:

css

.box {
  background-image: url(https://mdn.github.io/shared-assets/images/examples/purple-star.png);
  background-repeat: no-repeat;
  background-position: center 20%;
}

Siehe auch

CSS-Bausteine