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:

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

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

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 anzuzeigen

Durch die Verwendung eines Farbumwandlungstools sollten Sie in der Lage sein, verschiedene 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 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:

Einige Texte in unterschiedlichen Größen.

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

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 anzuzeigen

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

Ein Stern, horizontal zentriert in einem Kasten und ein kurzes Stück vom oberen Rand des Kastens entfernt.

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

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 anzuzeigen

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

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