Cascading Style Sheets (kurz CSS), ist eine deklarative Sprache für Stilvorlagen, die auf strukturierte Dokumente angewendet werden. Sie wird vor allem zusammen mit HTML und XML (zum Beispiel bei XHTML und SVG) eingesetzt. CSS legt dabei fest, wie ein zur geeignet strukturierter Inhalt dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Dokumentfragmente, deren Aussehen gleich sein soll, auch als Gruppe selektiert werden können, beziehungsweise jene Fragmente eindeutig selektierbar sein müssen, die ein abweichendes Aussehen bekommen sollen. Man zeichnet im Dokument also die Bedeutung einzelner Fragmente aus, während das Aussehen dieser Fragmente mit CSS festgelegt wird. Per CSS werden die Fragmente dann gezielt selektiert, um ihnen eine bestimmte Darstellung zuzuweisen.
Um ein (X)HTML-Dokument abweichend von dem zu gestalten, wie es ein Darstellungsprogramm darstellen würde, benötigt man CSS. Zwar ist es ebenfalls mit einigen älteren Versionen von HTML möglich, Farben, verschiedene Schriftarten, Hintergrundbilder und ähnliches zu verwenden. Diese Verwendung von (X)HTML für Visualisierungszwecke befindet sich aber seit einigen Jahren auf dem Rückzug: Die Trennung zwischen Inhalt ((X)HTML) und Darstellung (CSS) wurde seit etwa 1997 mit der Einführung von HTML 4 und CSS 1 (Ende 1996) stärker betont. Grund für die strikte Trennung zwischen Inhalt und Darstellung ist primär die Nutzbarkeit der Inhalte unabhängig von der konkreten Darstellung für alle interessierten Nutzer, gleich welche Ausgabegeräte sie nutzen oder welche persönlichen Besonderheiten sie aufweisen mögen. CSS ermöglicht es demzufolge auch konsequenter Weise Nutzern, selbst Stilvorlagen bereitzustellen, um die Darstellung der Inhalte für die eigenen Bedürfnisse optimal aufzubereiten. Ein weiterer wichtiger Grund der strikten Trennung von Inhalt und Darstellung betrifft mehr die Autoren, denn durch die Trennung ist es deutlich einfacher, sowohl den Inhalt als auch die Darstellung zu verwalten und im Bedarfsfalle das eine unabhängig vom anderen in übersichtlicher Weise und einfach zu ändern. Neuere Versionen von XHTML insbesondere verzichten weitgehend auf sogenannte Präsentationsattribute, welche insbesondere die visuelle Darstellung beeinflussen.
Cascading Style Sheets sind eine wichtige Entwicklung im Zuge der Bemühungen um Dokumente mit einer Struktur, die die semantische Bedeutung der Inhalte wiederzugeben vermögen, da es bei konsequenter Anwendung die komplette Trennung von Inhalten und Aussehen ermöglicht.
Aufgebrochen wird die Trennung von Inhalt und Präsentation wiederum stärker mit der in Arbeit befindlichem Version HTML 5, wo allerdings eher auf java-script gesetzt wird, um die Trennung zwischen Inhalt und Präsentation wieder unschärfer zu gestalten. Auch in Arbeit befindliche neue Module von CSS verwischen teilweise wieder stärker die Trennung zwischen Inhalt und Darstellung, beziehungsweise erleichtern es Autoren, eine solche Mischung selbst vorzunehmen. Gleichzeitig bietet der Entwurf zu HTML 5 allerdings zahlreiche neue Elemente mit semantischer, inhaltlicher Bedeutung. Die Situation ist also ambivalent: Der Autor hat es damit stärker selbst in der Hand, Dokumente entweder besser verständlich und zugänglich zu gestalten oder dies auch gezielt zu unterbinden. Dieser Trend zur möglichen Mischung folgt zwar den Gewohnheiten einer größeren Zahl von Autoren, hat aber wiederum Folgen für die Zugänglichkeit zu Inhalten für alle interessierten Nutzer. Auch in diesem Zusammenhang lohnt es sich also, CSS gut zu beherrschen, um auch in Zukunft (X)HTML so nutzen zu können, dass Inhalte für alle zugänglich angeboten werden und diese nicht durch den mißbräuchlichen Einsatz von CSS oder java-script unzugänglich zu machen. Unzugänglich für einige Nutzergruppen werden Dokumente unter anderem dann, wenn sich erst durch die Präsentation mit Interpretation von CSS und java-script der vom Autor beabsichtigte Sinn des Inhaltes ergibt und nicht unabhängig davon. Die strikte Trennung zwischen Inhalt und Dekoration wiederum ist der primäre Schritt, um Inhalte zugänglich anzubieten.
Bei einem Graphikformat wie SVG wiederum ist anders als bei einem Textformat wie (X)HTML eine Trennung zwischen Inhalt und Präsentation nicht einfach scharf durch Trennung in verschiedene Sprachen zu ziehen, weswegen hier der Autor selbst entscheiden muß, was inhaltlich relevant ist und was nur Dekoration ist, ersteres wird dann wieder mit Attributen und Präsentationsattributen angegeben, letzteres mit Stilvorlagen in CSS. Dabei verwendet SVG teilweise eigene, speziell auf graphische Bedürfnisse zugeschnittene Eigenschaften, die in diesem Buch nicht erläutert werden. Andere Eigenschaften von CSS sind hingegen allgemein verwendbar, so auch in SVG. Nur wenige Konstruktionen sind speziell für (X)HTML ausgelegt, die Sprache eignet sich somit auch insbesondere für andere XML-Formate, die vorrangig der Auszeichnung von Text dienen.
Die Verwendung von CSS bietet zudem eine Reihe von weiteren Vorteilen. Zum Beispiel erleichtert es CSS, ein aus vielen Dokumenten bestehendes Projekt einheitlich zu gestalten. Die gemeinsame Stilvorlage für alle Dokumente wird in diesem Fall in einer separaten CSS-Datei notiert und die Dokumente enthalten keine klassischen Formatierungsanweisungen mehr, sondern nur noch Informationen, welche die korrekte Verknüpfung mit der CSS-Datei sicherstellen. Auf diese Weise ist es möglich, das Layout in einer zentralen CSS-Datei nachträglich zu verändern oder verfeinern, ohne in jedem einzelnen Dokument Änderungen vornehmen zu müssen.
Für die professionelle Gestaltung von Dokumenten und großen Projekten noch wichtiger ist der folgende Punkt: CSS ermöglicht es auch, die Darstellung dem jeweiligen Ausgabegerät oder dem Ausgabemedium (zum Beispiel Ausdrucke, Projektion, Sprache und so weiter) entsprechend anzupassen. Das ist nützlich, um zum Beispiel Verweisziele beim Drucken extra aufzuführen oder um für ein Anzeigemedium wie einen Persönlichen Assistenten oder ein Mobiltelephon mit kleinem Bildschirm die Anzeige zu optimieren.
Neben diversen Fähigkeiten im Farb- und Schriftbereich bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen.
CSS gilt heutzutage als die bevorzugte Stilvorlagensprache für (X)HTML-Dokumente und weitere XML-Formate. Das ebenfalls empfohlene XSL(T), welches auf XML basiert, wird dagegen eher für komplexere Transformationen von Dokumenten verwendet und geht damit noch weit über die Möglichkeiten von CSS hinaus, kann damit auch gravierender den Inhalt manipulieren, nicht nur die Darstellung.
Um CSS zu verwenden, sind keine speziellen Programme nötig. Man kann eine Stilvorlage mit jedem beliebigen Texteditor erstellen (zum Beispiel auch den Notepad unter Windows oder vi unter Linux/Unix) und es dann anschließend darauf in den gewünschten Dokumenten verweisen. Wenn ausreichende (X)HTML-Kenntnisse vorhanden sind, ist die Benutzung von CSS sehr schnell, das heißt in wenigen Stunden oder Tagen, zu erlernen. Der Einarbeitungsaufwand ist also deutlich geringer als bei anderen weiterführenden Werkzeugen und Programmen für Designer.
Die Verarbeitung der Stilvorlage durch das Darstellungsprogramm kann aber auch Probleme aufwerfen: Der Autor und der Anwender sind darauf angewiesen, dass die Programmierer der Darstellungsprogramme die Spezifikationen richtig und vollständig implementieren.
Einige Anbieter entwickeln ihre eigenen proprietären Erweiterungen für CSS, die dann ausschließlich auf dem entsprechenden Programm sichtbar werden. Ein Beispiel sind Überblendeffekte, die nur mit dem Internet Explorer funktionieren. Dabei handelt es sich eigentlich nicht um gültiges CSS, konforme Darstellungsprogramme werden solche Erweiterungen ignorieren. Lediglich um neue Eigenschaften von CSS zu testen, gibt es speziell festgelegte Methoden, um testweise implementierte, nicht spezifizierte Eigenschaften zu kennzeichnen. Diese sollten allerdings nur vorübergehend interpretiert werden, bis entschieden ist, ob oder wie solche Eigenschaften der Empfehlung hinzugefügt werden. Eigenschaften mit solch einer Testnotation eignen sich also nicht für den allgemeinen Gebrauch, lediglich um die Ideen auf Eignung zu testen.
Das Konzept der Cascading Style Sheets (CSS) wurde 1994 von Håkon Wium Lie vorgeschlagen. Bert Bos arbeitete zu dieser Zeit an der Entwicklung eines Darstellungsprogrammes namens Argo, der seine eigene Stilvorlagensprache benutzte. Die beiden entschieden sich zusammenzuarbeiten und CSS zu entwickeln.
Es gab zu dieser Zeit auch andere Sprachen mit dem gleichen Ziel, CSS brachte aber als erste die Idee auf, Regeln zu definieren, die über mehrere Stilvorlagen hinweg vererbt werden konnten.
Nach der Präsentation von CSS durch Håkon an der Konferenz "Mosaic and the Web" in Chicago 1994, und später mit Bos 1995 wurde das World Wide Web Consortium (W3C) auf CSS aufmerksam. Håkon und Bos arbeiteten in diesem Rahmen an CSS weiter, zusammen mit anderen Mitgliedern, unter anderem Thomas Reardon von der Firma Microsoft. Im Dezember 1996 wurde dann die CSS Level 1 Recommendation publiziert. Diese wird in aktuellen Rendering-Engines vollständig umgesetzt.
CSS Level 2 (CSS 2.0) wurde im Mai 1998 als Empfehlung veröffentlicht. Seit 2002 wurde dann an der überarbeiteten Version CSS Level 2 revision 1 (CSS 2.1) gearbeitet, die Arbeit wurde 2011 mit einer Empfehlung abgeschlossen. Diese Version bereinigt einige Unstimmigkeiten in CSS 2.0 und es entfallen diejenigen Teiltechniken, die vorher in Darstellungsprogrammen nicht korrekt oder gar nicht implementiert wurden. CSS 2.1 brachte selbst keine grundlegend neuen Merkmale mit sich, lediglich bei einigen Eigenschaften wurden ein paar Werte ergänzt. In wenigen Fällen gibt es auch Widersprüche zwischen CSS 2.0 und CSS 2.1 und zum Beispiel im Kapitel über Einheiten wurden mit CSS 2.1 neue Inkonsistenzen und Ungereimtheiten eingeführt, die allerdings das Verhalten der Darstellungsprogramme besser widerspiegeln als eine widerspruchsfreie Definition.
CSS 2.1 wurde nach vielen Überarbeitungen am 2011-07-06 als endgültige Empfehlung vom W3C veröffentlicht und wird derzeit von den gängigen aktuellen Darstellungsprogrammen zum größten Teil umgesetzt. Voraussetzung für die Veröffentlichung der Empfehlung war, dass es pro Merkmal mindestens zwei Programme gibt, welche es korrekt interpretieren können.
Derzeit ist CSS Level 3 (CSS 3) in der Entwicklung. CSS 3 ist im Gegensatz zu den Vorgängern modular aufgebaut, das heißt einzelne Teiltechniken (beispielsweise zur Steuerung der Sprachausgabe) haben ihren eigenen Entwicklungsrhythmus und Versionsschritte. Einige Module wurden bereits (2011 zum Beispiel Selectors, Color, Namespaces) als fertige Empfehlungen veröffentlicht.
Die CSS-Anweisungen können sich entweder direkt in der (X)HTML-Datei oder separat in einer eigenen Datei befinden. Üblicherweise verwendet man die letztere der beiden Varianten, wofür es mehrere Gründe gibt. Es ist so etwa einfacher, die Stilvorlage zu wechseln oder mehrere alternative Stilvorlagen zu verwenden. Ein Darstellungsprogramm muss bei Verwendung einer externen Stilvorlage bei einem größeren Projekt mit vielen Dokumenten die Information über die Stilvorlage auch nur einmal laden und vorhalten und nicht bei jedem neuen Seitenaufruf neu laden und analysieren. Die (X)HTML-Datei sollte auch übersichtlich bleiben, wobei es dann kontraproduktiv wäre, wenn man mit dem Attribut style arbeiten würde. Angaben in diesem lassen sich zudem nur schwierig mit externen Stilvorlagen überschreiben, erschweren also ebenfalls die Verwendung von alternativen Darstellungen oder eine Aktualisierung von Stilvorlagen.
Das in XHTML ohnehin als veraltet gekennzeichnete Attribut style sollte also komplett vermieden werden. Das Element style ist vor allem bei Einzeldokumenten oder zum Test und zur Entwicklung neuer Stilvorlagen sinnvoll, wenn also möglichst alles in einem einzigen Dokument zusammengefaßt sein soll.
Falls Sie jetzt mit einem neuen Projekt beginnen, erstellen Sie also idealerweise mit Ihrem Texteditor eine neue Datei und nennen diese zum Beispiel "screen.css". In dieser Datei werden Sie dann künftig das Layout der Bildschirmdarstellung definieren.
Vermutlich haben Sie schon eine Idee, wie Ihre künftigen Dokumente präsentiert werden sollen. Wahrscheinlich werden diese neben dem eigentlichen Inhalt auch einen reinen Navigationsteil haben. Wenn nun jemand Ihre Dokumente liest und dann einen interessanten Artikel drucken möchte, bringt es ihm nichts, wenn die Hälfte des Papiers mit Navigationselementen bedruckt wird. Das können Sie verhindern, wenn Sie das Layout für die Druckausgabe in einer separaten CSS-Datei definieren. Legen Sie dazu eine weitere Textdatei mit dem Namen "print.css" an.
Selbstverständlich können Sie die Dateien nennen, wie Sie wollen, zum Beispiel "elefant.css" und "gruenekuh.css". Hilfreich ist meist allerdings ein Benennung, die charakteristisch für den Stil ist, insbesondere, wenn mehrere Stilvorlagen alternativ angeboten werden. Das erleichtert Ihnen auch, sich leichter zurechtzufinden.
In den nachfolgenden Artikeln werden wir aber davon ausgehen, dass Sie den obigen Namensvorschlag übernommen haben.
CSS-Dateien, die separat (also getrennt vom (X)HTML-Dokument) angelegt werden, sind äußerst schlicht aufgebaut. Sie sind darum auch sehr einfach zu schreiben. Alles, was Sie benötigen, ist eine eindeutige Zuordnung der Kodierung der Information im Dokument und mindestens eine Definition der Eigenschaften eines Elementes des zu dekorierenden Dokumentes. CSS hat eine andere Art der Notation oder Syntax als (X)HTML oder allgemein XML, die von dort bekannten Elementmarkierungen (<...>) sind in CSS nicht definiert.
Sofern die Datei von einem Dienstprogramm ausgeliefert wird (etwa per HTTP), hat die Angabe des Dienstprogrammes allerdings wie üblich Priorität gegenüber den Angaben im Dokument. Macht das Dienstprogramm keine Angabe, kann ein BOM (Bytereihenfolge-Markierung) am Anfang der Datei Einfluß auf die Dekodierung haben, dies sollte also vermieden werden, wenn die eigene Angabe Wirkung haben soll.
Trifft nichts davon zu, gibt aber ein Verweis einen Hinweis auf die Kodierung (etwa per Element link in (X)HTML), so wird dies verwendet. Gibt es auch die Angabe nicht, aber ein verweisendes Dokument, so wird dessen Kodierung verwendet. Gibt es auch das nicht, wird UTF-8 angenommen.
Vielleicht wenden Sie sich erstmal nur der 'screen.css' zu und schieben die 'print.css' für später auf. Üblicherweise lässt sich diese später einfach aus der 'screen.css' ableiten.
Bevor Stilvorlagen auf ein Element im Dokument angewendet werden, muss das Darstellungsprogramm analysieren, welche Eigenschaften mit welchen Werten verwendet werden. Ist für eine Eigenschaft ein Wert angegeben (englisch: specified value), so wird dieser verwendet. Sonst wird der Wert vom Elternelement geerbt (englisch: inherited value), sofern für die Eigenschaft spezifiziert ist, dass sie vom Elternelement vererbt wird. Ansonsten gibt es zu jeder Eigenschaft einen Anfangswert, welcher in der Spezifikation festgelegt ist, der wirksam wird (englisch: initial value).
Vor der Darstellung werden die so ermittelten Werte eine Eigenschaft allerdings in berechnete Werte umgerechnet (englisch: computed value), das sind dann Werte in Einheiten, mit denen das Darstellungsprogramm eine Präsentation realisieren kann - bei der Darstellung auf einem Monitor müssen etwa alle Längeneinheiten (insbesondere relative Angaben) in Pixel des Monitors umgerechnet werden.
Insbesondere bei Prozentangaben und vergleichbaren relativen Größen kann die absolute Größe manchmal allerdings erst bestimmt werden, wenn die Vergleichsgröße des Elternelementes absolut festliegt. Das Ergebnis dieser Umrechnung wird in CSS dann auch der verwendete Wert genannt (englisch: used value).
Die so bestimmten Werte können immer noch Probleme bei der Darstellung bereiten, etwa wenn zur so ermittelten Größe kein passender Schriftsatz vorliegt oder wenn für die Größe eines Elementes kein ganzzahliger Pixelwert berechnet wurde oder wenn eine Farbangabe auf einen Wert gerundet werden muß, der auf dem Monitor darstellbar ist. Das Darstellungsprogramm muss dann folglich runden oder nähern, um zu einer Präsentation zu gelangen. Der dafür verwendete Wert ist der tatsächliche Wert (englisch: actual value).
Somit ist für den Autor der Stilvorlage von vorne herein ziemlich klar, dass die von ihm angegebenen Werte nicht zwangsläufig exakt die sind, die bei der Präsentation verwendet werden. Entsprechend tolerant gegenüber Abweichungen und Unwägbarkeiten sind dann die Stilvorlagen auszulegen, damit sie bei verschiedenen Darstellungsprogrammen und verschiedenen Endgeräten eine sinnvolle Präsentation des Inhaltes ergeben.
Wie bereits erwähnt, können Eigenschaftswerte vom Elternelement auf das Kindelement vererbt werden. Dies erfolgt automatisch, wenn in der CSS-Spezifikation für die Eigenschaft bereits angegeben ist, dass sie vererbt wird und mit keinem Selektor eine direkte Angabe vorliegt. Allerdings kann der Eigenschaft in einer Stilvorlage auch der Wert 'inherit' zugewiesen werden, damit der Eigenschaftswert vom Elternelement geerbt wird. Dies trifft dann auch auf Eigenschaften zu, die sonst nicht automatisch vererbt werden.
Vererbt wird immer der berechnete Wert.
Wie bereits angesprochen können CSS-Anweisungen aus verschiedenen Ressourcen stammen. Die Anweisungen stammen auch nicht zwangsläufig immer vom Autor, welcher die Stilvorlage erstellt.
Insbesondere kommen anwendbare Stilvorlagen vom Darstellungsprogramm und gegebenenfalls vom Nutzer des Dokumentes und gegebenenfalls auch vom Autor.
Das Darstellungsprogramm hat für bekannte Dateiformate eine Stilvorlage, die eine Präsentation eine Dokumentes erlauben, ohne dass der Autor oder Nutzer Vorgaben machen müßte. Diese Stilvorlage ist bereits so ausgereift, dass sinnvoller Inhalt damit bereits gut aufbereitet, zugänglich und lesbar ist. Andere Stilvorlagen müssen dies also gegebenenfalls überschreiben, um einen Effekt auf die Präsentation zu haben. Das birgt allerdings auch das Risiko, die Zugänglichkeit und Lesbarkeit der Inhalte für einige oder alle Nutzer zu verschlechtern. Wer Stilvorlagen verwendet, bekommt damit also nicht nur reichhaltige Möglichkeiten, Inhalte nach eigenem Ermessen zu dekorieren, sondern übernimmt damit auch die Verantwortung, dass der Inhalt weiterhin zugänglich und lesbar bleibt.
Für bekannte Formate wie (X)HTML oder SVG gibt es in den Spezifikationen Empfehlungen, wie die von einem Darstellungsprogramm zu verwendende voreingestellte Stilvorlage aussehen kann. In den SVG-Spezifikationen gibt es sogar für einige wenige Eigenschaften Vorgaben, mit welchen effektiv die Anfangswerte aus der CSS-Spezifikation überschrieben werden, weil dies für SVG-Dokumente als Ausgangswerte sinnvoller ist.
Nutzer von Darstellungsprogrammen und Dokumenten können eigene Stilvorlagen bereitstellen oder am Darstellungsprogramm Einstellungen vornehmen, die einer eigenen Stilvorlage gleichkommen. Dies hat primär den Zweck, dass der Nutzer eine komfortable Möglichkeit hat, die Präsentation für seine eigenen (persönlichen oder technischen) Möglichkeiten zu optimieren. Typisch kann der Nutzer etwa die minimale und normale Schriftgröße festlegen, um für seine Sehfähigkeit und die Auflösung seines Monitors eine optimale Lesbarkeit von Texten zu bekommen und zu verhindern, dass durch ungeeignete Angaben durch den Autor die Schriftgröße so klein wird, dass Texte nicht mehr lesbar sind.
Die Angaben aus diesen drei Quellen haben unterschiedliches Gewicht. Geringstes Gewicht hat die voreingestellte Stilvorlage des Darstellungsprogrammes. Der Nutzer kann diese mit eigenen Angaben überschreiben, die also ein höheres Gewicht haben und im Konfliktfalle also statt der voreingestellten Werte verwendet werden. Die Stilvorlagen des Autors haben wiederum ein höheres Gewicht als die des Nutzers, überschreiben diese also im Konfliktfalle.
Weil bei dieser Gewichtung Angaben des Autors die optimalen Einstellungen des Nutzers zunichte machen können, gibt es allerdings eine Sonderregel: Setzt der Nutzer hinter seine Anweisungen ein '!important' (siehe Abschnitt unten), hat dies mehr Gewicht als die Angabe des Autors. Generell werden etwa auch Einstellungen zur minimalen Schriftgröße so gehandhabt, als habe der Nutzer diese Sonderregel verwendet. Damit kann dann komfortabel vom Nutzer gewährleistet werden, dass Texte immer lesbar bleiben, ohne sich in CSS einarbeiten zu müssen. Bei den meisten anderen Eigenschaften ist es allerdings notwendig, dass der Nutzer explizit dem Darstellungsprogramm eine Stilvorlage mit Verwendung der Regel '!important' verfügbar macht, um weitergehende Optimierungen mit höherem Gewicht als die der Stilvorlage des Autors auch wirklich durchzusetzen.
Für Autoren heißt das andererseits, dass sie vermeiden sollten, Angaben zu machen, die zu einer starken Abweichung von den optimalen Einstellungen des Nutzers führen, insbesondere bei der Schriftgröße, weil es für den Nutzer erhöhten Aufwand bedeutet, die optimale Lesbarkeit wieder herzustellen.
Das Darstellungsprogramm muß also alle Anweisungen zu einem Element in eine definierte Reihenfolge bringen, um zu beurteilen, welche Werte letztlich für die Präsentation wirksam werden.
Zunächst werden dazu alle Anweisungen zusammengesucht, die für eine Eigenschaft eines Elementes zutreffen. Die Sammlung erfolgt natürlich für jeden Medientyp getrennt, beziehungsweise nur für den, für welchen eine Präsentation erfolgen soll, andere sind belanglos.
Dann werden alle gefundenen Anweisungen sortiert, von niedrigem zu hohem Gewicht:
Als letzte Möglichkeit oder letzten Ausweg bei Problemen muß das Darstellungsprogramm dem Nutzer immer die Möglichkeit geben, die Stilvorlagen des Autors komplett abzuschalten, es werden dann also nur die des Nutzers und die des Darstellungsprogrammes wirksam. Da beides zusammen nach Voraussetzung immer eine zugängliche Präsentation von sinnvoll strukturiertem Inhalt gewährleistet, hat so der Nutzer immer eine Möglichkeit, Probleme, Fehler und Mängel der Stilvorlage des Autors durch Abschalten zu kompensieren. Daraus folgt für den Autor, dass er die Inhalte immer so strukturieren muß, dass sie auch oder insbesondere ohne seine Stilvorlagen zugänglich und lesbar sind. Damit reduziert sich dann für den Autor auch das Risiko, dass Inhalte aufgrund mangelhafter Stilvorlagen oder auch einer mangelhaften Interpretation der Stilvorlagen durch das Darstellungsprogramm unzugänglich werden.
Nun kann es bei gleicher Quelle oder Herkunft (Darstellungsprogramm, Nutzer, Autor) mehrere zutreffende Angaben geben. Diese werden gemäß Spezifität sortiert (siehe Abschnitt weiter unten).
Die Angabe aus einer Quelle mit höherem Gewicht hat Vorrang. Stammen die Angaben aus derselben Quelle, so hat Vorrang, was die höhere Spezifität hat. Haben zwei Angaben die gleiche Spezifität, hat jene Vorrang, die später im Quelltext auftritt. Dabei werden externe und importierte Stilvorlagen gemäß der Reihenfolge ihrer Referenzierung eingeordnet. Sie werden zudem vor den internen Stilvorlagen eingeordnet, welche also direkt im Dokument stehen.
Die Kaskade kann also recht komplex werden. Um insbesondere zu überschauen, was im eigenen Verantwortungsbereich liegt und was aus Angaben aus anderen Quellen resultiert, sollten Autoren und Nutzer also erstmal eher einfache Strukturen mit exakt einer Quelle anstreben. Dies hilft auch einstweilen beim Erlernen von CSS. Später kann es sich aber in der Praxis besonders für Autoren als hilfreich erweisen, verschiedene Teile von Stilvorlagen zu strukturieren, indem sie auf verschiedene externe Dokumente verteilt werden. Über die Reihenfolge der Referenzierung kann dann leicht festgelegt werden, welche spezielleren Angabe zuvor notierte einfachere Angaben überschreiben sollen.
Wie bereits beschrieben erlaubt es die Regel '!important', eine CSS-Anweisung stärker zu gewichten. Sie kann vom Autor und vom Nutzer verwendet werden. Die Einordnung der Gewichtung ist bereits im vorherigen Abschnitt beschrieben worden.
In der Stilvorlage des Autors notiert, hat dies ein höheres Gewicht als die sonstigen Angaben in der Autorenstilvorlage, den normalen Angaben in der Stilvorlage des Nutzers oder der des Darstellungsprogrammes. Da Pixel als Einheit für die Schriftgröße für Autoren-Stilvorlagen ungeeignet ist, würde obige Anweisung einer absichtlichen 'Pessimierung' der Präsentation für den Nutzer gleichkommen. Generell sollte beim Autor der Verdacht aufkommen, dass seine Stilvorlagen schlecht strukturiert sind oder das zu dekorierende Dokumente zu wenige Klassen und Fragmentidentifizierer aufweist, wenn der dringende Bedarf besteht, die Regel '!important' zu verwenden. Meistens ist es also deutlich sinnvoller, die Struktur des Dokumentes oder die Stilvorlage zu überdenken, statt diese Regel zu verwenden.
In einer Stilvorlage des Nutzers notiert, hat die Angabe allerdings eine wichtige Funktion und ein höheres Gewicht als sämtliche anderen Angaben, also insbesondere auch die des Autors. Bei dem Beispiel kann der Nutzer also durchsetzen, dass die Schriftgröße in Absätzen immer 15px groß ist. Während der Autor px und ähnliche absolute Größen für die Schrift vermeiden sollte, kann der Nutzer den Sinngehalt ja direkt prüfen, von daher ist das eine für ihn geeignete Angabe, da er sie jederzeit an seine Sehgewohnheiten und seine Ausgabegeräte anpassen kann.
Hinsichtlich der Beurteilung des Verhaltens sehr alter Darstellungsprogramme ist noch zu beachten, dass die hier erklärte Regelung ab CSS 2.0 gilt. Bei CSS 1.0 hatte noch die Regel '!important' des Autors Vorrang vor der des Nutzers. Allerdings hat CSS keine Versionskennung, es kann also nicht direkt bestimmt werden, welcher Version eine Stilvorlage folgt. In der Praxis sollte es allerdings genügen, wenn Nutzer technisch aktuelle Darstellungsprogramme nutzen, um ihr höhereres Gewicht auch praktisch durchzusetzen.
Die Spezifität ist zu berechnen, wenn aus derselben Quelle, etwa vom Autor, mehrere Angaben zu einer Eigenschaft eines Elementes kommen.
Die Spezifität eines Selektors ergibt sich dabei aus mehreren Summen. Es werden dazu die Summen a, b, c, d wie folgt gebildet:
Ist a = 1, so hat die Anweisung direkt im Attribut style die höchste Spezifität.
Ist a = 0, wird b betrachtet. Die Anweisung mit dem größten Wert für b hat die höchste Spezifität.
Ist auch b = 0, so wird c betrachtet. Die Anweisung mit dem größten Wert für c hat die höchste Spezifität.
Ist auch c = 0, so wird d betrachtet. Die Anweisung mit dem größten Wert für d hat die höchste Spezifität.
Zu beachten ist insbesondere bei Fragmentidentifizierern, dass es auf den genaue Notation ankommt. '[id=menue]' zählt als normales Attribut zur Summe c, während '#menue' als Fragmentidentifizierer zur Summe b zählt.
Die spezielle Notation für eine Klasse '.tip' ist gleichrangig mit der Angabe eines Attributes '[class~=tip]'.
Auch hier ist ein Versionsproblem zu beachten, diesmal zwischen CSS 2.0 und CSS 2.1. In CSS 2.0 wird der Wert von a zu b gezählt, bevor die Spezifität ermittelt wird. In CSS 2.0 ist es also deutlich einfacher, eine Angabe im Attribut style zu überschreiben als in CSS 2.1, wo das praktisch komplett ausgeschlossen ist.
Ferner tragen in CSS 2.0 Pseudo-Elemente mit 0 zur Summe bei, werden also ignoriert.
Neuere Darstellungsprogramme werden eher die hier erläuterten Regeln für CSS 2.1 wählen. Da CSS aber keine Versionskennung hat, ist das Verhalten strenggenommen undefiniert, wenn man mit den Regeln von CSS 2.1 und CSS 2.0 zu einem unterschiedlichen Ergebnis kommt. Ist dies der Fall, sollte man versuchen, durch eine Umformulierung des Selektors ein eindeutiges Ergebnis zu erhalten.
Im Dokument können auch Präsentationsattribute notiert sein, dies sind Attribute, die äquivalent zu CSS-Eigenschaften sind. Während es davon in (X)HTML nur noch wenige gibt, sind diese etwa in SVG von zentraler Bedeutung. Präsentationsattribute können die Lesbarkeit und Zugänglichkeit von Dokumenten deutlich verbessern, jedenfalls in Bezug auf (X)HTML jene, die nicht bereits in den strikten Versionen oder in XHTML1.1 gestrichen wurden. Bei SVG gibt es auch Profile und konforme Darstellungsprogramme, die keine Stilvorlagen per CSS erlauben, beziehungsweise diese ignorieren, daher ist bei SVG der Einsatz von Präsentationsattributen dringend geboten, damit der Inhalt auch ohne optionale Stilvorlagen einen Sinn ergibt (sonst sind in SVG die meisten Strukturen entweder schwarz oder unsichtbar). Bei einem Graphikformat wie SVG ist es meistens eine Entscheidung des Autors, was inhaltlich relevant ist und was nur Dekoration. Bei (X)HTML beschränkt sich dies meist hingegen auf die bessere Lesbarkeit von Tabellen oder die Größe von eingebundenen Graphiken.
Somit kann es also sinnvoll sein, neben der Basisversion eines Dokumentes mit Präsentationsattributen zusätzliche Stilvorlagen anzubieten, was dann zur Folge hat, dass festgelegt sein muß, welche Spezifität solche Präsentationsattribute in der CSS-Kaskade haben.
Dazu wird festgelegt, dass Präsentationsattribute so behandelt werden, als würden sie ganz vorne, noch vor den externen und importierten Stilvorlagen in der Kaskade stehen. Dabei wird ihre Spezifität in allen Summen als 0 angesetzt (In CSS 1.0 allerdings auf d = 1). So ergibt sich für ein Präsentationsattribut immer die niedrigstmögliche Spezifität, sie ist also leicht durch Angaben in Stilvorlagen zu überschreiben.
Formal ist diese Regelung in CSS für (X)HTML und in SVG festgelegt. Bei anderen Formaten muß eigentlich explizit in der Spezifikation angegeben werden, welche Attribute Präsentationsattribute sind und zu welchen CSS-Eigenschaften sie äquivalent sind.
Eine Komplikation tritt bei deklarativer Animation (SMIL, SVG) auf, weil dort sowohl Präsentationsattribute als auch CSS-Eigenschaften animiert, also auch geändert werden können. Formal gilt auch für die animierten Attribute oder Eigenschaften die gleiche Einordnung hinsichtlich der Kaskade und Spezifität. Animationen insbesondere in SVG gehören allerdings zum Inhalt, sind also nicht dekorativ, wie Stilvorlagen. Stilvorlagen werden also animierte Attribute überschreiben und damit die Animation unsichtbar machen. Werden hingegen die Eigenschaften animiert, so erhalten die animierten Eigenschaften eine hohe Priorität gegenüber den Stilvorlagen, überschreiben also sämtliche Angaben in den Stilvorlagen, einmal abgesehen von den Angaben des Nutzers, welcher die Regel '!important' verwendet. Zu unterscheiden ist die Situation wiederum von den Arbeitsentwürfen für CSS-Animationen und CSS-Übergänge, wo die Animation also in der Stilvorlage immer als rein dekorativ und inhaltlich nicht relevant verwendet wird. Wie dies zu einer deklarativen Animation mit SMIL oder SVG zu gewichten ist, ist noch im Arbeitsentwurf festzulegen. Um Konflikte auszuschließen, sollten Autoren es bis auf Weiteres vermeiden, dass die beiden Animationstypen aufeinandertreffen, also dieselbe Eigenschaft animieren.
Bei CSS bestehen Werte oft aus Zahlen, oft zusammen mit Maßeinheiten verwendet. Bei der jeweiligen Eigenschaft ist dann angegeben, wie der Wert genau konstruiert ist und welche Einheiten zulässig sind und welche Bedeutung spezielle Angaben für die Darstellung der Eigenschaft haben.
Die Werte vieler Eigenschaften haben allerdings die gleiche Notation und Bedeutung, lediglich die Auswirkung auf die Darstellung hängt von der jeweiligen Eigenschaft ab. Daher sind solch immer wiederkehrenden Notationen einheitlich definiert.
Zahlen können in CSS sowohl ganze Zahlen sein als auch numerische Darstellungen von reellen Zahlen. Es wird in jedem Falle eine dezimale Darstellung verwendet.
Eine ganze Zahl besteht aus einer oder mehr Ziffern '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'. Eine Zahl ist entweder eine ganze Zahl oder die numerische Darstellung besteht aus keiner oder mehr Ziffern, gefolgt von einem Punkt '.', gefolgt von einer oder mehr Ziffern.
Optional kann einer Zahl oder ganzen Zahl auch noch ein Vorzeichen vorangestellt werden, '-' für negative Zahlen, '+' für positive Zahlen. '-0' ist gleich '0' und keine negative Zahl.
Bei der jeweiligen Eigenschaft kann jeweils angegeben sein, auf welchen Bereich von Zahlen ein gültiger Wert eingeschränkt wird. Oft sind das nicht negative Werte.
Oftmals sind die Werte Längen, also meßbare Ausdehnungen oder Distanzen. Der Wert einer Länge besteht aus einer Zahl, direkt gefolgt von einer Einheit. Lediglich bei der Länge 0 ist die Angabe einer Einheit optional, weil der Wert unabhängig von der Einheit derselbe ist.
Wird ein negativer Wert notiert, wo negative Längen nicht erlaubt sind, wird die ganze Deklaration ignoriert.
Bei Längen unterscheidet man zwischen relativen und absoluten Werten. Die wichtigsten Angaben und deren Abkürzungen sind unten in Tabellen zusammengefasst worden. Mit relativen Angaben ist es einfacher, eine Stilvorlage flexibel zu skalieren.
| Abkürzung | Beschreibung | Beispiel |
|---|---|---|
| em | em bezieht sich auf die Schriftgröße des Elementes. 1em ist die Geviertgröße, ein typisches Maß für einen Glyphen, sofern vorhanden oft gut repräsentiert durch die Breite des Großbuchstabens M. | font-size: 1.5em; |
| ex | ex ist eine Größe, die für eine Schriftart genau relativ zur Schriftgröße festliegt. Schriftartendateien sollten eine genaue Angabe enthalten. Oft wird die Größe gut repräsentiert durch die Höhe eines kleinen Buschstabens 'x' oder 'o', sofern in der Schriftart vorhanden. Ist die Größe nicht in der Schriftart definiert und nicht anhand solcher Buchstaben abschätzbar, ist oft 0.5em eine brauchbare Schätzung für ex. | font-size: 2ex; |
| % | Prozent ist eine Angabe je nach CSS-Eigenschaft relativ zur elementeigenen Größe (oder des Elternelementes) oder zu einem allgemeinen Kontext. Der Bezug ist bei der jeweiligen Eigenschaft angegeben. | padding-top: 2%; width: 10%; |
Leider widerspricht hier die Spezifikation CSS 2.1 den Spezifikationen CSS 1.0 und CSS 2.0, daher sind absolute Längen formal undefiniert und in der Praxis unzuverlässig - die durch CSS 2.1 eingeführte Unzuverlässigkeit charakterisiert allerdings das unzuverlässige Verhalten von gängigen Darstellungsprogrammen besser als eine formal korrekte Verwendung der Einheiten, deren Bedeutung natürlich anderweitig von qualifizierteren Organisationen festgelegt ist als von einer Arbeitsgruppe des W3C.
Als zusätzliches Problem enthält die Spezifikation CSS2.1 sich widersprechende Passagen, was in der Praxis dazu geführt hat, dass auch Darstellungsprogramme, die in der Lage waren, absolute Längen gemäß CSS 1.0 und CSS 2.0 größtenteils korrekt darzustellen, bei neueren Versionen ebenfalls falsche Ergebnisse liefern (etwa konnten frühere Versionen von Mozilla/Gecko Einheiten wie Zentimeter, Millimeter, inch korrekt darstellen, aktuelle Versionen nicht mehr).
Definitionen gemäß CSS 1.0 und CSS 2.0:
| Abkürzung | Beschreibung | Beispiel |
|---|---|---|
| mm | Millimeter ist ein Längenmaß nach internationalem Standard, entspricht einem tausendstel Meter, wobei Meter wiederum über die Konstanz der Vakuum-Lichtgeschwindigkeit auf eine Zeitmessung oder eine Frequenzmessung zurückgeführt wird. | margin-right: 10mm; height: 20mm; |
| cm | Zentimeter: 1 cm sind 10 mm oder ein hundertstel Meter. | margin-top: 1cm; padding-left: 0.6cm; |
| in | Inch oder Zoll, 1 in sind 25.4 mm | padding-top: 1in; width: 10in; |
| pt | Punkt ist eine typographische Maßeinheit. 1 Punkt entspricht 1/72 inches oder 25.4 mm/72. | font-size: 10pt; |
| pc | Pica ist ein typographisches Maß. 1 Pica entspricht 12 Punkt oder 1in/6 oder 25.4 mm/6. | font-size: 1pc; |
Die Einheit px steht für Pixel und ist ein Maß, welches von der Auflösung des Ausgabegerätes abhängt, je nach Standpunkt also relativ oder absolut ist.
Sofern das Ausgabegerät eine Auflösung um 90dpi (Punkte pro inch) hat (gemäß CSS 1.0 und CSS 2.0), entspricht der Pixel einem Pixel des Ausgabegerätes. Weicht die Auflösung deutlich von 90dpi ab, so sollte der Pixel umskaliert werden. Die Spezifikationen geben aber nicht genau an, ab wann und ob dabei interpoliert werden soll oder ob nur auf ganze Pixel verkleinert oder auf mehrere ganze Pixel vergrößert werden soll.
CSS 2.1 gibt statt 90dpi dann 96dpi an, was noch keinen großen Unterschied macht, weil ohnehin nirgends festgelegt ist, wann die Umskalierung stattfinden soll.
Die eigentlichen Probleme in CSS 2.1 fangen nun damit an, dass außerdem festgelegt wird, dass 1px = 0.75pt ist, also 25.4mm/96. Gleichzeitig wird aber an der Skalierungsregel festgehalten. Beides aber geht nicht.
Weil damit nun aber der Pixel an die absoluten Einheiten gekoppelt ist, sind die Autoren der Spezifikation leider (trotz Hinweis auf das Problem) dem Irrtum unterlegen, dass es damit auch möglich sei, die anderen absoluten Einheiten relativ zur Größe eines Pixels auf dem Anzeigegerät zu bestimmen. Da aber die allermeisten Geräte nicht über eine Auflösung von 96dpi verfügen (typisch sind Auflösungen im Bereich von 300dpi bis 600dpi für Drucker und 70dpi bis 140dpi für Bildschirme, für Projektoren meist deutlich geringere Auflösungen bezogen auf das projizierte Bild), ergeben sich so unsinnige Anzeigen für Längenangaben gemäß internationalem Standard.
Die meisten Darstellungsprogramme für Bildschirme folgen diesem Irrtum, weil es viel einfacher ist, ausgehend von Pixeln mit festgelegten Umrechnungsfaktoren zu rechnen, statt die Auflösung korrekt zu berücksichtigen. Zudem wäre es bei Pixelgraphik meist suboptimal, die Pixel auf nicht ganzzahlige Werte zu skalieren. Bei der Vorbereitung von Druckausgaben kann sich der Fehler dann bis in die Druckausgabe fortsetzen, obgleich bei Druckern eigentlich immer recht präzise bekannt oder einstellbar ist, mit welcher Auflösung gedruckt wird.
Daraus ergibt sich dann letztlich für Autoren von Stilvorlagen, dass absolute Längenangaben in CSS in der Praxis unbrauchbar sind und Angaben in Pixeln mit Vorsicht zu verwenden sind - auch hier kann man sich nicht auf eine definierte Anzeige verlassen, schon weil die Empfehlungen zueinander widersprüchlich sind.
In CSS können Farben für verschiedene Bestandteile eines Elementes festgelegt werden. Bei blockbasierten Formaten wie (X)HTML etwa folgende: Text (color: …;), Hintergrund (background-color: …;) und Rahmen (border-color: …;).
SVG hat eine andere Struktur und Methode, wie ein Dokument präsentiert wird, daher decken sich die Eigenschaften nur teilweise mit diesen. In SVG gibt es etwa keine Rahmen und im Sinne von CSS auch keinen Hintergrund, daher haben diese Eigenschaften keinen Effekt, dafür aber zum Beispiel die Füllung und der Strich eines Elementes, fill und stroke.
Farbdefinitionen können in CSS über einen Farbnamen oder einen numerischen Farbwert mit spezieller Notation erfolgen.
In CSS bis Version 2.0 sind nur die 16 Farbnamen von HTML 4 definiert. In CSS 2.1 kommt noch 'orange' hinzu. Im Farbmodul von CSS 3 werden jedoch alle SVG-Farbnamen gelistet.
| black | #000000 | gray | #808080 |
| maroon | #800000 | red | #FF0000 |
| green | #008000 | lime | #00FF00 |
| olive | #808000 | yellow | #FFFF00 |
| navy | #000080 | blue | #0000FF |
| purple | #800080 | fuchsia | #FF00FF |
| teal | #008080 | aqua | #00FFFF |
| silver | #C0C0C0 | white | #FFFFFF |
Die Systemfarben richten sich nach den System-Einstellungen des Nutzers. Man kann diese Farbangaben beispielsweise verwenden, um eine Seite zu erstellen, die der Benutzeroberfläche des Nutzers ähnlich sieht.
Die Angaben sind in Farbmodul von CSS 3 als veraltet gekennzeichnet. Als Alternative ist ein Arbeitsentwurf in Arbeit.
Die Notierung von numerischen Farbwerten kann in CSS bis Version 2.1 im Farbraum sRGB (Rot, Grün, Blau) erfolgen. Das Farbmodul von CSS 3 fügt den Farbraum HSL (Farbton [hue], Sättigung [saturation], Helligkeit [lightness]) hinzu. Die Angabe erfolgt als dezimaler- oder prozentualer Wert, bei sRGB auch als Hexadezimalwert. Zusätzlich ist beim Farbmodul von CSS 3 die Angabe eines Wertes für den Alpha-Kanal zur Darstellung der Transparenz möglich.
Ein hexadezimaler Farbwert stellt eine Farbe aus dem sRGB-Farbraum dar, eingeleitet von einer Raute '#', gefolgt von hexadezimalen Ziffern.
Dies ist entweder exakt eine Ziffer für jeden Farbkanal, also 3 Ziffern insgesamt, jeweils eine Möglichkeit von folgenden: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F. Große und kleine Buchstaben bedeuten jeweils das gleiche, im dezimalen System sind a bis f die Zahlen 10 bis 15.
Alternativ kann auch eine Notation mit zwei von den Ziffern pro Kanal gewählt werden, also 6 Ziffernn insgesamt. Das deckt dann dezimal den Bereich von 0 bis 255 ab. Die Konversion von der einziffrigen Notation in die mit zwei Ziffern pro Kanal erfolgt einfach durch Verdopplung der einzelnen Ziffer, #fff ist also gleich #ffffff oder auch weiß oder #abc ist gleich #aabbcc.
Hierbei werden die jeweiligen sRGB-Werte in Abstufungen von 0 bis 255 (256 Farbwerte pro Farbe) oder als prozentuale Angabe notiert. Werte außerhalb des gültigen Bereiches werden zur Präsentation auf den nächstgelegenen gültigen Wert gesetzt, negative Zahle also auf 0 und Werte größer als 255 oder 100% auf 255 beziehungsweise 100%.
Die Notation beginnt mit 'rgb(' und endet mit ')'. Dazwischen befinden sich die Angaben zu den drei Kanälen, jeweils mit Komma separiert, also zum Beispiel rgb(255,255,255), entspricht #fff in hexadezimaler Schreibweise oder auch weiß.
Statt einer dezimalen Angabe ist auch die Angabe von drei Prozentwerten möglich, jeweils im Bereich von 0% bis 100%, die Angabe des Symboles '%' ist wichtig, damit das Darstellungsprogramm zwischen Prozentangaben und dezimalen Angaben unterscheiden kann. Es darf nicht gemischt werden, also ein Kanal in dezimaler Notation und einer in prozentualer Notation ist nicht erlaubt - auch nicht beim Wert 0. Ansonsten ist die Notation für prozentuale Angaben die gleiche wie für dezimale. Anders als bei den anderen Notationen sind bei Prozentangaben auch nichtganzzahlige Angaben erlaubt.
Das Farbmodul von CSS 3 erlaubt auch die Angabe in einem alternativen Farbraum. Die Notation beginnt mit 'hsl(' und endet mit ')' dazwischen befinden sich die Angaben zu den drei Werten des Farbraumes, jeweils mit Komma separiert.
Hierbei wird zuerst der Farbwert als Zahl ohne Einheitszeichen angegeben. Die Zahl steht für einen Winkel in Grad, wobei man sich die Farben im Kreis angeordnet denkt, wobei rot 0 und 360 entspricht, grün 120 und blau 240. Die anderen Farben sind als Mischfarben dazwischen angeordnet, also violett zwischen 240 und 360, orange und rot zwischen 0 und 120, cyan zwischen 120 und 240. Werte außerhalb des Bereiches 0 bis 360 werden dann vor der Präsentation per Modulo 360 auf den Bereich zurückgerechnet.
Der zweite Wert steht für die Sättigung in Prozent, wobei 0% für einen Grauwert ohne Farbe steht und 100% für die Farbe ohne Beimischung von grau. Werte außerhalb des gültigen Bereiches werden wieder bei der Darstellung auf den nächstgelegenen gültigen Wert gesetzt.
Der dritte Wert steht für die Helligkeit, ebenfalls ein Prozentwert, wobei 0% für schwarz steht und 100% für weiß, 50% entspricht der 'normalen' Farbe. Werte außerhalb des gültigen Bereiches werden wieder bei der Darstellung auf den nächstgelegenen gültigen Wert gesetzt
Um teiltransparente Farben zu erreichen, führt das Farbmodul von CSS 3 einen zusätzlichen Alpha-Kanal ein. Dies funktioniert ähnlich oder gleich den bereits früher für SVG definierten Eigenschaften wie fill-opacity oder stroke-opacity.
Die Notation ist wieder rückwärtsinkompatibel zu CSS 2.1, daher sollte man für alte Darstellungsprogramme immer eine Alternative in der alten Notation ohne Teiltransparenz bereitstellen.
Für die Teiltransparenz wird ein zusätzlicher vierter Wert für den Alpha-Kanal als Zahl im Bereich zwischen 0 (vollkommen transparent) und 1 (deckend) hinter den drei bereits erklärten Werten und einem weiteren Komma notiert. Werte außerhalb des gültigen Bereiches werden wieder bei der Darstellung auf den nächstgelegenen gültigen Wert gesetzt.
Es werden außerdem die Schlüsselwörter rgb und hsl jeweils hinten um ein a ergänzt. Die Angabe des Alpha-Kanals ist bei der Nutzung von hexadezimalen Werten nicht möglich.
In CSS 1 ist es für die Eigenschaft background-color zulässig, den Wert 'transparent' zu setzen. Seit CSS 2 ist der Wert auch erlaubt für border-color. Mit CSS 3 ist der Wert zulässig für alle Eigenschaften mit Farbwerten mit Ausnahme der Eigenschaft color. Die Wirkung ist gleich einem komplett durchsichtigen, unsichtbaren Objekt, welches aber dennoch vorhanden ist, also etwa beim Box-Modell immer noch zur Berechnung von Abmessungen beiträgt. 'transparent' entspricht dem Wert rgba(0,0,0,0).
Das Farbmodul von CSS 3 übernimmt von SVG das Schlüsselwort 'currentColor'. Damit kann der berechnete Wert der Eigenschaft color als Farbwert für anderen Eigenschaften verwendet werden. Wird das Schlüsselwort bei color selbst verwendet, so wird es behandelt wie 'inherit'.
Das Farbmodul von CSS 3 übernimmt von SVG auch die Eigenschaft opacity. Dies bedarf allerdings für die Kombination mit der in CSS verfügbaren Eigenschaft z-index einer kleinen Erweiterung.
Mit opacity kann ein Element samt seiner Kindelemente teiltransparent gemacht werden. Die Eigenschaft ist demzufolge für visuelle Medien anwendbar. Das Element samt Kindelementen wird damit zu einem einzigen, graphischen Block zusammengefaßt. Dieser wird dann komplett entsprechend dem Wert von opacity teiltransparent wiedergegeben.
Wie bei der Erweiterung der Farbangaben um einen Alpha-Wert wird hier eine Zahl als Wert für die Teiltransparenz angegeben. Der Wertebereich liegt zwischen 0 (komplett durchsichtig) und 1 (komplett undurchsichtig, Voreinstellung). Werte jenseits dieses Bereiches werden vor der Präsentation auf den nächstgelegenen Wert aus dem Bereich 0 bis 1 gesetzt. Dies ist dann auch der berechnete Wert.
Weicht der Wert von 1 ab, gibt es Sonderregeln für die Verwendung mit der Eigenschaft z-index. Elemente von außerhalb können nicht per z-index so angeordnet werden, dass sie hinsichtlich der z-index-Reihenfolge zwischen zwei Elementen angeordnet werden, auf welche gemeinsam die Eigenschaft opacity mit einem Wert ungleich 1 wirkt.
Dieser 'Knopf' ist also teil-durchsichtig. Sofern er auf Strukturen des Elternelementes einschließlich dem Hintergrund liegt, schimmert der Hintergrund also sowohl durch den dunkelblauen Hintergrund also auch den weißen Inhalt. Beim Drüberfahren mit einem Zeigergerät wird solch ein 'Knopf' dann etwas weniger transparent und heller. Ähnliche Strukturen lassen sich auch verwenden, um bei Bedarf Zusatzinformationen einzublenden und besser sichtbar zu machen. Mit den in Arbeit befindlichen CSS-Modulen für Übergänge und zur Animation lassen sich dann natürlich solche Änderungen auch kontinuierlich durchführen. In SVG gehen solche Animationen schon lange und eignen sich gut, um die Ergonomie und Übersichtlichkeit von interaktiven Projekten zu verbessern. Durch Änderung der Transparenz läßt sich die Aufmerksamkeit des Nutzers auf gerade relevante Bereiche eines Projektes lenken, während momentan gerade nicht so relevante Bereiche nahezu transparent gehalten werden können, bis der Nutzer seine Aufmerksamkeit darauf lenkt. Die Information selbst bleibt also immer komplett präsent, lediglich die Gewichtung der Aufmerksamkeit kann mit der Eigenschaft elegant verschoben werden.
Weil sowohl Hintergrund als auch Inhalt teiltransparent werden, eignet sich die Eigenschaft allerdings schlecht, um nur einen teiltransparenten Hintergrund zu erzeugen. Bei Farben verwendet man dann besser Farbangaben mit Angabe des Alpha-Kanals oder bei Bildern solche, die selbst teiltransparent sind (zum Beispiel bei PNG oder SVG einstellbar - insbesondere kann man in einem SVG-Dokument als Hintergrund auch ein Bild im Format JFIF/JPEG unterbringen, um dieses teiltransparent zu machen, welches allein diese Möglichkeit nicht hat).
Bei visuellen Medien kann mit CSS die Farbe für den Vordergrund angegeben werden und auch die Gestaltung des Hintergrundes. Letzteres trifft jedenfalls für die Anwendung auf Formate wie (X)HTML zu, nicht für SVG, wo zwar auch Farbangaben gemacht werden, da es sich um ein graphisches Format handelt, allerdings deutlich detaillierter, als es für Formate wie (X)HTML notwendig ist, welche hauptsächlich für die Darstellung von Text gedacht sind.
Der Hintergrund - wo anwendbar - kann sowohl eine einfache Farbe sein als auch ein Bildhintergrund sein, welcher relativ zum Vordergrund angeordnet werden kann. Im Rahmen des Box-Modelles bezieht sich der Hintergrund nicht auf den Außenabstand, der transparent ist, sondern auf Inhalt, Innenabstand und Rahmen. Der Hintergrund des Wurzelelementes erstreckt sich allerdings immer über den gesamten Malbereich, wird also im gesamten Anzeigebereich sichtbar. Für (X)HTML-Dokumente gibt es aus historischen Gründen eine Ausnahme, dort gilt dies Verhalten auch für das Element body, für welches Autoren dann auch entsprechende Angaben machen sollen, eher als für das eigentliche Wurzelelement html. Ist der Hintergrund des Wurzelelementes bei (X)HTML nicht gesetzt oder transparent, so wird bei diesem Format das Verhalten für den Hintergrund von body für den gesamten Malbereich verwendet.
Für die Lesbarkeit von Text ist es natürlich wesentlich, dass geeignete Farben und Farbkombinationen gewählt werden - weißer Text auf weißem Grund ist nicht lesbar. Die physiologische Farbwahrnehmung kann individuell auch verschieden sein, wobei es auch größere Abweichungen von der durchschnittlichen Wahrnehmung gibt. Etwa fehlt einigen Menschen ein Farbrezeptortyp im Auge, woraus sich das Problem ergibt, dass weite Bereiche von rot von weiten Bereichen von grün nicht unterscheidbar sind. Bei anderen Personen können aber auch bei anderen Kombinationen Unterscheidungsprobleme auftreten. Bei den meisten Menschen hat das Augen jedenfalls Rezeptoren für rot, grün und blau und einen sehr empfindlichen zusätzlichen Rezeptortyp, der den gesamten Bereich abdeckt, also besonders bei wenig Licht noch Informationen liefern kann. Betrachtet man das Frequenzspektrum des Lichtes, so decken die Rezeptoren also den Bereich von rot bis blau ab, aber mit unterschiedlicher Empfindlichkeit bei unterschiedlichen Wellenlängen. Dabei handelt es sich im Wesentlichen um eine breite Empfindlichkeitskurve mit jeweils einem Maximum. Licht einer bestimmten Wellenlänge führt also bei den vier Rezeptortypen jeweils zu einer unterschiedlichen Intensität. Aus den Verhältnissen bestimmt das Gehirn dann eine Farbwahrnehmung. Diese ist allerdings nicht eindeutig der ursprünglichen Wellenlänge zuzuordnen. Jedenfalls ist es so möglich, mit Bildschirmen, die jeweils wieder pro Pixel aus drei unterschiedlichen Teilen bestehen, welche Licht jeweils unterschiedlicher Wellenlängenbereiche aussenden oder durchlassen für Auge und Gehirn einen Farbeindruck zu erzeugen. Daher reicht es auch aus, statt einer Wellenlänge drei Parameter anzugeben, um mit einem Ausgabegerät einen Farbeindruck zu vermitteln. Da allerdings die Rezeptoren bei verschiedenen Personen spektral leicht unterschiedlich empfindlich sein können, wobei es altersbedingt auch zu Verschiebungen kommen kann oder eben auch bei einigen Personen nur zwei statt drei Rezeptortypen vorhanden sind, die auf unterschiedliche Wellenlängenbereiche empfindlich sind, kann die Wahrnehmung und Unterscheidbarkeit von verschiedenen Farben somit variieren, egal, ob sie unterschiedlichen Wellenlängen entsprechen oder einer unterschiedlichen Wahrnehmung der Kombination von bunten Pixeln auf Bildschirmen.
Der Unterschied zwischen viel und wenig Intensität, also hell und dunkel ist allerdings zwangsläufig bei allen verfügbar, die etwas sehen können. Daher ist dunkle Schrift auf hellem Grund oder umgedreht, also ein hoher Intensitätskontrast unproblematischer als lediglich ein hoher Farbkontrast.
Daher sollten Farben und Helligkeiten immer in der Kombination von Vordergrund und Hintergrund mit gleicher Priorität und Spezifität zusammenpassen, um sicherzustellen, dass über die gesamte Kaskade gute Lesbarkeit gegeben ist.
Die genauen Werte für Farbangaben sind im Kapitel über Farben beschrieben.
Die Farbe (des Vordergrundes, etwa der Schrift) wird über die Eigenschaft color angegeben.
Mögliche Werte sind die in CSS nutzbaren Farbangaben und das Schlüsselwort 'inherit'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.
Der Initialwert ist abhängig vom Darstellungsprogramm - zusammen mit einer geeigneten Angabe für den Hintergrund ergibt sich aus dieser Kombination jedenfalls eine lesbare Präsentation. Insbesondere können also Autoren nicht von einem bestimmten Initialwert ausgehen, sofern die Farbe festgelegt wird, sollte also auch der Hintergrund passend festgelegt werden, etwa mit der Eigenschaft background-color und umgedreht.
Mit der Eigenschaft background-color kann die Hintergrundfarbe angegeben werden. Der Wert ist eine Farbe oder eines der Schlüsselwörter 'transparent' oder 'inherit'. Die Eigenschaft wird nicht vererbt und ist anwendbar auf alle Elemente und auf visuelle Medien. Der Initialwert ist 'transparent'.
Bei einem transparenten Hintergrund beim Wurzelelement hängt die Präsentation letztlich vom Format oder dem Darstellungsprogramm ab. Dies trifft auch zu, wenn das Dokument selbst, etwa mit dem Element object oder foreignObject, in ein anderes Dokument eingebettet wird. Ist dies ein SVG-Dokument, legt SVG genau fest, dass der sonstige vorherige Inhalt der Hintergrund ist, bei (X)HTML-Dokumenten und anderen Formaten, welche dies nicht festlegen, ist jedoch undefiniert, was als Hintergrund dient, also nicht zwangsläufig der Hintergrund oder der vorherige, dahinterliegende Inhalt des einbettenden Dokumentes.
Beispiel siehe Eigenschaft color.
Mit der Eigenschaft background-image kann ein Hintergrundbild referenziert werden. Ähnlich wie bei der Hintergrundfarbe ist hierbei darauf zu achten, dass es bei der Kombination mit der Vordergrundfarbe color zu einer lesbaren Darstellung kommt. Da Bilder nicht zwangsläufig bei jedem Nutzer angezeigt werden, ist ebenfalls darauf zu achten, dass zusätzlich zum Hintergrundbild auch immer noch die Farbe des Hintergrundes festgelegt ist, dass der Inhalt mit der aktuellen Vordergrundfarbe auch noch gut lesbar bleibt, wenn das Hintergrundbild nicht angezeigt wird oder werden kann. Sind sowohl Hintergrundbild als auch Hintergrundfarbe angegeben, so verdecken nicht transparente Teile des Hintergrundbildes die dortige Hintergrundfarbe. Entsprechend verdecken nicht transparente Teile des Hintergrundes gegebenenfalls darunterliegende Inhalte oder Hintergründe von anderen Elementen, etwa den Vorfahren.
Mögliche Werte sind eines der Schlüsselwörter 'inherit' oder 'none' oder die Notation einer URI/IRI eines Bildes. Die Eigenschaft ist anwendbar für alle Elemente bei visuellen Medien. Die Eigenschaft wird nicht vererbt, der Initialwert ist 'none'.
Beim Wert 'none' wird kein Hintergrundbild verwendet. Die URI/IRI des gewünschten Hintergrundbildes wird wie folgt notiert: Der Wert beginnt mit ' url(' und endet mit ')'. Dazwischen steht die URI/IRI des Bildes, optional eingeschlossen in einfache oder doppelte Anführungszeichen. Zeichen in der URI/IRI, die mit der Notation von CSS in Konflikt geraten können, wie etwa Klammern oder Anführungszeichen, sind zu maskieren, dazu wird dem fraglichen Zeichen das Zeichen '\' vorangestellt.
Hat das Bild eine vorgegebene Größe (typisch bei Pixelgraphik), so wird diese zur Darstellung verwendet. Ist etwa bei bestimmten SVG-Bildern die Größe nur in Prozent angegeben, so richtet sich die Größe der Darstellung nach der Größe des Elementes, für welches das Bild als Hintergrundbild angegeben ist. Angaben im SVG-Bild über die Behandlung des Aspektverhältnisses können dann darüber entscheiden, in welcher Weise genau das Bild an die Größe des Elementes angepaßt wird.
Ist das Bild kleiner als der für den Hintergrund vorgesehene Platz, kann festgelegt werden, ob und in welcher Richtung das Bild wiederholt werden soll. Gegebenenfalls wird der Hintergrund dann also mit dem Bild als wiederholte Kachel überdeckt.
Die Eigenschaft wird nicht vererbt und ist anwendbar auf alle Elemente bei visuellen Medien. Der Wert ist eines der folgenden Schlüsselwörter:
Mit der Eigenschaft background-attachment kann nun angegeben werden, ob sich das Hintergrundbild mitbewegen soll, wenn bei kontinuierlichen Medien ein Rollmechanismus eingesetzt wird - etwa ein Rollbalken bei der Darstellung auf einem Bildschirm.
Die Eigenschaft wird nicht vererbt und ist anwendbar auf alle Elemente bei visuellen Medien. Der Wert ist eines der folgenden Schlüsselwörter: 'inherit', 'scroll' oder 'fixed'. Der Initialwert ist 'scroll'.
Im Falle von 'fixed' ist das Bild relativ zum Anzeigebereich fixiert, rollt also nicht mit, wenn ein Rollmechanismus für den Anzeigebereich verwendet wird. Im Falle von 'scroll' bewegt sich das Bild mit dem umgebenden Block, wenn ein Rollmechanismus für den Anzeigebereich verwendet wird.
Dabei ist zu beachten, dass bedingt durch die Eigenschaft overflow nicht nur der Anzeigebereich selbst einen Rollmechanismus aufweisen kann, sondern auch andere Elemente. Die Eigenschaft bezieht sich allerdings immer auf den gesamten Anzeigebereich. Von daher fehlen hier in CSS also eigentlich Schlüsselwörter, um auch einen Bezug auf Elemente mit einem eigenen Rollmechanismus festlegen zu können. Das Problem wird voraussichtlich im entsprechenden Modul von CSS3 gelöst, wo es im aktuellen Arbeitsentwurf einen weiteren Wert 'local' gibt, mit welchem man angeben können wird, dass der Hintergrund relativ zum Inhalt seiner Box fixiert ist.
Mit der Eigenschaft background-position kann die Position des Hintergrundbildes relativ zur Box angegeben werden, für welche das Hintergrundbild angegeben ist.
Die Eigenschaft wird nicht vererbt und ist anwendbar auf alle Elemente bei visuellen Medien. Der Wert ist entweder das Schlüsselwort 'inherit' oder eine Liste mit einem oder zwei Listenpunkten, die entweder je ein Schlüsselwort oder ein Prozentwerte oder eine Längen sind (beides auch negativ). Der Initialwert ist '0% 0%'.
Hat die Liste nur einen Listenpunkt, wird der zweite als das Schlüsselwort 'center' angenommen. Falls ein Listenpunkt kein Schlüsselwort ist, repräsentiert der erste Punkt die horizontale Position, der zweite die vertikale.
Bei der Angabe eines Prozentwertes wird zum einen die Position der Box für den Innenabstand (padding) verwendet, wobei 0% oben, beziehungsweis links ist und 100% unten, beziehungsweise rechts. Zum anderen wird entsprechend bei dem Bild diese relative Position bestimmt, also 0% oben, beziehungsweis links ist und 100% unten, beziehungsweise rechts. Das Bild wird dann so angeordnet, dass die so bestimmten Punkte zur Deckung gebracht werden. '0% 0%' entspricht also einer Situation, wo das Bild mit seiner linken oberen Ecke in der linken oberen Ecke der Box des Innenabstandes positioniert ist. Bei '100% 100%' ist gerade die rechte untere Ecke des Bildes in der rechten unteren Ecke der Box des Innenabstandes angeordnet.
Bei einer Längenangabe bezieht sich diese immer auf die Box des Innenabstandes. Die linke obere Ecke des Bildes wird dann an der so bestimmten Position angeordnet. Bei einer Angabe von '2em 3em' befindet sich also die linke obere Ecke des Bildes 2em entfernt von der linken Seite der Box des Innenabstandes und 3em von der oberen Seite.
Einige Prozentwerte können alternativ auch durch Schlüsselwörter ausgedrückt werden. 'top' entspricht 0% der vertikalen Position. 'bottom' entspricht 100% der vertikalen Position. 'left' entspricht 0% der horizontalen Position. 'right' entspricht 100% der horizontalen Position. 'center' ist etwas kniffliger. Sofern nichts anderes für die horizontale Position angegeben ist, entspricht das horizontal 50%. Falls etwas für die horizontale Position angegeben ist, entspricht 'center' 50% der vertikalen Position.
Die Position ist undefiniert, falls das Bild ein festgelegtes Aspektverhältnis hat, aber keine festgelegte Größe.
In diesem Falle wird das Bild also innerhalb des Anzeigebereiches zentriert und fixiert angezeigt. Ausgehend vom zentrierten Bild wird zudem der gesamte Hintergrund des Anzeigebereiches gekachelt.
Die Angaben zum Hintergrund können zudem in einer Kurznotation mit der Eigenschaft background zusammengefaßt werden. Die Eigenschaft wird nicht vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.
Der Wert ist entweder 'inherit' oder eine Liste mit den Werten der Einzeleigenschaften für den Hintergrund, die in beliebiger Reihenfolge notiert werden können, wobei auch noch jede Angabe optional ist, es ist allerdings mindestens eine als Wert anzugeben. Der Initialwert entspricht dem der jeweiligen Einzelwerte, was dann auch bedeutet, dass nicht gesetzte Einzeleigenschaften durch die Angabe von background auf den Initialwert gesetzt werden.
Eine Spezialregel gibt es, wenn ein Wert in der Liste beim Darstellungsprogramm nicht implementiert sein sollte. Problematisch war früher insbesondere 'fixed' für das Verhalten. Wenn eine Angabe nicht umgesetzt werden kann, soll die gesamte Angabe ignoriert werden. So kann man etwa statt des vorherigen Beispiels notieren:
Kann das Darstellungsprogramm 'fixed' nicht umsetzen, wird also der Hintergrund mit dem Dschungelbild gekachelt. Ist die Umsetzung implementiert, so wird die Passionsblume zentriert und nicht wiederholt.
Für die Präsentation in visuellen Medien verwendet CSS für blockbasierte Formate wie (X)HTML ein sogenanntes Box-Modell (englisch: box model), welches die Präsentation eines Dokumentes in rechteckige Kästen aufteilt, die wiederum aus ineinande verschachtelte Kästen für die Randverhältnisse dieses Kastens bestehen. Dazu zählen Eigenschaften für den Außenabstand (margin), den Rahmen (border), den Innenabstand (padding) und den Inhalt (beispielsweise ein Text, width und height). Für alle diese Bestandteile können unterschiedliche Abmessungen angegeben werden. Der Vorteil des Box-Modells liegt in der Möglichkeit, bei allen Elementen die Präsentation genau bestimmen zu können, in Bezug auf Größen, Dicken, Farben und der Ausrichtung der einzelnen Seitenelemente (oben (*-top), rechts (*-right), unten (*-bottom), links (*-left)). In der Regel können die vier Richtungsangaben in einer gemeinsamen Definition zusammengefasst werden, diese nennt man Kurzschreibweise (englisch: shorthand notation). Dabei werden diese Anweisungen im Uhrzeigersinn aufgelistet, beginnend mit dem Wert für oben.
Der Inhalt ist im einfachsten Falle der Text einer Seite einschließlich gegebenenfalls vorhandener Bilder und anderer eingebundener Medien. Dieser hat seinen Platz im Mittelpunkt der Box, um ihn werden die anderen Strukturen des Box-Modells "herumgebaut". Ohne weitere Angaben bestimmt sich die Breite (width) bei den meisten Elementen aus dem verfügbaren Platz, die Höhe (height) aus der vorhandenen Menge an Inhalt, der dann in den durch Höhe und Breite zur Verfügung gestellten Platz paßt.
Wenn für eine Box Maßangaben für die Höhe oder Breite erfolgen, beziehen diese sich auf den Inhalt. Alle nachfolgend erläuterten Bestandteile werden erst durch das Darstellungsprogramm hinzu addiert. Eine Box als Blockelement und ohne Maßangaben gestaltet, erstreckt sich über die volle zur Verfügung stehende Breite, die Höhe jedoch richtet sich nach dem Inhalt.
Gesamtbreite = linker Rand + linker Rahmen + linkes Polster
+ Breite
+ rechter Rand + rechter Rahmen + rechtes Polster
Gesamthöhe = oberer Rand + oberer Rahmen + oberes Polster
+ Höhe
+ unterer Rand + unterer Rahmen + unteres Polster
Mit den Eigenschaften width und height kann Höhe und Breite eines Elementes festgelegt werden. Auf inzeilige, nicht ersetzte Elemente sind die Eigenschaften nicht anwendbar. Ein inzeiliges, ersetztes Element ist eines, wo der - gegebenenfalls leere - Inhalt durch etwas ersetzt wird, etwa durch ein Bild oder allgemeiner ein anderes Dokument - in dem Sinne ist ein inzeiliges Element auch dann ein ersetztes, wenn der Inhalt trotzdem als Alternativtext statt des ersetzenden Inhaltes verwendet wird.
Der Wert ist eine nicht negative Länge oder ein nicht negativer Prozentwert, wobei sich der Prozentwert bei width auf die Breite der Box des umgebenden Elementes bezieht, bei height auf dessen Höhe. Prozentangaben sind nur definiert, wenn die Breite beziehungsweise Höhe des Elternelementes nicht von seinem Inhalt abhängt. Dazu gibt es das Schlüsselwort 'auto', welches auch die Voreinstellung ist und wie bei allen Eigenschaften das Schlüsselwort 'inherit', wenn die Größe vom Elternelement geerbt wird. Sonst werden die Eigenschaften nicht vererbt.
Statt die Größe des Inhalt mit width und height nur exakt festzulegen, können auch Schranken angegeben werden, die festlegen, welche Größen nicht unter- oder überschritten werden dürfen.
Die Anwendbarkeit ist dieselbe wie für width und height mit Ausnahme von Tabellenelementen, wo das Verhalten undefiniert ist. Vererbt werden die Eigenschaften nicht. Werte sind ebenfalls wie bei width und height nicht negative Längen und Prozente und 'inherit'. Bei max- kommt noch 'none' hinzu für keine Einschränkung.
Für min-* ist der Initialwert 0, für max- das Schlüsselwort 'none'.
Die Eigenschaften werden berücksichtigt, indem zunächst Höhe und Breite ohne die Eigenschaften bestimmt werden. Liegen die Größen außerhalb der Schranken, wird die nächstgelegene Schranke als Größenangabe verwendet.
Beispiel mit obigen Quadraten, diesmal werden Höhe und Breite des äußersten Quadrates allerdings durch den Inhalt mitbestimmt, indem min-* und max- verwendet werden:
Der Innenabstand (auch Polster) gibt den Abstand des Inhalts zum Rahmen der Box an. Der Innenabstand (padding) wird im Gegensatz zum Außenabstand (margin) durch die Hintergrundfarbe beeinflusst. Es besteht die Möglichkeit einen allgemeinen Abstand zu definieren (padding), oder jede beliebige Seite einzeln (padding-top, padding-right, padding-bottom, padding-left).
Der Wert jeder Einzelangabe ist eine nicht negative Länge oder ein nicht negativer Prozentwert. Der Wert für padding kann aus ein bis vier Werten entsprechend einer Einzelangabe bestehen, die mit Leerzeichen voneinander separiert sind. Die Eigenschaft wird nicht vererbt, der Initialwert für jede Einzelangabe ist 0. Prozentangaben beziehen sich auf die Breite des umgebenden Blockes. Prozentangaben sind somit undefiniert, wenn die Breite des umgebenden Blockes von dem Element abhängt, für welches die Angabe zu padding in Prozent angegeben ist.
Wird für padding ein Wert angegeben, gilt er für alle Seiten. Bei zwei Werten gilt der erste Wert für padding-top und padding-bottom, der zweite für die beiden anderen. Bei drei Werten gilt der erste Wert für padding-top, der zweite für padding-right und padding-left, der dritte für padding-bottom. Bei vier Werten gilt die Zuordnung in der Reihenfolge padding-top, padding-right, padding-bottom, padding-left.
Der Rahmen (border) schließt direkt an den Innenabstand an. Es kann eine allgemeine oder eine für jede Seite bestimmte Rahmenformatierung definiert werden (border-top, border-right, border-bottom, border-left). Ferner können auch noch Rahmeneigenschaften getrennt angegegeben werden (border-width, border-style, border-color) und jeweils noch die Eigenschaft pro Seite in der Form 'border-S-E' wobei S ersetzt wird durch 'top', 'right', 'bottom' oder 'left' und E durch 'width', 'style oder 'color', also zum Beispiel border-top-color.
Die Eigenschaften können bei allen Elementen verwendet werden und werden nicht vererbt.
Die Eigenschaft border-width legt die Rahmenbreite fest, entsprechend border-top-width, border-right-width, border-bottom-width, border-left-width für die Einzelseiten.
Der Wert einer Einzelangabe ist entweder eine nicht negative Länge oder eines der drei folgenden Schlüsselwörter, für die lediglich eine Größenrelation festgelegt ist:
'thin' <='medium' <= 'thick'.
Bei diesen Schlüsselwörtern hängt die konkrete Breite vom Darstellungsprogramm ab, ist aber pro Schlüsselwort und Dokument einheitlich durchzuhalten. Daneben kann natürlich wie immer auch 'inherit' als Schlüsselwort verwendet werden. Der Initialwert ist 'medium', als berechneter Wert wird entweder die absolute Länge verwendet oder aber 0, falls der zugehörige border-style den Wert 'none' oder 'hidden' hat.
Für border-width selbst können wieder ein bis vier Einzelangaben notiert werden, die mit Leerzeichen separiert sind. Die Zuordnung gilt sinngemäß wie bereits für padding beschrieben.
Die Eigenschaft border-color legt die Rahmenfarbe fest, entsprechend border-top-color, border-right-color, border-bottom-color, border-left-color für die Einzelseiten.
Der Wert einer Einzelangabe ist entweder eine Farbangabe oder eines der Schlüsselwörter 'transparent' oder 'inherit'. Bei 'transparent' ist der Rahmen zwar gegebenenfalls vorhanden (was für die Berechnung der gesamten Box relevant ist), aber nicht sichtbar. Der Initialwert ist der Wert der Eigenschaft color (in Farbmodul von CSS 3 ist dies das von SVG übernommene Schlüsselwort 'currentColor', welches es aber in CSS 2.1 und frühreren Versionen noch nicht gibt).
Für border-color selbst können wieder ein bis vier Einzelangaben notiert werden, die mit Leerzeichen separiert sind. Die Zuordnung gilt sinngemäß wie bereits für padding beschrieben.
Die Eigenschaft border-style legt den Rahmenstil fest, entsprechend border-top-style, border-right-style, border-bottom-style, border-left-style für die Einzelseiten.
Der Wert einer Einzelangabe ist eines der folgenden Schlüsselwörter:
Die Beschreibungen sind nicht sehr detailliert, wie die Stile genau erzeugt werden sollen, bei den komplizierteren Mustern liegt es am Darstellungsprogramm, den Stil plausibel umzusetzen, der Autor der Stilvorlage hat keinen weiteren Einfluß auf die Umsetzung.
Für border-style selbst können wieder ein bis vier Einzelangaben notiert werden, die mit Leerzeichen separiert sind. Die Zuordnung gilt sinngemäß wie bereits für padding beschrieben.
Beispiele siehe folgender Abschnitt.
Mit der Eigenschaft border kann alles zusammengefaßt werden, oder für die Einzelseiten: border-top, border-right, border-bottom, border-left.
Als Wert wird entweder 'inherit' notiert oder eine Kombination von ein bis drei Einzelwerten in der Reihenfolge border-width, border-style, border-color.
Für weggelassene Einzelwerte wird der jeweilige Initialwert angenommen.
Die verschiedenen Stile bei einer Stärke von 1em (border: 1em STIL #fc9):
Bei Tabellen können die Rahmen von Zellen überlappen oder nebeneinanderliegen, daher kann das Verhalten festgelegt werden.
Dies gilt nur für Boxen, welche als Tabelle definiert sind (display: table; oder display: inline-table;).
Wenn zwei Tabellenzellen aneinandergrenzen, kann festgelegt werden, ob sie unabhängig bleiben oder die Rahmen ineinander kollabieren sollen.
Der Wert der Eigenschaft border-collapse ist eines der Schlüsselwörter 'collapse', 'separate' oder 'inherit'. Die Eigenschaft wird vererbt. Bei 'collapse' fallen benachbarte Rahmen zusammen, 'kollabieren'. Bei 'separate' liegen sie nebeneinander und bleiben beide erhalten. Der Initialwert ist 'separate'.
Haben im Falle von 'collapse' zwei benachbarte Zellen Angaben zum Rahmen, die miteinander in Konflikt stehen, wird nur der 'auffälligere' Rahmen angezeigt, solange keiner der beteiligten Rahmenstile 'hidden' ist.
Im Detail gelten folgende Regeln für einen Konfliktfall:
die gewinnt gegenüber einer Zeilengruppe, die gegenüber einer Spalte, die gegenüber einen Spaltengruppe, die gegenüber der gesamten Tabelle
Dann gibt es für den Stil noch die Sonderregel, dass bei 'collapse' der Stil 'inset' wie 'ridge' dargestellt wird, während 'outset' im Falle 'separate' wie 'groove' dargestellt wird.
Wird border-collapse als 'separate' gewählt, so kann mit border-spacing der Abstand zwischen benachbarten Rahmen angegeben werden.
Der Wert ist entweder 'inherit' oder eine nicht negative Länge optional gefolgt von einer weiteren nicht negativen Länge, die mit Leerzeichen separiert wird.
Die Eigenschaft wird vererbt und der Initialwert ist 0.
Ist eine Länge angegeben, gibt diese den horizontalen und den vertikalen Zellenabstand an. Sind zwei Werte angegeben, so gibt der erste den horizontalen und der zweite den vertikalen Abstand an.
Der Arbeitsentwurf für CSS3-Rahmen pendelt derzeit (Mai 2013) leider immer noch zwischen verschiedenen Stadien der Fertigstellung. Aufgrund substantieller Änderungen wird der Entwurf vermutlich in der nächsten Version wieder vom aktuellen Kandidaten zur Empfehlung auf einen Arbeitsentwurf mit Aufruf für letzte Kommentare zurückgestuft. Es handelt sich also nicht um eine Empfehlung, sollte daher noch nicht auf 'normalen' Seiten verwendet werden.
Weil es derzeit aber bereits ein Kandidat zur Empfehlung ist, können Darstellungsprogramme durchaus bereits Eigenschaften daraus ohne Präfix implementiert haben. Bei anderen können die Eigenschaften zu Testzwecken mit Präfix implementiert sein. Aufgrund der aktuellen Änderungen ist das Verhalten der Darstellungsprogramme derzeit also noch nicht als zuverlässig einzustufen und es kann mit Präfix von Version zu Version unterschiedlich sein.
Aktuell sollten Eigenschaften aus dem Modul also nur getestet werden. Das Verhalten aktueller Versionen von Darstellungsprogrammen mit Implementierung ohne Präfix ist sorgfältig zu beobachten. Bevor keine Empfehlung vorliegt, können mit jeder Version noch Änderungen des Verhaltes eintreten.
Neu ist im Arbeitsentwurf zum Beispiel die Möglichkeit von abgerundeten Ecken, für welche es hier ein Beispiel als Ausblick gibt. Abgerundete Ecken mit CSS 2.1 umzusetzen, ist deutlich trickreicher und benötigt meist zusätzliche, geeignete Graphiken, daher ist das Verlangen einiger Autoren besonders groß, diese für CSS 3 vorgeschlagene Eigenschaft zu verwenden.
Die Eigenschaft border-radius eignet sich jedenfalls gut, um zu üben, wie man experimentelle Implementierungen geeignet testet. Dazu erstellt sich der Tester am besten ein Test-Dokument mit geeignetem Inhalt und notiert die zu testende Eigenschaft der Einfachheit halber etwa in einem Element style im Test-Dokument. Das Testdokument sollte dann zur Dokumentation ebenfalls eine Beschreibung enthalten, was getestet wird, also welche Eigenschaft aus welchem Arbeitsentwurf. Zudem sollte angegeben sein, was das erwartete korrekte Verhalten ist und wie man es von einer fehlerhaften Implementierung unterscheiden kann.
Sofern das zu testende Darstellungsprogramm Eigenschaften wie border-radius noch nicht ohne Präfix interpretiert, kann man zum Zwecke des Testens die dafür gedachten Präfixe verwenden (siehe auch das Kapitel Syntax zu dem Thema).
Entsprechend der CSS-Empfehlung hat jedes Darstellungsprogramm für solch experimentelle Textimplementierungen ein eigenes Präfix, welches der zu testenden Eigenschaft voranzustellen ist: -moz- (Mozilla/Gecko wie etwa Firefox); -khtml- (Safari und Konqueror); -webkit- (Safari, Google Chrome, Chromium); -o- (Opera bis zur Version 9)
Der hinten notierte Wert ohne Präfix sorgt dafür, dass - sofern vorhanden - die Interpretation gemäß Empfehlung umgesetzt wird, nicht die gegebenenfalls experimentellen Testvarianten, die davor notiert sind und zu anderen Darstellungen führen können. Um zu testen, ist also im Zweifelsfalle auszukommentieren, was nicht getestet werden soll. Die Programme interpretieren nur die Eigenschaften mit ihren eigenen Präfixen, daher braucht man etwa zum Test von Opera nicht die Eigenschaft für Mozilla auskommentieren, sondern sich nur entscheiden, ob man mit oder ohne Präfix testen will.
Der Außenabstand (margin) gibt den Abstand zu anderen Elementen des Dokuments an. Er schließt direkt an den äußeren Bereich des Rahmens an. Dieser Bereich ist immer transparent.
Neben der zusammenfassenden Eigenschaft margin gibt es auch wieder Eigenschaften für die einzelnen Seiten: margin-top, margin-right, margin-bottom, margin-left.
Der Wert einer Einzelangabe ist eine Länge, eine Prozentangabe oder eines der Schlüsselwörter 'auto' oder 'inherit'. Prozentangaben beziehen sich auf die Breite des umgebenden Blocks.
Initialwert ist 0. Die Eigenschaft wird nicht vererbt. Vertikale Außenabstände haben keinen Effekt bei nicht ersetzten inzeiligen Elementen. Negative Außenabstände können angegeben werden, die Darstellung davon kann aber je nach Darstellungsprogramm unterschiedlichen Einschränkungen unterliegen.
Bei der zusammenfassenden Eigenschaft margin besteht der Wert aus einer Liste von ein bis vier Einzelwerten, die mit Komma separiert werden. Die Zuordnung gilt sinngemäß wie bereits für padding beschrieben.
Die Außenabstände benachbarter Boxen können unter gewissen Umständen bei der visuellen Präsentation zusammenfallen (englisch: collapsing margins). Das bedeutet, es wird nur der größere von zwei benachbarten Außenabständen bei der Präsentation berücksichtigt. Da kann unabhängig von der Verschachtelung auftreten.
Dazu gibt es einige Regeln, die Festlegen, welche Außenabstände zusammenfallen und welche nicht:
Zusätzlich wird festgelegt, wann genau zwei Boxen benachbart sind:
Einfache Methoden, bei Bedarf zusammenfallende Außenabstände zu vermeiden, wäre also die Verwendung eines (unsichtbaren) Rahmens oder eines kleinen Innenabstandes.
Beispiel zweier aufeinanderfolgender Boxen, wo die Außenabstände zwischen den beiden Boxen zusammenfallen.
Oberer Absatz mit einem Außenabstand von 4em.
Unterer Absatz mit einem Außenabstand von 2em.
Beispiel jeweils mit Innenabstand und Rahmen:
Oberer Absatz mit einem Außenabstand von 4em.
Unterer Absatz mit einem Außenabstand von 2em.
Neben dem Verständnis des Boxmodells ist es nützlich zu verstehen, wie die Struktur eines Dokumentes aussieht, welches mit einer Stilvorlage verziert werden soll. Vorrangig wird es sich dabei um ein XML-Format handeln oder um HTML.
Elemente in solchen Formaten sind ineinander verschachtelt. Daneben kann es passieren, dass insbesondere inzeilige Elemente innerhalb von Text als Inhalt eines Elementes auftreten. Während die inzeiligen Elemente direkt mit CSS ansprechbare Strukturen sind, stellt der einfache Textinhalt eines Elementes eine weitere Struktur dar, welche aber nicht gleichrangig mit einem benachbarten inzeiligen Element selektierbar ist. Während man den Elementen also eine selektierbare Box zuweisen kann, hat der Text vor oder nach solchen Elementen oder zwischen zweien einen anonymen Status, entsprechend einer anonymen Box, die nicht direkt selektierbar ist, etwa gibt es keinen Selektor für 'Text nach dem Element X'. Derartiger Text ist nur insgesamt inklusiver zugehöriger inzeiliger Elemente als Inhalt eines Elementes ansprechbar. Dabei bestimmt der Typ der nicht anonymen Box das Verhalten der anonymen Geschwister, hat man also etwa ein Blockelement zusammen mit einfachem Text als Elementinhalt (was auf eine schlechte Struktur des Dokumentes hinweist, falls der Unterschied nicht nur durch die Stilvorlage hervorgerufen wird), so werden die anonymen Boxen für den Text vor und nach dem Blockelement ebenfalls zu anonymen Blockboxen. Hat man hingegen ein inzeiliges Element neben Text, so werden die Texte vor und nach dem inzeiligen Element zu anonymen inzeiligen Boxen.
Für die Präsentation einer Box gibt es charakteristische Eigenschaften wie Größe oder Typ der Box, die Position oder Anordnung der Box im Dokument und die Beziehungen zu anderen Elementen in Dokument, als den Vorfahren, Geschwistern und Nachfahren. Wird der Inhalt eines Elementes durch eine externe Datei ersetzt (zum Beispiel beim (X)HTML-Element img), so können Eigenschaften des externen Dokumentes Einfluß auf die Präsentation haben, aber auch, welcher Bereich des zur Darstellung verfügbaren Platzes dem ersetzten Inhalt eingeräumt wird.
Einfluß auf eine visuelle Darstellung hat auch das zur Darstellung verwendete Modell für den Darstellungsbereich. Es gibt Medien mit einer Seitendarstellung wie klassische Bücher, wo also der Inhalt auf Seiten verteilt wird, die eine technisch bedingte vorgegebene Höhe und Breite haben. Ein ähnliches Modell liegt bei SVG vor, wo angegeben wird, welcher Bereich der Zeichenebene für die Präsentation relevant ist. Daneben gibt es kontinuierliche Medien, bei denen der Inhalt nicht aufgeteilt wird. Während die Breite oft, aber nicht notwendig, festgelegt ist, richtet sich die Höhe der Darstellung nach dem Inhalt. Sind die Abmessungen solcher kontinuierlich dargestellter Dokumente größer als der für die Darstellung verfügbare Platz, so bietet das Darstellungsprogramm einen interaktiven Mechanismus (etwa Rollbalken oder Gesten) an, mit welchem es möglich ist, sich verschiedene Teilbereiches des Dokumentes im Anzeigebereich anzusehen oder die Teilbereiche auch zu vergrößern oder zu verkleinern, um etwa zwischen der Darstellung des kompletten Inhaltes und lesbaren Detailausschnitten zu wechseln. Letztere Möglichkeit der interaktiven Skalierung gibt es insbesondere auch bei dem Modell von SVG, bei dem der Inhalt in der Regel weder auf Einzelseiten verteilt wird, noch die Darstellung dem verfügbaren Platz anders als durch Skalierung angepaßt werden kann.
Bei kontinuierlichen Medien ist demzufolge vom (verfügbaren) Anzeigebereich die Rede, der Bereich, wo Inhalte von Dokumenten dargestellt werden können. Bei SVG kann etwa Höhe und Breite des Dokumentes und sogar auch das Aspektverhältnis an den verfügbaren Anzeigebereich angepaßt werden. Bei der Darstellung von (X)HTML in kontinuierlichen Medien wird hingegen (ohne weitere Stilvorlagen), die verfügbare Breite für die Anzeige des Inhaltes genutzt, Texte dann automatisch umgebrochen, so dass sich die Anzahl der präsentierten Zeilen nach der Menge des Inhaltes richtet und damit auch die Höhe. Reicht der verfügbare Anzeigebereich nicht, wird ein interaktiver Mechanismus zur Verfügung gestellt, um das Dokument relativ zum Anzeigebereich zu verschieben, um auch aktuell nicht sichtbare Teile des Dokumentes zugänglich zu machen. Das Verfahren ähnelt ein wenig dem Umgang mit Schriftrollen statt Büchern, daher spricht man in dem Zusammenhang auch von einem Rollmechanismus oder Rollbalken (englisch: scroll bar).
CSS und auch SVG sprechen in dem Zusammenhang von einer gedachten Leinwand (englisch: canvas), auf welcher die Präsentation des gesamten Dokumentes erfolgt. Das Darstellungsprogramm bietet dem Nutzer dann ein Fenster oder Darstellungsfeld an (englisch: viewort oder viewbox), in welchem das gesamte Dokument oder ein Teil davon sichtbar gemacht wird.
CSS geht bei der Anordnung von Inhalten vom Begriff des beinhaltenden Blockes aus (englisch: containing block). Anordnung und Größe werden oft in Bezug auf solch einen Block bestimmt. Nachdem gemäß Boxmodell eine Box oder ein Block bestimmt wurde, stellt diese für seine Abkömmlinge, allgemeiner seinen Inhalt den beinhaltenden Block dar. Der Anzeigebereich ist entsprechend der anfängliche beinhaltende Block für das gesamte Dokument. Bei Medien mit einer Seitendarstellung ist hingegen die Seite selbst der anfängliche beinhaltende Block.
Mit Layout-Eigenschaften wird Boxen oder Blöcken zugewiesen, zu welchem Typ von Block sie gehören, wie sie positioniert sind, wie sie sich allgemein im Dokument verhalten sollen, beziehungsweise präsentiert werden sollen.
Mit der Eigenschaft display wird festgelegt, welcher Typ eine Box ist, wie sie also präsentiert wird, ob etwa als eigenständiger Block oder als inzeilige Struktur im normalen Textfluß oder auch gar nicht oder als eine spezielle Form wie eine Tabelle oder eine Liste etwa.
Formate wie (X)HTML oder SVG geben vor, welcher Typ für welche Elemente in der Stilvorlage des Darstellungsprogrammes verwendet werden sollten. Bei SVG handelt es sich immer um inzeilige Elemente, bei (X)HTML ist die Zuordnung recht verschieden, je nach semantischer Bedeutung des verwendeten Elementes.
Mit CSS ist es jedoch auch für den Autor möglich, unabhängig von der semantischen Bedeutung eine Präsentation als ein anderer Typ zu erreichen. Insbesondere bei XML-Formaten, welche das Darstellungsprogramm nicht kennt, werden alle Elemente als inzeilig angenommen, weswegen es besonders wichtig für die Lesbarkeit von solchen Dokumenten ist, dass der Autor selbst eine Stilvorlage verfügbar macht, in welcher für alle Elemente mit abweichender semantischer Bedeutung ein angemessener Typ für die Präsentation notiert ist.
Mögliche Werte für display gemäß CSS 2.1 sind die Schlüsselwörter: 'inline', 'block', 'list-item', 'inline-block', 'table', 'inline-table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', 'table-caption', 'none', 'inherit'.
CSS 2.0 und vermutlich in Zukunft auch wieder CSS 3 sehen zusätzlich das Schlüsselwort 'run-in', CSS 2.0 auch noch 'compact' und 'marker' vor. Nicht verfügbar in CSS 2.0 ist 'inline-block'.
Der Initialwert ist 'inline'. Die Eigenschaft wird nicht vererbt, ist für alle Elemente und Medien anwendbar.
Die Schlüsselwörter haben folgende Bedeutung:
Bei 'run-in' wird unterschieden, ob die folgende Box per float oder per Positionierung aus dem normalen Textfluß genommen wurde. Wenn das so ist, ist es eine normale Blockbox. Wenn nicht und eine andere Block-Box folgt, wird die 'run-in'-Box zu deren erster inzeiliger Box, sonst bleibt es eine Block-Box.
'run-in' könnte zum Beispiel verwendet werden, um eine Überschrift niedriger Ordnung (etwa das Element h6 in (X)HTML) in die erste Zeile des folgenden Absatzes zu setzen.
Bei 'compact' ist das Verhalten ähnlich. Wird die folgende Box per float oder per Positionierung aus dem normalen Textfluß genommen, so ist es eine normale Blockbox. Wenn nicht und eine andere Block-Box folgt, wird die 'compact'-Box zu einer inzeiligen Box, sonst bleibt es eine Block-Box. Die 'compact'-Box kann nur einzeilig sein, enthält also keine Zeilenumbrüche, sonst wird sie wie eine Block-Box behandelt. Die Breite der 'compact'-Box wird mit der Breite des Außenabstandes (margin) der folgenden Block-Box verglichen, ob linker oder rechter Rand hängt dabei von der Schreibrichtung ab, in Schreibrichtung die vordere Seite. Ist die Breite der 'compact'-Box größer als die Breite des relevanten margin der Block-Box, wird die 'compact'-Box als normale Block-Box behandelt. Andernfalls wird die 'compact'-Box auf Höhe der ersten Zeile der Block-Box im margin angeordnet, die Höhe der 'compact'-Box beinflußt dann auch die Höhe der ersten Zeile. Mit der Eigenschaft vertical-align kann wie bei inzeiligen Boxen die vertikale Position in der Zeile bestimmt werden.
'compact' kann etwa gut verwendet werden, um bei einer (X)HTML-Definitionsliste den zu definierenden Begriff (Element dt) neben der Definition (Element dd) in einer Zeile anzuordnen. Dafür eignet sich allerdings auch 'run-in', wenn man vermeiden möchte, dass der Außenrand Einfluß darauf hat, ob die Darstellung kompakt in einer Zeile ist oder nicht.
Der Wert 'none' hat offensichtlich das Potential, eine Barriere hinsichtlich der Zugänglichkeit von Inhalten zu erzeugen. Verwenden Autoren diesen Wert, müssen sie folglich sicherstellen, dass bei aktivierter Interpretation von CSS alle Inhalte zugänglich bleiben, beziehungsweise bei deaktivierter Interpretation von CSS nicht vorhandene, verwirrende oder unsinnige Strukturen dargestellt werden. Da insbesondere auch gerne mit der Pseudoklasse :hover Inhalte wieder sichtbar gemacht werden, die mit dem Wert 'none' zuvor statisch als nicht darzustellen gekennzeichnet wurden, ist natürlich ebenfalls sicherzustellen, dass die so behandelten Inhalte auch zugänglich sind, wenn im Darstellungsprogramm der Zustand :hover nicht oder nicht zuverlässig lange umsetzbar ist.
Beim Wert 'none' ist somit immer zu bedenken, dass dies gegebenenfalls relevanten Inhalt für den Nutzer unzugänglich macht, wenn das Darstellungsprogramm CSS interpretiert, während der Inhalt zugänglich ist, wenn die Interpretation von CSS deaktiviert ist. Relevante Inhalte sollen natürlich nicht unzugänglich gemacht werden, von daher ist die Verwendung immer kritisch zu sehen.
Da display auch für alle Medien anwendbar ist, reicht es somit nicht, dass man bei einigen Medien und Darstellungsprogrammen etwa mit den Pseudoklassen :hover oder :focus die Inhalte wieder interaktiv anzeigen lassen kann, denn diese Pseudoklassen sind nicht bei allem Medien und Darstellungsprogrammen verfügbar. Die Struktur des Dokumentes und die Stilvorlage müssen also so umgesetzt sein, dass bei jedem Medium und insbesondere auch ohne Zeigergerät ein Zugang zum Inhalt gewährleistet ist. Ähnliches gilt auch beim der Manipulation der Stilvorlage per Skript (ecma-script, java-script) über das Dokument-Objekt-Modell (DOM) - hier kann es etwa sinnvoll sein, etwas beim Start des Dokumentes per Manipulation des DOM nicht anzeigen zu lassen und es dann interaktiv wieder erscheinen zu lassen. Falsch wäre es hier offenbar, 'display: none' in die normale Stilvorlage zu schreiben, um das interaktive Sichtbarmachen einem Skript zu überlassen, denn dadurch würder der Inhalt für jene unzugänglich, bei denen Skript nicht interpretiert werden. Das richtige Vorgehen kann hier etwa sein, den Inhalt per normaler Stilvorlage anzeigen zu lassen, es dann per Skript verschwinden zu lassen und bei Bedarf dann wieder interaktiv sichtbar zu machen.
Es kann andererseits natürlich auch sein, dass Teile des Inhaltes bei bestimmten Medien nicht relevant sind, so könnte man etwa zum Drucken die Projektnavigation verschwinden lassen, so dass nur der Inhalt gedruckt wird.
Das Element a hat als inzeiliges Element in (X)HTML per Stilvorlage des Darstellungsprogrammes eine inzeilige Box, dies kann in der Autoren-Stilvorlage im Bedarfsfalle überschrieben werden, so dass wie hier die Präsentation eines Blockelementes vorliegt. So werden dann auch Angaben zur Breite oder zum Außenabstand wirksam.
Das a der Klasse 'menuepunkt' wird somit als eigenständige Blockbox präsentiert. In dem Menü werden dann also die einzelnen Menüpunkte untereinander dargestellt, auch wenn es einfach einzelne, aufeinanderfolgende Elemente a sind, die also nicht in einer Liste stehen. Möchte man einerseits das Verhalten einer Blockbox für die inneren Eigenschaften beibehalten, die inzeilige Anordnung aber beibehalten, so würde man in CSS 2.1 eher folgendes formulieren:
Sofern in der Breite genug Platz vorhanden ist, werden so die Blöcke nebeneinander angeordnet, gegebenenfalls wird automatisch in mehrere Zeilen umgebrochen. Ähnlich kann man vorgehen, wenn man die Verweise, was meist semantisch sinnvoller ist, in einer Liste angeordnet hat. Wendet man nun 'inline-block' auf die Listenpunkte an, so kann man aus der sonst vertikalen Anordnung der Listenpunkte auch einfach eine horizontale Anordnung mit automatischem Umbruch machen.
Während display darüber entscheidet, ob etwas überhaupt dargestellt wird oder im Falle des Wertes 'none' eben gar nicht mehr bei der Präsentation des Dokumentes berücksichtigt wird, gibt es mit der Eigenschaft visibility auch die Möglichkeit, nur über die Sichtbarkeit Angaben zu machen. Statt eines unsichtbar gemachten Inhaltes bleibt dann also einfach eine Lücke in der Darstellung an jener Stelle, wo der Inhalt nach wie vor ist. Ähnlich wie bei komplett transparenten Teilen eines Dokumentes trägt der Inhalt also nach wie vor zur Präsentation bei, wenn er unsichtbar ist.
Die Eigenschaft findet Anwendung bei visuellen Medien. Sie wird vererbt.
Folgende Schlüsselwörter können als Werte verwendet werden:
Sinngemäß, wie bereits für display: none' erläutert, gilt es auch, für visibility: hidden' und 'visibility: collapse' darauf zu achten, dass nicht für einige Nutzergruppen Zugänglichkeitsprobleme auftreten. Auch bei Manipulationen über das DOM oder bei der Verwendung von Pseudoklassen ist darauf zu achten, dass relevante Inhalte für alle Nutzer zugänglich bleiben.
Die Sonderrolle des Wertes 'collapse' tritt in Kombination mit bestimmten Tabellen-Werten der Eigenschaft display auf, wenn es sich bei den betroffenen Elementen oder Boxen und Zeilen, Spalten oder Zeilengruppen oder Zeilenspalten handelt. Bei dem Wert wird die gesamte Zeile, Spalte oder Gruppe entfernt, so dass Platz für anderen Inhalt frei wird. Überspannt eine Zelle einen Bereich mehrerer Zeilen oder Spalten, so ist es möglich, daß nur Teile davon durch die Eigenschaft unsichtbar werden, es wird also entsprechend abgeschnitten.
Bei visuellen Medien kann es passieren, dass mehr Inhalt vorhanden ist als in eine Box paßt, deren Größe festgelegt ist, so kann mit der Eigenschaft overflow angegeben werden, was mit dem restlichen, nicht in die Box passenden Inhalt passieren soll.
Prinzipiell gibt es die Möglichkeit, dass der Inhalt übersteht oder abgeschnitten wird oder aber Rollbalken verwendet werden, um die Darstellung so zu verschieben, dass ansonsten nicht angezeigter Inhalt sichtbar wird.
Folgende Schlüsselwörter können als Werte verwendet werden:
Der Initialwert ist 'visible'. Eine Sonderregel gibt es für das Wurzelelement eines Dokumentes, aufgrund der besonderen Struktur bei (X)HTML ebenfalls beim Element body: 'visible' wird dort als 'auto' interpretiert, um zu gewährleisten, dass der Inhalt per Initialwert immer komplett zugänglich ist.
Die Eigenschaft wird nicht vererbt und ist auf Blockelemente in visuellen Medien anwendbar.
Da SVG nur Rollbalken für das gesamte Dokument vorsieht, haben die Werte dort eine spezielle Bedeutung, welche sich zumeist darauf reduziert, dass der überstehende Inhalt entweder sichtbar bleibt oder abgeschnitten wird.
Darstellung eines Absatzes mit 'overflow: visible' (unten drunter wurde hier ein größerer Außenabstand verwendet, ansonsten würde der überstehende Text in den darunter angeordneten Inhalt ragen und faktisch beides unlesbar machen):
Ein Absatz repräsentiert einen abgeschlossenen Gedankengang. Für einen weiteren Gedankengang sollte ein weiterer Absatz verwendet werden. Es handelt sich bei der Formulierung eines Absatz auch um einen Ideenentitätenschöpfungskreativvorgang. Ein Absatz enthält oft mehrere Sätze oder Ideen-Fragmente. Durch die Gruppierung in einem Absatz korreliert der Autor somit die Sätze oder Ideen-Fragmente zu einem neuen Sinnzusammenhang, zu einer neuen Idee, welche über jene der einzelnen Sätze oder Ideen-Fragmente hinausgeht und somit eine neue Entität im Konzept des Autors darstellt.
Dieser Absatz mit 'overflow: scroll':
Ein Absatz repräsentiert einen abgeschlossenen Gedankengang. Für einen weiteren Gedankengang sollte ein weiterer Absatz verwendet werden. Es handelt sich bei der Formulierung eines Absatz auch um einen Ideenentitätenschöpfungskreativvorgang. Ein Absatz enthält oft mehrere Sätze oder Ideen-Fragmente. Durch die Gruppierung in einem Absatz korreliert der Autor somit die Sätze oder Ideen-Fragmente zu einem neuen Sinnzusammenhang, zu einer neuen Idee, welche über jene der einzelnen Sätze oder Ideen-Fragmente hinausgeht und somit eine neue Entität im Konzept des Autors darstellt.
Da bei 'overflow: auto' bei diesem Beispiel vermutlich die gleiche Anzeige einträte, wird in folgendem Absatz der Satz mit dem lächerlich langen Wort einfach weggelassen:
Ein Absatz repräsentiert einen abgeschlossenen Gedankengang. Für einen weiteren Gedankengang sollte ein weiterer Absatz verwendet werden. Ein Absatz enthält oft mehrere Sätze oder Ideen-Fragmente. Durch die Gruppierung in einem Absatz korreliert der Autor somit die Sätze oder Ideen-Fragmente zu einem neuen Sinnzusammenhang, zu einer neuen Idee, welche über jene der einzelnen Sätze oder Ideen-Fragmente hinausgeht und somit eine neue Entität im Konzept des Autors darstellt.
Bei der Verwendung von 'overflow: hidden' kommt es dann wie erwartet zu Zugänglichkeitsproblemen:
Mit der Eigenschaft position können Elemente aus dem normalen Textfluß genommen werden, um sie zu positionieren. Der normale Textfluß in (X)HTML ist erstmal ein linearer, was bedeutet, dass die Elemente nacheinander, wie sie im Quelltext stehen, präsentiert werden. Durch Positionierung ist es bei visuellen Medien auch möglich, die Reihenfolge zu ändern oder auch Strukturen nicht linear nacheinander, sondern etwa teilweise nebeneinander anzuordnen. Der Leser muß dann auswählen, welchen Inhalt er zuerst lesen möchte.
Für den Autor ergibt sich damit das Problem oder die Herausforderung, zu vermeiden, dass positionierte Elemente mit Inhalten im normalen Textfluß überlappen und somit Teile des Inhaltes unlesbar werden. Ferner können positionierte Elemente auch aus dem Anzeigebereich herausragen, somit gegebenenfalls für den Leser unzugänglich werden, weswegen sich der Autor darum mit weiteren Eigenschaften bemühen muß, etwa bei kontinuierlichen Medien im Bedarfsfalle Rollbalken einzusetzen, um die Zugänglichkeit des Inhaltes zu gewährleisten. Während also im normalen Textfluß weitgehend automatisch gewährleistet ist, dass Inhalte für den Leser auch zugänglich sind, übernimmt der Autor für diesen Sachverhalt die komplette Verantwortung, sobald Elemente positioniert werden. Da der Autor nicht die Kontrolle über die Größe des Anzeigebereiches und die verwendete Schriftgröße hat, kann das Problem sehr komplex werden, wenn viele Elemente positioniert werden. Es ist dann eher sinnvoll, nur sehr wenige Elemente zu positionieren, die die anderen Elemente dann enthalten, welche dort einem normalen Textfluß innerhalb des positionierten Elementes folgen.
Die Eigenschaft position wirkt auf alle Elemente bei visuellen Medien und wird nicht vererbt. Die Eigenschaft hat folgende Werte:
Mit den Eigenschaften können positionierte Boxen versetzt werden, beziehungsweise deren Position kann festgelegt werden.
Der Wert ist entweder eines der Schlüsselwörter 'inherit' oder 'auto' oder eine Länge oder ein Prozentwert. Prozentwerte beziehen sich auf die Breite des Blockes, in welchem die Box steht (für left und right) oder auf die Höhe (für top und bottom). Der Initialwert ist 'auto'. Die Eigenschaften werden nicht vererbt und sind anwendbar auf visuelle Medien.
Die Eigenschaften haben einen Effekt, wenn position nicht den Wert 'static' hat.
left bezieht sich auf die Position der linken Seite, right auf die rechte. top bezieht sich auf die Position der oberen Seite, bottom auf die untere.
Bei position 'relative' geben die Eigenschaften also den Versatz zur Position im normalen Textfluß an, bei 'absolute' den Versatz relativ zum positionierten Vorfahren oder dem Wurzelelement, bei 'fixed' relativ zum Anzeigebereich.
Nun kann auch alles positioniert werden und im Bedarfsfalle mit Rollbalken versehen. Dazu kann man den Inhalt etwa in einem anderen Element anordnen, hier mit dem Fragmentidentifizierer 'inhalt', wobei 'inhalt' und 'menue' so im Quelltext stehen, dass das eine kein Vorfahre des anderen ist, beide etwa einzige Kindelemente von body:
Die Rollbalken sollten so im Bedarfsfalle für beide Inhaltsteile unabhängig voneinander erscheinen.
Ähnlich kann mit position 'fixed' vorgegangen werden, etwa so:
Etwas Ähnliches kann sich auch anbieten, um zum Beispiel zwei Versionen eines Textes miteinander zu vergleichen oder Kommentare zu einem Text neben diesem anzuordnen, damit der Leser Textpassagen nebeneinander frei rollen kann. Gegeben seien dazu Fragmente 'version1' und 'version2' mit den jeweiligen zu vergleichenden Inhalten:
Beliebt ist es auch, Teile des Inhaltes als Zusatzinformation dynamisch einzublenden. Diese will man dann gerne etwas versetzt zur Basisinformation angeben. Liegt etwa die Information in Elementen der Klasse 'info' vor und darin befindet sich als Kindelement jeweils ein Element der Klasse 'zusatz' mit der Zusatzinformation, so kann dies sinngemäß umgesetzt werden.
Enthält 'zusatz' etwa bei einem Navigationsmenü weitere interaktive Inhalte wie Verweise, so ist darauf zu achten, dass 'info' und 'zusatz' räumlich überlappen, sonst verschwindet 'zusatz' wieder, bevor das Zeigergerät von 'info' nach 'zusatz' gelangen kann. Ist kein Zeigergerät vorhanden oder nicht über dem Dokument, wird die Zusatzinformation im normalen Fluß angezeigt. Leider gibt es keine spezifische Abfrage in CSS, um spezielle Stilvorlagen für Leser mit Zeigergerät und ohne Zeigergerät getrennt anzubieten, daher kann es hier sinnvoll sein, ähnlich wie im Beispiel zu sehen zu improvisieren.
Einige alte Programme können zudem Probleme mit position 'relative' haben, wenn kein Versatz angegeben ist. Will man diese berücksichtigen, kann man etwa einen Versatz um einen Pixel angeben und diesen dann bei den Kindelementen wieder rückgängig machen oder vernachlässigen.
In diesem Falle wird das die beiden anderen umschließende Quadrat relativ positioniert, es wird um 3em nach rechts versetzt. Die darin befindlichen Elemente werden absolut positioniert. Die zugehörigen Positionsangaben beziehen sich auf das umschließende Element, weil dies ebenfalls positioniert ist. Aufgrund der fixierten Positionierung für das vierte Quadrat findet sich dieses im Anzeigebereich links unten und verdeckt da gegebenenfalls andere Inhalte der Seite, die aufgrund der gewählten Teiltransparenz noch erkennbar sein mögen, dann aber nicht mehr gegebenenfalls anklickbar oder markierbar sind, sofern sie komplett unter dem Element liegen. Sollte dieses gelbe Quadrat im umschließenden grauen dargestellt werden, interpretiert das verwendete Darstellungsprogramm offenbar den Wert 'fixed' nicht.
Eine weitere Möglichkeit, ein Element aus dem normalen Textfluß zu nehmen, besteht in der Verwendung der Eigenschaft float. Anders als bei position wird das Element allerdings nicht direkt anderweitig positioniert, sondern nur nach links oder rechts an den Rand gesetzt, wonach es dann vom folgenden Inhalt umflossen wird. Mit der Eigenschaft clear kann dann für ein folgendes Element festgelegt werden, ob dieses Verhalten des Umfließens aufgehoben wird oder nicht. Sofern aufgehoben, wird dieser Inhalt dann unter dem zu umfließenden Element angeordnet. Dies trifft auch zu, wenn der Platz nicht ausreicht, um beide Inhalte nebeneinander anzuordnen.
Wird ein Element mittels float aus dem normalen Textfluß genommen, muß es auch immer eine definierte Breite haben, etwa festgelegt über die Eigenschaft width oder etwa bei ersetzten Elementen wie Bildern durch die intrinsische Breite.
Das mittels float nach links oder rechts verschobene Element wird zu einer Block-Box. Die Verschiebung erfolgt bis zum Rand der umgebenden Box. In vertikaler Richtung ändert sich die Anordnung nicht, das verschobene Element beginnt oben also in der aktuellen Zeile, in der es begonnen hätte, wenn es nicht verschoben worden wäre - beziehungsweise, sofern es keine aktuelle Zeile gibt, so ist das untere Ende der vorherigen Block-Box der Beginn der verschobenen Box. Somit kann also allenfalls folgender Inhalt die verschobene Box umfließen, nicht vorheriger Inhalt. Ist allerdings Inhalt in derselben Zeile in der verschobenen Box, auch davor, so wird dieser ebenfalls als umfließender Inhalt neben der verschobenen Box angeordnet.
Nicht positionierte Block-Boxen verhalten sich so, als sei das verschobene Element nicht vorhanden, nur ihr inzeiliger Inhalt umfließt gegebenenfalls die verschobene Box.
Es können auch mehrere aufeinanderfolgende Elemente verschoben werden. Solange genug Platz vorhanden ist, werden diese dann nebeneinander angeordnet, das frühere dann näher zum angegebenen Rand. Reicht der Platz nicht mehr aus, wird eine neue Zeile begonnen. Sind insbesondere mehrere aufeinander folgende verschobene Elemente unterschiedlich hoch, so wird die Box in der neuen Zeile neben der letzten der vorherigen angeordnet, die genug Platz neben sich läßt.
Der Außenabstand verschobener Boxen kollabiert nicht mit dem benachbarter Boxen.
float wird nicht vererbt, ist anwendbar aus visuelle Medien und dort auch nicht positionierte Elemente und kann folgende Werte haben:
Sofern display nicht 'none' ist, wird diese Eigenschaft ignoriert, falls der Wert von float entweder 'left' oder 'right' ist (oder sich dieser Wert natürlich aus 'inherit' ergibt).
Mit der Eigenschaft clear kann festgelegt werden, wie Block-Boxen auf zu umfließende Elemente reagieren sollen. Die Eigenschaft clear wird nicht vererbt, ist anwendbar auf visuelle Medien und dort auch Block-Elemente. Sie kann folgende Werte haben:
Gerade Bilder werden also nach links verschoben, allerdings nicht neben schon vorhandene Bilder der Klasse 'gerade'. Ungerade Bilder werden entsprechend nach rechts verschoben, allerdings nicht neben schon vorhandene Bilder der Klasse 'ungerade'. Bilder der Klasse 'neu' werden nie neben Bildern der Klasse 'gerade' oder 'ungerade' angezeigt. Es ist hierbei darauf zu achten, dass die verwendete Bilder eine intrinsische Breite haben, was etwa bei Pixelgraphik immer der Fall ist. Je nach den Angaben im Dokument können SVG-Dokumente eine Breite wie 100% aufweisen, das wäre zwar auch eine intrinsische Breite, schließt aber praktisch aus, dass daneben noch Inhalt angeordnet werden kann - ähnliches gilt für CSS-Boxen mit ähnlichen Angaben. Bei Textinhalten ist in der Regel eine Breite explizit anzugeben.
Zum Beispiel kann auch ein Navigationsmenü so neben dem Inhalt angeordnet werden. Dazu muß das Menü allerdings vor dem sonstigen Inhalt stehen, der es umfließen soll - was meist bei einer Projektnavigation über mehrere Dokumente inhaltlich nicht sinnvoll ist. Enthält das Menü allerdings nur Verweise auf Fragmente im selben Dokument, um dem Leser einen schnelleren Zugriff zu erlauben, ist die Anordnung weit vorne im Quelltext natürlich sehr hilfreich. Dann kommt die Verwendung von float in Betracht, sonst wird man eher die Positionierung vorziehen.
Manchmal möchte man im laufenden Text Erläuterungen unterbringen und dafür nicht das Attribut title verwenden. Der Wert von title wird oft beim Drüberfahren mit einem Zeigergerät dynamisch eingeblendet. Etwa kann das Bedürfnis bestehen, die Zusatzinformation auch ohne Interaktivität ständig verfügbar zu halten oder diese zusätzlich zu strukturieren oder darin Bestandteile zu betonen oder hervorzuheben, wozu man zusätzliche inzeilige Elemente benötigt, was bei der Verwendung des Attributes title ausgeschlossen ist. Stattdessen könnte man etwa die zusätzliche Erläuterung umfließen lassen. Das Umfließen der Zusatzfinformation wird mit der Eigenschaft float erreicht, angewendet zum Beispiel auf ein Element span.Das ist insofern nützlich, als der Nutzer nicht erst herausfinden muß, ob Information vorhanden ist und wie er Zugang zu ihr bekommt. Ohne Interpretation von CSS wird die Zusatzinformation in normalen Textfluß präsentiert, bei Interpretation von CSS geeignet hervorgehoben, womit sich je nach Einsatz eine bessere Ergonomie ergeben kann - kundige Leser überspringen die Zusatzinformation, andere können sich gezielt darauf einlassen. Die Zusatzinformation sollte dann nur so formuliert sein, dass sie sowohl in den normalen Textfluß paßt als auch separiert als Einzelinformation einen Sinn ergibt, auch weil bei der Präsentation vom Nutzer nicht mehr eindeutig zuzuordnen ist, wo die Zusatzinformation exakt im Textfluß angeordnet ist.
Bedingt durch Positionierung und allgemeiner die Herausnahme von Elementen aus dem normalen Textfluß kann es bei visuellen Medien zu Überlappungen von Inhalten kommen.
Mit der Eigenschaft z-index kann für positionierte Elemente angegeben werden, welcher Inhalt über welchem dargestellt wird, wenn Inhalte überlappen. 'Über' ist hier in dem Sinne gemeint, dass man sich eine Achse in Richtung vom Bildschirm zum Betrachter vorstellt. 'Über' oder weiter vorne oder oben ist auf dieser Achse näher zum Betrachter hin gemeint, also jedenfalls besser sichtbar und weniger verdeckt als Inhalte dahinter.
So ergeben sich also Stapel von Inhalten von vorne nach hinten. Das Wurzelelement etabliert einen solchen Stapel-Kontext, der Wurzelstapel-Kontext, auf dem alle anderen aufbauen. Jede Box gehört zu einem Stapel-Kontext und hat darin ein bestimmtes Niveau relativ zu anderen Boxen im selben Stapel-Kontext. Boxen mit größeren Niveau liegen jeweils vor solchen mit kleinerem Niveau. Negative Niveaus sind ebenfalls möglich. Boxen mit gleichen Niveau werden nach der Reihenfolge im Quelltext angeordnet, die spätere also weiter oben.
Erzeugt eine Box einen neuen Stapel-Kontext, so ergeben sich daraus zwei Niveaus, ein Wert 0 für den Kontext, den es erzeugt und ein Wert per z-index für den Kontext, zu dem es gehört. Sofern z-index nicht angegeben ist, hat ein Element dasselbe Niveau wie das Elternelement.
Bei SVG gilt ansonsten ein anderes Modell, wobei dort praktisch von allen dargestellten Elementen die Position im Dokument anzugeben ist. Hier gilt, was weiter hinten im Quelltext steht, ist weiter oben in der Darstellung. Bis einschließlich Version 1.2 gibt es keine Eigenschaft wie z-index, mit welcher dies beeinflußt werden kann. Bei anderen Formaten, wo CSS anwendbar ist, kann mit z-index hingegen die Reihenfolge von positionierten Elementen beeinflußt werden.
Der Wert von z-index ist entweder eine ganze Zahl oder eines der Schlüsselwörter 'auto' oder 'inherit'. Vererbt wird die Eigenschaft nicht, der Initialwert ist 'auto'.
Der Wert von z-index legt also das Niveau im aktuellen Stapel-Kontext fest. Und der Wert legt fest, ob ein eigener Stapel-Kontext erzeugt wird.
Mittels einer ganzen Zahl wird das Niveau im aktuellen Stapel-Kontext festgelegt und ein eigener Stapel-Kontext erzeugt, worin das Niveau '0' ist.
Beim Wert 'auto' ist das Niveau im aktuellen Stapel-Kontext dasselbe wie beim Elternelement. Ein eigener Stapel-Kontext wird nicht erzeugt.
Zum Beispiel soll ein Element mit Fragmentidentifizierer 'Navigation' beim Drüberfahren mit dem Zeigergerät von hinten nach vorne geholt werden, wobei davon ausgegangen wird, dass keine Box ein höheres Niveau als '100' hat und kein niedrigeres als '-100'. Daneben sollte irgendwo, in diesem Falle etwa rechts oben kein anderer Inhalt einen Teil des Elementes überlappen, damit das Drüberfahren mit dem Zeigergerät eindeutig ist.
Mit der Eigenschaft clip kann bei Block-Boxen und ersetzten Elementen wie Bildern der Rand beschnitten werden. Dies bedeutet, es kann ein Bereich der Box angegeben werden, welcher sichtbar dargestellt wird, der Rest nimmt beim CSS für Formate wie (X)HTML Platz ein, ist aber nicht sichtbar. Die Eigenschaft ist auch bei SVG anwendbar, aufgrund des anderen Darstellungsmodelles ist dort aber nur relevant, dass nur ein Teil des Elementes sichtbar dargestellt wird. Mittels clipPath bietet SVG allerdings einen wesentlich allgemeineren Ansatz, um Teile eines Elementes nicht sichtbar darzustellen oder auch mittels mask teilweise nur teiltransparent darzustellen. Aufgrund von Problemen in den CSS-Spezifikationen bei der Definition von clip und den deutlich flexibleren und vielseitigen Möglichkeiten sind diese Methoden in SVG also der Eigenschaft clip vorzuziehen.
Die Eigenschaft ist anwendbar für visuelle Medien und wird nicht vererbt. Ferner muß die Eigenschaft overflow einen anderen Wert als 'visible' haben, damit clip anwendbar ist. Mögliche Werte sind:
Hinsichtlich der Notation und Interpretation des Form-Wertes gibt es in CSS2.0 und CSS2.1 leider unterschiedliche, sich widersprechende Angaben. Da Autoren bei CSS-Stilvorlagen selbst nicht angeben können, welcher Version sie folgen, ist der Form-Wert formal undefiniert. SVG 1.0 und 1.1 legen allerdings explizit fest, dass für SVG die Notation und Interpretation nach CSS2.0 gilt. Da auf die Definition in CSS2.0 allerdings ein falsches Beispiel folgt und sich auch einige Programme trotzdem nach CSS2.1 richten oder die Implementierung von der Empfehlung sonstwie abweicht, ist dies in der Praxis auch kein Verhalten, auf welches man sich verlassen kann. Daher sollte der Form-Wert in der Praxis vermieden werden.
Gemäß CSS2.0 sieht der Form-Wert wie folgt aus, wobei ? jeweils eine Länge oder das Schlüsselwort 'auto' repräsentiert:
rect (? ? ? ?)
Das Ergebnis des Zuschneidens ist ein rechteckiger Ausschnitt. Die Reihenfolge von links nach rechts der vier Werte entspricht dem Abstand von oben, rechts, unten, links von der Kante der Block-Box oder des ersetzten Elementes. 'auto' bedeutet dabei, dass der Rand mit der der Box übereinstimmt. 'auto' entspricht dabei dem Zahlenwert 0. Zahlenwerte geben jeweils den Versatz zu jeweiligen Kante der Box an, wobei positive Abstände nach innen zeigen, also den dargestellten Bereich verkleinern und negative nach außen zeigen, den dargestellten Bereich also vergrößern.
Haben Elternelemente ebenfalls einen solchen Zuschnitt, so gilt für das Kindelement die Schnittmenge als dargestellter Bereich.
Die Definition in CSS2.1 weicht davon in folgenen Punkten ab:
Der Form-Wert sieht wie folgt aus:
rect (?, ?, ?, ?)
Autoren sollen zur Separation jeweils ein Komma verwenden, Darstellungsprogramme müssen aber eine Notation ohne Komma in gleicher Weise interpretieren. Eine Mischung, einmal mit Komma, einmal nur mit Leerzeichen ist in jedem Falle nicht zulässig.
Anders als bei CSS2.0 repräsentieren hier die Zahlenwerte einen Versatz des dargestellten Bereiches von der oberen linken Ecke der Block-Box, beziehungsweise des ersetzten Elementes. Der erste Wert gibt also den Versatz der oberen Kante des darzustellenden Bereiches von der oberen Kante der Box an, der zweite Wert den Versatz der rechten Kante des darzustellenden Bereiches von der linken Kante der Box, der dritte Wert den Versatz der unteren Kante des darzustellenden Bereiches von der oberen Kante der Box an, der vierte Wert den Versatz der linken Kante des darzustellenden Bereiches von der linken Kante der Box. Für den ersten und vierten Wert bedeutet 'auto' dasselbe wie 0, für den zweiten und dritten Wert entspricht das der rechten, beziehungsweise unteren Kante der Box - bei 'auto' ergibt sich also formal, trotz anderer Bedeutung der Werte der gleiche Effekt wie für CSS2.0, sonst stimmt das Ergebnis in der Regel nicht überein.
Wird die Eigenschaft zum Beispiel auf eine Klasse von Bildern angewendet, die verschiedene Größen haben, fällt es mit der Definition von CSS2.0 leicht, bei allen einen gleichgroßen Randbereich abzuschneiden. Bei der Definition nach CSS2.1 fällt es hingegen leicht, bei allen einen gleichgroßen Ausschnitt relativ zur linken oberen Ecke sichtbar zu machen.
Aufgrund der Widersprüche von CSS2.1 gegenüber CSS2.0 wird hier auf ein Beispiel verzichtet. Im Kapitel 'Praxis' finden sich weitere Erläuterungen und auch Alternativen.
Statt einem Rahmen oder einen Abstand zu verwenden, um ein Element vom umgebenden Inhalt abzugrenzen, können auch die Eigenschaften outline* verwendet werden.
Anders als bei border* trägt outline nicht zur Berechnung der Größe oder Position bei und wird immer über den Inhalt gelegt. Ferner resultiert outline nicht zwangsläufig in der Darstellung eines Rechtecks. Die Eigenschaft eignet sich also insbesondere in der Anfangsphase bei der Erstellung des Layouts, wenn man kontrollieren möchte, welche Dimensionen Elemente haben und welche Position sie gerade haben. Die sichtbare Abgrenzung eignet sich dann gut, um das Verhalten einer Box abzuschätzen, ohne das Verhalten dadurch signifikant zu beeinflussen, wie dies etwa beim testweisen Einsatz von border der Fall wäre.
Ähnlich wie bei border gibt es wieder verschiedene Eigenschaften, um das Erscheinungsbild der Abgrenzung zu beeinflussen und eine Eigenschaft outline, die all dies zusammenfaßt. Anders als bei border umgibt outline als Abgrenzung immer das gesamte Element, man kann also nicht angeben, dass man nur eine Abgrenzung nach links, rechts, oben oder unten haben möchte.
Die Eigenschaften sind allesamt anwendbar auf alle Elemente bei visuellen und interaktiven Medien. Die Eigenschaften werden nicht vererbt.
Der Wert zur Angabe der Breite entspricht der von border-width und ist dort bereits erläutert. Initialwert ist auch hier 'medium'.
Der Wert zur Angabe des Stils entspricht dem von border-style und ist dort bereits erläutert. Der Initialwert ist auch hier 'none'.
Der Wert der Angabe der Farbe der Abgrenzung ist entweder eine Farbe oder eines der Schlüsselwörter 'invert' oder 'inherit'. Der Initialwert ist 'invert'.
Bei 'invert' wird eine Inversion der Pixel auf dem Bildschirm vorgenommen, also es wird etwa bei einem weißen Hintergrund eine schwarze Abgrenzung gewählt und umgedreht, jedenfalls so, dass die Abgrenzung sich deutlich von den drunterliegenden Farben unterscheidet. Sollte ein Darstellungsprogramm über keinen Algorithmus verfügen, um die Invertierung zu realisieren, soll es den Wert von color verwenden, ähnlich wie bei der Rahmenfarbe.
Mit outline werden die Einzeleigenschaften zusammengefaßt. Als Wert wird entweder 'inherit' notiert oder eine Kombination von ein bis drei Einzelwerten outline-color, outline-style, outline-width.
Mit Hilfe der Eigenschaft font-family läßt sich angeben, welche Schriftart zur Präsentation in visuellen Medien gewünscht ist.
Der Wert von font-family ist eine Liste von Namen von Schriftarten oder Schlüsselwörtern für generische Schriftfamilien oder das Schlüsselwort 'inherit'. Die einzelnen Listenpunkte sind mit Komma voneinander zu separieren, optionale, zusätzliche Leerzeichen sind auch erlaubt. Namen können oder müssen je nach den verwendeten Zeichen in Anführungszeichen gesetzt werden, wobei einfache (') und doppelte (") Anführungszeichen zulässig sind. Schlüsselwörter dürfen nicht in Anführungszeichen gesetzt sein. Zulässig für Namen, die nicht in Anführungszeichen gesetzt werden müssen, sind solche, die aus Buchstaben oder Ziffern bestehen [a-zA-Z0-9] , zusätzlich den Zeichen '-' und '_' und Zeichen ab dem Zeichen U+00A0. Sie dürfen aber nicht mit einer Zahl beginnen oder einem '-' gefolgt von einer Zahl oder mit zwei '-'. Insbesondere sind also zum Beispiel Namen, die Leerzeichen enthalten, immer in Anführungszeichen zu setzen. Ist der Name einer Schriftart gleich einem der vordefinierten Schlüsselwörter, ist der Namen ebenfalls immer in Anführungszeichen zu setzen.
Die Eigenschaft ist anwendbar auf alle Elemente und wird auch vererbt. Darstellungsprogramme für visuelle Medien müssen immer mindestens eine Schriftart verfügbar haben, der Initialwert ist dann der Name einer verfügbaren Schriftart und ist damit vom Darstellungsprogramm abhängig.
Die Liste wird vom Darstellungsprogramm durchgegangen, im Zweifelsfalle für jeden einzelnen, darzustellenden Glyphen, ob eine Schriftart mit dem Namen verfügbar ist. Ist das der Fall, wird diese verwendet, sonst wird mit dem nächsten Namen weitergesucht. Ist die Liste durchgearbeitet und keine Schriftart gefunden, die zu den angegebenen Namen paßt, so ist die zu verwendende Schriftart undefiniert und es liegt am Darstellungsprogramm, ob eine andere Schriftart zu Präsentation verwendet wird oder die Glyphen gar nicht oder mit Platzhaltern präsentiert werden. Fortgeschrittene Programme können nach erfolglosem Durchgehen der Liste auch ihnen bekannte Namen in der Liste identifizieren und stattdessen eine ähnliche, verfügbare Schriftart auswählen. Das Zeichen für einen nicht verfügbaren Glyphen ist zumeist ebenfalls in einer Schriftart definiert, also auch von der verwendeten abhängig.
Schriftartfamilien werden in fünf Kategorien eingeteilt, den sogenannten generischen Schriftfamilien, welche durch Schlüsselwörter angegeben werden können.
Darstellungsprogramme für visuelle Medien müssen für jedes Schlüsselwort eine Schriftart verfügbar haben (wobei nicht ausgeschlossen ist, dass etwa per Voreinstellung des Nutzers) immer dieselbe Schriftart verwendet wird oder auch eine mit anderen als den angegebenen Charakteristika. Jedenfalls ist sichergestellt, dass ein Text überhaupt irgendwie dargestellt wird, wenn die Werte-Liste von font-family mit einer generischen Schriftfamilie endet.
In CSS werden sogenannte Schriftartfamilien verwendet. Diese Schriftartfamilien können jeweils aus diversen einzelnen Schriftarten bestehen, unten denen mit weiteren Eigenschaften ausgewählt werden kann.
So hat zum Beispiel die Schriftartfamilie Arial die Schriftarten: Arial Bold, Arial Italic oder Arial Bold Italic.
Namen einiger häufig verwendeter Schriftartfamilien sind:
Beispiele für Familien mit einer freien Lizenz, die also prinzipiell überall verfügbar gemacht werden können, aber trotzdem nicht notwendig überall installiert sind:
weitere sind zum Beispiel Linux Libertine, Linux Biolinum, Gentium, Avocado, Liberation, Junicode, Cardo, Computer Modern.
Schriftarten mit freier Lizenz (GNU):
Ein Darstellungsprogramm kann für seine eigene Stilvorlage gezielt Schriftarten auswählen, die verfügbar sind. Auch ein Nutzer kann dies für seine Stilvorlage tun. Der Autor eines Dokumentes hat allerdings kaum Kontrolle darüber, welche Schriftarten beim Nutzer verfügbar sind. Die Dateien mit den Schriftarten unterliegen dem Urheberrecht, was zur Folge hat, dass nicht bei jedem Nutzer jede Schriftart verfügbar ist, weil nicht jeder eine Lizenz hat, die Schriftart zu verwenden. Um keine Lizenzgebühren an andere zahlen zu müssen, haben Konzerne wie Microsoft oft Schriftarten entwickelt, die ähnlich aussehen, wie die Schriftarten, die von anderen unter einer Lizenz stehen und nutzen sie mit einer eigenen Lizenz, was dann zur Folge hat, dass Kunden von Microsoft diese Schriftarten verfügbar haben, nicht aber zwangsläufig andere, die keine passende Lizenz haben. Daneben können die Schriftarten auch in verschiedenen Formaten vorliegen und aus ähnlichen Lizenzgründen kann es Darstellungsprogrammen nicht möglich oder erlaubt sein, bestimmte Formate für Schriftartendateien zu dekodieren, was dann zur Folge hat, dass auch deswegen Schriftarten nicht verfügbar sind.
Von daher ist es immer wichtig, als letzte Option eine generische Schriftfamilie anzugeben und sich nicht darauf zu verlassen, dass für die ansonsten angegebenen Namen von Schriftarten auch exakt jeweils die gewünschte Schriftart verfügbar ist.
Die Regel beschreibt die Eigenschaften einer Schriftfamilie und stellt insbesondere eine Möglichkeit bereit, Schriftartendateien zu referenzieren.
Die allgemeine Syntax der Regel sieht wie folgt aus: Sie beginnt mit der Zeichenfolge '@font-face {' und endet mit dem Zeichen '}' In dem mit geschweiften Klammern gekennzeichnete Block können die Bezeichner notiert werden, die im folgenden erläutert werden.
Anmerkung: Aus verschiedenen Gründen ist es dringend zu empfehlen, nur lokale Quellen mit relativen URIs als Schriftartendateien zu verwenden. Bei externen Dateien hat der Autor etwa keinerlei Kontrolle über Änderungen. Die Verwendung einer relativen URI schützt ferner die Privatsphäre der Nutzer der Seite. Schriftartendateien unterliegen auch oft speziellen Lizenzen, welche die Nutzung einschränken können. Es ist also immer sicherzustellen, dass im jeweiligen Zusammenhang die Verwendung auch erlaubt ist.
Die für @font-face verfügbaren Bezeichner lehnen sich teilweise an gleichnamige Eigenschaften an, erlauben aber auch darüberhinaus eine Einordnung. Die Bezeichnier sind: font-family, font-style, font-weight,font-variant, font-stretch, font-size, unicode-range, units-per-em, src, panose-1, stemv, stemh, slope, cap-height, x-height, accent-height, ascent, descent, widths, bbox, definition-src, baseline, centerline, mathline, topline.
Die Bedeutungen sind die gleichen wie bei den entsprechenden Eigenschaften, mit denen eine Schriftart ausgewählt wird. Nur dass bei dieser Regel nicht ausgewählt wird, sondern die im Element definierten Glyphen einer bestimmten Schriftart mit entsprechenden Eigenschaften zugeordnet werden und dann wiederum als solche für Textelemente ausgewählt werden kann.
Angabe der Schriftfamilie.
Wert entsprechend der gleichnamigen Eigenschaft. Sind mehrere Schriftfamilien angegeben, treffen alle auf die Glyphen zu.
Angabe des Stiles.
Mögliche Werte sind entweder 'all' als Voreinstellung für alle oder eine Liste mit den möglichen Werten 'normal', 'italic', 'oblique'. Was angegeben ist, trifft jeweils auf den definierten Zeichensatz zu.
Angabe der Variante.
Möglicher Wert ist eine Liste mit den möglichen Werten 'normal', der Voreinstellung und 'small-caps'.
Angabe des Gewichtes.
Möglicher Wert ist entweder 'all', die Voreinstellung für alle Gewichte, oder eine Liste von Gewichten mit den möglichen Werten 'normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'.
Angabe der Dehnung.
Möglicher Wert ist entweder 'all' oder eine Liste von Dehnungen mit den möglichen Werten 'normal', 'ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded'. Voreinstellung ist 'normal'.
Angabe der Schriftgröße.
Möglicher Wert ist entweder 'all' oder eine Liste von absoluten Längen.
Angabe des abgedeckten Unicode-Bereiches. Damit wird vermeiden, dass der Zeichensatz überhaupt geladen wird, wenn nur Zeichen außerhalb des angegebenen Bereiches benötigt werden. Der Wert ist eine Liste von Unicode-Bereichen. Voreinstellung ist 'U+0-7FFFFFFF' (Typisch wird der selbst definierte Zeichensatz nicht all diese Zeichen enthalten, daher ist zu empfehlen, den zutreffenden Bereich korrekt anzugeben).
Ein Bereich wird in der hexadezimalen Schreibweise notiert, für ein Zeichen etwa U+215A Dabei gibt es wiederum verschiedene Möglichkeiten. Zum einen kann ein '?' als Platzhalter für die letzte Ziffer verwendet werden, also zum Beispiel U+215?, das deckt dann alle Zeichen von U+2150 bis U+215F ab. Auch zwei Fragezeichen sind erlaubt, also zum Beispiel U+00?? geht dann von U+0000 bis U+00FF (Latin-1). Größere Bereiche können mit zwei Nummern verbunden mit einem Bindestrich notiert werden, Beispiel: U+15C00-15FFF entspricht dem Bereich U+15C00 bis U+15FFF (aztekisch).
Angabe, wievielen Einheiten in lokalen Koordinaten die Einheit em entspricht.
Der Wert ist eine Zahl. Die Angabe ist bei Verwendung vieler anderer Attribute erforderlich, damit diese einen Sinn ergeben.
Der Bezeichner ist erforderlich und ermöglicht es, eine Schriftartendatei zu referenzieren. Der Wert ist eine Liste mit Kommata als Separatoren. Listenpunkte sind Referenzen zu Schriftartendateien oder alternativ der Name einer Schriftart (wie bei der Eigenschaft font-family mit gleicher Funktion, eine Schriftart zu referenzieren, die beim Nutzer gegebenenfalls bereits installiert ist). Referenziert wird durch die Angabe einer URI/IRI der Schriftartendatei in der üblichen Notation für URI/IRI. Optional kann darauf ein Hinweis auf das verwendete Format notiert werden.
Der Hinweis beginnt mit der Zeichenkette 'format(' und endet mit ')'. Dazwischen steht eine Liste mit Kommata als Separatoren. Ein Listenpunkt ist jeweils eine Zeichenkette, die für ein bestimmtes Format steht. Bekannt sind zum Beispiel folgende Zeichenketten:
Angabe der PANOSE-Nummern.
Dabei handelt es sich um Klassifikationsnummern für 'TrueType', insgesamt 10 Zahlen, welche die Schlüsseleigenschaften einer lateinischen Schrift festlegt. Der Wert besteht auch zehn ganzen Zahlen, jeweils durch Leerzeichen getrennt.
Die Voreinstellung sind zehn Nullen, was bedeutet, dass jeder Zeichensatz zu der Nummernkombination passt.
Angabe der vertikalen Stengelbreite (englisch: stem).
Gemeint ist damit eine typische Breite einer vertikalen Struktur bei den Glyphen, zum Beispiel die Breite des vertikalen Stiches von 'L', 'I', 'd', 'p' etc.
Wenn dies Attribut verwendet wird, muss auch units-per-em' verwendet werden.
Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.
Angabe der horizontale Stengelbreite (englisch: stem).
Gemeint ist damit eine typische Breite einer horizontalen Struktur bei den Glyphen, zum Beispiel die Breite von Serifen oder des horizontalen Stiches von 'H', 'L', '-', 'z', 't' etc.
Wenn dies Attribut verwendet wird, muss auch units-per-em' verwendet werden.
Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.
Angabe des Winkels von vertikalen Strukturen.
Sind vertikale Strukturen in einem Zeichensatz nicht exakt vertikal, sondern gekippt, etwa beim Typ 'italic' oder 'oblique'. Es handelt sich um einen Winkel entgegen dem Uhrzeigersinn von der Vertikalen aus zur vertikalen Struktur
Der Wert ist eine Zahl. Die Voreinstellung ist 0.
Angabe der typischen Höhe von großen Buchstaben, von der Basislinie aus gemessen.
Sofern vorhanden ist das zum Beispiel die Höhe von 'M' oder 'H'.
Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.
Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.
Angabe der typischen Höhe von kleinen Buchstaben, von der Basislinie aus gemessen.
Sofern vorhanden ist das zum Beispiel die Höhe von 'x' oder 'a'. Die Größe ist insbesondere wichtig für die Eigenschaft font-size-adjust, weil die Berechnung des Anpassungsfaktors auf dieser Größe basiert. Daher sollte der Wert angegeben werden.
Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.
Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.
Angabe der maximalen Höhe von Buchstaben, von der Basislinie aus gemessen,
aber ohne Akzentzeichen.
Sofern vorhanden ist das zum Beispiel die Höhe von 'l', 'b' oder 'h'.
Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.
Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.
Angabe der maximalen Tiefe von Buchstaben, von der Basislinie aus gemessen, aber ohne Akzentzeichen.
Sofern vorhanden ist das zum Beispiel der Teil unter der Grundlinie von 'j', 'g' oder 'y'.
Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.
Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.
Angabe der Höhe von Zeichen mit Akzent, im Koordinatensystem des Zeichensatzes angegeben.
Der Wert ist eine Zahl. Ist der Bezeichner nicht angegeben, wird der Wert von accent angenommen. Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.
Angabe der Breite von Glyphen.
Der Wert ist eine Liste von Kombinationen von optionalen Unicode-Bereichen und einer Zahl oder mehreren Zahlen.
Der Listenseparator ist ein Komma.
Die Notation des Unicode-Bereiches ist bereits für das Attribut unicode-range beschrieben. Ist kein Bereich für eine Zahl angegeben, wird U+0-7FFFFFFF angenommen.
Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden. Wenn nicht genug Glyphenbreiten angegeben sind, gilt für die restlichen Glyphen der letzte Wert. Sind zuviele angegeben, werden die überschüssigen Breiten ignoriert.
Angabe des maximalen begrenzenden Rechtecks.
Das begrenzende Rechteck ist das kleinste (horizontal und vertikal) ausgerichtete Rechteck, welches jeweils einen jeden Glyphen des Zeichensatzes komplett umschließt.
Der Wert besteht aus einer Liste von vier Zahlen, jeweils mit einem Komma als Separator. Die erste Zahl gibt den x-Wert unten links an, die zweiten den y-Wert unten links, die dritte den x-Wert oben rechts, die vierte den y-Wert oben rechts.
Der Wert ist die URI/IRI in der üblichen Notation für eine Resourcen-Datei zur Aufnahme von Bezeichnern. Wird die Schriftart also in mehreren Stilvorlagen mit der Regel @font-face verwendet, so kann man sich damit die wiederholte Angabe der Bezeichner in den verschiedenen Stilvorlagen sparen und braucht nur jeweils auf die Resourcen-Datei verweisen.
Angabe zur Ausrichtung bezüglich der unteren Grundlinie.
Der Wert ist eine Zahl, die einen Versatz im Koordinatensystem des Zeichensatzes angibt.
Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.
Angabe zur Ausrichtung bezüglich der zentralen Grundlinie.
Der Wert ist eine Zahl, die einen Versatz im Koordinatensystem des Zeichensatzes angibt.
Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.
Angabe mathematischen Ausrichtung bezüglich der Grundlinie.
Der Wert ist eine Zahl, die einen Versatz im Koordinatensystem des Zeichensatzes angibt.
Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.
Angabe zur Ausrichtung bezüglich der unteren Grundlinie.
Der Wert ist eine Zahl, die einen Versatz im Koordinatensystem des Zeichensatzes angibt.
Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.
Mit der Eigenschaft font-size kann die Schriftgröße angegeben werden, genauer die sogenannte Geviertgröße, die mit der CSS-Einheit em korrespondiert. Die Geviertgröße ist ein typisches Maß für einen Glyphen, sofern vorhanden oft gut repräsentiert durch die Breite des Großbuchstabens M. Allerdings können Glyphen sowohl weniger als auch mehr Platz benötigen als 1em, falls es sich um eine proportionale Schrift handelt. Das so festgelegte Maß bestimmt demzufolge also nicht nur die Schriftgröße, sondern auch Längen, die in der Maßeinheit em angegeben werden, zusammen mit der verwendeten Schriftart auch Längen, die in der Maßeinheit ex angegeben werden.
Der Wert ist ein Schlüsselwort für eine absolute Größenangabe oder eine relative Größenangabe oder eine Längenangabe oder ein Prozentwert oder das Schlüsselwort 'inherit' Die Eigenschaft wird vererbt und ist auf alle Elemente bei visuellen Medien anwendbar. Der Initialwert ist das Schlüsselwort 'medium'.
Das Darstellungsprogramm stellt eine geordnete Liste von Schriftgrößen zusammen, ausgehend von der vom Nutzer eingestellten bevorzugten Schriftgröße 'medium'. Von dort aus werden in abnehmender Größe die Werte für die Schlüsselwörter 'small', 'x-small', 'xx-small' bestimmt und mit ansteigender Größe die Werte für die Schlüsselwörter 'large', 'x-large', 'xx-large'.
Mit dem Konzept kann also ausgehend von einer Größe, die festgelegt wird, bevor die CSS-Kaskade einsetzt, ein fester Bezugspunkt für Größenangaben in em oder ex für jede Stelle im Dokument verwendet werden, ohne dass es notwendig ist, die Größe als absolute Längenangabe festzulegen.
Zum Beispiel werden traditionell Überschriften größer präsentiert als normaler Text. Unabhängig von der Positionierung in der Kaskade kann so durch eine absolute Angabe erreicht werden, dass Überschriften gleichen Ranges gleichgroß präsentiert werden, unabhängig davon, wie groß etwa die Geviertgröße des Elternelementes gerade in der Kaskade ist.
Zu beachten ist zudem, dass der Nutzer eine minimale Schriftgröße am Darstellungsprogramm festlegen kann. Kleinere Geviertgrößen werden also automatisch auf diesen Wert gesetzt. Legt der Nutzer etwa fest, dass seine bevorzugte Schriftgröße (entspricht 'medium') auch die minimale ist, so werden auch Schlüsselwörter, die kleinere Größen repräsentieren, nicht kleiner als 'medium' dargestellt. Zudem sollten Darstellungsprogramme für Monitore generell vermeiden, dass eine Größe dieser Liste unterhalb von 9 Gerätepixeln liegt.
Historisch wurde in CSS1 ein Skalierungsfaktor zwischen den Listenpunkte von 1.5 empfohlen, in CSS2.0 einer von 1.2. Auch letzteres kann besonders bei den kleineren Größen noch immer zu Problemen führen, weswegen die Programme auch davon abweichen können, um bessere Lesbarkeit zu erreichen. CSS2.1 gibt deshalb keinen Skalierungsfaktor mehr als Empfehlung vor.
Beispiele für die Präsentation im aktuell verwendeten Darstellungsprogramm:
| xx-small | winzig
|
| x-small | sehr klein
|
| small | klein
|
| medium | mittel
|
| large | groß
|
| x-large | sehr groß
|
| xx-large | riesig
|
Als Schlüsselwörter für relative Angaben sind zudem 'smaller' und 'larger' verfügbar. Ausgehend von der aktuellen Größe wird bei 'smaller' dann von den absoluten Größen die nächstkleinere gewählt, bei 'larger' die nächstgrößere, sofern vorhanden. Entspricht die aktuelle Größe nicht einem der Schlüsselwörter für absolute Angaben, so wird anhand der Liste für absolute Angaben eine Einordnung und Schätzung vorgenommen, um ungefähr eine proportionale Größenänderung zu erreichen.
Längenangaben und Prozente sind im Kapitel numerische Angaben erläutert. Für font-size sind negative Werte nicht erlaubt.
Prozentwerte beziehen sich auf die geerbte font-size, 100% entsprechen also dem Wert des Elternelementes. Entsprechend ist 1em der aktuelle Wert des Elternelementes - der berechnete Wert von font-size und 1ex bestimmt sich aus dem aktuellen 1em zusammen mit der verwendeten Schriftart. Beim Wurzelement entsprechen 100% oder 1em genau dem Schlüsselwort 'medium' oder der vom Nutzer eingestellten optimalen Schriftgröße - von dieser sollte der Autor im normalen Textfluß auch nicht abweichen. Relevant und üblich sind anderen Textgrößen natürlich für besondere Strukturen wie Überschriften.
Hinsichtlich der sinnvollen Verwendbarkeit der möglichen Einheiten kommt es stark darauf an, von wem die Stilvorlage stammt und um welchen Inhalt es sich handelt.
Weil der Nutzer volle Kontrolle und Kenntnis über das verwendete Gerät und das Darstellungsprogramm und seine eigenen Sehgewohnheiten hat, kann dieser natürlich sehr gut Einheiten wie mm, cm, pt, pc, in oder px verwenden, auch für die Stilvorlage des Darstellungsprogrammes kann das sinnvoll sein. Der Autor eines Textes wird hingegen keine Kontrolle oder Kenntnis über diese Dinge haben, daher sind diese Einheiten für ihn weitgehend ungeeignet, jedenfalls für die Präsentation von Text auf einem Monitor. Die Einheit px kann sich noch gut eignen, wenn eine Box nur Pixelgraphik und keinen Text enthält. Für Stilvorlagen zum Drucken können auch die Einheiten mm, cm, pt, pc oder in geeignet sein, sofern der Autor jedenfalls den Druck selbst vornimmt, also zwangsläufig entscheiden muß, wie groß der Text gedruckt werden soll. Werden Text und Stilvorlage hingegen nur bereitgestellt, damit sie vom Nutzer gedruckt werden können, ist es natürlich wesentlich sinnvoller, dass sich die Stilvorlage wie bei der Darstellung am Monitor auch an der vom Nutzer voreingestellten optimalen Größe orientiert, also entweder Schlüsselwörter für die absoluten oder relativen Angaben verwendet oder Einheiten wie em oder ex oder Prozentwerte.
Wie bereits im Kapitel numerische Angaben erläutert, ist zudem die Bedeutung der Einheiten mm, cm, pt, pc, in oder px in CSS2.1 korrumpiert und schon daher nicht verläßlich für Autoren, während die Nutzer immerhin noch direkt nachprüfen können, was das Darstellungsprogramm aus diesen Einheiten macht.
Als Faustformel für Autoren kann also gelten: Für Boxen, die Text enthalten, sind Schriftgrößen mit den Schlüsselwörtern anzugeben oder in Prozentwerten oder in den Einheiten em oder ex. Bei den anderen Einheiten ist eine Prognose über die Präsentation nur schwer möglich und kann beim Nutzer zudem zu Problemen mit der Lesbarkeit führen, was diesen dazu nötigen kann, die Interpretation von Stilvorlagen komplett zu deaktivieren. Ergibt sich aus der Kaskade eine Schriftgröße, die kleiner als die vom Nutzer angegebene minimale Schriftgröße ist, wird diese auf die minimale Schriftgröße korrigiert, folglich darf ein Autor nicht damit rechnen, dass die Angabe von Schriftgrößen garantiert den gewünschten Effekt hat, wenn diese kleiner als 1em für das Wurzelelement ist (ein direktes Maß für die eventuell kleinere minimale Schriftgröße hat der Autor nicht, diese ist jedenfalls nicht größer als 1em des Wurzelelementes).
Mit der Eigenschaft font-weight kann die Schriftstärke beeinflusst werden. Repräsentationen von Glyphen bestehen aus Strichen oder Kurven mit einer gewissen Breite, die allerdings nicht exakt konstant sein muß. Eine große Schriftstärke korrespondiert dabei mit einem relativ breiten Strich, die Schrift wird fett genannt. Eine kleine Schriftstärke korrespondiert dabei mit einem relativ schmalen Strich, die Schrift wird mager genannt. Wären die Repräsentationen der Glyphen wirklich als Striche konstanter Breite realisiert, könnte man die Schriftstärke bei Schriftarten, die mit Vektorgraphik realsiert sind, leicht stufenlos ändern. Weil solche Änderungen aber Einfluß auf die Lesbarkeit hätten, ebenso wie eine exakt immer gleiche Breite des Striches, sind in der Praxis für viele Schriftarten explizit einige Repräsentationen mit verschiedenen Strichstärken verfügbar, die Auswahl ist diskret. Während CSS davon ausgeht, dass die relevanten Stärken mit neun Werten repräsentiert werden können, haben viele Schriftarten ein anderes System, meist mit weniger Werten, was in CSS durch eine Zuordnungsvorschrift gelöst wird. Es ist also oft damit zu rechnen, dass verschiedene Angaben in CSS zur Schriftstärke trotzdem zu Darstellungen mit derselben Schriftstärke führen können. Es kann zudem auch vorkommen, dass nicht alle verfügbaren Schriftstärken einer Schriftart überhaupt mit CSS auswählbar sind, etwa weil diese über das System von CSS mit neun Werten hinausgehen und CSS auch keinen Mechanismus anbietet, die Bezeichungen der jeweiligen Schriftart direkt anzugeben.
Mögliche Angaben sind Schlüsselwörter, zum einen neun Zahlen: 100, 200, 300, 400, 500, 600, 700, 800, 900. Je höher die Nummer desto fetter die Schrift beziehungsweise größer die Schriftstärke. Zum anderen können auch folgende Schlüsselwörter verwendet werden:
font-weight ist anwendbar auf visuelle Medien und alle Elemente und wird vererbt.
Da die meisten Schriftarten eben nicht der Zuordnung zu den neun Stärken folgen, es auch keinen Standard gibt, wie die Stärken einheitlich zu bezeichnen sind und es CSS nicht zuläßt, die Bezeichnungen der verwendeten Schriftart anzugeben, wird folgende heuristische Zuordnung empfohlen: Falls neun Stärken vorliegen, wird diese Zuordnung verwendet. Sonst: Eine normale, mittlere Stärke entspricht dem Wert '500'. Gibt es einen Stärke 'bold' oder 'Bold', wird diese '700' zugeordnet. Sind dann noch weitere Stärken vorhanden, werden die sinngemäß zugeordnet, also fetter als 'bold' mit größeren Werten, magerer als normal' dann kleiner als '500'.
Wenn dann zu einem CSS-Wert eine Zuordnung fehlt, wird bei Werten kleiner als 400 der nächstgelegene verfügbare kleinere Wert verwendet, gibt es diesen nicht, wird der nächstgelegene verfügbare größere Wert verwendet. Bei Werten größer als 500 wird entsprechend der nächstgelegene verfügbare größere Wert verwendet, gibt es diesen nicht, wird der nächstgelegene kleinere Wert verwendet. Bei 400 wird sofern verfügbar 500 gewählt, sonst die nächstgelegene kleinere Stärke als 400. Bei 500 wird sofern verfügbar 400 gewählt, sonst die nächstgelegene kleinere Stärke als 400.
Anmerkung: Im Vektorformat SVG werden Glyphen von Schriftarten als normale Flächen realisiert, die also auch einen Strich haben können (Eigenschaften und Präsentationsattribute vom Typ stroke*), folglich kann man dort auf Kosten der optimalen Lesbarkeit auch die Strichstärke stroke-width auf einen größeren Wert setzen und stroke auf die gleiche Farbe wie fill, um eine größere Schriftstärke zu erreichen, ohne auf eine Auswahl aus den eingeschränkten Möglichkeiten von font-weight zurückgreifen zu müssen. Mit dem Trick läßt sich dann zumindest in dem Zusammenhang teilweise das Problem umgehen, dass bei einer Schriftart nicht alle Strichstärken verfügbar sein mögen.
Mit der Eigenschaft font-style kann die Schrift bei visueller Präsentation besonders hervorgehoben werden. Während bei 'normaler' Schrift markante Züge von Glyphen oft horizontal und vertikal ausgerichtet sind, etwa bei Glyphen wie H, L, F, kann durch den font-style auch eine Verkippung und Scherung der Glyphen erreicht werden. Dabei ist zu unterscheiden zwischen Schriften, die rein rechnerisch durch eine Scherung einer normalen Schrift realisiert werden und solchen, wo der visuelle Effekt der Verkippung durch eine ähnliche Schrift erreicht wird, die aber komplett neu erstellt wird. Bei letzterer kann auch die Verwendung von Ligaturen anders sein, jedenfalls sind die Glyphen nicht durch eine einfache affine Transformation aus der normalen Schrift zu erhalten. Letzterer Typ wird kursiv (englisch italic genannt, ersterer oblique.
Üblicherweise findet die Verkippung in Leserichtung statt, also bei oblique in Form einer Scherung, bei der der Teil des Glyphen oberhalb der Grundlinie abhängig von der jeweiligen Höhe des Fragments nach rechts verschoben wird, je höher, desto mehr verschoben. Unterhalb der Grundlinie wir dann entsprechend mit weiterem Abstand von der Grundlinie mehr nach links verschoben. In Ausnahmefällen gibt es auch eine umgedrehte Richtung sein, also ein Verkippen oben nach links.
font-style hat die Schlüsselwörter 'normal' für eine normale, aufrechte Schrift, 'italic' für kursive Schrift und 'oblique' für eine oblique Schrift und 'inherit'. Ist keine echte kursive Schrift verfügbar, kommt ersatzweise auch eine oblique zum Einsatz.
Der Initialwert ist 'normal'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.
Mit Hilfe der Eigenschaft font-variant lässt sich die Darstellung einer Schrift beeinflussen. Neben der üblichen Darstellung mit komplett unterschiedlichen Glyphen für große und kleine Buchstaben (Majuskeln und Minuskeln) gibt es auch eine Variante, bei welcher für die kleinen Buchstaben lediglich im Wesentlichen verkleinerte Versionen der großen Buchstaben verwendet werden. Diese kleinen Großbuchstaben werden auch Kapitälchen genannt und die Höhe entspricht im Wesentlichen der Einheit 1ex, während die normalen Großbuchstaben die charakteristische Höhe 1em haben.
Dabei können diese Kapitälchen auch hinsichtlich der Lesbarkeit gegenüber der Möglichkeit einer einfachen Skalierung weiter optimiert sein, also einen eigenen Schrifttyp darstellen. Ist solch eine Version für eine Schrift nicht verfügbar, wird stattdessen vom Darstellungsprogramm eine einfache Skalierung vorgenommen.
Mögliche Werte sind:
Der Initialwert ist 'normal'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.
Mit der Eigenschaft font-stretch kann das typische Aspektverhältnis Breite zu Höhe von Glyphen beeinflußt werden. Als einfachste Näherung kann man sich vorstellen, dass ausgehend von einem normalen Aspektverhältnis jede Glyphe in horizontaler Richtung skaliert wird, also gestaucht oder gestreckt. Bei den tatsächlichen Schrifttypen werden allerdings die Glyphen gegenüber dieser einfachen Veranschaulichung hinsichtlich der Lesbarkeit optimiert sein.
Diese Eigenschaft ist in CSS 2.0 verfügbar, aufgrund mangelnder Implementierungen wird sie jedoch in CSS 2.1 nicht erwähnt, und wird erst wieder in einem Arbeitsentwurf für das Font-Modul von CSS3 aufgeführt.
Mögliche Werte sind:
Die Reihenfolge ist von am stärksten zusammengedrängt bis zum am stärksten geweitet: 'ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'normal', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded'. 'narrower' und 'wider' setzen die Eigenschaft dann vom geerbten Wert auf den nächsten engeren oder weiteren in der Liste, ohne aber über die Liste hinauszureichen, 'narrower' als 'ultra-condensed' ist also wieder dasselbe 'ultra-condensed' und entsprechend 'wider' als 'ultra-expanded' ist also wieder dasselbe 'ultra-expanded'.
Die Eigenschaft wird vererbt und ist anwendbar für alle Elemente bei visuellen Medien.
Mit der Eigenschaft font-size-adjust kann ein Korrekturfaktor angegeben werden für den Fall, dass für die gewünschte Schriftart aus der Liste von font-family eine Glyphe fehlt und aus einer anderen Schriftart der Liste genommen werden muß.
Die Eigenschaft ist in CSS 2.0 definiert, aufgrund mangelnder Interpretation in den üblichen Darstellungsprogrammen aber in CSS 2.1 nicht aufgeführt, dafür aber wieder in einem Arbeitsentwurf für ein Modul von CSS 3.
Der Wert ist eine Zahl oder eines der Schlüsselwörter 'none' oder 'inherit'. Der Initialwert ist 'none', keine Korrektur. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.
Die Zahl gibt das Verhältnis zweier charakteristischer Schriftgrößen an. 1 entspricht also der vom Autor gewählten Referenzschrift. Plausible Werte liegen also im Bereich um 1, also jedenfalls größer als 0 und grob zwischen 0.5 und 2, CSS 2.0 macht da aber keine Einschränkungen des verfügbaren Bereiches. Werte zwischen 0 und 1 verkleinern die Schriftgröße bei der Glyphe aus der Ersatzschrift, Werte größer als 1 vergrößern sie.
Die Angabe zu font-family könnte etwa so aussehen:
font-family: MeineSchrift, Cracked, fantasy
Fehlt nun eine Glyphe, zum Beispiel für ℵ in der Schriftart 'MeineSchrift', wird danach in 'Cracked' weitergesucht. Ist auch dort keine Glyphe verfügbar, wird die aus der generischen Schriftfamlie 'fantasy' genommen.
Die Lesbarkeit oder Anmutung der verschiedenen Schriften kann bei gleicher Geviertgröße aber unterschiedlich sein, weil das Verhältnis von 1em zu 1ex bei den Schriften unterschiedlich ist. Mit dem Korrekturfaktor kann dieser Unterschied ausgeglichen werden. Dabei fallen natürlich sofort die Grenzen des Verfahrens auf - der optimale Wert kann für eine Korrektur von 'Cracked' anders ausfallen als für eine Glyphe aus der Schriftart, die für die generische Familie 'fantasy' verwendet wird, man kann aber nur einen Korrekturwert angeben, nicht etwa eine Liste, wie es eigentlich sinnvoll wäre. Zudem weiß der Autor nicht, welche Schriftart für 'fantasy' ausgewählt wird, kann den optimalen Korrekturfaktor also gar nicht kennen. Auch der Entwurf für das Modul von CSS 3 sieht keine Liste vor, aber ein zusätzliches Schlüsselwort 'auto', bei welchem das Darstellungsprogramm die Korrektur automatisch berechnen soll.
Die Eigenschaft font ist eine Zusammenfassung einiger Eigenschaften vom Typ font zuzüglich der Eigenschaft line-height, die in einem späteren Abschnitt dieses Buches genauer beschrieben wird. Der Initialwert entspricht jeweils denen der einzelnen Eigenschaften. Es müssen allerdings nicht für alle Eigenschaften Werte gesetzt werden, für die nicht gesetzten gilt der Initialwert, nicht etwa der geerbte Wert. Die Eigenschaft wird vererbt und ist anwendbar für alle Elemente bei visuellen Medien.
Die Reihenfolge der Eigenschaften im Wert ist vorgegeben, allerdings sind viele Angaben optional, können also weggelassen werden. Zunächst können Werte für font-style, font-variant, font-weight notiert werden, alle optional und egal in welcher Reihenfolge. Dann folgt font-size, optional gefolgt von einer Kombination von einem Schrägstrich '/' mit folgendem line-height, gefolgt von font-family.
line-height wird im Abschnitt über Textformatierungen erläutert und gibt die Zeilenhöhe an, sinnvoller Weise immer größer gleich 1em.
Alternativ zur Liste kann neben 'inherit' auch ein Schlüsselwort angegeben werden, welches einen bestimmten Satz von Werten repräsentiert: 'caption', 'icon', 'menu', 'message-box', 'small-caption', 'status-bar'. Diese Sätze sind im Darstellungsprogramm oder in der verwendeten graphischen Oberflächen definiert.
Mit der Eigenschaft letter-spacing kann der Abstand zwischen den Glyphen beeinflußt werden. Der Wert ist entweder eine Länge oder das Schlüsselwort 'normal' oder 'inherit'.
Initialwert ist 'normal'.Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.
Die jeweilige Schriftart gibt vor, wie groß der 'normale' Abstand zwischen Glyphen ist. Die Längenangabe addiert sich zu diesem 'normalen' Abstand. Mit der Angabe einer negativen Länge kann man also erreichen, dass die Glyphen näher zusammenrücken oder sogar überlappen, bei einer großen Länge erreicht man den Effekt einer gesperrten Schrift, neben kursiv oder fett eine weitere Möglichkeit, Textstellen besonders hervorzuheben. Bei großen Abständen kann das Darstellungsprogramm zudem Ligaturen in einzelne Glyphen aufteilen, um den gewünschten Effekt der Sperrung zu unterstreichen.
Mit der Eigenschaft line-height kann die Zeilenhöhe beeinflußt werden. Der Wert ist eine nicht negative Zahl, eine nicht negative Länge, ein nicht negativer Prozentwert oder eines der Schlüsselwörter 'normal' oder 'inherit'.
Der Initialwert ist 'normal'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.
Wird die Eigenschaft auf Block-Boxen angewendet, welche inzeiligen Inhalt enthalten, so bestimmt die Eigenschaft die minimale Zeilenhöhe des inzeiligen Inhaltes. Bei Anwendung auf inzeilige Elemente bestimmt die Eigenschaft die Zeilenhöhe.
Beim Wert 'normal' wird die Höhe automatisch bestimmt, wobei das Ergebnis von der verwendeten Schriftart abhängt. Auch hoch- oder tiefgestellte Schrift oder ersetzte Elemente wie Bilder können die Zeilenhöhe beeinflussen. Typographisch sollte der Wert auf optimale Lesbarkeit abgestimmt sein, erfahrungsgemäß liegt dann der Wert im Bereich von 1.2 bis 1.5 Geviertgrößen (in der CSS-Empfehlung werden 1.0 bis 1.2 erwähnt, bei 1.0 ist die Lesbarkeit aber bereits deutlich vermindert). Wenn keine besonderen Umstände vorliegen, ist es also ratsam, sich auf den mit 'normal' automatisch bestimmten Wert zu verlassen, die Eigenschaft also zu vermeiden, jedenfalls nicht kleiner als eine Geviertgröße anzugeben. Dabei ist auch zu beachten, dass bei der Einstellung 'normal' auch berücksichtigt wird, dass mehrere, verschieden große Schriftarten in einer Zeile auftreten können, die Zeilenhöhe wird dann immer so angepaßt, dass kein Überlapp mit der Zeile darüber stattfindet. Bei der Einstellung einer festen Zeilenhöhe kann ein Überlapp hingegen schnell geschehen, insbesondere für Werte unter einer Geviertgröße.
Wird eine Zahl angegeben, so ist dies eine Kurzfassung einer Angabe einer Länge mit der Einheit em. Bei der Angabe eines Prozentwertes bezieht sich dieser auf die aktuelle Geviertgröße, also 1em.
Problematisches Beispiel mit einer angegebenen Zeilenhöhe weniger als 1em.
Mit der Eigenschaft text-align kann die horizontale Ausrichtung von inzeiligen Inhalten einer Block-Box beeinflußt werden.
Die möglichen Werte lauten:
Der Initialwert hängt von der normalen Textlaufrichtung ab (etwa festgelegt mit der Eigenschaft direction oder einer entsprechenden Methode). Ist die Textlaufrichtung von links nach rechts, ist 'left' der Initialwert. Ist die Textlaufrichtung von rechts nach links, ist 'right' der Initialwert.
Die Eigenschaft wird vererbt und ist anwendbar auf Block-Container bei visuellen Medien. Die Eigenschaft hat allerdings keine Wirkung, wenn die Eigenschaft white-space den Wert 'pre' oder 'pre-wrap' hat.
Die meisten Darstellungsprogramme nehmen bei der Aufteilung von Text auf Zeilen keine Silbentrennung vor. Reicht der verfügbare Platz nicht mehr für das nächste Wort aus, so wird bei 'left', 'right' und 'center' das nächste Wort als Zeilenanfang der nächsten Zeile verwendet. Ist das Wort länger als die Zeile, steht das Wort über. So nimmt der Text einer Zeile also zumeist weniger Platz ein, als verfügbar ist, manchmal auch mehr. Bei der nicht bündigen Seite entsteht so also leerer Raum oder Text steht über den Rand der Box über. Bei der mittigen Anordnung wird dann entsprechend nach beiden Seiten gleichviel Platz gelassen oder die Wörter stehen gleichviel über.
Bei 'justify' wird das erste Wort entsprechend bündig am Zeilenanfang angeordnet, das letzte bündig zum Zeilenende, jedenfalls sofern es sich nicht um die letzte Zeile handelt oder ein manueller Zeilenumbruch angegeben ist. Besonders durch Variation der Breite der Leerzeichen zwischen den Wörtern, optional auch durch Stauchung der Glyphen oder der Abstände zwischen den Glyphen verteilt das Darstellungsprogramm dann die Wörter mit gleichen Leerzeichenbreiten über die Zeile. Besonders wenn die Breite einer Zeile gering ist und darin nur wenige Wörter stehen, kann dies die Lesbarkeit beeinträchtigen, was zur Ermüdung des Lesers beitragen kann.
'justify' eignet sich daher besser für breite Blöcke, in welchen alle Wörter viel kürzer sind als die Breite des Blockes. Unter diesen Umständen ist auch bei den anderen Ausrichtungen der variable Leerraum auf der nicht bündigen Seite weniger störend als bei Blöcken mit geringer Breite, woraus sich ganz allgemein schließen läßt, dass Autoren geringe Zeilenbreiten vermeiden sollten, gleich welche Anordnung sie bevorzugen. Ist eine kleine Breite hingegen unvermeidlich, gibt es vermutlich bei 'justify' die größeren Beeinträchtigungen hinsichtlich der Lesbarkeit.
Mit Hilfe der Eigenschaft text-decoration lassen sich Textdekorationen angeben. Zum Text werden dazu zumeist zusätzliche Strukturen wie Striche in der Textfarbe color hinzugefügt.
Mögliche Werte sind:
Die Eigenschaft ist anwendbar auf alle Elemente bei visuellen Medien und wird nicht vererbt.
Hinsichtlich der Vererbung ist allerdings anzumerken, dass sich die Dekoration des Elternelementes über inzeiligen Inhalt hin fortsetzt, obwohl die Eigenschaft nicht vererbt wird. Die Frage der Fortsetzung ist bei tabellenartigen Blockelementen undefiniert, der Autor sollte bei einer Abweichung vom Initialwert im Zweifelsfalle die Eigenschaft immer explizit setzen, um ein definiertes Verhalten zu bekommen. Ähnlich undefiniert ist das Verhalten, wenn das Elternelement unsichtbar ist, das Kindelement aber sichtbar, und die Eigenschaft beim Elternelement angegeben ist. Die Eigenschaft setzt sich auch nicht in absolut positionierte Kindelemente fort oder solche, die per float aus dem normalen Textfluß genommen wurden. Die Eigenschaft findet ferner nur Anwendung auf die Glyphen, einschließlich Leerzeichen, nicht auf ersetzte Elemente wie Bilder oder auf inzeilige Blöcke.
Hinsichtlich 'blink' ist zu bedenken, dass dies Zugänglichkeitsprobleme verursachen kann, weil der Leser die Blinkerei nicht gezielt deaktivieren kann, ohne die gesamte Stilvorlage zu deaktivieren, von daher ist von einer Verwendung abzuraten. Auch das zeitliche Verhalten des Blinkens kann nicht eingestellt werden. Generell ist für CSS 3 ein Modul in Vorbereitung, wo man ähnliche Effekte definiert per Animation erreichen kann. Bei SVG ist deklarative Animation bereits jetzt möglich.
Weil die Farbe der Dekoration bestimmt wird durch den Wert von color von dem Element, für welches text-decoration angegeben ist, ermöglicht dies über einen Umweg bei geeigneter Struktur des Dokumentes auch eine Dekoration in anderer Farbe als der des dekorierten Textes. Zum dem Zwecke ist die Textfarbe beim Kindelement zu ändern.
Mit der Eigenschaft text-indent kann eine Einrückung der ersten Zeile von inzeiligem Inhalt von Block-Boxen bewirkt werden. Während es im deutschen Sprachraum zum Beispiel eher üblich ist, Absätze durch einen Leerraum von vorherigen oder nachfolgenden Inhalten zu trennen, gibt es auch eine andere Tradition, nur den Beginn eines Absatzes durch eine Einrückung zu kennzeichnen.
Auch wenn der Autor einen unerwünschten Zeilenumbruch bei der visuellen Präsentation aus Platzmangel befürchtet, kann diese Eigenschaft nützlich sein, um einen erwünschten Zeilenanfang von einem unerwünschten zu unterscheiden. Dies kann etwa wichtig und relevant bei Gedichten sein, wo die Zeilen einer Strophe eine feststehende Struktur sind und nichts mit den automatischen Zeilenumbrüchen zu tun haben, die aus Platzgründen vorgenommen werden. Verwendet ein Autor also für jede Zeile einer Strophe ein Blockelement, so kann er durch text-indent wirksam den beabsichtigten Zeilenanfang von einem automatischen Zeilenumbruch unterscheidbar machen, jedenfalls solange die Zeilen nicht zentriert werden, was den Effekt zwar nicht ausschließt, aber zu einer nicht intuitiv verständlichen Anordnung führt.
Der Wert ist eine Länge oder eine Prozentangabe, auch negative Werte sind erlaubt. Die Prozentangabe bezieht sich auf die Breite des umgebenden Blockes. Der Wert bestimmt dann, wie weit die erste Zeile eingerückt wird. Bei einem positiven Wert beginnt der Inhalt der Zeile also vom Rand des Blockes aus gesehen um die Länge nach innen verschoben, bei negativem Wert nach außen auf den Rand verschoben.
Der Initialwert ist 0. Die Eigenschaft wird vererbt und ist anwenbar auf Block-Container bei visuellen Medien.
Mit der Eigenschaft text-shadow ist es möglich, dass man einen Text mit der naiven Anmutung von Schatten versieht. text-shadow ist bereits in CSS 2.0 definiert, wird aber in CSS 2.1 wegen mangelnder Interpretation in Darstellungsprogrammen nicht aufgeführt, taucht aber in einem Arbeitsentwurf zu einem Modul vonn CSS 3 wieder auf. Zum Beispiel wird die Eigenschaft nicht vom Microsoft Internet Explorer (< Version 10) interpretiert.
CSS 2.0 spricht genaugenommen nur von einem Schatteneffekt, definiert aber nicht präzise, wie dieser Effekt erreicht wird. Aufgrund der Werte und der Beschreibung ist aber von einer angenommenen unendlich weit entfernten, ausgedehnten Lichtquelle auszugehen. Dabei ist die Annahme eine Lichtquelle insofern irreführend, als nicht wirklich etwas beleuchtet wird, sondern der Text lediglich mit einer verwischten und versetzten Kopie des Textes unterlegt wird. Um also den Effekt darzustellen, wird letztlich eine Kopie des Textsegmentes horizontal und vertikal versetzt, dann mit einem Weichzeichner verwischt und hinter dem Text dargestellt. CSS 2.0 definiert auch nicht, was für ein Typ von Weichzeichner verwendet werden soll. Bei Programmen, die auch SVG-Filter interpretieren, wäre es zum Beispiel naheliegend, diese Funktionalität mit einer entsprechenden SVG-Filter-Kombination umzusetzen, bei der die Weichzeichnung mit einem Gaußschen Weichzeichner erfolgt.
Es können zudem mehrere Schatteneffekte angegeben werden, wobei davon auszugehen ist, dass diese einfach gegebenenfalls überlappen und der Schatten nicht etwa durch die Annahme mehrerer Lichtquellen erzeugt wird. Gemäß CSS 2.0 liegt der erste Schatten dann ganz unten, der nächste darüber und so weiter bis ganz oben drauf der Text angeordnet wird. Gemäß dem Entwurf für CSS 3 (Text-Dekoration) ist die Anordnung gerade umgedreht. Da Autoren nicht angeben können, welche Version von CSS sie verwenden, ist das Verhalten also formal undefiniert, sofern der Arbeitsentwurf für das Modul von CSS 3 so als Empfehlung herauskommt. Bereits jetzt ist es wahrscheinlich, dass Darstellungsprogramme nicht die in CSS 2.0 verwendete Anordnung verwenden.
Der Wert ist eines der Schlüsselwörter 'none' oder 'inherit' oder eine Liste mit Schattenparametern, wobei jeder Satz einen Schatten repräsentiert und von den anderen mit einem Komma separiert ist.
Ein Satz besteht aus einer optionalen Farbangabe und zwei oder drei Längenangaben, dabei ist es egal, ob erst die Farbangabe erfolgt und dann die Längen notiert werden oder umgekehrt.
Die Farbangabe bestimmt die Farbe des Schattens (also nicht etwa die der Lichtquelle, was ebenfalls offenbart, dass die mit der Eigenschaft verbundenen Vorstellungen von Schatten nichts mit dem zu tun haben, was man im täglichen Leben als Schatten erlebt). Ist keine Farbe angegeben, so wird die aktuelle Farbe per color verwendet.
Die erste Länge bestimmt den horizontalen Versatz, positiver Wert bedeutet, der Schatten wird nach rechts verschoben, negativer nach links. Die zweite Länge bestimmt den vertikalen Versatz, positiver Wert bedeutet, der Schatten wird nach unten verschoben, negativer nach oben. Die dritte optionale Länge bestimmt den Radius der Weichzeichnung. 0 entspricht also offenbar dem scharfen, klassischen Schatten einer unendlich weit entfernten Punktlichtquelle. Ein anderer Wert führt zu einer Weichzeichnung des Schattens, also im wesentlichen zu einer gewichteten Mittelung aller Pixel innerhalb der angegebenen Länge als Radius um den darzustellenden Pixel.
Der Initialwert ist 'none'. Die Eigenschaft wird nicht vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.
Mit Hilfe der Eigenschaft text-transform kann Text so präsentiert werden, dass er unabhängig von der Notation im Quelltext groß- oder kleingeschrieben erscheint oder aber auch nur der Anfangsbuchstabe jeden Wortes großgeschrieben wird. Betroffen sind also nur Buchstaben oder Glyphen, für welche es sowohl Majuskeln als auch Minuskeln gibt, also vorrangig zum Beispiel im deutschen Sprachraum die Buchstaben A-Z, a-z, Umlaute und die ß-Ligatur, wobei letztere ein Problemfall ist, weil für den Großbuchstaben der ß-Ligatur (also: ẞ) erst 2008, also recht spät eine Kodierung im Rahmen von Unicode (U+1E9E, ẞ) eingeführt wurde, der Großbuchstabe also in vielen Schriftarten gar nicht enthalten sein mag.
Mögliche Werte sind:
Der Initialwert ist 'none'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente in visuellen Medien.
Die Eigenschaft vertical-align dient zur vertikalen Ausrichtung des Inhaltes inzeiliger Elemente oder von Inhalt in Tabellenzelle.
Mögliche Werte sind eine Längenangabe, ein Prozentwert, welcher sich dann auch die line-height des Elementes bezieht oder eines folgender Schlüsselwörter:
Bei einer Längenangabe 0 oder einer Prozentangabe 0% entspricht dies 'baseline', dem Initialwert. Positive Werte verschieben die Box nach oben, negative nach unten.
Die Eigenschaft wird nicht vererbt und ist anwendbar auf inzeilige Elemente und Tabellenzellen bei visuellen Medien. Die Werte 'sub', 'super', 'text-top' und 'text-bottom', Längenangaben und Prozentangaben sind nicht auf Tabellenzellen anwendbar und werden wie 'baseline' interpretiert.
Mit der Eigenschaft white-space kann festgelegt werden, wie mit Leerzeichen und Zeichen für Zeilenumbrüche umgegangen werden soll. Dies bezieht sich hauptsächlich auf die Frage, ob mehrere aufeinanderfolgende Leerzeichen und Zeilenumbrüche vor der Präsentation zu einem Leerzeichen zusammengefaßt werden sollen oder wenn nicht, ob auch Zeichen für Zeilenumbrüche Zeilenumbrüche in der Präsentation bewirken sollen oder auch nicht oder ob automatische Zeilenumbrüche stattfinden sollen oder nicht.
Mögliche Werte sind:
Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.
Mit der Eigenschaft word-spacing kann der Präsentationsabstand zwischen den einzelnen Wörtern eines Textes beeinflußt werden.
Der Wert ist eine Länge oder eines der Schlüsselwörter 'normal' oder 'inherit'. Der Initialwert ist 'normal'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.
Die Schriftart oder das Darstellunngsprogramm selbst gibt vor, welcher Abstand zwischen Wörtern als normal anzusehen ist. Dies entspricht dem Schlüsselwort 'normal'. Relativ dazu kann der Abstand vergrößert oder verkleinert werden. Dazu wird die angegebene Länge zum normalen Abstand hinzuaddiert. Inbesondere ergeben sich bei den durchaus erlaubten negativen Werten also kleinere als normale Abstände.
Man beachte, dass auch die Eigenschaft text-align den Wortabstand beeinflussen kann, insbesondere beim Wert 'justify'. Bei einer entsprechenden Kombination kann es also zu Abweichungen zur Angabe von word-spacing kommen. Je nach Implementierung können sich auch bei negativen Längen Einschränkungen bei der korrekten Präsentation ergeben - man sollte sich also nicht darauf verlassen, dass etwa beim letzten der folgenden Beispiele die Reihenfolge der Wörter vertauscht wird.
Mit den Eigenschaften direction und unicode-bidi kann die Präsentation von Inhalten hinsichtlich der Schreibrichtung beeinflußt werden. Dabei ist zu bedenken, dass Zeichen aus dem Vorrat von Unicode bereits Informationen über die Schreibrichtung enthalten. Ist es ferner inhaltlich relevant, davon abzuweichen, so gibt es dafür in der verwendeten Sprache wie XHTML oder SVG entsprechende Attribute. Die Eigenschaften decken also nur die sehr seltenen Fälle ab, wo die Präsentation von der inhaltlich relevanten Reihenfolge abweichen soll. Diese seltenen Fälle treten auch meist nur auf für jene wenigen Autoren, welche die Stilvorlagen der Darstellungsprogramme entwerfen, weniger die Autoren von normalen Dokumenten, denen empfohlen wird, die Eigenschaften nicht gewohnheitsmäßig einzusetzen, sondern allenfalls, um sehr spezielle Probleme zu lösen. Der normale Autor braucht sich also allenfalls die Existenz der Eigenschaften merken, nicht die konkrete Nutzung.
Generell ist die Schreibrichtung von lateinischer Schrift und auch von griechischer Schrift und den meisten ihrer Abkömmlinge, Nachfahren und Variationen von links nach rechts. Historisch interessant ist hier etwa die etruskische Schrift, die von rechts nach links geschrieben wurde, allerdings mit Glyphen, die zumindest teilweise aus dem Griechischen abgeleitet wurden, während Teile der lateinischen Schrift wiederum aus dem Griechischen und Etruskischen abgeleitet wurden.
Neben diesen großen Sprach- und Schriftfamilien wird heute natürlich auch zum Beispiel arabisch oder hebräisch geschrieben, also von rechts nach links. Besonders im asiatischen Raum gibt es auch Schriften von oben nach unten. Von unten nach oben tritt hingegen nicht auf oder ist zumindest nicht weit genug verbreitet, um allgemein bekannt zu sein.
Spannend wird es nun, wenn in einem Dokument Fragmente mit unterschiedlichen Schreibrichtungen vorkommen. Für ganze Absätze ist dies meist kein Problem, weil Unicode die richtige Schreibrichtung ja ohnehin vorgibt. Etwa aber bei einem Zitat im laufenden Text mit anderer Schreibrichtung stellt sich dem Autor nun die Frage, ob die Schreibrichtung auch mitten im Text umgedreht werden soll oder nicht. Das Phänomen wird Bidirektionalität genannt, im englischen Sprachraum hat sich dafür auch die Kurzform bidi etabliert.
Mit der Eigenschaft direction wird die eigentliche Schreibrichtung vorgegeben.
Mögliche Werte sind:
Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien. Damit die Eigenschaft bei inzeiligen Elemente wirksam ist, muß allerdings die Eigenschaft unicode-bidi entweder den Wert 'embed' oder 'bidi-override' haben.
Neben der Schreibrichtung hat die Eigenschaft auch Einfluß auf die Anordnung oder Reihenfolge von Tabellenspalten, auf die Richtung von überstehenden Inhalten in Zusammenhang mit overflow und die Ausrichtung der letzten Zeile eines Blockes mit text-align mit dem Wert 'justify'.
Die Eigenschaft bestimmt, in welcher Weise gegebenenfalls Unicode-Regeln für Bidirektionalität überschrieben werden sollen.
Mögliche Werte sind:
Die Eigenschaft wird nicht vererbt und ist in der beschriebenen Form anwendbar auf alle Elemente bei visuellen Medien.
Mit der Eigenschaft cursor kann beeinflußt werden, wie ein Zeigergerät dargestellt wird, sofern eines beim Nutzer vorhanden ist, was nicht unbedingt sein muß, etwa bei einem Tast- oder Grabbelbildschirm, wo die Bedienung direkt durch Fingergesten auf dem Bildschirm erfolgt.
Ein typisches Zeigergerät ist etwa die Maus. Die vom Nutzer verwendete graphische Oberfläche oder auch das Darstellungsprogramm selbst stellen Präsentationen eines solchen Zeigers bereit, die sich je nach der aktuellen Anwendung ändern können, also wozu der Zeiger gerade verwendet wird. Da der Nutzer an die jeweilige Erscheinung gewöhnt ist, ist es oft suboptimal, die Präsentation des Zeigers willkürlich zu ändern oder auch eine Erscheinung zu wählen, die nicht zur aktuellen Aktion paßt.
Der Wert ist entweder 'inherit' oder eines der folgenden Schüsselwörter oder eine Liste von URIs, mit einem Komma als Separator, gefolgt von einem der folgenden Schlüsselwörter. Die Angabe einer URI wird im folgenden Abschnitt erläutert.
Die Beschreibungszeile ist jeweils mit dem entsprechenden Zeiger dekoriert, fährt man mit dem Zeigergerät drüber, sollte zu sehen sein, wie das eigene Darstellungsprogramm den jeweiligen Zeiger darstellt.
Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen und interaktiven Medien.
Ein eigener Zeiger lässt sich aus einer Datei laden. Dazu ist die URI wie üblich anzugeben, also angefangen mit 'url(', dann die URI, dann ')', im Bedarfsfalle die URI in Anführungszeichen. Es können in einer Liste mehrere Dateien für Zeiger angegeben werden, bevorzugt in verschiedenen Formaten, wird das erste Format vom Darstellungsprogramm nicht interpretiert, wird das nächste in der Liste versucht und so weiter. Daher ist als letzter Listenpunkt immer ein Schlüsselwort aus obiger Liste anzugeben, damit überhaupt ein Zeiger angezeigt werden kann, der die gewünschte Aktion repräsentiert.
Es ist in CSS nicht angegeben, dass es erforderlich ist, dass ein bestimmtes Format interpretiert werden muß. Zwar können mittlerweile sehr viele Programme SVG-Dokumente interpretieren, was aber auch nicht bedeutet, dass diese auch Zeiger aus Dateien darstellen können, obgleich SVG sogar im Detail definiert, wie solch ein Zeiger in einem SVG-Dokument zu notieren ist, um verwendet werden zu können und wo genau der Zeigepunkt liegt, was nicht bei allen Formaten möglich ist. Auch innerhalb von SVG-Dokumenten funktioniert die Darstellung solcher Zeiger aufgrund von Fehlern oder Lücken von Darstellungsprogrammen oft nicht. Bei SVG jedenfalls wird ein Zeiger mit einem speziellen Element realisiert, welches den für SVG üblichen Inhalt hat, entsprechend wird das Element per Fragmentidentifizierer in obigem Deklarationsblock identifiziert - eine Datei kann also eine ganze Kollektion von Zeigern enthalten, die man so referenzieren kann.
Die Dateien mit den Endungen '.ani' und '.cur' verwenden ein Format, welches von Microsoft stammt, also auch nicht bei allen Programmen funktionieren müssen oder anders als die einfachen Text-Dateien im Falle von SVG von allen Autoren auch herstellbar sein müssen.
PNG, GIF oder JPEG/JFIF wiederum stellen nicht die Funktionalität bereit, den Zeigepunkt anzugeben, was auch mit CSS nicht direkt möglich ist, weswegen sich diese Formate nur eingeschränkt für diesen Zweck eignen. Hier fehlt CSS also eine Funktionalität, um diese allgemein gebräuchlichen Pixelgraphik-Formate für diesen Zweck gut nutzbar zu machen.
Auf Tabellenelemente wirken die meisten Eigenschaften wie auf andere Elemente ähnlichen Typs. Aufgrund der besonderen inhaltlichen Bedeutung haben aber einige Eigenschaften eine besondere Bedeutung, die meist jeweils bei der jeweiligen Eigenschaft behandelt wird.
Allerdings gibt es auch einige Eigenschaften, die speziell für Tabellen bestimmt sind, die hier besprochen werden, dazu kommen jene Werte von display, die die Präsentation beliebiger Elemente als Tabellenelemente bewirken können.
Die Eigenschaft display hat unter anderem einige Werte, mit welchen beliebige Elemente als Tabellenelemente präsentiert werden können. Das ist unter anderem nützlich, wenn bei einem dem Darstellungsprogramm unbekannten XML-Format die Präsentation als Tabelle bewirkt werden soll - auch bei der Stilvorlage des Darstellungsprogrammes selbst etwa für (X)HTML kann so die Funktion einer Tabelle erreicht werden.
Die betreffenden Werte sind:
Elemente mit den Werten 'table-column' oder 'table-column-group' werden selbst nicht direkt dargestellt, sind aber nützlich, um den Spalten oder Spaltengruppen bestimmte Eigenschaften zu verleihen. Dies sind die Eigenschaften border, falls border-collapse den Wert 'collapse' hat, background, width und visibility mit dem Wert 'collapse'.
Mit der Eigenschaft caption-side kann angegeben werden, wie die Tabellenbeschriftung zur Tabelle angeordnet werden soll.
Mögliche Werte sind:
Die Eigenschaft wird vererbt und ist anwendbar auf visuelle Medien und Elemente mit dem Wert 'table-caption' für display.
Die Beschriftungen werden als Block-Boxen angesehen, die gegebenenfalls Eigenschaften von der Tabelle erben, in welcher sie stehen.
Ein optimales Layout einer Tabelle ist ein komplexer Vorgang, der mit CSS auch nicht präzise kontrolliert werden kann. Im Zweifelsfalle kann ein Darstellungsprogramm die Angaben der Stilvorlage immer zugunsten einer besseren Lesbarkeit ignorieren. Dennoch kann auf das Layout in gewissem Umfange Einfluß genommen werden.
Mit der Eigenschaft table-layout kann angegeben werden, ob eher ein schneller oder lieber ein optimaler, automatischer Algorithmus verwendet werden soll.
Mögliche Wert sind
Die Eigenschaft wird nicht vererbt und ist anwendbar auf Elemente mit der Eigenschaft display mit dem Wert 'table' oder 'inline-table' bei visuellen Medien.
Beim Layout-Typ 'fixed' handelt es sich um einen schnellen Algorithmus, bei dem die Breite der Tabelle nicht vom Inhalt abhängt. Der Typ findet nur Anwendung, wenn die Breite der Tabelle mit dem Attribut width explizit vorgegeben wird. Sind Breiten für Spalten explizit angegeben, werden diese verwendet. Der verbleibende Platz, abzüglich Rahmen und Abstände wird dann gleichmäßig auf die verbleibenden Spalten aufgeteilt. Ist die Breite der Tabelle größer als die Summe von Spalten, Rahmen und Abständen, wird der verbleibende Platz gleichmäßig auf die Spalten verteilt. Ansonsten wird die Breite der Tabelle vergrößert, so dass Spalten, Rahmen und Abstände hineinpassen.
Der Typ 'auto' ist nicht genau festgelegt. Jedenfalls wird dabei immer überprüft, ob der Inhalt jeder Zeile von der Breite her in die Zelle paßt, sonst wird die Spalte entsprechend vergrößert - insbesondere tritt das auf, wenn inzeiliger Inhalt wir lange Wörter oder Bilder breiter sind als die angegebene Breite einer Spalte oder Zelle. Daraus ergibt sich dann ein langsamerer Prozeß, der allerdings vermeidet, dass sich Inhalte von Zellen überlappen.
Eine Zelle wird als leer angesehen, wenn sie nicht sichtbar ist oder außer maximal einem kollabierten Leerzeichen nichts enthält.
Für solche leeren Zellen kann mit der Eigenschaft empty-cells angegeben werden, ob Rahmen und Hintergrund dargestellt werden sollen oder nicht.
Mögliche Werte sind:
Die Eigenschaft wird vererbt und ist anwendbar auf Elemente mit dem Wert 'table-cell' für display bei visuellen Medien.
Listen sind besondere Strukturen, die auch insbesondere visuell speziell präsentiert werden, etwa mit Symbolen für Listenpunkte und mit Einrückungen. Daher stellt CSS auch einige Eigenschaften bereit, die speziell dazu dienen, die Darstellung von Listen zu beeinflussen.
Hat display den Wert 'list-item', so wird eine Block-Box erzeugt für den Inhalt des Listenpunktes. Hinzu kommt eine weitere Box für das Listensymbol, auf welche spezielle Eigenschaften wie list-style-type und list-style-image wirken. Das mögliche Listenpunktsymbol (englisch: marker, also Markierung) ist also in einer eigenen Box angesiedelt, ist somit selbst nicht Ziel der Eigenschaften, die auf die Box selbst angewendet werden, wie etwa der Hintergrund.
Die Darstellung des Symbols für oder vor einem Listenpunkt kann mit der Eigenschaft list-style-type beeinflußt werden.
Der Wert ist eines der folgenden Schlüsselwörter. Die Eigenschaft wird vererbt und ist anwendbar auf visuelle Medien und dort auf Elemente mit display 'list-item'. Ferner hat die Eigenschaft nur einen Effekt, wenn die Eigenschaft list-style-image den Wert 'none' hat.
Mögliche Schlüsselwörter:
Weitere zur Numerierung:
Weitere zur Numerierung, nicht in CSS2.1 aufgeführt, aber in CSS2.0:
Weitere mit Buchstaben, wobei der Autor darauf achten muß, dass die Liste nicht mehr Listenpunkte hat als das jeweilige Alphabet Buchstaben hat:
Beispiel:
Zahlen römisch und arabisch:
Statt der mit list-style-type vorgegebenen Symbole kann auch ein eigenes verwendet werden. Dazu wird mit der Eigenschaft list-style-image ein Bild von dem Symbol referenziert.
Der Wert von list-style-image ist entweder eines der Schlüsselwörter 'inherit' oder 'none' oder die Angaben einer URI/IRI eines Bildes in der für CSS üblichen Notation 'url("BildIRI.svg")', wobei "BildIRI.svg" für die URI/IRI eines Bildes steht. CSS selbst sieht keine spezifischen Formate vor, die interpretiert werden müßten, typisch sind etwa SVG, PNG, JFIF/JPEG, GIF.
Der Initialwert ist 'none'. Bei 'none' wird kein Bild verwendet, sondern gemäß list-style-type vorgegangen. Die Eigenschaft wird vererbt und ist anwendbar auf Elemente mit display 'list-item' bei visuellen Medien. Das Bild ersetzt dann das mit list-style-type angegebene Symbol, aber nur sofern das Bild verfügbar ist, was man auch auf nicht interpretierte Bildformate übertragen kann.
Hinsichtlich der Größe (Höhe und Breite) des dargestellten Bildes wird jene verwendet, die im Bild angegeben ist, sofern es solche Angaben komplett gibt. Ist stattdessen nur eine Angabe zum Aspektverhältnis verfügbar und nur entweder Höhe oder Breite sind angegeben, so wird die fehlende Größe anhand des Aspektverhältnisses bestimmt. Ist nur das Aspektverhältnis verfügbar, wird eine Breite von 1em angenommen und die Höhe gemäß Aspektverhältnis berechnet. Ist kein Aspektverhältnis verfügbar, wird sofern angegeben die Breite verwendet, sonst 1em. Entsprechend wird die angegebene Höhe verwendet, sofern verfügbar, sonst 1em.
Das Listenpunktsymbol hat eine eigene Box gegenüber jener Box des Listenpunktes selbst. Entsprechend kann angegeben werden, wie diese Box zu positionieren ist. Es gibt aber nur die Möglichkeit, dies recht vage anzugeben. Dazu dient die Eigenschaft list-style-position.
Der Wert von list-style-position ist eines der Schlüsselwörter 'inherit', 'inside', 'outside'. Der Initialwert ist 'outside'. Die Eigenschaft wird vererbt und ist anwendbar auf Elemente mit display 'list-item' bei visuellen Medien.
Bei 'inside' wird die Box des Symbols als erste inzeilige Box in der Box des Listenpunktes untergebracht. Mit CSS2.1 ist keine genaue Positionierung möglich. Bei 'outside' wird die Box des Symbols außerhalb der des Listenpunktes untergebracht. Bei der Schreibrichtung von links nach rechts links daneben, bei der Schreibrichtung von rechts nach links rechts daneben, was jeweils eine Einrückung des Listenpunktes zur Folge hat.Genauere Angaben dazu macht CSS2.1 nicht.
Beispiel
Zahlen römisch und arabisch (kompakte Darstellung mit 'inside'):
Mit der Eigenschaft list-style gibt es eine Kurznotation für list-style-type, list-style-image, und list-style-position.
Der Wert ist entweder das Schlüsselwort 'inherit' oder eine Liste der drei Eigenschaftswerte in beliebiger Reihenfolge, wobei nur mindestens ein Eigenschaftswert notiert werden muß. Der Initialwert entspricht einer Liste der Initialwerte der einzelnen Eigenschaften. Die Eigenschaft wird vererbt und ist anwendbar auf Elemente mit display 'list-item' bei visuellen Medien. Wie üblich für Kurznotationen wird für nicht gesetzte Werte jeweils der Initialwert verwendet. Wird 'none' als Wert gesetzt, bezieht sich das immer sowohl auf list-style-type als auch auf list-style-image.
Man beachte auch die korrekte Verwendung von Selektoren bei verschachtelten Listen. Zum Beispiel setzt ol li {list-style: circle } alle Listensymbole auf einen Kreis, falls diese in einem Element ol stehen, also auch solche, die etwa in einer untergeordneten Liste stehen, welche selbst in einem Listenpunkt notiert ist. Eine gezieltere Zuordnung kann mit einem Kindselektor erfolgen: ol > li {list-style: circle }. Das trifft dann nur auf Listenpunkte zu, welche direkte Kinder eines Elementes ol sind, nicht auf solche, die etwa in einem Element ul zu finden sein mögen, welches seinerseits lediglich Kindelement eines Listenpunktes ist.
Aufgrund der Selektivität der Selektoren werden hier also ineinander verschachtelte Listen mit anderen Symbolen versehen als solche, wo das nicht der Fall ist.
Mit der Eigenschaft marker-offset kann angegeben werden, um wieviel horizontal das Listensymbol von der zugehörigen Box versetzt dargestellt wird. Die Eigenschaft ist in CSS 2.0 definiert, aber einweilen in CSS 2.1 aufgrund mangelnder Interpretation durch gängige Darstellungsprogramme einstweilen wieder gestrichen.
Der Wert von marker-offset ist entweder eine Länge oder eines der Schlüsselwörter 'auto' oder 'inherit'. Der Initialwert ist 'auto'. Bei 'auto' bestimmt das Darstellungsprogramm den Abstand selbst.
Die Eigenschaft ist anwendbar auf Elemente mit der Eigenschaft 'display: marker' bei visuellen Medien. Die Zuordnung zu 'display: marker' kann natürlich auch bereits durch die Stilvorlage des Darstellungsprogrammes oder die Bedeutung des Elementes erfolgen, somit ist die Eigenschaft zum Beispiel bei (X)HTML pauschal auf die Listensymbole für Elemente vom Typ li anwendbar, um Einfluß auf diese Markierungen zu nehmen.
Pseudoelemente und Pseudoklassen stellen spezielle Selektoren dar. Während sich die üblichen Selektoren auf Elemente beziehen, die in bestimmter Weise in der Dokumentstruktur stehen, gehen die Pseudo-Strukturen über diese einfache Methode der Selektion hinaus und ermöglichen es auch, Elemente oder Strukturen zu selektieren, die etwa in einem besonderen Zustand sind oder sich auch an einer bestimmten Stelle in einer Struktur befinden.
Besondere Strukturen, die nicht als Elemente selektierbar sind, aber über Pseudoelemente selektierbar sind, sind etwa das erste Textzeichen oder die erste Zeile des Inhaltes eines Elementes. Mit Pseudoelementen können auch Strukturen vor oder nach dem Inhalt eines Elementes eingefügt werden, etwa eine automatische Numerierung oder Anführungszeichen bei Zitaten, aber es können auch inhaltlich nicht relevante Texte oder Bilder hinzugefügt werden.
Pseudoklassen selektieren zumeist Strukturen, die in einem besonderen Zustand sind.
Bei Verweisen kann unterschieden werden, ob diese schon besucht worden sind oder noch nicht. Mit der Pseudoklasse :link werden Verweise selektiert, welche noch nicht besucht wurden. Mit der Pseudoklasse :visited werden Verweise selektiert, nachdem sie besucht worden sind.
Hinsichtlich des Datenschutzes und der Privatsphäre kann ein Darstellungsprogramm auch alle Verweise als noch nicht besucht betrachten, um zu vermeiden, dass ein Autor über die Stilvorlage und die Verwendung der Pseudoklasse :visited herausbekommen kann, welche Seiten der Nutzer bereits besucht hat. Ferner kann bei dynamisch erzeugten Seiten oder solchen, die aufgrund der Übergabe von get- oder post-Parametern erzeugt werden, nicht pauschal davon ausgegangen werden, dass der Nutzer den Inhalt bereits kennt, was dann ebenfalls dazu führen kann, dass :visited bei solchen Verweiszielen keinen Effekt erzielt.
Mit :target wurde mit CSS3 eine neue Pseudoklasse eingeführt, mit welcher Verweisziele selektiert werden können.
Dies trifft zu auf Formate wie (X)HTML und SVG, bei denen man Fragmente mit Fragmentidentifiziern kennzeichnen kann und diese dann bei einem Verweis als Ziel im selben oder einem anderen Dokument angeben kann. In (X)HTML notiert man etwa in dem Zusammenhang beim Element a das Attribut href mit einem Fragmentidentifizierer als Wert, zum Beispiel href='#unten', was dann zu einem Element führt, für welches notiert ist: id='unten'. Bei einem Fragment in einem anderen Dokument wird die Struktur entsprechend angehängt, etwa so: href='index.xhtml#unten'. Wurde jedenfalls der Fragmentidentifizierer nicht aufgerufen, trifft auch die Pseudoklasse nicht zu. Da maximal ein Fragmentidentifizierer aufgerufen werden kann, kann die Pseudoklasse offenbar auch nur auf maximal ein Element zutreffen.
Ermöglicht ein Darstellungsprogramm die interaktive Nutzung von Inhalten, so gibt es auch Möglichkeiten, besondere Zustände von Elementen zu selektieren. Dabei ist auch zu bedenken, dass CSS nicht präzise den Zeitablauf definiert. Anders als bei Ereignissen, die etwa bei SVG zur deklarativen Animation verwendet werden oder auch bei Skripten, kennzeichnen Zustände keinen präzisen Zeitpunkt, sondern bei CSS eher einen ungefähren Zeitabschnitt, welcher gegebenenfalls einen Anfang und ein Ende haben kann, aber nicht muß.
Mit der Pseudoklasse :hover können Elemente selektiert werden, welche sich im Zustand der Aufmerksamkeit des Nutzers oder der Markierung oder der Auswahl befinden, ohne es aber zu aktivieren. Bei gängigen interaktiven Darstellungsprogrammen und der Nutzung eines Zeigergerätes wie einer Maus wird dieser Zustand erreicht, indem sich das Zeigergerät über dem Element befindet. Wichtig dabei ist, dass nicht interaktive Darstellungsprogramme diesen Zustand nicht umsetzen können. Ebenso kann solch ein Zustand ausgeschlossen sein, wenn das verwendete Gerät kein Zeigergerät hat, welches sich permanent über etwas befindet, beziehungsweise kann der Zustand dann schwierig vom Nutzer aufrecht zu erhalten sein. Dies kann etwa der Fall sein bei Geräten, die nicht über ein Zeigergerät verfügen, sondern der Nutzer seine Finger oder einen Stift auf einer sensitiven Oberfläche zur Steuerung verwendet. Entsprechend darf die Funktion oder der Informationsgehalt eines Projektes nicht von der Funktion dieser Pseudoklasse abhängen, wird sie in einer Stilvorlage verwendet. Besonders problematisch ist dabei ein durchaus häufiger Anwendungsfall, bei dem Inhalte zunächst statisch per 'display: none' aus der Darstellung entfernt werden, durch Verwendung von :hover beim Elternelement aber wieder eingeblendet werden. Ist die Funktion von :hover nicht gegeben oder vom Nutzer nicht hinreichend einfach aufrecht zu erhalten, können so Inhalte unzugänglich werden und der Nutzer kann gezwungen sein, die gesamte Stilvorlage zu deaktivieren, um sich den Inhalt zugänglich zu machen.
Leider stellt CSS 2 keine Pseudoklasse zur Verfügung, die zutrifft, wenn der Zustand :hover vom Darstellungsprogramm realisierbar ist, aber gerade nicht zutrifft. Hilfsweise könnte das Ausblenden etwa ebenfalls mit der Pseudoklasse :hover etwa beim Wurzelelement erfolgen.Siehe aber auch den Abschnitt über den Negations-Selektor :not von CSS3 weiter unten.
Die Pseudoklasse ist ansonsten bei allen Elementen anwendbar. Beliebt ist es zum Beispiel für Farbänderungen (nicht nur) bei Verweisen.
Mit der Pseudoklasse :active können Elemente selektiert werden, die sich gerade im Zustand der Aktivierung durch den Nutzer befinden, die gerade aktiv sind. Bei der Verwendung einer Maus könnte dies etwa während des Anklickerns der Fall sein. Aktivierung ist allerdings eher unabhängig von der Eingabemethode als :hover, so kann man etwas etwa auch per Tabulator/Tastatur aktivieren.
Nicht nur Verweise können aktivierbar sein, generell ist dies bei allen Elementen der Fall, die auswählbar oder anwählbar sind.
Mit dieser Reihenfolge wird erreicht, dass alle Farben einmal angenommen werden. Würde man etwa :hover hinter :active angeben, könnte man :active allenfalls bei Geräten sehen, welche den Zustand :hover nicht umsetzen können. Bei Verwendung einer Maus als Zeigergerät hingegen ist praktisch immer der Fall gegeben, dass sich der Mauszeiger über dem Element befindet, wenn es aktiviert wird.
Mit der Pseudoklasse :focus werden Elemente ausgewählt, welche gerade den Fokus haben, also etwa per Bedienung über die Tastatur oder auch bei einer Textangabe eines Formulars. Das verwendete Format sollte festlegen, welche Element fokussierbar sind. Zum Beispiel gibt es in SVG tiny 1.2 zusätzlich das Attribut focusable mit dem vom Autor festgelegt werden kann, ob ein Element fokussierbar ist oder nicht. Das ist bei SVG besonders relevant, weil da jedes Element dazu dienen kann, eine deklarative Animation zu beginnen oder zu beenden, es also dann sinnvoll ist, solch ein Element mit der Funktion eines Knopfes fokussieren zu können. Im Bedarfsfalle könnte man also bei SVG tiny 1.2 einem Element auch zeitweise die Fokussierbarkeit entziehen, um die Bedienung eines solchen Knopfes zeitweise zu unterbinden.
Je nachdem, welche Pseudoklassen zutreffen, gibt es also eine andere Farbe und Hintergrundfarbe. Treffen :focus und :hover gleichzeitig zu, gibt es eine weitere bunte Variante.
Unterschiedliche Formate können unterschiedliche Methoden haben, um die im Text verwendete Sprache zu kennzeichnen. Bei XML-Formaten kann ganz allgemein etwa das Attribut xml:lang verwendet werden.
Mittels der Pseudoklasse :lang kann ein Element entsprechend einer Sprachangabe selektiert werden. Neben der allgemeinen Methode mit xml:lang bei XML-Formaten kann die Sprache auch anders festgelegt sein, bei HTML etwa mit dem Attribut lang.
Verwendet wird zur Selektion die Angabe des internationalen Sprachkürzels in Klammern, also für deutsch etwa: :lang(de).
In verschiedenen Sprachen werden etwa für Anführungszeichen andere Zeichen verwendet. Für Zitate gibt es aber etwa in (X)HTML spezielle Elemente, weswegen bei diesen die Anführungszeichen vom Darstellungsprogramm automatisch zu setzen sind, nicht vom Autor. Dieser kann aber wiederum über die Stilvorlage Einfluß darauf nehmen, welche Zeichen verwendet werden.
Die Stilvorlage funktioniert dann also unabhängig davon, ob man sie für XHTML mit dem Attribut xml:lang verwendet oder für HTML mit lang.
Insbesondere, aber nicht zwangsläufig nur bei Eingabeelementen von Formularen können diese einen bestimmten, durch Nutzer-Interaktion oder Vorgabe des Autors bestimmten Status annehmen. CSS3 bietet nun einige Pseudoklassen als Selektoren für Elemente in solchen Zuständen.
Mit der Pseudoklasse :enabled werden freigegebene oder aktivierte Elemente selektiert. Umgedreht werden mit der Pseudoklasse :disabled deaktivierte oder nicht freigegebene Elemente selektiert. Zutreffend ist beides nur für Elemente, die sowohl einen aktivierten als auch einen deaktivierten Status haben können. Welche Elemente dies sind, ist von der verwendeten Sprache abhängig. Bei (X)HTML können etwa Eingabeelemente von Formularen als disabled oder readonly markiert werden, das wären also Beispiele für Elemente, auf welche die Pseudoklassen zutreffen.
In (X)HTML gibt es auch Formulareingaben in Form von Auswahlboxen vom Typ 'radio' oder 'checkbox'. Diese können vom Nutzer wechselseitig ein- und ausgestellt werden. Auch andere Formulareingaben können vom Nutzer ausgewählt oder markiert werden (Attribute selected und checked). Solche ausgewählten oder selektierten Elemente können mittels der Pseudoklasse :checked selektiert werden. Allerdings können Auswahlboxen vom Typ 'radio' oder 'checkbox' auch in einem Zustand sein, der weder 'ein' noch 'aus' ist, ihr Zustand ist dann unbestimmt, was etwa eintreten kann, wenn im Quelltext des Dokumentes einer Radio-Gruppe keines der Elemente als ausgewählt markiert ist. Mit der Pseudoklasse :indeterminate können solche Elemente mit unbestimmtem Status selektiert werden.
Zur Selektion des Wurzelelementes eines Dokumentes stellt CSS3 die Pseudoklasse :root bereit. Während bei (X)HTML-Dokumenten das als Wurzelelement zu verwendende html nur einmal im Dokument auftritt, kann etwa in SVG das Element svg auch anderweitig verwendet werden, nicht nur als Wurzelelement. Auch wenn XHTML in ein anderes Format eingebettet wird, ist html, sofern verwendet, nicht mehr das Wurzelelement, welches dann vom einbettenden Format bereitgestellt wird. Daher kann es also notwendig sein, ein Element direkt mit der Pseudoklasse :root zu selektieren und nicht direkt über den Selektor für den Elementnamen. Die Selektion des Wurzelelementes erfolgt damit folglich auch unabhängig vom verwendete Format.
Mit der Pseudoklasse :first-child wird ein Element selektiert, welches das erste Kindelement eines anderen Elementes ist.
Zum einen wird also der Listenpunkt mit dem Inhalt 'Rahner Zupfall' ausgewählt, welcher dann kursiv dargestellt wird. Zum anderen wird der Inhalt des Elementes i im Element h1 hellgelb auf dunkelblauem Grund dargestellt. Das liegt auch daran, dass der vorangehende Text in der Überschrift eine anonyme Box darstellt, die nicht selektierbar ist, folglich ist das i das erste Kindelement.
Mit der in CSS3 eingeführten Pseudoklasse :last-child kann auch das letzte Kind selektiert werden. Entsprechend dem vorherigen Beispiel zu :first-child bekommt man dann:
Nun wird also der Listenpunkt mit dem Inhalt 'Puddel Wol' ausgewählt, welcher dann kursiv dargestellt wird.
Ist ein Element einziges Kindelement eines Elternelementes, so ist dieses in CSS3 mittels :only-child selektierbar. Das entspricht zum Beispiel der Selektorkombination :first-child:last-child.
Wenn es erstmal die Möglichkeit gibt, das erste und letzte Kind auszuwählen, ist es naheliegend, dass auch das Bedürfnis aufkommt, jedes andere Kind gezielt anhand seiner Anordnung auswählen zu können. Dies ist möglich mit der in CSS3 eingeführten Pseudoklasse :nth-child().
In der Klammer wir dann ein Ausdruck notiert, welcher angibt, welches Kind selektiert werden soll. Seien a und b Variablen für ganze Zahlen, so ist der in der Klammer zu notierende Ausdruck: 'anb'.
Bei a ist die Angabe eines Vorzeichens bei einer nicht negativen Zahl optional, bei b ist das Vorzeichen immer anzugeben.
Bei a = 0 kann der vordere Teil auch weggelassen werden, also nur 'b'. Dann ist für b auch das Vorzeichen optional.
Ist a = 1 oder a= -1, so kann a auch weggelassen werden, also nur 'nb'.
Ist ferner b = 0 darf auch dieser Teil weggelassen werden, also nur 'an' oder 'n'.
Für jede nicht negative ganze Zahl n wird dann jedes Element ausgewählt, welches das Kind a * n + b des Elternelementes ist. Leerzeichen zwischen den Strukturen sind erlaubt, also etwa auch ' -1 n + 3 ', insbesondere also bei b auch ein Leerzeichen zwischen dem Vorzeichen und der Zahl, aber nur, falls vor dem Vorzeichen noch wenigstens das 'n' steht.
Beispiele:
Statt '2n+0' darf auch das Schlüsselwort 'even' notiert werden und statt '2n+1' auch das Schlüsselwort 'odd'.
Statt von vorne, kann man auch von hinten zählen, dazu dient die Pseudoklasse :nth-last-child() von CSS3. Die Syntax für den in der Klammer zu notierenden Ausdruck ist dieselbe wie für :nth-child(), es wird nur beim letzten Element zu zählen begonnen.
Beispiele:
Während sich die vorherigen Pseudoklassen auf alle Kindelemente bezogen, ist es in CSS3 auch möglich, bestimmte Elemente zu selektieren als Untermenge all jener Elemente mit demselben Elementnamen und als Kinder eines gemeinsamen Elternelementes.
Während sich die vorherigen Pseudoklassen auf alle Kindelemente bezogen, werden mit :nth-of-type() von CSS3 nur Elemente eines bestimmten Typs selektiert, also mit demselben Elementnamen. Die Syntax für den Klammerausdruck und die sonstige Bedeutung ist dieselbe wie für :nth-child().
Die Pseudoklasse :nth-last-of-type() von CSS3 entspricht :nth-of-type(), nur wird hier wie bei :nth-last-child() von hinten gezählt, die Syntax des Klammerausdruckes entspricht wieder der von :nth-child().
Analog zu :first-child und :last-child ist es nach CSS3 auch direkt möglich, das erste und letzte Element eines bestimmten Typs zu selektieren. :first-of-type wählt das erste Element eines Typs aus, :last-of-type das letzte.
Ist ein Element einziges Kindelement eines bestimmten Typs eines Elternelementes, so ist dieses in CSS3 mittels :only-of-type selektierbar. Das entspricht zum Beispiel der Selektorkombination :first-of-type:last-of-type.
Hat ein Element keine Kindelemente, kann es mit :empty selektiert werden
Mit dem Negationsselektor :not von CSS 3 ist es möglich, einen einfachen, nicht zusammengesetzten Selektor zu negieren. Die Syntax dazu ist ein angehängter Ausdruck, der den zu negierenden Selektor enthält. Stellt 'X' einen Selektor dar, so ist also zu notieren ':not(X)'. :not darf nicht selbst der zu negierende Selektor sein.
Einfache Selektoren in diesem Sinne sind:
Elementselektor, Universalselektor, Attributselektor, Klassenselektor, Fragmentselektor, Pseudoklasse.
Ein Pseudoelement, wie in folgenen Abschnitten erläutert, ist in diesem Sinne kein einfacher Selektor, ebensowenig wie zusammengesetzte Selektoren.
Das könnte sinnvoll sein für eine Navigation, bei der Untermenüs aufklappen sollen, wenn über einen Eintrag des übergeordneten Menüs gefahren wird. Per 'display: none' werden diese Untermenüs nur entfernt, wenn nicht mit einem Zeigergerät über den übergeordneten Menüeintrag gefahren wird. Da allerdings :hover nicht sehr präzise definiert ist, ist ausgiebig zu testen, wie dieser Negations-Selektor wirklich in Zusammenhang mit :hover implementiert ist, um herauszufinden, ob sich dieser Mechanismus dafür eignet, alle Inhalte aufgeklappt zu halten, falls :hover gar nicht verfügbar ist. In der Hinsicht ist die Definition in CSS 3 für :not nicht sehr präzise.
Keine Textdekoration, wenn das Element a kein Verweis ist.
Bis Version CSS 2.1 teilen Pseudoelemente mit Pseudoklassen dieselbe Notation mit vorangehendem Doppelpunkt. Gemäß dem betreffenden CSS3-Modul ist allerdings zur Unterscheidung für Pseudoelemente ein vorangehender Doppelpunkt zu verwenden, bei Pseudoelementen, die bereits in CSS 2.1 definiert sind, kann jedoch auch die alte Notation mit einem vorangehenden Doppelpunkt verwendet werden. Es empfiehlt sich allerdings pro Dokument eine einheitlich Verwendung, wenn also Pseudoklassen von CSS3 im Dokument verwendet werden, sollten alle Pseudoklassen mit vorangehendem doppelten Doppelpunkt verwendet werden.
Die erste Zeile eines Block-Elementes kann mit dem Pseudoelement :first-line selektiert werden. Zum Beispiel könnte so eine (alternative) Präsentation von Absätzen erreicht werden.
word-spacing, letter-spacing, text-decoration, text-transform und line-height. Die Interpretation anderer Eigenschaften ist für das Darstellungsprogramm optional erlaubt.
Der erste Buchstabe oder allgemeiner die erste Glyphe der ersten Zeile eines Blockes kann mit dem Pseudoelement :first-letter selektiert werden, falls diesem kein anderer Inhalt vorangeht, etwa Bilder oder inzeilige Tabellen. Dabei sollte vorangehende Zeichensetzung wie etwa Anführungszeichen oder etwa das spanische umgedrehte Fragezeichen mit in dieses Pseudoelement einbezogen werden. Entsprechend gelten auch Ligaturen oder Zahlen als mögliche Kandidaten für :first-letter. Beginnt das Blockelement in (X)HTML aber etwa mit einem erzwungenen Zeilenumbruch per Element br, so enthält die erste Zeile kein Zeichen, das Pseudoelement wird also gar nicht angewendet.
Das Pseudoelement bietet also eine weitere (alternative) Möglichkeit, um zum Beispiel Absätze zu kennzeichnen. Bekannt ist etwa bei älteren, typographisch aufwendig gestalteten Büchern, dass der Beginn eines Kapitels oder Absatzes mit einem besonders großen und speziell dekorierten Anfangsbuchstaben beginnt, der gegebenenfalls von den folgenden Zeilen umflossen wird.
Anwendbar sind bei dem Pseudoelement Eigenschaften für Schriftarten, Farbe, Hintergrund, Außen- und Innenabstände, Ränder, word-spacing, letter-spacing, text-decoration, text-transform, line-height, float und vertical-align. Die Interpretation anderer Eigenschaften ist für das Darstellungsprogramm optional erlaubt.
Mit den Pseudoelementen :before und :after können Strukturen erzeugt und in die Darstellung eingefügt werden. Da CSS nur eine Stilvorlagensprache ist und daher nicht die Aufgabe hat, den eigentlich relevanten Inhalt von Dokumenten zu erzeugen, sollte man die in CSS verwendete saloppe Verwendung des Wortes 'Inhalt' (englisch: content) nicht in dem Sinne mißverstehen, dass man damit inhaltlich relevante Strukturen hinzufügen könnte. Aber ähnlich wie mit display: none auch relevanter Inhalt von der Präsentation ausgeschlossen werden kann, so kann mit diesen Pseudoelementen auch etwas eingefügt werden, was inhaltlich allerdings per Definition nicht relevant ist und somit auch aus Sicht des Autors nicht relevant sein darf. Gleichwohl können solche Ausgaben aber die Ergonomie und Verständlichkeit eines Projektes verbessern, gerade auch wenn die Strukturen im Sinne von Hilfen für die akustische oder taktile (Braille) Präsentation verfügbar gemacht werden.
Mit diesen Pseudoelementen gibt es auch einen Mechanismus einer automatischen Numerierung, also bei Listen etwa die Listennumerierung. Eine automatische Numerierung ist allerdings gelegentlich auch bei einer Strukturierung mit Kapiteln und Überschriften hilfreich und möglich.
Mit den Pseudoelementen :before und :after kann angegeben werden, wo erzeugte Strukturen im Dokument einzuordnen sind. Bei Verwendung von :before wird die Struktur vor dem Inhalt des Elementes eingeordnet, bei :after danach. Mittels content wird angegeben, was eingeordnet wird. Andere Eigenschaften werden angegeben, um festzulegen, wie die Struktur dargestellt werden soll. :before und :after erzeugen so Boxen, die genau wie im Dokument vorhandene Elemente behandelt werden.
Die Eigenschaft ist anwendbar bei allen Medien und wirkt auf die Pseudoelemente :before und :after. Die Eigenschaft wird nicht vererbt, der Initialwert ist das Schlüsselwort 'normal'.
Der Wert ist entweder eines der Schlüsselwörter 'normal', 'none' oder 'inherit' oder eine Liste, deren mögliche Listenpunkte im Folgenden noch erläutert werden. Die Liste enthält mindestens einen Listenpunkt.
Bei 'none' wird das Pseudoelement nicht erzeugt. Bei 'normal' entspricht der berechnete Wert 'none' für :before und :after.
Mögliche Listenpunkte sind eine Zeichenkette, eine URI/IRI, ein Zähler, ein Kennzeichner für einen Attributwert und die Schlüsselwörter 'open-quote', 'close-quote', 'no-open-quote' und 'no-close-quote'.
Bei dem Schlüsselwort 'open-quote' wird jene Zeichenkette verwendet, die per Eigenschaft quotes als öffnendes Anführungszeichen festgelegt ist. Bei dem Schlüsselwort 'close-quote' wird jene Zeichenkette verwendet, die per Eigenschaft quotes als öffnendes Anführungszeichen festgelegt ist. 'no-open-quote' und 'no-close-quote' führen keine weitere Zeichenkette ein, erhöhen ('no-open-quote') oder erniedrigen ('no-close-quote') aber das Niveau der Verschachtelung von Zitaten um eins.
Zeichenketten werden in doppelten oder einfachen Anführungszeichen notiert. Kommt in der Zeichenkette das verwendete Anführungszeichen selbst vor, so ist es zu maskieren, also '\"' oder '\22' oder "\'" oder "\27". Das Zeichen für eine neue Zeile ist im Verwendungsfalle auch immer zu maskieren, also "\A" oder "\00000a".
Für eine URI, IRI wird die übliche Syntax verwendet, etwa für ein Bild namens 'Bild013.svg' wäre das dann zum Beispiel url('Bild013.svg') oder url("Bild013.svg").
Der Kennzeichner für einen Attributwert wird wie folgt notiert: 'attr(*)', wobei * der Name des Attributes ist, dessen Wert als Zeichenkette verwendet werden soll. Es handelt sich natürlich immer um ein Attribut jenes Elementes, auf welches die Eigenschaft angewendet wird. Beispiel für die Ausgabe des Wertes des Attributes title: attr(title).
Zähler gibt es in zwei Varianten und werden wie folgt notiert 'counter(*)' oder 'counters(*), wobei * für eine Liste von Inhalten steht. Bei 'counter' ist das * entweder der Name eines Zählers (siehe unten) oder der Name, gefolgt von einem Komma und optionalen Leerzeichen, gefolgt von einer Stilinformation (siehe unten). Bei 'counters' ist das * der Name eines Zählers (siehe unten), gefolgt von einem Komma und optionalen Leerzeichen, gefolgt von einer Zeichenkette. Optional kann dann wiederum ein Komma mit optionalen Leerzeichen folgen, gefolgt von einer Stilinformation (siehe unten). 'counter' erzeugt eine einfache Numerierung, während sich 'counters' eignet, um bei verschachtelten Zählern mit selbem Namen eine kompliziertere Numerierung wie 1, 1.1, 1.1.1 etc zu realisieren (siehe Abschnitt über automatische Numerierung).
Die Stilinformation entspricht einem Wert der Eigenschaft list-style-type für Listen, Voreinstellung ist der Wert 'decimal'.
Zählernamen sind eine Zeichenkette zur Identifizierung des Zählers. Zähler selbst werden mit den Eigenschaften counter-reset und counter-increment betrieben. Solch ein Name ist eine einfache Zeichenkette wie zum Beispiel 'num', für jeden Zähler natürlich eine andere.
Beispiel für einen Zähler: counter(num, decimal) oder counters(num, '*', decimal).
Mit der Eigenschaft quotes kann Einfluß darauf genommen werden, wie erzeugte Anführungszeichen präsentiert werden.
Der Wert ist entweder eines der Schlüsselwörter 'none' oder 'inherit' oder eine Listen von Zeichenkettenpaaren mit mindestens einem Paar.
Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien. Der Initialwert ist vom Darstellungsprogramm abhängig (zum Beispiel von der Einstellung der bevorzugten Sprache durch den Nutzer oder der im Dokument angegebenen verwendeten Sprache).
Die Angabe einer beliebig langen Liste von Zeichenkettenpaaren ist möglich, um verschachtelte Zitate mit unterschiedlichen Anführungszeichen ausstatten zu können. Logisch ist das vor allem notwendig, wenn sich das einleitende Anführungszeichen nicht vom beendenden unterscheidet. Von der Lesbarkeit her ist die Struktur solcher Zitate, die selbst Zitate enthalten, aber auch leichter durchschaubar,wenn Zitate in Zitaten andere Anführungszeichen verwenden als das jeweilige Zitat, in welchem sie stehen.
Im Falle von 'none' erzeugen die Werte 'open-quote' und 'close-quote' von content keine Anführungszeichen.
Bei einem Zeichenkettenpaar steht die erste Zeichenkette für das einleitende Anführungszeichen, das zweite für das beendende. Sinnvoller Weise sollten die Paare natürlich paarweise verschiedene Zeichenketten verwenden oder zumindest in der Liste benachbarte Zeichenketten oder Zeichenkettenpaare sollten verschieden sein. 'open-quote' und 'close-quote' von content verwenden dann zum Beispiel diese Zeichenkettenpaare, aber auch Elemente, die gemäß Empfehlung des Formats Anführungszeichen implizieren - was das Darstellungsprogramm wiederum in der eigenen Stilvorlage eben durch die Verwendung von quotes und passenden Selektoren für die betreffenden Elemente umsetzen kann.
Das erste Paar von der Seite des Selektors aus gesehen kennzeichnet oder umschließt das äußerste Zitat. Ein darin eingebettetes Zitat wird durch das gegebenenfalls angegebene zweite Paar gekennzeichnet oder umschlossen. Ein darin eingebettetes Zitat wiederum durch das nächste Paar und so weiter. Wenn die Verschachtelung tiefer reicht als Paare angegeben sind, wird für tiefere Ebenen der Verschachtelung immer das letzte Paar verwendet. Von daher ist es für Texte mit unbekannter Verschachtelungstiefe von Zitaten ratsam, wenn wenigstens das letzte angegebene Paar zwei unterschiedliche Zeichen aufweist.
Mit den Eigenschaften counter-increment und counter-reset werden Zähler kontrolliert, die dazu verwendet werden können, eine automatische Numerierung von Inhalten umzusetzen. Verwendet werden solche Zähler mit dem Wert 'counter' oder 'counters' der Eigenschaft content.
counter-reset wird verwendet, um einen Zähler auf einen bestimmten Wert zu setzen; Voreinstellung ist der Wert 0. counter-increment wird verwendet, um einen Zähler um einen bestimmten Wert zu ändern; die Voreinstellung ist um den Wert 1.
counter-increment und counter-reset sind nicht vererbbar und anwendbar auf alle Elemente bei allen Medien. Der Initialwert ist jeweils das Schlüsselwort 'none'. Ist bei einem Element allerdings display auf 'none' gesetzt, so kann es weder einen Zähler setzen noch verändern, entsprechend andere Elemente, die nicht angezeigt werden. Hat ein Pseudoelement für content den Wert 'normal' oder 'none', wird es nicht erzeugt, kann demnach also ebenfalls keinen Zähler setzen oder verändern. Ist ein Element lediglich nicht sichtbar, etwa durch Verwendung von visibility 'hidden', so bedeutet dies keine Einschränkung der Verwendbarkeit für die automatische Numerierung. Nicht dargestellte Strukturen tragen also nicht zur Numerierung bei, nicht sichtbare schon.
Der Wert ist jeweils entweder eines der Schlüsselwörter 'none' oder 'inherit' oder eine Liste. Ein Listenpunkt beginnt mit einem Zählernamen, worauf dann optional eine ganze Zahl folgen kann. Wird kein Schlüsselwort verwendet, muß also mindestens ein Zählername angegeben werden, wobei bei der Namenswahl 'none', 'inherit' und 'initial' ausgeschlossen sind (Für 'initial' wird vielleicht später einmal ein besonderes Verhalten festgelegt, daher ist der Wert als Schlüsselwort reserviert).
Bei 'none' wird der Zähler jedenfalls nicht zurückgesetzt beziehungsweise nicht erhöht.
Wird bei der Verwendung einer Liste bei einem Listenpunkt keine Zahl angegeben, gelten die Voreinstellungen, also rücksetzen auf 0 beziehungsweise erhöhen um 1, ansonsten finden die angegebenen Zahlen Anwendung. Die Erhöhung (oder Erniedrigung bei einer negativen Zahl) des Zählers findet jedes Mal statt, wenn der Selektor zutrifft, jeweils in der Reihenfolge des Quelltextes.
Wird der Zähler beim selben Selektor sowohl geändert, als auch per content verwendet, so wird er erst geändert und dann verwendet. Dargestellt wird also immer der neue Wert und nicht der alte. Wird der Zähler beim selben Selektor sowohl zurückgesetzt als auch geändert, so wird erst zurückgesetzt und dann geändert. Wird derselbe Zähler in einer Liste mehrmals notiert, wird er auch mehrmals zurückgesetzt oder geändert, in der Reihenfolge wie angegeben.
Bei Seitenmedien wird der Inhalt auf einzelne Seiten, Folien, allgemein Darstellungsbereiche aufgeteilt. Gibt es also mehr Inhalt, als auf eine Seite paßt, wird es für das Darstellungsprogramm notwendig, einen Seitenumbruch durchzuführen, also weiteren Inhalt auf einer nächsten Seite unterzubringen. Mit den für Seitenmedien gedachten Eigenschaften kann ein Autor Einfluß auf Details der Darstellung bei solche Medien nehmen.
Vorausgesetzt werden dabei rechteckige Seiten. Bei Bedarf ist es sogar möglich, die Größe der Seite anzugeben, wobei der Autor natürlich nicht unbedingt davon ausgehen kann, daß der Leser auch Papier im passenden Format hat. Bei angegebener Größe drehen oder skalieren Darstellungsprogramme dann allerdings die komplette Darstellung, wenn das Blatt zu klein ist, statt wie bei endlosen Medien die Zeilenumbrüche einfach anzupassen. Dies kann wiederum die Lesbarkeit des Inhaltes durch zu kleine Schrift verschlechtern.
Festgelegt werden sogenannte Seitenboxen. Die Regeln für Seitenboxen werden mit der Regel @page notiert.
Die genaue Syntax der Regel @page ist ähnlich der von @media:
Die Regel @page beginnt mit der Zeichenfolge, die hier zwischen einfachen Anführungszeichen notiert ist:
'@page '.
Optional folgt dann ein Seitenselektor. Der Seitenselektor ist ein Name oder Schlüsselwort, um anzugeben, für welche Seiten die folgenden Angaben gelten sollen. Zum Seitenselektor siehe auch den Abschnitt über die Eigenschaft page. Es folgen dann in einem Deklarationsblock, also in geschweiften Klammern CSS-Anweisungen.
Direkt im Deklarationsblock kann der Randabstand angegeben werden, dazu werden die Eigenschaften margin-top, margin-right, margin-bottom, margin-left, und margin direkt ohne Selektor verwendet.
Möglich sind auch Angaben für linke, rechte Seiten und für die erste Seite. Dazu werden Pseudoklassen notiert :left für linke Seiten, :right für rechte Seiten und :first' 'für die erste Seite.
Die Eigenschaft size kann innerhalb einer Regel @page angegeben werden und ist für die visuelle Darstellung von Seitenmedien anwendbar. Es gibt folgende Werte:
Schnittmarkierungen dienen dazu, zu kennzeichnen, wo der Rand einer Seitenbox ist. Sie sind insbesondere nützlich, um das Papier auf die genaue Größe der Seitenbox zuzuschneiden. Anwendbar und sichtbar sind sie nur, falls Längenangaben für size verwendet werden. Diese Markierungen werden so gesetzt, daß sie die Seitenbox umschließen, sind also nach dem Schnitt auf die genaue Größe der Seitenbox gerade nicht mehr sichtbar, liegen also im abgeschnittenen Teil des Papieres.
Mit der Eigenschaft marks kann angegeben werden, welcher Typ von Markierung angegeben werden soll.
Die Eigenschaft kann innerhalb einer Regel @page angegeben werden und ist für die visuelle Darstellung von Seitenmedien anwendbar. Es gibt folgende Werte:
Mit den Eigenschaften page-break-before, page-break-after und page-break-inside kann ein Seitenumbruch bewirkt werden. Für folgenden Inhalt wird dann also eine neue Seitenbox erzeugt. Die Eigenschaften sind anwendbar auf Blockelemente in visuellen Seitenmedien.
Mit page-break-before kann das Verhalten für Seitenumbrüche vor einem Element bestimmt werden, mit page-break-after für danach, mit page-break-inside für Seitenumbrüche innerhalb des Elementes.
Es gibt folgende Werte für page-break-before, und page-break-after: 'auto', 'always', 'avoid', 'left', 'right', 'inherit'.
Die Werte werden nicht vererbt. 'auto' ist der Initialwert.
Es gibt folgende Werte für page-break-inside: 'auto', 'avoid', 'inherit'.
Der Wert wird vererbt. 'auto' ist der Initialwert.
Die Werte haben folgende Bedeutungen:
Mit der Eigenschaft page von CSS 2.0 wird angegeben, zu welcher benannten Seite ein Element gehört. Die Eigenschaft wird vererbt und ist anwendbar auf Blockelemente in visuellen Seitenmedien.
Initialwert ist 'auto'. Ansonsten ist der Wert ein Identifizierer. Ein Identifizierer ist eine einfache Zeichenkette ohne Leerzeichen, Doppelpunkt oder sonst etwas, was mit der Syntax von @page in Konflikt geraten kann. Bei 'auto' wird die Seite automatisch bestimmt.
Der Identifizierer wird sowohl bei der Regel @page als Seitenselektor notiert als auch bei den Blockelementen mit inzeiligem Inhalt, für welche die Regel gelten soll. Ändert sich die benannte Seite von einer solchen Block-Box zur nächsten, so werden entsprechend passende Seitenumbrüche eingefügt.
Dies bedeutet dann, daß Absätze der Klasse 'bildgross' im Qerformat auf einer eigenen Seite im Format DIN A4 gedruckt werden sollen.
Bei Seitenmedien kann es passieren, daß ein Blockelement auf zwei Seiten aufgetrennt werden muß. Als Schusterjungen (orphans) bezeichnet man die ersten Zeilen eines Blockes, die am Ende einer Seite nach vorherigen Blockelementen stehen, während der Rest des Blockes auf der folgenden Seite steht (oder auf den folgendenn Seiten). Umgedreht bezeichnet man als Hurenkinder (widows) die letzten Zeilen eines Blockes, die per Seitenumbruch auf die nächste Seite kommen.
Für einen Seitenumbruch kann nun angegeben werden, wieviele Zeilen dies jeweils mindestens sein müssen. Passen weniger davon auf die Seite, kommt der Block komplett auf die neue Seite. Situationen, wo der Block länger als eine Seite ist, können dazu führen, daß die Forderungen nicht erfüllbar sind, dann ist die Situation undefiniert.
Der Wert der Eigenschaften ist jeweils die entsprechende Zeilenanzahl, die nicht unterschritten werden soll. Eine solche Anzahl ist also eine nicht negative ganze Zahl. 'inherit' kann natürlich auch notiert werden.
Der Initialwert ist 2. Die Eigenschaft wird vererbt. Sie ist anwendbar auf Blockelemente bei visuellen Seitenmedien.
Es sollen also Absätze nicht auf zwei Seiten verteilt werden, wenn dies zur Folge hätte, daß an einem Seitenende oder einem Seitenanfang weniger als 5 Zeilen des Absatzes stehen.
Quelle: https://de.wikibooks.org/wiki/Websiteentwicklung vom 4. März 2015 um 19:54 Uhr, Lizenz: CC BY-SA 3.0