Optionen und weiterführende Links



In der Datenbank befinden sich derzeit 477 Specials. Alle Specials anzeigen...

Stilvoll - CSS

Stilvoll - CSS

Im HTML-Teil habe ich Euch so oft auf die Formatierung mit CSS vertröstet, daß Ihr inzwischen vermutlich schon ungeduldig mit den Hufen scharrt. Keine Panik, es geht schon los: CSS steht für Cascading Style Sheets. Wie im HTML-Teil erwähnt, sind viele HTML-Tags logische Tags. Das heißt, Ihr definiert einen Text beispielsweise als Überschrift dritter Ordnung (mit einem h3-Tag), aber wie diese Überschrift dritter Ordnung genau aussieht, bleibt dem Browser überlassen.

Genau hier setzen die Stylesheets ein. Mit einem Stylesheet könnt Ihr festlegen, daß Euer h3-Tag in der Schriftart 'Arial' erscheinen soll, in Schriftgröße 14 und in dunkelgrüner Schrift. Und diese Festlegung gilt für diesen einen h3-Tag, jeden h3-Tag im Dokument oder jedes Element, dem Ihr ein bestimmtes Attribut mitgebt, je nach Wunsch.

Stylesheets bestehen aus aus Eigenschafts-Wert-Paaren im Format Eigenschaft:Wert. Die Schriftfarbe auf dunkelgrün setzt Ihr also beispielsweise mit 'color:darkgreen'. Mehrere solcher Paare in einem Stylesheet werden durch Semikola (;) getrennt, zum Beispiel 'color:darkgreen; font-size:14'.

Es gibt drei Möglichkeiten, Euren HTML-Elementen solche Stylesheets mitzugeben: Als Attribut (sogenannte Inline-Styles), zentral im Head mit einem speziellen Tag für das gesamte Dokument, oder sogar als externe Datei. Mehr zu jeder dieser Möglichkeiten später.

Stylesheets können vererbt werden. Das bedeutet, Stilangaben für ein HTML-Element gelten genauso für alle HTML-Elemente, die darin verschachtelt sind. Wenn Ihr also beim body-Tag 'color:darkgreen' setzt, gilt das auch für alle Tags, die sich zwischen <body> und </body> befinden. Diese «Erbschaften» könnt Ihr überschreiben, indem Ihr einem inneren Tag einfach ein anderslautendes Stylesheet mitgebt, zum Beispiel 'color:lightgreen'. Allerdings werden nicht alle Eigenschaft vererbt. Die Ausnahmen sind

  • die Hintergrund-Eigenschaften
  • die Rahmen-Eigenschaften
  • die Abstands- und Grössen-Eigenschaften (margin, padding, width, height)
  • vertical-align

Aktuell ist die CSS-Version 2, kurz CSS2, die alle modernen Browser weitestgehend beherrschen. Die Standardisierungsorganisation W3C arbeitet bereits am Nachfolgestandard CSS3, der hat aber in der Praxis noch keine Bedeutung. Trotzdem werde ich in einem kurzen Abschnitt einen Ausblick auf zukünftige Möglichkeiten geben.

Übersicht

Von Inline-Styles und Selektoren
Im ersten Abschnitt geht es darum, wie Ihr Stylesheets in Eure HTML-Dokumente einbauen könnt.

Einheitsfragen
Bevor wir uns in die eigentlichen CSS-Eigenschaften stürzen, noch eine kurze Übersicht zu den Einheiten, in denen Ihr Eure Werte angeben könnt.

Schriftform
In diesem Abschnitt lernt Ihr einige wichtige CSS-Eigenschaften kennen, mit denen Ihr die Schrift auf Euren Webseiten beeinflussen könnt.

Links, rechts und mittendurch
Die nächste Gruppe von Eigenschaften dreht sich um die Ausrichtung von Elementen auf Eurer Seite.

Abstand halten
Mit CSS könnt Ihr auch festlegen, welchen Abstand der Browser zwischen einem Element und dem nächsten lassen soll. Wie das geht, seht Ihr hier. Bei der Gelegenheit werden auch die Eigenschaften zum Setzen eines Rahmens vorgestellt.

Aus dem Hintergrund
Jetzt sind die Eigenschaften für Hintergrundfarben und Hintergrundgrafiken an der Reihe.

Listen und Tabellen
Dieser Abschnitt stellt einige Eigenschaften zur Formatierung von Listen und Tabellen vor.

Örtlichkeiten
Seit CSS2 gibt es eine Reihe von Eigenschaften zur Positionierung von Elementen auf der Seite. Ihr könnt sogar darüber entscheiden, ob die Elemente überhaupt angezeigt werden sollen, oder Elemente nur ausschnittsweise anzeigen.

Varianten
Manchmal wollt Ihr Eure Seiten auf verschiedenen Medien unterschiedlich gestalten. Bestimmte Stylesheets sollen nur für die Ausgabe auf einem normalen PC gelten, andere nur für den Ausdruck. Noch andere sollen nur zum Zuge kommen, wenn sich ein sehbehinderter User die Seite von einem Programm vorlesen läßt. CSS bietet dazu zumindest Ansätze, die in diesem Abschnitt vorgestellt werden.

Aus der Kristallkugel
Der Nachfolgestandard zu CSS2 ist bereits in Arbeit. Bisher wird CSS3 aber noch von keinem Browser unterstützt. Einige Andeutungen zu dem, was die Zukunft bringen könnte, sollen Euch trotzdem etwas den Mund wässrig machen.



Special vom: 16.01.2003
Autor dieses Specials: Henning Kockerbeck
Die weiteren Unterseiten dieses Specials:
Die reine Lehre - HTML
Kleiner Grundkurs Programmieren
Jetzt wird's dynamisch - JavaScript
Die andere Seite der Dynamik - PHP
Neue Gefilde - XML
Weiterführende Links
Zurück zur Hauptseite des Specials


?>