Testen Sie Ihre Fähigkeiten: Werte und Einheiten

Ziel dieses Fähigkeitstests ist es, Ihnen dabei zu helfen, zu beurteilen, ob Sie die verschiedenen Arten von Werten und Einheiten, die in CSS-Eigenschaften verwendet werden, verstehen.

Hinweis: Für Hilfe lesen Sie bitte unseren Leitfaden zur Nutzung von Testen Sie Ihre Fähigkeiten. Sie können uns auch über einen unserer Kommunikationskanäle erreichen.

Aufgabe 1

In dieser Aufgabe hat das erste Listenelement eine Hintergrundfarbe mit einem Hex-Farbcode erhalten. Vervollständigen Sie das CSS, indem Sie dieselbe Farbe in unterschiedlichen Formaten verwenden, plus ein letztes Listenelement, bei dem der Hintergrund halbtransparent sein sollte.

Das zweite Listenelement sollte RGB-Farbe verwenden.
Das dritte sollte HSL-Farbe verwenden.
Das vierte sollte RGB-Farbe verwenden, aber mit dem Alphakanal auf 0.6 gesetzt.

Sie können die Hex-Farbe bei convertingcolors.com umwandeln. Sie müssen herausfinden, wie Sie die Werte in CSS verwenden. Ihr Endergebnis sollte wie das unten stehende Bild aussehen:

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

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>

css

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

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

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

/* Add styles here */

Klicken Sie hier, um die Lösung anzuzeigen

Indem Sie ein Farbkonvertierungstool verwenden, sollten Sie in der Lage sein, verschiedene Farb-Funktionen zu nutzen, 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 Schriftgröße verschiedener Textelemente festlegen:

Das <h1>-Element sollte 50px sein.
Das <h2>-Element sollte 2em sein.
Alle <p>-Elemente sollten 16px sein.
Ein <p>-Element, das direkt nach einem <h1> kommt, sollte 120% sein.

Ihr Endergebnis sollte wie das unten stehende Bild aussehen:

Einige Texte in unterschiedlichen Größen.

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>

css

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

h1 {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}

p {
  /* Add styles here */
}

h1 + p {
  /* Add styles here */
}

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

Um die Aufgabe abzuschließen, aktualisieren Sie das CSS, sodass das Hintergrundbild horizontal zentriert und 20% vom oberen Rand des Kastens entfernt ist.

Ihr Endergebnis sollte wie das unten stehende Bild aussehen:

Ein horizontal zentrierter Status in einem Kasten und in kurzem Abstand vom oberen Rand des Kastens.

html

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

css

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

.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 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%;
}

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden