• < blättern >

2.2.1 CSS-Grundlagen

Wie die einleitenden Beispiele gezeigt haben, ermöglicht CSS die Angabe von Stileigenschaften für bestimmte Objekte im Layoutstrom des Webbrowsers, unabhängig vom verwendeten Ausgabegerät. Die dazu verwendeten Regeln bestehen aus einem Selektor zur Auswahl derjenigen Objekte, auf die eine Regel anwendbar ist, und aus einem Rumpf mit den neuen Stileigenschaften für diese Objekte. (Zu den Stileigenschaften gehören übrigens nicht nur sichtbare Eigenschaften wie die Hintergrundfarbe oder die Textgröße, sondern auch Tonhöhe oder Sprecher für akustische Ausgaben.) Eine weitere Stärke von CSS ist die Kaskadierung von Layoutbeschreibungen, die eine Anwendung mehrerer Regelsätze auf ein HTML-Dokument erlaubt. Abhängig von der Art und der Reihenfolge der Einbindung von CSS-Beschreibungen werden einzelne Regeln überschrieben, während andere vielleicht zusammengefasst werden.

In diesem Abschnitt sollen die wichtigsten Grundlagen der deklarativen Sprache zur Definition von Stileigenschaften noch einmal kurz aufgefrischt werden. Im Vordergrund steht dabei die Auswahl von Knoten aus dem Dokumentbaum mittels Selektoren, für die CSS eine eigene Syntax definiert. Folgende kombinierbare Selektoren stehen dabei zur Auswahl:

Selektoren

Neben den zuvor gezeigten Selektoren definiert CSS noch eine Reihe weiterer Selektoren für Elemente und Klassenattribute, die keine Entsprechung im Dokumentbaum haben, u.a. die Pseudo-Klassen :hover, :visited und :active; mit der Stileigenschaft content kann Elementknoten textueller Inhalt zugeordnet werden, besonders nützlich im Zusammenhang mit Selektoren, die die Pseudo-Elemente :before und :after benutzen.

In der Praxis werden oft nur Elementselektoren sowie einfache Attributselektoren für Klassen und für Elemente mit eindeutigen Bezeichnern verwendet, um eine möglichst große Basis existierender Browser abzudecken (so beherrscht Internet Explorer bis einschließlich Version 6 weder den Kindelementselektor noch den Nachfolgerselektor und hat auch sonst allerlei Probleme mit nichttrivialen Selektoren; s. z.B. <http://www.quirksmode.org/css/contents.html>). Komplexe Selektoren lassen sich oftmals mit Hilfe von clientseitigen Skripten ersetzen, die auf dem Dokumentbaum operieren und so die Elementknoten auswählen, deren Stileigenschaften verändert werden sollen. Da dies vor allem für visuelle Effekte während der Darstellung eines Dokuments benötigt wird, ist die Trennung von Programmlogik und Präsentation an dieser Stelle ohnehin nicht mehr strikt einzuhalten. Wie in Trennung von Verhaltensweise und Struktur noch gezeigt wird, existieren zahlreiche Funktionsbibliotheken, die diese Aufgaben unterstützen und so zumindest einen systematischen Ansatz zur Aufrechterhaltung dieses Paradigmas erlauben.

Darstellungsprozess

Nachdem das darzustellende HTML-Dokument eingelesen und mit Stileigenschaften annotiert wurde, wird der Dokumentbaum vom Browser auf dem gewählten Ausgabegerät dargestellt. Für die visuelle Darstellung kann dies ein Bildschirm sein, ein Drucker oder das Display eines Mobiltelefons. Alternativ könnte aber auch eine Tonwiedergabe mit einem Screenreader gewünscht sein, für die weitere medienspezifische Annotationen denkbar sind.

Die Darstellung auf einem visuellen Ausgabemedium basiert auf dem sogenannten Box-Modell, also einer Anordnung von Layoutobjekten in einem Strom von recht-eckigen Bereichen. Jeder dieser Bereiche verfügt über einen Rahmen, einen festgelegten Abstand zu Nachbarbereichen und einen Abstand zwischen dem äußeren Rand und dem Inhalt des Bereichs. Die Hauptaufgabe des Browsers besteht nun darin, die Anordnung der Bereiche möglichst platzsparend entsprechend den festgelegten Abständen und der ermittelten Mindestausdehnung eines jeden Bereichs durchzuführen. Der Prozess gleicht dabei weitgehend dem Vorgehen eines Formatierers im Printbereich, wobei für die Bildschirmausgabe beispielsweise die Paginierung entfällt und einige Parameter anders berechnet werden als im Buchdruck.

Zu beachten ist, dass der aus dem Dokumentbaum erzeugte Layoutstrom die Struktur des Dokuments widerspiegelt: Der rechteckige Bereich für ein Element befindet sich grundsätzlich innerhalb der Begrenzungen des umgebenden Elements. CSS bietet mit der Stileigenschaft position jedoch die Möglichkeit, diese starre Hierarchie zu durchbrechen. So kann ein Layoutobjekt samt der Kindelemente mit der Angabe position:relative relativ zur eigentlich normalen Position neu positioniert werden. Alternativ dazu kann eine absolute Positionierung vorgenommen werden, bei der das betreffende Objekt aus dem normalen Layoutstrom entfernt wird, d. h. die Darstellung nachfolgender Objekte erfolgt so, als folgten sie direkt auf den Vorgänger des absolut positionierten Objekts. Die absolute Positionierung macht sich unter anderem der in Asynchroner Seitenaufbau skizzierte Mechanismus zum Verschieben von Kartenausschnitten in Google Maps zunutze. Das voreingestellte Positionierungsschema entspricht der Angabe position:static, bei der keine Verschiebung gegenüber dem normalen Layoutstrom vorgenommen wird.

Die Berechnung der Position von Layoutobjekten wird im Wesentlichen von den Stileigenschaften position und display beeinflusst. Mit display wird die Art der Darstellung festgelegt, also ob es sich um ein Blockelement oder ein Inlineelement handelt. Während Blockelemente grundsätzlich vertikal in den Layoutstrom eingefügt werden, erfolgt die Anordnung für Inlineelemente horizontal entlang der Schreibrichtung des jeweiligen Schriftsystems. Eine Besonderheit stellt display:none dar: Ein solches Objekt wird samt seiner Nachfahren aus dem Layoutstrom entfernt und erscheint nicht auf dem Ausgabemedium. Die benachbarten Objekte werden so dargestellt, als sei dieses Objekt nicht vorhanden. Diese Eigenschaft nutzt beispielsweise TiddlyWiki für den Datenspeicher, in dem die nicht angezeigten Tiddler intern gespeichert werden.

• < blättern >

---

Home • Über uns • Qualität • AGB • Impressum • Stadtlupe • Stellenangebote & Jobs

Die TEIA AG bietet Bücher, Lernprogramme, SCORM und kostenlose Online Kurse zu Microsoft-Anwendungen, Open Office, IT, Programmierung und Wirtschaft.
Zu fast allen Online Kursen können zudem Zertifkate oder Teilnahmebescheinigungen erworben werden.

Access 2002 •  Access 2003 Basis •  Access 2003 Prof. •  Access 2007 Basis •  Adobe GoLive •  Adobe Photoshop •  AJAX •  Allgemeine Betriebswirtschaftslehre •  Apache •  Basiswissen für Selbstständige •  Bewerbungstipps •  Calc Basis •  Dreamweaver CS4 •  eBusiness •  eCommerce •  eGovernment •  Erinnerung an Douaumont •  Excel 2002 •  Excel 2003 Basis •  Excel 2003 Prof •  Excel 2007 Basis •  Excel 2007 Prof. •  Excel 2010 Basis •  Finanzmanagement •  HTML •  HTML CSS •  HTML Grundlagen •  Industriegütervertrieb •  Internet Technik •  JAVA •  JavaScript •  Lernen ohne Lehrer •  Marketing •  Markup-Sprachen •  Organisation und Technologiemanagement •  osCommerce •  Outlook 2003 •  Outlook 2007 •  Perl und CGI •  Personalmanagement •  PHP 4.3 •  PowerPoint 2003 •  Powerpoint 2007 •  Powerpoint 2010 •  Projektmanagement und MS Project 2000 •  Projektplanung und Projektoptimierung mit MS Project 2003 •  Rechnungswesen mit Beispielen •  Sicher auftreten •  SQL •  TEIA-Internet-Führerschein •  Unternehmensführung •  US-GAAP und IAS/IFRS •  Vertragswesen eBusiness •  Vista •  VWL •  Warum ich kein Christ sein will •  Widerstand •  Windows XP •  Wirtschaftsrecht •  Word 2002 •  Word 2003 Basis •  Word 2003 Prof. •  Word 2007 Basis •  Word 2007 Prof. •  Writer Basis •  XML •  XML Grundlagen •  XML XSL

Letzte Aktualisierung: 29.07.2010 13:03:16

Letzte Inhaltliche Überarbeitung: 29.06.2009 15:55:20

© 2000 - 2010 TEIA AG - Internet Akademie und Lehrbuch Verlag