Testen Sie Ihre Fähigkeiten: Werte und Einheiten

Ziel dieses Fertigkeitstests ist es, zu überprüfen, 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 Zwischenablage-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 mithilfe eines Hex-Farbcodes zugewiesen. Ihre Aufgabe ist es, das CSS mit demselben Farbton in verschiedenen Formaten zu ergänzen, sowie ein letztes Listenelement, bei dem Sie den Hintergrund halbtransparent gestalten sollen.

Das zweite Listenelement sollte die RGB-Farbe verwenden.
Das dritte sollte die HSL-Farbe verwenden.
Das vierte sollte RGB-Farbe verwenden, aber mit einem Alphakanal von 0.6.

Sie können die Hex-Farbe bei convertingcolors.com konvertieren. Sie müssen herausfinden, wie Sie die Werte in CSS verwenden. 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 nachzubilden:

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 Farbkonvertierungswerkzeugs sollten Sie in der Lage sein, verschiedene color functions 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 Textteile 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% groß sein.

Ihr Endergebnis sollte wie das untenstehende Bild aussehen:

Einige Texte in verschiedenen Größen.

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

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 möchten wir, dass 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 Stat, der horizontal in einem Kasten zentriert ist und einen kurzen Abstand vom oberen Rand des Kastens hat.

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

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 Schlüsselwort center 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 Styling-Grundlagen