Faq-O-Matic für de.comm.infosystems.www.authoring.misc : dciwam-FAQ, häufig gestellte Fragen : Fragen zum Verständnis einzelner Webauthoring-Sprachen : CSS, Cascading Style Sheets :
Cascading Style Sheets © Björn Höhrmann
Copyright © September 2000, Björn Höhrmann bjoern@hoehrmann.de
- Geht das nicht auch mit HTML?
- Welche Vorteile bieten Cascading Style Sheets?
- Was bedeutet 'cascading'?
- Wie sieht so ein Style Sheet denn aus?
- Welche Eigenschaften kann man mit CSS beeinflussen?
- Geht das auch mit XML?
- Was geht mit CSS nicht?
- Gibt es auch Probleme mit CSS?
- Wie sieht die Zukunft von CSS aus?
- Gibt es gute Bücher über CSS?
- Wo finde ich noch mehr Informationen?
Mit Cascading Style Sheets ist es möglich, die Präsentation einer Webseite zu beeinflussen, ohne ihre Struktur zu verändern.
Nein, nicht wirklich. Die Aufgabe von HTML war es, Inhalte zu strukturieren, nicht sie zu formatieren. Mit HTML definiert man Überschriften, Absätze, Zitate, Listen oder wichtige Textstellen, nicht aber Schriftarten oder Farben. Es wurden aber in die Browser immer mehr neue Elemente zur visuellen Formatierung eingeführt, so das HTML Dokumente nur noch aus Inhalten und Präsentationselementen bestanden, Struktur findet man immer seltener. Mit XHTML 1.1 wird das vorbei sein, alle Elemente und Attribute zur visuellen Darstellung werden entfernt und in vielen zukünftigen Browsern auch nicht mehr funktionieren.
Welche Vorteile bieten Cascading Style Sheets?
Style Sheets ermöglichen es, Präsentation und Inhalt zu trennen. Die Dokumente werden dadurch übersichtlicher und kleiner, man benutzt wieder mehr Strukturelemente als Formatierungselemente. Es ist zum Beispiel möglich, für eine ganze Website ein einzelnes Style Sheet zu schreiben, daß für alle Seiten gilt. Das gibt der ganzen Site ein einheitliches Äußeres, die einzelnen Seiten werden schneller geladen, da die einzelnen Formatierungsangaben nicht immer neu geladen werden müssen. Wenn man Änderungen machen will, reicht es, das Style Sheet zu ändern, und schon sehen alle Seiten anders aus. Vor allem wenn man nicht alleine an einer Website arbeitet, ist das praktisch, da sich die Autoren einzelner Seiten nicht mit dem Aussehen der Seite auseinandersetzen müssen. Style Sheets bieten also:
- Die Trennung von Inhalt und Präsentation
- Einheitliche Formate für ganze Websites
- Eine einfache Möglichkeit, daß Aussehen ganzer Websites zu ändern
- Kleinere und übersichtlichere HTML Dateien
- Unabhängigkeit von bestimmten Produkten, Plattformen und Medien
Und das alles, ohne daß man sich Sorgen machen muß, daß ein Browser CSS nicht unterstützt, da die Inhalte auch ohne CSS problemlos dargestellt werden können.
Erstmal gibt es drei verschiedene Arten von Style Sheets:
- das Style Sheet des Browsers. In dem werden allgemeine Regeln für die Präsentation festgelegt, zum Beispiel daß H1 Überschriften anders präsentiert werden, normaler Text
- das Style Sheet des Benutzers. Einige Browser ermöglichen es dem Benutzer, ein eigenes Style Sheet anzugeben oder zumindest bestimmte Optionen wie die Farbe von Text und Links zu bestimmen.
- das Style Sheet des Autoren
"cascading" heißt jetzt, daß diese Style Sheets in der genannten Reihenfolge auf ein Dokument angewandt werden. Angaben des Autoren überschreiben Angaben des Benutzers, die wiederum Angaben im Style Sheet des Browsers überschreiben.
Ferner ist es für den Autoren auch möglich, zum Beispiel ein allgemeines Style Sheet in einem Dokument zu verlinken, und dann im einzelnen Dokument diese Angaben zu überschreiben oder auch nur ein einzelnes Element zu formatieren.
Wie sieht so ein Style Sheet denn aus?Ganz simpel :-) Um Überschriften in einem HTML Dokument in blauer Farbe darzustellen kann man folgendes benutzen:
h1 { color: blue }
Diese Regel besteht aus zwei Teilen. Mit "h1" wird das Element ausgewählt, auf das man sich bezieht, den Teil nennt man "Selektor". Der nachstehende Teil ist die Deklaration. In der Deklarationen stehen eine oder mehrere Eigenschaften, denen Werte zugewiesen werden, in diesem Fall ist es die Eigenschaft "color" der der Wert "blue" zugewiesen wird. Man kann in jeder Regel natürlich mehrere Eigenschaften angeben:
h1 { color: blue;
background-color: silver; }
Damit der Browser mit dieser Regel auch was anfangen kann, muß man sie ins HTML Dokument einbinden. Dafür gibt es das style Element:
<style type="text/css">
h1 { color: blue;
background-color: silver; }
</style>
Das Element ist nur im head Element der HTML Datei erlaubt. Eine vollständige HTML Datei könnte so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Dokument Titel</title>
<style type="text/css">
h1 { color: blue;
background-color: silver; }
</style>
</head>
<body>
<h1>Die Überschrift ist blau</h1>
<p>Text</p>
</body>
</html>
Die Überschrift ist blau
Die Überschrift wird jetzt in blauer Farbe auf silbernem Hintergrund dargestellt.
Eine andere Möglichkeit ist, das Style Sheet in einer separaten Datei auszulagern und auf diese dann mit dem link Element zu verweisen:
<head> <title>Titel</title> <link rel="stylesheet" href="stylesheet.css"> </head>
Der Element Selektor ist natürlich nicht der einzige Selektor. Es ist in HTML zum Beispiel bei fast allen Elementen möglich, ein class Attribut zu definieren:
<body> <h1>Überschrift 1</h1> <p>text</p> <h1 class="gruen">eine grüne Überschrift</h1> <p class="gruen">text</p> </body>
Überschrift 1
text
eine grüne Überschrift
text
Um die zweite Überschrift jetzt auszuwählen, benutzt man den Klassen Selektor:
h1.gruen { color: green }
Möchte man, daß auch der zweite Absatz in grüner Farbe dargestellt wird, gibt man einfach kein bestimmtes Element an:
.gruen { color: green }
Welche Eigenschaften kann man mit CSS beeinflussen?
Zusammengefasst und verallgemeinert sind das:
- Farben und Hintergründe
- Scrift und Typographische Effekte
- Textfluß und Ränder
- Positionierung
- Seitenlayout für Drucker
- Informationen für Sprachausgabe
CSS kann man mit jeder Form von strukturierten Dokumenten benutzen, so auch mit XML (Extensible Markup Language). XML ist stärker auf Style Sheets angewiesen, als HTML, da ein Browser die Bedeutung der Elemente kennt. Ein Beispiel XML Dokument könnte so aussehen:
<?xml version="1.0" encoding="iso-8859-1"?> <artikel> <headline>Cascading Style Sheets</headline> <autor>Björn Höhrmann</autor> <zusammenfassung>Mit <wichtig>Cascading Style Sheets</wichtig> ist es möglich, die Präsentation einer Webseite zu beeinflussen, ohne ihre Struktur zu verändern.</zusammenfassung> </artikel>
Ein Style Sheet für dieses Element muß erstmal festlegen, wie die einzelnen Elemente dargestellt werden sollen, ob es blocklevel Elemente sind wie P oder DIV in HTML, oder inline Elemente wie EM oder STRONG:
artikel, headline, autor, zusammenfassung { display: block }
wichtig { display: inline }
Jetzt möchte man vielleicht noch ein paar weitere Angaben machen:
headline { font-size: x-large }
autor { font-style: italic }
zusammenfassung { margin-top: 1em }
wichtig { font-weight: bold }
Um das Style Sheet jetzt mit der der XML Datei zu verbinden, gibt es die xml-stylesheet processing instruction:
<?xml-stylesheet href="stylesheet.css" type="text/css"?>
Das Dokument könnte jetzt zum Beispiel so aussehen:
[Darstellung des Dokumentes im IE 5.5]
Cascading Style Sheets
Björn Höhrmann
Mit
Cascading Style Sheets
ist es möglich, die Präsentation einer Webseite zu beeinflussen, ohne ihre Struktur zu verändern.
Erstmal muß man sich klar machen, daß das Web weder wie Fernsehen, noch wie eine Zeitschrift ist. Ein großer Vorteil des WWW ist es, daß der Benutzer die Kontrolle hat. Während bei einer Zeitschrift ganz klar ist, wie die physischen Gegebenheiten sind, weiß man als Autor im Web das nicht. Man muß es auch nicht wissen. Webseiten passen sich den Gegebenheiten des Benutzers von selbst an, zum Beispiel an die Fenstergröße des Browsers oder an speziellen Bedürfnisse. Ältere Menschen haben zum Beispiel Probleme winzig kleine Buchstaben zu entziffern und können im Browser so die Schriftgröße die für die am besten ist festlegen.
Mit Cascading Style Sheets kann man immer nur Vorschläge machen, wie eine Webseite präsentiert werden soll, es ist weder sinnvoll noch möglich, alles genau zu bestimmen. So kann man mit CSS auch kein pixelgenaues Webdesign betreiben, zumal es aus genannten Gründen nicht sinnvoll ist, das überhaupt tun tu wollen.
Gibt es auch Probleme mit CSS?
Nicht mit CSS, wohl aber mit der Implementation in die Browser. Die Unterstützung in den ersten Browsern, die mit CSS umgehen können sollten ist sehr mangelhaft. Der Internet Explorer 3 und der Netscape Navigator 4 können nur einen kleinen Teil der Eigenschaften überhaupt verstehen und haben auch noch sehr viele Bugs. Neuere Browser wie Opera 4, der Internet Explorer 5 oder der angekündigte Navigator 6.0 sind da schon wesentlich weiter. Am Besten ist es, wenn man sich beim Erstellen von Style Sheets an folgende fünf Regeln hält:
- Jeder Browser sollte in der Lage sein, den Inhalt der Seite darzustellen
- Die erste Regel bedeutet nicht, daß die Seite in allen Browsern gleich aussehen sollte
- Wenn etwas unwichtiges in einem bestimmten Browser nicht funktioniert, zu schade für den Browser
- Überprüfe deine Style Sheets immer erst im Netscape Navagator 4. Style Sheets können in allen Browsern Probleme verursachen, aber im NN4 machen diese Probleme die Seite oft völlig unzugänglich
- Wisse wann aufzuhören ist. Manchmal kostet es mehr Nerven einen bestimmten Style zu erzeugen, als er wert ist.
Die Regeln sind natürlich nicht verbindlich, man sollte sie aber als Richtlinien im Kopf haben.
Wie sieht die Zukunft von CSS aus?
Rosig. Der Internet Explorer 5.0 unterstützt CSS nahezu vollständig und relativ fehlerfrei und zusätzlich einen größeren Teil von CSS 2.0. Netscape 6.0 wird aller Voraussicht nach sogar noch besser. Opera 4 ist auch nicht schlechter, somit dürfte sich das Problem der Unterstützung allmählich verabschieden, jetzt ist also der beste Zeitpunkt CSS zu lernen um es dann rechtzeitig wirklich effektiv einzusetzen.
CSS beschränkt sich allerdings nicht auf die Präsentation von HTML, XHTML und XML Dokumenten, auch andere Webstandards wie SVG Vektor Grafiken oder SMIL Multimedia Präsentationen machen Gebrauch von CSS.
Das W3C arbeitet derzeit an CSS3 das dieses Jahr noch fertiggestellt werden soll. In CSS3 wird die Sprache in verschiedene Module aufgeteilt, was eine schnellere Weiterentwicklung der einzelnen Module ermöglicht, ohne den Sprachstandard zu ändern und Browserhersteller haben es einfacher, die einzelnen Module Schritt für Schritt zu implementieren.
Ja, nur leider keine deutschen. Empfehlenswert sind diese beiden englischen:
Cascading Style Sheets: The definitive Guide
Autor: Eric A. Meyer Erschienen: 15. Mai 2000 bei O'Reilly & Associates Taschenbuch: 453 Seiten Preis: EUR 33,47 ISBN: 1565926226
Eric A. Meyer ist Redakteur bei Webreview.com für den Bereich Style Sheets und Mitbegründer der CSS Pointers Group. Das Buch behandelt CSS1 und CSS Positioning. Jede Eigenschaft wird ausführlich erklärt und im Zusammenhang mit anderen Elementen beschrieben. Ein wesentlicher Schwerpunkt des Buches liegt in der Beschreibung der Unterstützung der jeweiligen Eigenschaften in den aktuellen Browsern. Es richtet sich sowohl an HTML Profis die jetzt CSS als neue Sprache lernen wollen, als auch an Neulinge die sich schon ein wenig mit HTML beschäftigt haben und jetzt heiß darauf sind, zu erfahren, wie man Style Sheets effektiv einsetzt.
Cascading Style Sheets: Designing for the Web
Autoren: Håkon Wium Lie, Bert Bos Erschienen: 2. Juli 1999 bei Addison Wesley Taschenbuch: 432 Seiten Preis: EUR 38,30 ISBN: 0201596253
Die Autoren Håkon Wium Lie und Bert Bos sind verantwortlich für die Entwicklung der Cascading Style Sheets beim W3C. Das Buch führt durch den kompletten Sprachumfang von CSS2 anhand vieler Screenshots und Diagramme. Ein weiterer Schwerpunkt im Buch ist Typografie wodurch sich das Buch von anderen abhebt. Es gibt eine sehr umfangreiche Einführung in Schriftsatz und Schriftfamilien und schafft so ein sehr abgerundetes Wissen. Weitergehend führt es auch in XML und XSL ein. Es ist sehr leicht zu lesen und sicherlich auch für Anfänger sehr interessant.
Wo finde ich noch mehr Informationen?
http://www.bjoernsworld.de/css/bookmarks
Björn Höhrmann . http://www.bjoernsworld.de
http://bjoern.hoehrmann.de . http://learn.to/quote
am Badedeich 7 . 25899 Dagebüll
Telefon: +49(0)4667/981ASK
ciwas stylesheet authoring faq