Testen Sie Ihre Fähigkeiten: Werte und Einheiten

Werte und Einheiten 1

In dieser Aufgabe wurde dem ersten Listenelement eine Hintergrundfarbe mit einem hexadezimalen Farbcode zugewiesen. Vervollständigen Sie das CSS, 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 verwenden, jedoch mit dem Alpha-Kanal auf 0.6.

Sie können die hexadezimale Farbe mit convertingcolors.com umwandeln. Sie müssen herausfinden, wie Sie die Werte in CSS verwenden.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

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

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

/* Add styles here */

Das aktualisierte Styling sollte so aussehen:

.rgb {
  background-color: rgb(134 222 250);
}

.hsl {
  background-color: hsl(194 92% 75%);
}

.transparency {
  background-color: rgb(134 222 250 / 60%);
}

Werte und Einheiten 2

In dieser Aufgabe möchten wir, dass 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> steht, sollte 120% sein.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

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

h1 {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}

p {
  /* Add styles here */
}

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

Das aktualisierte Styling sollte so aussehen:

h1 {
  font-size: 50px;
}

h2 {
  font-size: 2em;
}

p {
  font-size: 16px;
}

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

Werte und Einheiten 3

Um die Aufgabe abzuschließen, aktualisieren Sie das CSS, damit das Hintergrundbild horizontal zentriert und 20% vom oberen Rand der Box positioniert ist.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

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

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

Das aktualisierte Styling sollte so aussehen:

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

• Zurück
• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter