Zusammenfassung

In dieser Lektion haben wir gelernt:

• Eine Regel besteht aus einem Selektor und Deklarationen in geschweiften Klammern. Eine Deklaration besteht aus einer Eigenschaft und einem Wert: h1 { color: sienna; }.
• Kommentare stehen zwischen /* und */, und der Browser ignoriert sie.
• Selektoren wählen die Elemente aus, die eine Regel gestaltet:
  • der Universalselektor * wählt alle Elemente aus,
  • ein Typselektor wählt alle Elemente eines Typs aus, zum Beispiel h2,
  • ein Klassenselektor wählt die Elemente mit einer Klasse aus, zum Beispiel .gruppe für class="gruppe". Viele Elemente können sich eine Klasse teilen, und ein Element kann mehrere Klassen haben,
  • ein ID-Selektor wählt das eine Element mit einer ID aus, zum Beispiel #rassen,
  • ein Attributselektor wählt Elemente anhand ihrer Attribute aus, zum Beispiel [target] oder [target="_blank"],
  • eine Pseudoklasse wählt Elemente in einem Zustand aus, zum Beispiel :hover unter dem Mauszeiger.
• Selektoren lassen sich kombinieren:
  • ein Komma gruppiert sie: h1, h2 wählt beide aus,
  • Verketten, ohne Leerzeichen, wählt die Elemente aus, die auf alle Teile zutreffen: a[target="_blank"], .gruppe:hover,
  • ein Leerzeichen wählt Nachfahren in beliebiger Tiefe aus: footer p,
  • > wählt nur Kinder aus: main > div.
• Legen mehrere Regeln dieselbe Eigenschaft eines Elements fest, entscheidet die Kaskade, welche gewinnt. Der spezifischere Selektor gewinnt: eine ID gegen eine Klasse, einen Attributselektor oder eine Pseudoklasse, und diese gegen einen Typ, während * nicht zählt. Die Teile eines Selektors addieren sich. Zwischen gleich spezifischen Selektoren gewinnt der, der später steht. Inline-Stile gewinnen gegen alle Selektoren.
• Manche Eigenschaften, meist die von Text wie color, font-family und text-align, werden an die Nachfahren eines Elements vererbt, solange diese keine eigene Regel haben. Andere, wie border und background-color, nicht.

In der nächsten Lektion, Farben, sehen wir uns alle Möglichkeiten an, Farben in CSS zu schreiben.