|
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.
|
