Letzte Änderung am 21.01.2005
Cascading Style Sheets - ein Tutorial
Vorbemerkung: Die Kapiteleinteilung hält sich an das Buch von Eric A. Meyer: Cascading Style Sheets, The Definitive Guide, O'REILLY, 2004.
Es soll eine sinnvolle Adaptation der W3C-Regeln zu CSS1, 2 und 2.1.aus der Perspektive von Lernenden sein. Die eingefügten Demos lassen sich-fast ohne Ausnahme-im Quelltext editieren und ansehen. Der Code ist so einfach wie möglich gehalten und das Tutorial kann auch offline benutzt werden. CSS-Bereiche, die in den gängigen Browsern bisher nicht implementiert wurden, werden nicht dokumentiert.
Andreas Lutz MatteDesign, Bern

Kapitelübersicht

Kapitel 13: User Interface Stile

• Systemfonts und Colors
• Cursors
• Outlines von Boxen

Mozilla und seine Derivate bieten die Möglichkeit, dass die Benutzer das visuelle Erscheinungsbild ihres Browsers durch eigene Eingaben verändern können (XUL). Dabei werden CSS-ähnliche Eigenschaftsdefinitionen verwendet, um Navigationselemente, Sidebar-Tabs, Dialog-Boxen, Status-Boxen und weitere Elemente des Chrome zu verwalten. Im Benutzermenü wird die individuelle Gestaltung abgespeichert.
Dasselbe ist mittels CSS möglich, wobei auf die Einstellungen des jeweiligen Betriebssystems zurückgegriffen wird. Dies kann nützlich sein bei Inhalten, die losgelöst vom eigentlichen Webdesign das Aussehen der Bildschirmausgabe möglichst nahe an den 'Look' des jeweiligen Betriebssystems heranzuführen sollen.
Hier liegen auch die Grenzen dieser CSS-Variante, weil das Ziel des Webdesigns ja immer noch die visuelle Oberfläche ist, die in allen Browsern gleich gestaltet sein sollte. Unabhängig vom Browsertyp wird dabei angestrebt, allen möglichen BenutzerInnen eine möglichst ähnliche Oberfläche darzubieten.
Es wird deshalb auf eine detaillierte Darstellung der Begriffe und Einstellungen verzichtet.

Cursors-Darstellungen (cursor:
Nützlich erscheint hingegen die Möglichkeit, das Aussehen des Cursors zu definieren, besonders wenn die Darstellung der Link-Elemente vom Browserstandard abweicht.

Demo 1

Ein grosser Teil dieser Attribute betrifft die Position des Cursors als Pfeil (resize), die andern Namen sprechen für sich.
Fremde Bilder als cursor: url() müssen in WinOS das Format .cur oder .ani haben, damit sie dargestellt werden können.

Weiter zu Kapitel 14: Nicht-Bildschirm-Ausgaben