Titel

Selektor-Typen

Man kann Selektoren kategorisieren. Es gibt den:

Universal-Selektor

Der Universal Selektor ist ein Element-Selektor der für jedes beliebige Element steht.

* { color: red; } /* Alles ist rot */

Der Selektor ist das einzelne Sternzeichen *.

ID-Selektor

Es werden alle Elemente ausgewählt, deren Id dem Selektor entspricht.

#unique-name { color: red; } /* Alle Elemente mit der Id unique-name sind rot. */

Dem Selektor wird ein Lattenkreuz # vorangestellt.

Die ID sollte zwar eindeutig sein, das ist aber nicht garantiert. Der Selektor findet jedes Vorkommen, nicht nur das Erste.

Klassen-Selektor

Es werden alle Elemente ausgewählt, die in der Klasse sind, die dem Selektor entspricht.

.class-name { color: red; } /* Alle Elemente in der Klasse class-name sind rot. */

Dem Selektor wird ein Punkt . vorangestellt.

Element-Selektor

Es werden alle Elemente ausgewählt, deren Elementtyp (Marke) dem Selektor entspricht.

div { color: red; } /* Alle <div> Elemente sind rot. */

Dem Selektor wird nichts vorangestellt, er steht auch nicht in spitzen Klammern.

Attribut-Selektor

Es werden alle Elemente ausgewählt, die das Attribut lang haben, egal mit welchem Wert.

[lang] { color: red; } /* Alle Elemente mit dem Attribut "lang" sind rot. */

Es werden alle Elemente ausgewählt, die das Attribut lang mit dem Wert de haben.

[lang="de"] { color: red; } /* Alle Elemente mit Sprache deutsch sind rot. */

Der Selektor steht in eckigen Klammern.

Pseudo-Klassen-Selektor

Es werden alle Elemente ausgewählt, die in der Pseudo-Klasse sind, die der Selektor schafft.

:first-child { color: red; } /* Das jeweils erste Unter-Element aller Elemente ist rot. */

Dem Selektor wird ein Doppelpunkt : vorangestellt.

Pseudo-Element-Selektor

Es wird Alles ausgewählt, was in dem Pseudo-Element wäre, wenn es denn ein Element wäre.

::first-line { color: red; } /* Die erste Textzeile aller Elemente im Browserfenster ist rot. */

Dem Selektor wird ein doppelter Doppelpunkt :: vorangestellt.

Selektoren können zu Ausdrücken von nahezu beliebiger Komplexität kombiniert werden.

Es gibt zwei Kombinationen, die eher logischer Natur sind.

• die Selektor-Liste, eine durch Kommata getrennte Aufzählung von Selektoren und
• der Verbund-Selektor, bei dem die einzelnen Teile ohne dazwischen liegendes Trennzeichen zu einem Wort zusammengefasst werden.

Die Selektor-Liste ist eine logische ODER Verbindung.
Der Verbund-Selektor ist eine logische UND Verknüpfung.

Der Rest der Kombinatorik bezieht sich darauf, in welchem Verhältnis die Elemente zueinander stehen, die vom Selektor adressiert werden sollen.

Die Literatur benutzt zur Beschreibung der Verhältnisse gerne Familienbeziehungen. Dabei geht es dann um Eltern und ihre Kinder und um Geschwister und deren Reihenfolge. In der HTML Welt sind das Elemente mit ihren geschachtelten Unterelementen, also das Verhältnis von Elementen innerhalb einer Hierarchie und die Anordnung von Elementen, die unterhalb eines Elementes auf gleicher Ebene liegen.

Hierarchie. Elemente mit ihren Unterelementen und deren Unterelementen und ...

• Direkter Nachkomme : Ein Element ist direktes Unterelement eines Elementes (Eltern - Kind).
• Indirekter Nachkomme: Ein Element ist Unterelement eines Unterelements eines ... .

Nachbarschaft. Elemente zusammen mit den anderen Elementen auf derselben Ebene.

• Direkte Nachbarn: Die Elemente stehen unterhalb eines gemeinsamen Elternelementes im Text direkt hintereinander.
• Indirekte Nachbarn: Die Elemente stehen zwar auf einer Ebene, aber im Text stehen noch andere Elemente dazwischen.

Das sind insgesamt sechs Kombinationstypen und durch die arbeiten wir uns jetzt durch.

Selektor-Verbund

Auf Englisch heißt er Compount Selector. Es ist ein nahtloses Zusammenfügen mehrerer Selektoren, die am Ende einen Einzigen bilden. Eine wesentliche Bedingung ist, dass ein Element-Selektor in so einem Verbund nur einmal vorkommen darf und dann am Anfang im Verbund stehen muss. Danach können beliebige andere Selektoren folgen.

Der folgende Selektor markiert Elemente vom Typ definition term, die in der Klasse wichtig sind und macht sie rot.

CSS

Der folgende Selektor markiert ein div Element, wenn es die ID super-div hat und das Attribut lang="de" gesetzt ist.

CSS

Beide Beispiel fangen mit einem Element an und werden dann mit anderen Selektoren vervollständigt.

Die einzelnen Teile im Verbund müssen nahtlos, ohne Leerzeichen, hintereinander stehen.

Ein Verbund-Selektor ist logisch gesehen eine und Verknüpfung. Also: Trifft einer der Teile nicht zu, so wird nichts selektiert.

Selektor-Liste

Mehrere Selektoren können als Liste hintereinander geschrieben werden. Danach erfolgt einmalig die Definition der Eigenschaften, die auf alle in der Liste festgelegten Ziele angewendet werden sollen.

Das sieht formal dann so aus:

Die einzelnen Elemente der Liste werden durch Kommata getrennt.

Hinter dem letzten Element darf kein Komma stehen.

Bei der Selektor-Liste handelt es sich logisch um eine oder Verknüpfung. Es werden alle Elemente markiert, für die zumindest einer der Selektoren in der Liste greift.

Jedes Element der Liste kann ein einfacher Selektor, ein Verbund-Selektor oder eine Kombination von Selektoren sein.

Ahnenfolge: Hierarchische Kombinationen

Direkt

Ein Element steht in der Hierarchie direkt unterhalb eines anderen Elementes.

Hierarchisch können zwei Elemente direkt in Beziehung stehen. Das eine Element ist ein direktes Unterelement des Anderen und genau eine Ebene tiefer angesiedelt.

Das Zeichen für diese Kombination ist das Größer-Zeichen >.

CSS

Dieser Selektor führt bei einem HTML, dass ungefähr so aussieht

HTML

dazu, dass der Text rot ist.

Indirekt

Hierarchisch können zwei Elemente auch indirekt in Beziehung stehen. Ein Element ist irgendwo in der Hierarchie ein Unterelement des Anderen.

Das Zeichen für diese Kombination ist das Leerzeichen " ".

CSS

Dieser Selektor führt bei dem gleichen HTML wie oben zu dem gleichen Ergebnis: der Text ist rot.

Allerdings greift dieser Selektor auch, wenn sich der Paragraf weiter unten in der Hierarchie befindet.

HTML

Auch hier wird der Text rot.

Vergleich von direkt und indirekt

Zum Vergleich nehmen wir folgendes HTML:

HTML

Im ersten Fall, direkter Nachkomme, wird der Text1 rot geschrieben, Text2 bleibt schwarz. Im zweiten Fall, beliebige Nachkommen, werden beider Texte, Text1 und Text2 rot geschrieben.

Will man bei dem gegebenen HTML nur den Text innerhalb des Artikels (Text2) rot haben, kann man folgendermaßen formulieren:

CSS

Gelesen: Ich suche einen Paragrafen, der ein direktes Unterelement eines article ist, der wiederum ein direktes Unterelement einer section ist.

Man sollte eine Selektor Kombination von rechts nach links, also von hinten, lesen. Ganz hinten steht der Selektor, um den es eigentlich geht. Auf dessen Ziel sollen die Eigenschaften angewendet werden.
Davor kommen - sozusagen rückwärts kaskadierend - nacheinander weitere Selektoren, die als Einschränkung dienen.

Geschwister: Kombinationen in einer Ebenen

Direkt

Ein Element steht auf derselben Ebene direkt hinter einem anderen Element.

Wenn unterhalb ein und desselben Elementes 2 Elemente direkt hintereinander stehen, kann diese Beziehung mit dem Plus-Zeichen + angesprochen werden.

CSS

Dieser Selektor führt bei einem HTML, dass ungefähr so aussieht

CSS

dazu, dass der Absatz direkt unterhalb des Bildes rot ist.

Indirekt

Ein Element steht auf derselben Ebene irgendwo hinter einem anderen Element.

Wenn unterhalb ein und desselben Elementes Elemente nicht direkt hintereinander stehen, kann diese Beziehung mit dem Tilde-Zeichen ~angesprochen werden.

CSS

Dieser Selektor führt bei einem HTML, dass ungefähr so aussieht

HTML

dazu, dass der Absatz mit "Bildunterschrift" rot dargestellt wird, obwohl dazwischen noch ein q Element mit einem Zitat steht.

Diese Eigenschaften - engl. properties - des HTML-Teils haben selber wieder Eigenschaften. Klingt schick: Eigenschaften von Eigenschaften, ist aber so.

Einige grundsätzliche Eigenschaften von CSS-Eigenschaften.

• CSS-Eigenschaften haben einen Namen. Der Name ist zusammen mit anderen Infos in der Spezifikation festgelegt.
• CSS-Eigenschaften haben einen initial value. Der initiale Wert ist in der Spezifikation festgelegt.
• CSS-Eigenschaften haben einen geerbten Wert. Das ist der Wert, den die Eigenschaft im Eltern-Element hat.
• CSS-Eigenschaften haben immer einen aktuellen Wert. Das ist, wenn es ihn gibt, ein direkt zugewiesener Wert. Wenn es den nicht gibt, ist es der geerbte Wert und wenn es den auch nicht gibt, ist es der initiale Wert.
• Einer CSS-Eigenschaft können nur Werte aus einem bestimmten Wertebereich zugewiesen werden. Die Wertebereiche sind in der Spezifikation festgelegt.
• Jede CSS-Eigenschaften hat entweder die Eigenschaft, vererbbar zu sein oder die Eigenschaft, nicht vererbbar zu sein.

Nicht nur von der Menge her, sondern auch in Bezug auf Vielfalt sind CSS Eigenschaften in der Welt der Software ziemlich herausragend. Das liegt in der Natur der Sache: Mit CSS Eigenschaften soll das Format von beliebigen Ausschnitten eines HTML Dokumentes beschrieben werden. Dabei kann es sich um Text, um Rahmen, um Bilder, um Buttons, um Linien oder eine Kombination von Allem handeln.

Mit CSS Eigenschaften müssen alle Aspekte der Darstellung eines solchen Teils eingefangen werden können. Vollständig und widerspruchsfrei.

Auf einer Webseite hat ein Text eine Vordergrundfarbe und eine Hintergrundfarbe. Er hat eine Schriftart und eine Schriftgröße, einen Abstand der Buchstaben zueinander, einen Abstand zu anderen Elementen, die oben, links, rechts oder darunter stehen, ist fett oder normal oder Kursiv gedruckt oder in Kapitälchen oder in allem zusammen, kann umgebrochen werden (oder auch nicht), kann mit der Maus ausgewählt werden (oder auch nicht), soll immer sichtbar sein oder nur bei Bedarf, kann ... Mehr fällt mir heute Abend nicht ein.

Damit ein Browser "Hallo Tach" auf den Bildschirm schreiben kann, muss er alle diese Eigenschaften irgendwie umsetzen.

Darüber hinaus braucht der Browser weitere Informationen. Wo soll der Text stehen? Steht er im normalen Textfluss oder ist er Bestandteil eine Menüs, ist er evtl. ein Randbemerkung, soll er an einer bestimmten Stelle der Seite verankert sein oder sich immer in einem festen Abstand zu einem anderen Element befinden.

Ein Riesen-Kuddelmuddel ist das, durch das sich ein Browser durchwühlen muss, wenn er etwas so simples, wie "Hallo Tach" auf den Bildschirm bringen soll.

Das Kuddelmuddel - und der Weg dadurch - wird durch CSS Eigenschaften bestimmt, deren Werte vorgegeben sind, aber durch Autoren umdefiniert werden können.

Bei der Vielfalt der Eigenschaften ist der Versuch einer Einteilung oder Klassenbildung ein sportliches Unterfangen.

Sehr grob ist eine Einteilung in

1. Eigenschaften, die das Aussehen von Elementen bestimmen und
2. Eigenschaften, die die Positionierung von Elementen bestimmen

sinnvoll und hilfreich. Hilfreich auch dann, wenn sich diese Einteilung in der Literatur nicht präzise wiederfindet.

Eigenschaften wie Schriftgrad, Vorder- oder Hintergrundfarbe gehören eindeutig in die Kategorie 1, dagegen gehören Abstand zu umgebenden Elementen, absolute Positionierung im Bildschirm, Darstellung innerhalb der Zeile oder als eigener Block zu Kategorie 2.

Der Haken ist, dass man die Einteilung nicht komplett und sauber durchziehen kann. Eine größere Schrift vergrößert ein Element, eine Kleinere verkleinert es. Rahmen, Schatten etc. vergrößern das Element nach außen, verdrängen also andere Elemente. Auf der anderen Seite wird die Positionierung von Elementen dadurch erreicht, dass man sie innerhalb des umgebenden Elementes anordnet, also dessen Aussehen anpasst.

Aus technischer Sicht verschmiert die Trennung daher.

Aus Autorensicht sind "Wie soll das Ding aussehen?" und "Wo soll das Ding stehen?" aber durchaus zwei getrennte Fragen.

Box Größenberechnung

Für Autoren ist es hilfreich, die Größenberechnung des Browsers zu beeinflussen. Die Größenberechnung wird vom Browser verwendet, um die Elemente auf der Seite anzuordnen.

Normalerweise wird für diese Berechnung der Inhalt der Elemente zugrunde gelegt. Das führt dazu, dass eine Box, die laut Inhalt die Dimensionen 10*10 hat, plötzlich 12*12 Pixel groß ist, wenn man ihr einen 2px Rahmen gibt.

Man kann den Browser aber anweisen, sich am äußeren Umfang zu orientieren.

Box Berechnung normalisieren.

Nach dieser Anweisung werden Dekorationen aller Elemente innerhalb der Box des Elements gezeichnet. Ein Element mit 10*10 bleibt 10*10, auch wenn es einen 2px Rahmen bekommt. Was man allerdings im Auge behalten muss, ist, dass der Platz nach innen beschränkt ist. Im Normalzustand - box-sizing: content-box - kann man ein Element der Größe 10*10 und einem Rahmen der Dicke 12 basteln. Das sieht zwar bescheuert aus, man kann es aber machen. Im Zustand box-sizing: border-box geht das gar nicht.

Tip * { box-sizing: border-box; } in jedes CSS Skript als erste Zeile einbauen. Sonst hat man Trauer.

Da HTML Dokumente vorwiegend Text enthalten, stehen die normalerweise am häufigsten gebrauchten Eigenschaften im Zusammenhang mit Text.

color

Vordergrund Farbe.

Grüner Text in allen Absätzen.

p { color: green; }

background-color

Hintergrundfarbe eines Elementes. In vielen Fällen - aber nicht 99% - ist es die Hintergrundfarbe für Text und korrespondiert mit ihr.
Es kann aber auch der Hintergrund für die gesamte Seite sein, oder für ein Bild, oder ...

Hellgrüner Hintergrund für die ganze Seite.

html { backgrund-color: lightgreen; }

Zusammen mit color: green ist das eine ganz schlechte Wahl.

border

Definiert einen Rahmen um ein Element. border ist eine Kurzschrift-Eigenschaft und wird durch drei Werte definiert: Dicke des Rahmens, Art der Linie, Farbe der Linie.
Kann mit -top, -bottom, -left, -right für die einzelnen Seiten spezialisiert werden.

Dünner schwarzer Rahmen mit durchgezogenen Linien um alle Zitate.

blockquote { border: 1px solid black; }

font-size

Definiert die Größe der Buchstaben.

Starke Hervorhebung soll doppelt so groß wie die Umgebung sein.

strong { font-size: 2em; }

margin

Definiert den Abstand des Rands des Elementes zum Rest der Welt.
Kann mit -top, -bottom, -left, -right für die einzelnen Seiten spezialisiert werden.

Paragrafen sollen eine halbe Buchstabengröße Abstand zum nächsten Element haben.

p { margin: 0.5em; }

padding

Definiert den Abstand des Inhalts zum Rand des Elementes.
Kann mit -top, -bottom, -left, -right für die einzelnen Seiten spezialisiert werden.

Der Text in Buttons soll rundherum 2 Pixel Abstand zum inneren Rand haben.

button { padding: 2px; }

display

Art der Darstellung. Diese Eigenschaft ist ultra-mächtig, ultra-wichtig und in ihrer Implementierung für Autoren erklärungsbedürftig. Sie sollte gut verstanden werden.

Navigations-Menü erst mal nicht anzeigen.

nav { display: none; }

Navigations-Menü in der Zeile anzeigen.

nav { display: inline; }

Navigations-Menü als eigenen Block anzeigen.

nav { display: block; }

width

Definiert die Breite eines Elementes.

Der Inhalt der Seite soll 80% der Bildschirmbreite betragen.

body { width: 80%; }

Der Bruder von width ist height und funktioniert im Prinzip genauso, wird bloß viel weniger gebraucht.

max-width, min-width

Definiert die maximale und minimale Breite eines Elementes.

Der Inhalt des div soll zwischen 50% und 80% der Breite des umgebenden Elementes liegen.

div { max-width: 80%; max-width: 50%;}

Dass in diesem Beispiel beide Angaben in einer Anweisung zusammen auftauchen, heißt nicht, dass sie nicht auch alleine stehen können.

Auch hier gibt es die Entsprechungen für die Höhe, die viel weniger gebraucht werden.

display: flex

Die Ausprägung flex für die Eigenschaft display führt dazu, dass das damit ausgestattete Element zu einem sog. flex-container wird. Jedes in diesem Container enthaltene Element, wird zu einem sog. flex-item. Die Flex-Items innerhalb eines Flex-Containers werden als Block-Elemente gleicher Höhe nebeneinander positioniert. Die genaue Ausrichtung kann zwar mit weiteren Eigenschaften genauer bestimmt werden, aber eine vernünftige Ausrichtung und Verteilung nimmt der Browser schon von sich aus vor.

Einschalten des flex Layout für ein Element.

div { display: flex; }

Direkte Unterelemente des div sind automatisch Flex-Items

display: grid

Einschalten des grid Layout für ein Element.

div { display: grid; }

position

position ist ein wirklich nerviges Konstrukt, man braucht es allerdings manchmal. Zum Glück braucht man es selten.

position nimmt ein Element aus dem normalen Bildschirmaufbau heraus und positioniert es irgendwo.

Wer gerade keine Pop-Up Fenster, Sprechblasen oder Drop-Down Menüs basteln möchte, kann sich das ganze Thema position durchaus für später aufheben.

Die position Eigenschaft mit ihren Werten.

selector { position: static|relative|absolut|fixed|sticky; }

Elemente, die mit position markiert wurden, brauchen zusätzlich noch die Eigenschaften top, bottom, right und left um eine Auswirkung zu haben. Das gilt nicht für static.

position: static

Jedes Element ist von Natur aus statisch positioniert, d.h. in den normalen Textfluss eingebunden. Diese Form von position braucht man nur, um eine evtl. existierende Positionierung aufzuheben.

position: relative

Positioniert ein Element relativ zu der Position, die es im normalen Textfluss einnehmen würde.

position: absolut

Positioniert ein Element relativ zu dem ersten übergeordneten Element, das eine position: Eigenschaft ungleich static hat.

position: sticky

Positioniert ein Elemnt im normalen Textfluss bis es an den oberen oder unteren Bildschirmrand verschoben wird. Dort bleibt es dann hängen. Damit wird erreicht, das "sticky" Elemente immer sichtbar sind.

position: fixed

Positioniert ein Element relativ zum sichtbaren Fenster, dem "viewport".

Mit display: flex oder display: grid lassen sich Anforderungen einfach erledigen, die nur mit irrsinnig viel Aufwand über float, position oder gar table umzusetzen sind.

Niemals, das HTML Element table verwenden, um ein passendes Layout zu erzeugen. Wer das tut, ist im wahrsten Sinne des Wortes von Gestern.

Größenangaben werden mit numerischen Werten dargestellt. Dazu gehören Breite und Höhe von Boxen, Größe von Buchstaben, Dicke von Linien etc.

Bei diesen Angaben ist es notwendig, die Maßeinheit mitzuliefern, auf die sich die Zahlen beziehen. Die Maßeinheit bestimmt auch, ob es sich um eine relative oder absolute Angabe handelt.

absolute Maße

Absolute Maße sind z.B. Zentimeter, Zoll oder Pixel. Wer sich hier wundert: Ja, eine Buchstabenbreite kann in Zentimetern angegeben werden, oder auch in Zoll. Ob das Sinn macht, ist eine andere Frage.

Bei der Verwendung von absoluten Werten ist generell Vorsicht geboten: Eine absolute Größenangabe verursacht, dass das betroffene Element immer gleich groß ist, egal, auf welchem Medium das Dokument angezeigt wird und egal, wie die Umgebung des Elementes aussieht.

Wenn ich finde, dass auf meinem 1080er Bildschirm mein eigenes Porträt bei 10 cm Breite super proportioniert ist, so wird ein Handybenutzer genervt weiterblättern, weil nur ein paar Barthaare zu sehen sind, die weder sie noch er besonders prickelnd finden, und jemand vor einem 30 Zoll Monitor muss sich auf die optische Suche machen, um das Ding überhaupt zu finden.

Die menschlichen Maßeinheiten wie cm oder in werden selten benutzt, und wenn, dann für Druckausgaben.

Die Benutzung des Maßes px für Pixel ist heiß umstritten. Das mag u.a. daran liegen, dass nicht sauber definiert ist, was ein Pixel überhaupt ist. Der Standard definiert einen CSS-Pixel als kleinster Punkt, den man auf einem normalen Bildschirm bei Armlänge Abstand noch erkennen kann. Super.

Ich selber benutze manchmal Pixel. Aus Faulheit. Und wo es sicher ist. Wenn ich einen dünnen Rand haben möchte oder einen super simplen Rahmen zeichnen will.

Verwerfliche Benutzung von Pixeln.

Dieser Code liefert mir einen sehr simplen Rahmen mit dünner, durchgezogener, schwarzer Linie. Und ich muss nicht weiter nachdenken.

Für diese Verwendung - wie gesagt aus Faulheit oder dummer Angewohnheit - werde ich laut Vergessen Sie Pixel bei selfhtml wahrscheinlich ein paar Jahre im digitalen Fegefeuer zubringen müssen.

Ansonsten - ich schwöre - benutze ich keine Maßeinheiten aus dem absoluten Spektrum. (Und diese eine werde ich mir nach genauer Lektüre des o.g. Artikels auch abgewöhnen.)

relative Maße

Relative Maße sind aus einem sehr einfachen Grund in 99,9% der Fälle die ideale Wahl:

Wenn man eine Webseite baut, weiß man nicht, auf welchem Medium sie angesehen wird.

Das ist komplett anders, als Layout, bei dem vielleicht ein Buch herauskommt oder ein Katalog.

Leser von Webseiten können sich entscheiden, wie sie die Seiten ansehen wollen. Sie können sie auf einem Smartphone ansehen, auf einem Tablet, auf dem PC oder auf einer Riesenleinwand. Sie können das Browser-Fenster groß machen oder klein. Sie können auch im Vollbildmodus arbeiten.

Nichts davon kann ich als Autor beeinflussen oder vorhersehen.

Dafür gibt es die relativen Werte.!

Übersicht bei Selfhtml: Relative Längenmaße

Buchstabengröße

Die wohl wichtigste und sehr, sehr häufig benutzte, relative Maßeinheit ist em und ihre Schwester rem.

Über die Bedeutung des Kürzels em schweigt sich die offizielle Literatur aus, aber inoffiziell ist em die Aussprache des Buchstabens M. M ist der größte (breiteste und höchste) Buchstabe im lateinischen Alphabet. Wenn also etwas ein em groß sein soll, dann ist dieses Etwas so hoch und so breit wie der Buchstabe M im gegebenen Kontext.

Man kann em und rem für alles Mögliche benutzen, hier ein paar Beispiele.

Randbemerkungen kleiner darstellen, als den eigentlichen Text.

Niedrige Überschriften so groß machen, wie das umgebende Element.)

Lesebreite eines Artikels beschränken.

Der Unterschied zwischen em und rem ist der Bezug. em bezieht sich auf die Buchstabenbreite des umgebenden Elementes, rem auf die Buchstabenbreite des root Elementes.

Das ist wichtig. Die Buchstabenbreite des root Elementes wird beim Laden des Dokumentes durch den Browser gesetzt und bietet daher einen - bezogen auf das Dokument - konstanten Ausgangspunkt. Der Einsatz von rem oder em hängt von der Intention ab: Will ich etwas im Vergleich zu der direkten Umgebung bestimmen, nehme ich em. Will ich etwas im ganzen Dokument absolut verändern, nehme ich rem.

In den Beispielen ist das aside etwas kleiner geschrieben, als der normale Text drum herum. Eine Überschrift h5 würde in der Randbemerkung entsprechend auch etwas kleiner sein, als eine gleiche Überschrift im umgebenden Text. Im Gegensatz dazu beträgt die maximale Breite eines Artikels aber überall 70 normale Zeichen, egal wo der Artikel im DOM aufgehängt ist, wenn man den CSS Schnipsel im Beispiel verwendet.

Prozente des umgebenden Elementes

Eine weitere häufig benutzte Maßeinheit sind Prozentwerte. Sie werden mit dem Zeichen % markiert und beziehen sich immer auf die Größe des umgebenden Elementes.

Die Angabe einer Größe in Prozent hat recht viel Charme, weil sie einfach ist und irgendwie auch intuitiv. Sie hat allerdings auch den Nachteil, dass die Angaben kaskadieren und dann merkwürdige Ergebnisse herauskommen, wenn man den Selektor nicht sorgfältig gewählt hat.

Prozentangaben mit unklarem Ausgang.

Wenn ich damit die Breite von Artikeln und Sektionen, die auf derselben Ebene liegen, auf einen bestimmten Prozentsatz des Bildschirms festnageln will, dann ist das schön und gut. Wenn Sektionen und Artikel aus irgendeinem Grund ineinander geschachtelt sind, weil man z.B. einen Artikel in mehrere Sektionen aufteilen möchte, kommt nicht das dabei heraus, was man vielleicht erwartet. Eine Sektion in einem Artikel nimmt 70% der Breite des Artikels ein, welcher selber aber schon auf 70% der Breite des übergeordneten Elements geschrumpft ist.

Prozente des viewports

Wenn es um das grobe Layout der Seite geht und man der Kaskadierung entgehen möchte, bietet CSS Maßangaben, die sich in Prozent auf den viewport beziehen.

CSS stellt dafür folgende Maßeinheiten bereit:

• vh (viewport height)
  1vh = 1 Prozent der Höhe des sichtbaren Browserfensters.
• vw (viewport width)
  1vh = 1 Prozent der Breite des sichtbaren Browserfensters.
• vmin
  1vmin = 1 Prozent der Breite oder Höhe des sichtbaren Browserfensters, je nachdem was kleiner ist.
• vmax
  1vmax = 1 Prozent der Breite oder Höhe des sichtbaren Browserfensters, je nachdem was größer ist.

RGB

Die gängigste Maßeinheit zur Beschreibung von Farben sind sog. RGB-Werte. RGB steht für RotGrünBlau. Dabei wird eine Farbe aus den Grundfarben rot, grün und blau zusammengesetzt und das Ergebnis wird dadurch definiert, wie stark eine Grundfarbe im Gesamtpaket vertreten ist.

Ein RGB Wert von 0,0,0 ergibt insgesamt weiß, ein Wert von 255,255,255 ergibt schwarz, 255,0,0 ist knallrot, 0,255,0 ist grün und 0,0,255 ist blau.

Die RGB Maße gibt es nicht nur im Zusammenhang mit CSS. Sie sind der am weitesten verbreitete Standard, um in der digitalen Welt Farben zu definieren. RGB wird von jedem Grafikprogramm verstanden.

RGB Farben lassen sich in CSS auf zwei verschiedene Arte eingeben:

1. Als Funktion. Selektor { color: rgb(255, 255, 255); }
2. Als gepackte Zahlenkombination mit drei hexadezimalen Komponenten. Selektor { color: #ffffff; }

Beides ergibt schwarz.

Das RGB System ist weit verbreitet und man kann Farben aus anderen Systemen übernehmen. Das ist ein echter Vorteil.

Durch einen simplen Trick hat man die Möglichkeit, zwischen 254 Grautönen zu wählen. Immer dann, wenn drei gleiche RGB Werte angegeben sind, kommt dabei etwas Graues heraus. Je höher die Werte, desto dunkler das Grau. Wer seine Webseiten für Menschen mit Sehbehinderung oder mit schwachen Endgeräten gut lesbar machen will, wird nicht drum herum kommen, wesentliche farbliche Unterschiede in Grautönen darzustellen.

Dass das System außerdem ein riesiges Farbspektrum bietet, ist natürlich toll. Aber diese Medaille muss man auch von der anderen Seite sehen: 1) Kein physisches Gerät kann 16,77 Mio Farben wirklich abbilden. 2) Wenn es zum show down kommt, muss man sich für eine Farbe entscheiden. Ob das bei 16 Mio einfacher ist, als bei 140, ist die Frage.

HSL

Ein komplett anderer Ansatz sind HSL Maße. HSL steht für Hue, Saturation, Lightness, auf Deutsch: Farbton, Sättigung, Helligkeit.

Ein Grafik-Profi wird in dem HSL Ansatz weitere interessante Möglichkeiten finden, sich auszudrücken. Hier wird er nur erwähnt.

Farbnamen

Der für Nicht-Grafiker wahrscheinlich zugänglichste Ansatz ist die Benennung von Farben über vordefinierte Namen.

Bei dieser Maßeinheit kann man, wenn etwas grün sein soll, schreiben p { color: green; } und der Text ist grün.

Kling gut, oder? Ja! Diese Maßeinheit ist die erste Wahl für jeden, der Grafik einbinden und benutzen möchte, sich aber nicht sehr gut damit auskennt.

Die Vorteile bei der Verwendung von Farbnamen:

• Es gibt eine große Anzahl vordefinierter Farben.
• Die Angaben sind explizit: Jeder sieht im Text, was eine Farbangabe bedeutet.
• Ausprobieren ist einfacher.
• Es sind wenig Grafik-Kenntnisse erforderlich.
• Laien erleben weniger - unangenehme - Überraschungen.
• Wenn man mit der 80/20 Regel operiert, kommt man mit den Namen sehr weit.

Es gibt auch ein paar Nachteile.

• Die Farbnamen, sind - wie das ganze CSS - gewachsen. Wenn man einen brauchte, wurde einer gemacht.
• Die Liste der Namen deckt nicht alle Farben ab.
  Über die HSL Maßeinheit lassen sich 360 Farbtöne ansprechen, über RGB sogar ca. 16 Millionen. An Farbnamen gibt es aber nur ca. 140.
• Die Namen sind manchmal nicht nachvollziehbar, grey ist z.B. dunkler als darkgrey

Die meisten CSS-Eigenschaften beziehen sich auf Dimensionen und Farben.

Länge, Breite, Dicke, Abstand, Rand etc. sind quantitative Eigenschaften, die sich auf die eine oder andere Art in Zahlen ausdrücken lassen.

Auch Farben sind letztendlich Zahlenwerte, Zahlenkombinationen, da man mit einfachen Zahlen nicht weit kommt. Aber hinter allen Modellen, Farben zu definieren, befinden sich am Ende Zahlen.

Schlüsselworte für Zahlen und Farben

Für manche Zahlenwerte und Farben gibt es Schlüsselworte. Dahinter verbergen sich allerdings dann wieder nur die Zahlen. Tja.

Beispiele für Farben sind white, black, blue etc.

Beispiele für Dimensionen sind thin, medium, bold

Wenn es für Werte symbolische Schreibweisen gibt, sollte man sie nutzen. Das hat zwei Vorteile:

1. Der Autor muss nicht rechnen.
   Meist sind es sogenannte Mnemnoniks, Begriffe, die eine Zahl auf den Punkt bringen.
2. Der Browser hat die Freiheit, sie sinnvoll zu interpretieren. (Das gilt nicht für Farbwerte, die sind definiert.)
   

Schlüsselworte für Vererbung

initial

Setzt den Wert der Eigenschaft auf den Standardwert. Das ist der Wert der CSS Spezifikation.

inherit

Setzt den Wert der Eigenschaft auf den geerbten Wert. Bei Eigenschaften, deren Werte normalerweise nicht vererbt werden, wird die Vererbung in Gang gesetzt.

unset

Eine oder Kombination von initial und inherit. Bei vererbbaren Eigenschaften greift inherit, bei nicht vererbbaren Eigenschaften greift initial. Die Zwangsvererbung von inherit wird umgangen.

revert

Setzt den Wert der Eigenschaft auf das, was eine Stufe höher in der Kaskade definiert wurde. In der Praxis heißt das, dass der Wert aus dem Browser- oder User-Stylesheet genommen wird. Es ist also ein sanftes Zurücksetzen und berücksichtigt, was der Leser gewohnt ist.

Schlüsselworte für Qualitäten

Es gibt eine Menge Eigenschaften, die nicht wirklich quantifizierbar sind und entsprechend auch nicht durch Zahlen ausgedrückt werden können. Die Werte dieser Eigenschaften orientieren sich daher auch nicht an einer Maßeinheit.

Beispiele sind strong, italics, dotted

Bei der Umsetzung dieser qualitativen Angaben haben die Browser einen relativ großen Interpretationsspielraum.

Grundsätzlich gilt: Je näher eine CSS Anweisung an ihrem Ziel ist, desto wahrscheinlicher wird sie berücksichtigt.

Wenn man technische und wissenschaftliche Korrektheit außer Acht lässt, stellt sich die Situation so dar:

Es gibt die physische und es gibt die logische Nähe einer CSS Regel zu ihrem Ziel.

physische Nähe

Die physische Nähe wird definiert durch die Kaskade und die Abfolge der CSS Statement innerhalb eines Dokumentes. Damit ist an sich nichts anderes gemeint als die Reihenfolge, in der der Browser CSS Statements abarbeitet.

Diese Reihenfolge sieht so aus:

1. Browser-Stylesheet. Basis-Stylesheet, das mit jedem Browser mitgeliefert wird.
2. Anwender-Stylesheet. Einstellungen von Farbe, Design etc., die vom Anwender im Browser vorgenommen werden können.
3. Autoren-Stylesheets. Stylsheets, die in einer HTML Seite eingebettet sind oder eingelesen werden. (Darüber reden wir hier.)
4. Element-Styles. Einstellungen, die über das style Attribut eines Elementes gesetzt werden.

logische Nähe

Die logische Nähe wird definiert durch die Präzision, mit der ein Selektor sein Ziel beschreibt. Diese "logische" Nähe wird auch Selektivität genannt.

Beispiel:

Ein Paragraf hat grundsätzlich schwarze Schrift.

Paragrafen, die in einem Artikel stehen, sind blau.

Reihenfolge

1. Für die physische Nähe gilt: Der Letzte gewinnt.
2. Für die logische Nähe gilt: Der Genaueste gewinnt.
3. Für beide zusammen gilt: Der logisch Genaueste gewinnt vor dem physisch Letzten.
4. Bei zwei logisch gleich genauen Regeln gilt Regel 1.

Es gibt eine Besonderheit: Die Bestimmung von Styles im Attribut eines HTML Elementes. Diese Bestimmung ist nicht nur die mit der größten physischen Nähe, sondern gleichzeitig auch die mit der größten logischen Nähe, der höchsten Selektivität.

Definition von Styles als Attribut im HTML Dokument

Der Text: "Hallo Tach" wird grün ausgegeben. Diese Tatsache spielt bei der Definition von Styles per JavaScript eine Rolle.