Final

Ein Quiz über CSS zum Abschluss. Testet euer Wissen - die Antworten werden nur lokal in eurem Browser gespeichert.

Woraus besteht eine CSS-Regel („Rule“)?

Aus einem Property, einem Doppelpunkt und einem Wert

Das ist nur eine einzelne Deklaration - eine Regel ist mehr als das.
Aus einem Selektor und geschwungenen Klammern mit Deklarationen
Aus einem HTML-Tag und dem Attribut style

Das style-Attribut ist eine Möglichkeit, CSS anzuwenden - es ist selbst keine CSS-Regel.
Aus einer Klasse und einer ID

Eine Regel besteht aus einem Selektor gefolgt von geschwungenen Klammern, die eine oder mehrere Deklarationen (property: wert;) enthalten können.

Welcher Selektor wählt alle Elemente mit class="wichtig" aus?

#wichtig

Die Raute # referenziert eine ID, keine Klasse.
wichtig

Ohne Punkt wäre das ein Type-Selector für einen (nicht existierenden) Tag <wichtig>.
.wichtig
p > wichtig

Wo sollte die Anweisung <link rel="stylesheet" href="mystyle.css"> stehen?

Im head-Bereich der HTML-Datei
Ganz am Ende des body

Dann kann die Darstellung der Seite verzögert werden - der Browser erfährt erst spät von den Styles.
In der CSS-Datei selbst
Direkt vor dem ersten h1

Eine Deklaration im style-Attribut eines Tags widerspricht einer Deklaration in der externen CSS-Datei. Was passiert?

Die Angabe im style-Attribut gewinnt
Die externe CSS-Datei gewinnt
Der Browser zeigt eine Fehlermeldung

CSS kennt keine Fehlermeldungen für widersprüchliche Regeln - es gibt immer eine definierte Auflösung.
Beide Angaben werden ignoriert

„Je näher beim Tag, desto stärker wirkt es“ - Angaben am einzelnen Tag haben Vorrang vor den lokalen Angaben im head-Bereich, und diese wiederum vor der externen Datei.

Welche Elemente wählt der Selektor * aus?

Alle Elemente des Dokuments
Nur das Wurzel-Element html
Alle Elemente mit einer Klasse
Gar keine - * ist ein Kommentar-Zeichen

Kommentare sehen in CSS so aus: /* ... */

Was bewirkt das Komma im Selektor h1,h2,a { color: yellow; }?

Eine Oder-Verknüpfung: ausgewählt werden alle h1-, alle h2- und alle a-Elemente
Eine Und-Verknüpfung: nur Elemente, die gleichzeitig h1, h2 und a sind

Ein Element hat immer genau einen Tag-Namen - „gleichzeitig h1 und h2“ ist unmöglich.
Es wählt a-Elemente aus, die in h1 oder h2 verschachtelt sind

Für Nachkommen verwendet man den Descendant Combinator: ein Leerzeichen, kein Komma.
Das Komma ist ein Syntax-Fehler

In einem Dokument steht <nav id="menu">. Welche Aussage stimmt?

Die ID menu darf im Dokument beliebig oft vorkommen

Das gilt für Klassen - jede ID darf nur einmal vorkommen.
#menu selektiert dieses Element, und seite.html#menu springt als Textmarke dorthin
IDs können nur an nav-Tags vergeben werden
Der passende Selektor lautet .menu

Der Punkt selektiert Klassen; für IDs verwendet man die Raute #.

Welche Elemente wählt section a { color: yellow; } aus?

Alle a-Elemente, die Nachkommen eines section-Elements sind
Alle section- und alle a-Elemente

Das wäre die Selector List mit Komma: section, a.
Alle section-Elemente, die ein a enthalten

section wird nur zur Auswahl benützt, aber selbst nicht ausgewählt.
Nur a-Elemente, die direkte Kinder von section sind

Der Descendant Combinator (Leerzeichen) gilt für alle Nachkommen, nicht nur Kinder.

Was wählt .menu > a { color: yellow; } aus, im Vergleich zu .menu a { color: yellow; }?

Genau dasselbe wie .menu a - > und Leerzeichen sind nur zwei Schreibweisen für dasselbe

Der Child Combinator ist strenger als der Descendant Combinator.
Nur a-Elemente, die direkte Kinder von .menu sind - tiefer verschachtelte as werden nicht getroffen
Nur das .menu-Element selbst, falls es ein a enthält

Das wäre die Aufgabe von :has(), nicht des Child Combinators.
Alle a-Elemente im Dokument, unabhängig von .menu

Welche Aussage über display: inline-Elemente (z.B. <span>, <a>) stimmt?

width und height wirken genauso wie bei display: block

Genau umgekehrt: bei inline werden width/height ignoriert.
Sie fließen im Textfluss und beginnen keine neue Zeile
Sie beginnen immer eine neue Zeile, genau wie block-Elemente
Sie können nicht gestylt werden

Ein Element hat position: absolute, aber kein Vorfahre im Dokument hat position: relative (oder absolute/fixed/sticky) gesetzt. Wonach richtet sich die Positionierung?

Das Element bleibt an seiner ursprünglichen Stelle im normalen Fluss stehen

Das wäre das Verhalten von position: static oder relative ohne top/left.
Relativ zum gesamten Dokument (praktisch: relativ zu <html>)
Der Browser zeigt einen Fehler, weil kein Bezugsrahmen existiert
Relativ zum direkten Elternelement, unabhängig von dessen position

Ohne passenden Vorfahren sucht der Browser weiter nach oben, bis zum Dokument.

Deshalb gilt die Faustregel „Absolute is relative to relative”: Ein position: relative-Elternelement ganz bewusst als Bezugsrahmen zu setzen, verhindert dieses Abrutschen zum ganzen Dokument.

Was unterscheidet :focus von :hover?

Es gibt keinen Unterschied, beide Pseudo-Klassen greifen in denselben Situationen
:hover reagiert auf die Maus (Cursor über dem Element), :focus auf den Eingabefokus - z.B. per Tab-Taste erreicht
:focus funktioniert nur bei <a>-Tags

Auch Buttons und Formularfelder (input, textarea, select) sind fokussierbar.
:hover wirkt dauerhaft, :focus nur für den Bruchteil einer Sekunde

Das beschreibt eher :active - :focus bleibt aktiv, bis der Fokus woanders hin wechselt.

Quiz-Fortschritt

0 / 0 Fragen beantwortet (0%)

0 richtig