Lösungen zu den Herausforderungen

Die Herausforderungen auf der Seite Konflikte behandeln sind:

Herausforderung

Ändern Sie Ihr Stylesheet so, dass nur die roten Buchstaben unterstrichen sind.

Lösung

Verschieben Sie die Deklaration für die Unterstreichung von der Regel für <p> zu der für <strong>. Die resultierende Datei sieht folgendermaßen aus:

cssCopy to Clipboard

p {
  color: blue;
}
strong {
  color: orange;
  text-decoration: underline;
}

Spätere Abschnitte dieses Tutorials beschreiben Stilregeln und Deklarationen genauer.

Die Herausforderungen auf der Seite Grundlegende Selektoren sind:

Herausforderung

Fügen Sie eine einzige Regel in Ihre CSS-Datei ein, ohne Ihre HTML-Datei zu ändern, die alle Anfangsbuchstaben in ihrer ursprünglichen Farbe belässt, aber den restlichen Text im zweiten Absatz blau macht.

Lösung

Fügen Sie eine Regel mit einem ID-Selektor #second und einer Deklaration color: blue; hinzu, wie unten gezeigt:

cssCopy to Clipboard

#second {
  color: blue;
}

Ein spezifischerer Selektor, p#second, funktioniert ebenfalls.

Herausforderung

Ändern Sie nun die eben hinzugefügte Regel (ohne etwas anderes zu ändern), sodass auch der erste Absatz blau ist.

Lösung

Ändern Sie den Selektor der neuen Regel zu einem Tag-Selektor p:

cssCopy to Clipboard

p {
  color: blue;
}

Die Regeln für die anderen Farben haben alle spezifischere Selektoren, sodass sie das Blau des Absatzes überschreiben.

Herausforderung

Kommentieren Sie einen Teil Ihres Stylesheets aus, ohne etwas anderes zu ändern, um den allerersten Buchstaben Ihres Dokuments rot zu machen.

Lösung

Eine Möglichkeit ist, Kommentarzeichen um die Regel für .carrot zu setzen:

cssCopy to Clipboard

/*
.carrot {
  color: orange;
}
*/

Herausforderung

Machen Sie alle sechs Anfangsbuchstaben doppelt so groß in der serifenlosen Standardschrift des Browsers, ohne etwas anderes zu ändern.

Lösung

Fügen Sie die folgende Stil-Deklaration zur strong-Regel hinzu:

cssCopy to Clipboard

font: 200% serif;

Wenn Sie separate Deklarationen für font-size und font-family verwenden, wird die font-style-Einstellung im ersten Absatz nicht überschrieben.

Herausforderung

Ändern Sie in Ihrer CSS-Datei alle Farbnamen in 3-stellige Farbcodes, ohne das Ergebnis zu beeinflussen.

Lösung

Die folgenden Werte sind angemessene Annäherungen an die benannten Farben:

cssCopy to Clipboard

strong {
  color: #f00; /* red */
  background-color: #ddf; /* pale blue */
  font: 200% serif;
}

.carrot {
  color: #fa0; /* orange */
}

.spinach {
  color: #080; /* dark green */
}

p {
  color: #00f; /* blue */
}

Die Herausforderungen auf der Seite sind:

Herausforderung

Fügen Sie Ihrem Stylesheet eine Regel hinzu, damit das Bild am Anfang jeder Zeile angezeigt wird.

Lösung

Fügen Sie diese Regel in Ihr Stylesheet ein:

cssCopy to Clipboard

p::before {
  content: url("yellow-pin.png");
}

Die Herausforderungen auf der Seite Listen stylen sind:

Herausforderung

Fügen Sie Ihrem Stylesheet eine Regel hinzu, die die Ozeane mit römischen Zahlen von i bis v nummeriert.

Lösung

Definieren Sie eine Regel für Listenelemente, um den Listenstil lower-roman zu verwenden:

cssCopy to Clipboard

li {
  list-style: lower-roman;
}

Herausforderung

Ändern Sie Ihr Stylesheet, um die Überschriften mit Großbuchstaben in Klammern zu kennzeichnen.

Lösung

Fügen Sie eine Regel für das body-Element (Elternteil der Überschriften) hinzu, um einen neuen Zähler zurückzusetzen und einen zu definieren, der den Zähler bei den Überschriften anzeigt und erhöht:

cssCopy to Clipboard

/* numbered headings */
body {
  counter-reset: head-num;
}
h3::before {
  content: "(" counter(head-num, upper-latin) ") ";
  counter-increment: head-num;
}

Die Herausforderungen auf der Seite Boxen sind:

Herausforderung

Fügen Sie Ihrem Stylesheet eine Regel hinzu, die eine breite Grenze rund um die Ozeane in einer Farbe erzeugt, die Sie an das Meer erinnert.

Lösung

Die folgende Regel erzielt diesen Effekt:

cssCopy to Clipboard

ul {
  border: 10px solid lightblue;
  width: 100px;
}

Die Herausforderungen auf der Seite Layout sind:

Herausforderung

Ändern Sie Ihr Beispieldokument, doc2.html, indem Sie diesen Tag nahe dem Ende, direkt vor </BODY>, einfügen: <IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> Sagen Sie vorher, wo das Bild in Ihrem Dokument erscheinen wird. Aktualisieren Sie dann Ihren Browser, um zu sehen, ob Sie richtig lagen.

Lösung

Das Bild erscheint rechts neben der zweiten Liste.

Herausforderung

Fügen Sie Ihrem Stylesheet eine Regel hinzu, die das Bild oben rechts in Ihrem Dokument platziert.

Lösung

Die folgende Regel erzielt das gewünschte Ergebnis:

cssCopy to Clipboard

#fixed-pin {
  position: fixed;
  top: 3px;
  right: 3px;
}

Die Herausforderungen auf der Seite Tabellen sind:

Herausforderung

Ändern Sie das Stylesheet, sodass die Tabelle nur um die Datenzellen herum einen grünen Rand hat.

Lösung

Die folgende Regel legt Ränder nur um die <td> Elemente, die sich innerhalb des <tbody> Elements der Tabelle mit id=demo-table befinden:

cssCopy to Clipboard

#demo-table tbody td {
  border: 1px solid #7a7;
}

Die Herausforderungen auf der Seite Medien sind:

Herausforderung

Verschieben Sie die druckspezifischen Stilregeln in eine separate CSS-Datei und importieren Sie diese in Ihr style4.css Stylesheet.

Lösung

Schneiden Sie die Zeilen zwischen /* print only */ und /* end print only */ aus und fügen Sie sie in eine Datei mit dem Namen style4_print.css ein. In style4.css fügen Sie folgende Zeile am Anfang der Datei hinzu:

cssCopy to Clipboard

@import url("style4_print.css") print;

Herausforderung

Lassen Sie die Überschriften blau werden, wenn der Mauszeiger über ihnen ist.

Lösung

Die folgende Regel erzielt das gewünschte Ergebnis:

cssCopy to Clipboard

h1:hover {
  color: blue;
}

Herausforderung

Ändern Sie das Skript so, dass das Quadrat nach rechts um 20 em springt, wenn sich seine Farbe ändert, und danach wieder zurückspringt.

Lösung

Fügen Sie Zeilen hinzu, um die Eigenschaft margin-left zu ändern. Achten Sie darauf, sie in JavaScript als marginLeft anzugeben. Das folgende Skript erzielt das gewünschte Ergebnis:

jsCopy to Clipboard

// JavaScript demonstration
function doDemo(button) {
  const square = document.getElementById("square");
  square.style.backgroundColor = "#fa4";
  square.style.marginLeft = "20em";
  button.setAttribute("disabled", "true");
  setTimeout(clearDemo, 2000, button);
}

function clearDemo(button) {
  const square = document.getElementById("square");
  square.style.backgroundColor = "transparent";
  square.style.marginLeft = "0em";
  button.removeAttribute("disabled");
}

Herausforderung

Ändern Sie das Stylesheet so, dass alle inneren Blütenblätter pink werden, wenn der Mauszeiger über einem von ihnen ist, ohne die Funktionsweise der äußeren Blütenblätter zu ändern.

Lösung

Verschieben Sie die Position der :hover Pseudo-Klasse von einem bestimmten Blütenblatt auf alle Blütenblätter

cssCopy to Clipboard

#inner-petals {
  --segment-fill-fill-hover: pink;
}

/* Non-standard way for some older browsers */
#inner-petals:hover .segment-fill {
  fill: pink;
  stroke: none;
}