Das grundlegende Modell für die Darstellung einer Webseite.
Das Box Modell ist so etwas, wie "die Denke" hinter CSS. Alles in CSS lässt sich auf Rechtecke (Boxen) zurückführen.
Die Darstellung einer Webseite besteht aus ganz vielen Rechtecken, die sich in einem großen Rechteck, dem "Window" befinden. In dem Browserfenster sind die Boxen nebeneinander, untereinander, ineinander oder überlappend angeordnet.
Wie sich eine Box, in der sich irgendein Inhalt befindet, vom Browser aufgebaut wird, ist ernsthaft kompliziert und weit jenseits der Ansprüche dieser Website.
Was man wissen muss:
Alles ist eine Box: Text, Bilder, leere Elemente.
Boxen haben 4 Seiten, eine Position und eine Größe.
Boxen bestehen - von innen nach außen - aus :
Inhalt (content),
Abstand zum Rahmen (padding),
Rahmen (border),
Abstand zur nächsten Box (margin).
Boxen werden im Browserfenster angeordnet:
horizontal nebeneinander
vertikal untereinander
ganz oder teilweise überlappend
ineinander geschachtelt
Was man tun sollte:
Wie die einzelne Boxen im Browserfenster angeordnet sind, wird durch die "rendering engine" im Browser berechnet. Als Grundlage dazu dient die Größe einer Box.
Tja, und hier geht es schon los mit dem kompliziert sein. Was ist die Größe einer Box? Die Größe einer Box ist entweder die Größe des Inhaltes ohne Rahmen und Polsterung (padding) oder es ist die äußere Größe inklusive Allem.
Heute berechnen alle Browser die Größe einer Box - wenn man nichts tut - auf Basis der inneren Größe. Was in meinen Augen ziemlicher Unfug ist. Damit stehe ich nicht alleine, das sieht der Rest der Welt auch so.
Größenberechnungen auf Basis der Größe des Inhaltes führen zu allen möglichen Ärgernissen. Z.B. passt eine Box mit der Größe 100% genau in die umschließende Box. Hat die Box aber einen Rahmen oder eine Polsterung und basiert die Größenberechnung auf dem Inhalt, dann ragt sie über den Rand der umschließenden Box hinaus und macht das ganze Layout kaputt.
Regel zu Größenberechnung einer Box
* { box-sizing: border-box; }
Diese Anweisung führt dazu, dass der Browser Größenberechnungen auf Basis des äußeren Umfangs einer Box anstellt.
Normale CSS-Selektoren wählen existierende Bereiche in einem HTML Dokument aus. Letztendlich ist es immer ein in der HTML Datei existierendes Element, das ausgewählt wird.
Es gibt aber Selektoren, die etwas auswählen, das so konkret im HTML Dokument gar nicht existiert: sogenannte Pseudo-Klassen und Pseudo-Elemente.
Diese Klassen und Elemente heißen pseudo, weil sie im HTML Dokument nicht explizit ausgewiesen sind - und in vielen Fällen auch gar nicht ausgewiesen werden können. Sie existieren überhaupt nur, wenn sie durch einen Pseudo-Selektor adressiert werden.
Pseudo-Elemente
Selektion von nicht vorhandenen Elementen
Pseudo-Elemente existieren nicht im HTML. Sie können aber konstruiert werden. Manche existieren nur zeitweise, manche sind versteckt und manche ändern ihre Form andauernd.
Die Konstruktion dieser Elemente erfolgt durch einen CSS-Selektor. D.h. wenn ein solcher Selektor angetroffen wird, wird das Element im Browser konstruiert und die CSS Regeln werden auf dieses Element angewendet. Evtl. müssen für die Anwendung der Regeln noch weitere Bedingungen zutreffen.
In der folgenden Liste sind einige Pseudo-Elemente kurz beschrieben. Die Reihenfolge gibt - wahrscheinlich - die Häufigkeit wieder, in der sie benutzt werden.
::before, ::after
Diese Selektoren erschaffen und selektieren ein Element unterhalb des Basiselementes, entweder am Anfang oder am Ende. Dieses Element kann per CSS formatiert und mit Inhalt gefüllt werden.
Beispiel: Pfadname mit Pfeil.
span.path::before { content: "⤍ "; }
Ein Dateiname, der im Text per span in die Klasse path gepackt wurde, erhält einen Pfeil vorangestellt, ohne dass man den Pfeil in HTML eingeben muss.
::first-line
Dieser Selektor findet immer die erste, aktuell im Browser dargestellte Zeile eines Basiselementes und macht daraus ein eigenständiges Kind-Element. Der Selektor orientiert sich dabei an dem wirklichen Fenster und der aktuellen Darstellung. Er berücksichtigt dabei auch einen automatischen Zeilenumbruch.
Beispiel: Erste Zeile farbig.
p.wichtig::first-line { color: red; }
Bei einem Absatz in der Klasse wichtig wird die oberste Zeile in rot angezeigt, egal wie lang der Absatz ist. Der Rest wird wieder normal dargestellt.
::first-letter
Dieser Selektor findet das erste Zeichen im Text eines Elementes.
Beispiel: Erster Buchstabe besonders.
p.wichtig::first-letter { font-size: 2em; }
Bei allen Absätzen in der Klasse wichtig wird das erste Zeichen doppelt so groß dargestellt, wie der Rest.
::selection
Dieser Selektor zielt auf den vom Anwender markierten Text (so es ihn denn gibt). Also den Text in dem Dokument, der mit strg+a oder einfach mit der Maus ausgewählt wurde.
Beispiel: Vom Anwender ausgewählter Text hervorgehoben.
::selection { background-color: lightblue; }
Markierter Text bekommt überall im Dokument einen hellblauen Hintergrund.
Dies ist einer der wenigen Selektoren, den man sinnvoll auf das ganze Dokument anwenden kann.
Pseudo-Klassen beziehen sich auf im HTML existierenden Elemente und werden durch den Selektor mit einer Pseudo-Klasse verknüpft.
Es gibt recht viele Pseudo-Klassen, von denen hier nur einige beschrieben werden.
:root
Referenziert das Wurzelelement <html> im Dokument. Das Ergebnis ist dasselbe, wie das des Element-Selektors html { ... }. Allerdings hat der Selektor :root eine höhere Spezifität.
:first-child, :last-child
Selektiert das erste bzw. letzte Kind eines Elementes. Wird kein Elternelement und keine Elementtyp angegeben, werden alle ersten bzw. letzten Elemente ausgewählt.
Beispiel: Erstes Element, wenn es ein Absatz ist, blau machen.
p:first-child { color: blue; }
Jeder Absatz, wenn er das erste Kind seines Elternelementes ist, wird blau geschrieben.
:first-of-type, :last-of-type
Selektiert das erste bzw. letzte Element eines bestimmten Typs unter demselben Eltern-Element. Wird kein Elternelement angegeben, werden alle ersten bzw. letzten Elemente unter jedem Elternelement ausgewählt.
Beispiel: Ersten Absatz blau machen.
p:first-of-type { color: blue; }
Jeder Absatz, wenn es der erste in einem Element ist, wird blau geschrieben.
:hoover
Selektiert ein Element, wenn die Maus darüber schwebt.
p:hoover { color: blue; }
Jeder erste Absatz, über dem die Maus schwebt, wird blau gemacht.
:hoover funktioniert nicht bei Touschscreens!
:focus, :focus-within
Diese beiden Selektoren reagieren darauf, dass ein ELement per Tab Taste oder per Mausklick den Fokus erhält.
Der Unterschied zwischen den Beiden ist, das :focus genau das Element auswählt, das den Fokus bekommen hat und :focus-within auch reagiert, wenn ein Kind-Element den Fokus erhält. In beiden Fällen wird das Element, das vor dem Doppelpunkt steht modifiziert.
Nimmt man an, das hier ein HTML zugrunde liegt, das ungefähr so aussieht <ul> <li> <a href="xx">xx</a> </li> </ul>
dann führt a:focus dazu, dass der Link rot geschrieben wird, wenn der Anwender den Link fokussiert und ul:focus-within führt dazu, dass die gesamte Liste eingerahmt wird.
Nicht jedes Element kann den Fokus erhalten. Es gibt einige Elemente, die durch den Browser automatisch fokussierbar gemacht werden, bei allen anderen muss das Attribut tabindex="0" gesetzt werden.
Die nte Position kommt in zwei Versionen daher und beide gibt es auch noch von vorne und von hinten.
Die Pseudo-Klasse :nth-child() bezeichnet ein Kindelement an der nten Position in der Reihenfolge der Deklaration.
Die Pseudo-Klasse :nth-of-type() bezeichnet das nte Kindelement eines bestimmten Typs in der Reihenfolge der Deklaration von Elementen dieses Typs.
Beide gibt es auch in der Version :nth-last-child() bzw. :nth-last-of-type(). Bei denen wird von hinten gezählt.
Basis Syntax
Der Unterschied zwischen :nth-child() und :nth-of-type() ist diffizil und für mittelmäßig Begabte - wie mich - nicht leicht zu verstehen.
:nth-child()
div.example-class > p:nth-child(3) { ... }
Dieser Selektor trifft am Anfang alle "div" Elemente, die in der Klasse "example-class" sind, also die, die im HTML mit <div class="example-class"> markiert sind.
Danach trifft er einen direkt darunter liegend Paragrafen, wenn er in der Elementliste an dritter Stelle steht. Hier werden alle Elemente in der Liste gezählt. Steht an dritter Stelle etwas anderes oder gibt es keine drei Kindelemente, läuft der Selektor in Leere.
:nth-of-type()
div.example-class p:nth-of-type(3) { ... }
Wie oben trifft dieser Selektor erstmal alle "div's" in der Klasse "example-class".
Danach trifft er einen direkt darunter liegend Paragrafen, wenn er der dritte Paragraf in der Elementliste ist. Hier werden nur Paragrafen in der Elementliste gezählt. Der Selektor findet genau dann nichts, wenn sich unterhalb von "div.example-class" keine drei Paragrafen befinden.
Parametrisierung
Die ":nth-XX()" Pseudo-Selektoren erlauben in den Klammern:
eine Zahl
eine Formel
die Schlüsselwörter odd und even
zusammen mit dem Schlüsselwort of einen Selektor
Uff. Wenn man sich damit auskennt, kann man fast zaubern.
Es sind nur die Links zur Doku von nth-child() angegeben. Die Doku für die anderen drei ist ähnlich und befindet sich überall direkt daneben.
Kurzschrift Eigenschaften
Zusammenfassung von Werten und Eigenschaften in kurzer Notation
Eine Eigenschaft besitzt immer genau einen Wert. Diese Aussage stimmt auch im Angesicht der hier behandelten Kurzschrift-Eigenschaften
Kurzschrift-Eigenschaft ist die nicht ganz glückliche, wenn auch korrekte, Übersetzung für shorthand property.
Bei Kurzschrift-Eigenschaften handelt es sich technisch um Schlüsselwörter, die zwar selber keine Eigenschaften darstellen, mit denen man aber die Zuweisung zu mehreren Eigenschaften zusammenfassen kann.
Kurzschrift-Eigenschaften kommen in zwei Arten daher. Diese beiden Arten werden in der Literatur nicht weiter unterschieden, haben daher auch keine Namen und es mag Leute geben, die die hier gemachte Unterscheidung für Blödsinn halten. Mir hat es aber geholfen, das Ganze zu verstehen.
Kurzschrift 1
Hier werden über eine Kurzschrift-Eigenschaft in einem Rutsch mehrere Werte zugewiesen, die dann durch den Browser auf die eigentlichen Eigenschaften aufgeschlüsselt werden.
border Kurzschrift
div { border: 1pxsolidblack; }
Diese Zuweisung wird vom Browser verstanden und entsprechend aufgedröselt.
border Eigenschaften umgesetzt
div { border-width: 1px; border-style: solid; border-color: black; }
border ist hier die Kurzschrift für Dicke, Stil und Farbe des Rahmens. Es ist sich wirklich eine Art Steno, die vom Browser aufgelöst und bei der die einzelnen Werte einzelnen Eigenschaften zugeordnet werden.
Wichtig bei dieser Form der Kurzschrift ist es, zu sehen, dass die zugewiesenen Werte alles eigenständige Aspekte der Eigenschaft border sind. Bei border-width handelt es sich um die Dicke der Rahmenlinie, bei border-style darum, ob die Linie gepunktet, gestrichelt oder durchgezogen ist und bei border-color um die Farbe.
Kurzschrift 2
Syntaktisch gleich und bei dem border Beispiel auch inhaltlich vorhanden ist der zweite Kurschrift-Charakter. Es wird versteckt mehreren anderen Eigenschaften, aus denen sich border zusammensetzt, derselbe Wert zugewiesen.
border steht für den kompletten Rahmen um ein Objekt. Wenn man den Rahmen auseinander nimmt, dann besteht der aber wieder aus einer unteren Linie, einer oberen Linie, einer rechten und einer linken Linie. Zusammen geben sie den Rahmen.
border ist in diesem Fall eine Zusammenfassung für die 4 Linien, die einen Rahmen bestimmen, die wiederum einzeln als Kurzschrift mit jeweils 3 Werten gefüttert werden.
