Text in jeder Größe
Beim Gestalten von Texten stößt man schnell an die Grenzen von HTML, vermißt die vielfältigen Möglichkeiten einer professionellen Textverarbeitung wie beliebige Schriftgrößen, Einrückungen oder frei definierbare Vor- und Nachabstände für Absätze. Style-Sheets in HTML sollen es möglich machen: Formate zu definieren, die auf einzelne Textabsätze anwendbar sind.
Die neuen DTP-Raffinessen sorgen auch für neue Konflikte: HTML-Entwickler können nur ahnen, womit ihre WWW-Seiten letztendlich gelesen werden, zu groß ist die Palette der möglichen Betriebssysteme und Oberflächen. Und noch gehören Style-Sheets nicht zum offiziellen HTML-Standard. Das W3-Konsortium sieht sie aber für die Zukunft fest vor und bietet in HTML 3.2 bereits umfangreiche Empfehlungen zum Notieren von Style-Sheets an. Diese Empfehlungen finden Sie in der Internet-Draft "Cascading Style Sheets" unter http://www.w3.org/pub/WWW/TR/PR-CSS1 (englisch).
|
Style-Sheets in HTML Text in jeder Größe |
Wenn Sie Ihre Webseiten heute schon mit Style-Sheets erstellen, setzen Sie diese sparsam ein und achten Sie darauf, daß die Seiten trotzdem für alle Anwender lesbar sind. Nur die neuesten Browser-Versionen können Style-Sheets interpretieren - Netscape ab v4.0 und MS Internet Explorer ab v3.0. Da diese Technik noch nicht ausgereift ist, kann es vorkommen, daß die Anzeigeergebnisse von Ihren Vorstellungen abweichen.
Sie haben verschiedene Möglichkeiten, Style-Sheets zu definieren. Wenn Sie in einer HTML-Datei eine bestimmte Textstelle besonders hervorheben möchten, genügt es, im einleitenden HTML-Tag die gewünschten Stil-Elemente zu notieren. Ein Beispiel:
<p style="color: blue; font-size: 24 pt">Blauer Text in 24 Punkt</p>
Alle Angaben folgen einer festen Syntax. Nach dem einleitenden style= werden alle Formatierbefehle durch Strichpunkte (Semikolon) voneinander getrennt und in Anführungszeichen eingeschlossen.
Ein Formatierbefehl besteht aus der Formatangabe (gefolgt von einem Doppelpunkt) und der Zuweisung eines geeigneten Wertes. Im Beispiel oben werden also die Farbe (color:) Blau (blue) und die Schriftgröße (font-size:) 24 Punkt (24 pt) definiert. Diese Vorgaben gelten für den gesamten Absatz (<p> ... </p>). Die Angabe style= läßt sich in allen einleitenden HTML-Tags zur Textformatierung wie z.B. <blockquote>, <h3> usw. verwenden.
Hinweis: Erst Netscape-Version 4.+ kann diese Art der Style-Sheet-Einbindung interpretieren. Der MS Internet Explorer beherrscht diese Technik bereits seit der Version 3.+.
Die professionelle Anwendung und eigentliche Stärke von Style-Sheets ist das Vordefinieren von Formaten. Diese Vorgaben gelten dann für eine gesamte Datei oder lassen sich für eine beliebige Anzahl Dateien wiederverwenden. Sie werden im Kopf (<head> ... </head>) einer HTML-Datei notiert. Das nächste Beispiel zeigt, wie Sie dateiweite Vorgaben für die aktuelle Datei definieren:
<head>
<title>Style-Sheets</title>
<style type="text/css">
h1 { color: red; font-size: 18 pt; font-style: bold }
p,li { font-size: 10 pt; line-height: 12 pt; font-family: helvetica }
</style>
</head>
Alle zu definierenden Vorgaben stehen innerhalb der Tags <style type="text/css"> ... </style>. Als nächstes notieren Sie die HTML-Tags, für die Sie dateiweite Eigenschaften definieren möchten. In unserem Beispiel sind dies die Tags h1 (=<h1>), p (=<p>) und li (=<li>). Bitte beachten Sie die Schreibweise o h n e die spitzen Klammern. Wenn Sie mehreren Elementen die gleichen Eigenschaften zuweisen möchten, können Sie diese Elemente hintereinander notieren, getrennt durch Kommata (wie im Beispiel p,li). Die eigentlichen Formatierbefehle werden von geschweiften Klammern eingeschlossen { ... } und folgen der Syntax, die wir schon im ersten Beispiel (style=) weiter oben kennengelernt haben.
Sie benötigen verschiedene Absatzformate innerhalb einer Datei? Auch dafür gibt es eine Möglichkeit. Definieren Sie einfach mehrere "Klassen" oder "Unterformate" eines bestimmten HTML-Tags. Im folgenden Beispiel sehen Sie, wie dem Absatz-Tag <p> verschiedene Eigenschaften zugewiesen werden:
<head>
<title>Style-Sheets</title>
<style type="text/css">
p.standard { color: black; font-size: 10 pt }
p.gross { color: black; font-size: 18 pt }
p.rot { color: red; font-size: 10 pt }
p.grün { color: green; font-size: 10 pt }
</style>
</head>
Der Unterschied zum vorherigen Beispiel besteht darin, daß Sie den einzelnen Unterformaten einen Namen zuweisen. Notieren Sie dazu erst den Tag, in diesem Fall p (=<p>), gefolgt von einem Punkt und einem frei wählbaren Namen. Im eigentlichen Textkörper der Datei, also innerhalb von <body> ... </body>, können Sie diese Unterformate beliebigen Absätzen zuweisen. Die entsprechenden Anweisungen für unser Beispiel oben sehen dann so aus:
<p class=standard>Schwarzer Text in 10 Punkt</p>
<p class=gross>Schwarzer Text in 18 Punkt</p>
<p class=rot>Roter Text in 10 Punkt</p>
<p class=grün>Grüner Text in 10 Punkt</p>
Im Einleitungstag steht also die Angabe class= gefolgt von dem im Head definierten Namen des gewünschten Formates.
Doch der "Königsweg" ist, Style-Sheet-Definitionen in einer separaten Datei abzulegen. Sie definieren alle benötigten Formate einmal - und referenzieren diese Datei dann in jeder HTML-Datei, in der Sie diese Formatierungen nutzen wollen. Ändern Sie eines oder mehrere dieser Formate, werden alle veknüpften Dokumente automatisch aktualisiert. Die Datei, in der die Style-Sheet-Definitionen stehen, muß eine reine ASCII-Datei sein und darf nichts anderes als eben diese Definitionen enthalten. Nicht zwingend, aber dringend empfohlen ist es, diese Datei mit der Kennung .css zu speichern, z.B. myformat.css. Um die Format-Vorgaben in dieser Datei zu notieren, benutzen Sie die gleiche Syntax wie innerhalb von <style ...> ... </style> in den vorangegangenen Beispielen. Das Referenzieren in einer HTML-Datei sieht folgendermaßen aus:
<head>
<title>Style-Sheets</title>
<style type="text/css">
@import url(myformat.css)
</style>
</head>
Statt innerhalb der <style>-Tags jedes benötigte Format zu notieren, schreiben Sie nur noch den Befehl @import url(...). Innerhalb der Klammern steht der Name der ASCII-Datei, in der Sie die Formate definiert haben.
Sie sind aber keineswegs an die importierten Formate gebunden. Innerhalb von <style...> ... </style> können Sie mit der weiter oben beschriebenen Syntax zusätzliche Formate definieren, die nur für die aktuelle Datei gültig sind. Diese direkt definierten Formate haben Vorrang vor den importierten Formaten.
Der Vollständigkeit halber sei noch erwähnt, daß HTML 3.2 bereits weiterführende Möglichkeiten bietet, die sogenannten "Standardverweise". Diese Technik soll dem Anwender das Navigieren in großen Datenbeständen leichter machen. Wenn zukünftige Browserversionen in der Lage sind, diese Standardverweise zu interpretieren, werden Sie als Anwender bestimmen können, ob Sie die angebotenen Stylesheets nutzen möchten oder nicht.
Zum Abschluß noch ein kleiner Kniff, mit dem Sie umfangreiche Formatvorgaben innerhalb des <style>-Tags kommentieren können. Dafür steht eine spezielle, an die Programmiersprache C angelehnte Syntax zur Verfügung. Auch dazu ein Beispiel:
<head>
<title>Style-Sheets</title>
<style type="text/css">
h1 { color: red; font-size: 18 pt; font-style: bold }
/* Extra große Überschrift erster Ordnung in rot */
</style>
</head>
Der Kommentar wird mit /* eingeleitet und die umgekehrte Zeichenfolge */ beendet ihn.
|
Schriftfamilie font-family: (Schriftnamen/Schriftfamiliennamen) Schriftart font-style: [normal | italic | oblique] Schriftvariante font-variant: [normal | small-caps] Schriftgröße font-size: Numerischer Wert Schriftgewicht font-weight: [normal | bold | bolder |lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]
Wortabstand word-spacing: Numerischer Wert Zeichenabstand letter-spacing: Numerischer Wert Zeilenhöhe line-height: Numerischer Wert Textdekoration text-decoration: [underline | overline | line-through | blink] Textart text-transform: [capitalize | uppercase | lowercase | none]
Texteinrückung text-indent: Numerischer Wert Vertikale Textausrichtung vertical-align: [baseline | sub | super | top | text-top | middle | bottom | text-bottom] oder numerisch in Prozent Horizontale Textausrichtung text-align: [left | right | center | justify]
Farbe color: HTML-Farbangabe Hintergrundfarbe background-color: HTML-Farbangabe
Abstand oben margin-top: Numerischer Wert Abstand links margin-left: Numerischer Wert Abstand unten margin-bottom: Numerischer Wert Abstand rechts margin-right: Numerischer Wert
Rahmendicke oben border-top-width: [thin | medium | thick] oder numerischer Wert Rahmendicke links border-left-width: [thin | medium | thick] oder numerischer Wert Rahmendicke unten border-bottom-width: [thin | medium | thick] oder numerischer Wert Rahmendicke rechts border-right-width: [thin | medium | thick] oder numerischer Wert Rahmenfarbe border-color: HTML-Farbangabe Rahmentyp border-style: [none | dotted | dashed | solid | double | groove | ridge | inset | outset] Innenabstand oben bei Rahmen padding-top: Numerischer Wert Innenabstand links bei Rahmen padding-left: Numerischer Wert Innenabstand unten bei Rahmen padding-bottom: Numerischer Wert Innenabstand rechts padding-right: Numerischer Wert Auch für das Notieren von numerischen Werten gibt es feste Regeln:
pt für Punkt (= 1/72 inches) pc für Pica (= 12 Punkt) in für Inch (= 2.54 cm) mm für Millimeter cm für Zentimeter em für elementeigene Schrifthöhe (relative Angabe) ex für elementeigene Höhe des Buchstabens x (relative Angabe) px für Pixel (relative Angabe wegen unterschiedlicher Bildschirmauflösung) % für Prozent gegenüber Elementnorm (relative Angabe) |
© 1997 Studio P.
Paeng@thePentagon.com
Original:
Stylesheets in HTML