6.6 Selbsttest, Aufgabe und Zusammenfassung zum Kapitel CSS

  1. Was bedeutet es, wenn Selektoren mit einem Leerzeichen abgetrennt werden? (Beispiel: p li { color: red; })"

    • [ ] Alle Texte in den HTML-Elementen <p> und <li> werden rot dargestellt.
    • [ ] Die Abtrennung der Selektoren mit einem Leerzeichen ist nicht erlaubt.
    • [ ] Alle Texte der HTML-Elemente <li> werden rot dargestellt, wenn sich diese in einem <p>-Element befinden.
    Lösung

    Korrekte Antwort:

    • [ ] Alle Texte in den HTML-Elementen <p> und <li> werden rot dargestellt.
    • [ ] Die Abtrennung der Selektoren mit einem Leerzeichen ist nicht erlaubt.
    • [x] Alle Texte der HTML-Elemente <li> werden rot dargestellt, wenn sich diese in einem <p>-Element befinden.

    Erläuterung:

    Das Leerzeichen zwischen den Selektoren bedeutet, dass das zweite Element ein Nachfahre des ersten sein muss. In diesem Fall werden alle <li>-Elemente, die innerhalb eines <p>-Elements liegen, rot dargestellt.


2. Welche Pseudoklassen gibt es?

  • [ ] :new
  • [ ] :link
  • [ ] :banner
  • [ ] :visited
  • [ ] :hover
  • [ ] :active
  • [ ] :focus
Lösung

Korrekte Antworten:

  • [ ] :new
  • [x] :link
  • [ ] :banner
  • [x] :visited
  • [x] :hover
  • [x] :active
  • [x] :focus

Erläuterung:

Die genannten Pseudoklassen :link, :visited, :hover, :active und :focus sind standardmäßige Pseudoklassen in CSS, die häufig zur Gestaltung von Links und interaktiven Elementen verwendet werden.


Aufgabe zum Kapitel CSS

Nun kommen wir zur Verschönerung der Website, die Sie im letzten Kapitel bearbeitet haben. Dieses Dokument dürfte im Browser vielleicht informativ, jedoch noch nicht besonders ansprechend aussehen. Daher ist es jetzt Ihre Aufgabe, diese Website zu verändern:

  1. Hintergrund hinzufügen: Geben Sie Ihrer Seite einen Hintergrund, zum Beispiel ein Bild, das gekachelt wird oder nur an einer Seite erscheint.

  2. Schmuckrahmen verwenden: Versehen Sie ein oder mehrere Elemente, beispielsweise die Bilder, mit einem dekorativen Rahmen.

  3. Mouseover-Effekte erstellen: Implementieren Sie Effekte für Ihre Links, die beim Überfahren mit der Maus sichtbar werden (nur mit CSS, nicht mit JavaScript).

  4. Elemente ausrichten: Richten Sie Ihre Elemente mit Hilfe von Außen- (margin) und Innenabständen (padding) aus.

  5. Passendes Farbschema wählen: Verwenden Sie ein Farbschema, das zum Thema Ihrer Website passt.


Zusammenfassung des Kapitels CSS

In diesem Kapitel haben Sie gelernt:

  • Wie man CSS in HTML-Dokumente einbindet.
  • Wie man CSS-Dokumente kommentiert.
  • Wie man CSS-Tags gruppiert, verschachtelt und sammelt.
  • Wie man eigene Klassen und IDs definiert und einsetzt.
  • Wie man Elemente positioniert und Schrift formatiert.
  • Wie man Rahmen mit CSS gestaltet.
  • Wie sich Floats generell im Elementfluss verhalten.
  • Wie man gezielt einen Umbruch unterhalb von Floats und umliegenden Elementen erzeugt.
  • Was eine Flexbox ist und wozu sie genutzt wird.
  • Was die Haupt- und Querachse einer Flexbox ist und wie Elemente darauf verteilt werden.
  • Wie Elemente mit der order-Eigenschaft in einer Flexbox sortiert werden.
  • Wie der freie Platz in einer Flexbox mit flex-grow unter den Elementen verteilt wird.