vorheriges KapitelInhaltsverzeichnisInfoseite


Das Konzept der Stilvorlagen

Stilvorlagen und HTML

Kaskadierte Stilvorlagen in der Praxis

JavaScript-Stilvorlagen

Zusammenfassung

Fragen und Antworten



Kapitel 32


Styling für Ihre Seiten

Von Arman Danesch


Im letzen Kapitel haben wir uns auf eine der beiden Hauptkomponenten in Microsoft's und Netscape's Ansatz für dynamisches HTML konzentriert: explizite, ebene Positionierung von Objekten und Elementen innerhalb einer HTML-Seite.


In diesem Kapitel werden wir einen Blick auf Stilvorlagen werfen, der anderen Hauptkomponente, die von beiden Firmen integriert wurde. Obwohl Microsoft und Netscape auch hier unterschiedliche Ansätze verfolgen, ist die Idee, hinter den Stilvorlagen das Maß an Kontrolle über das Design zu bieten, das von vielen HTML-Erweiterungen (sowie auch HTML 3.2 und höher) ermöglicht wird, sowie ein Stückchen mehr Kontrolle noch hinzuzufügen und das Ganze vom eigentlichen HTML zu trennen. Mit anderen Worten wird das Erscheinungsbild bzw. der Stil von der Struktur getrennt. Auf diese Weise soll HTML geholfen werden, das zu tun, wofür es immer vorgesehen war: Strukturen unabhängig von der Erscheinung oder dem Browser zu definieren.


In diesem Kapitel werden wir uns zwei wesentliche Ansätze der Stilvorlagen ansehen: den Ansatz des World Wide Web Consortium, der kaskadierte Stilvorlagen (Cascading Style Sheets - CSS) genannt wird. Dieser wird von den neuen Browsern von Microsoft und Netscape unterstützt. Und Netscape's eigene Alternative zum W3C-Ansatz, die - wen wundert's - JavaScript-Stilvorlagen genannt wird.



Das Konzept der Stilvorlagen

Das Konzept hinter den Stilvorlagen ist recht simpel. Zunächst einmal definieren Stilvorlagen das Layout, Merkmale der Typographie und des Designs eines Dokuments, unabhängig von der Struktur des Dokuments. Anschließend wird die Struktur eines Dokuments mit Standard-HTML definiert (genauso wie in der Vergangenheit). Ein Autor kann dann bevorzugte Designmerkmale über Stilvorlagen definieren. Stilvorlagen sind ein Reihe von Regeln, normalerweise in einer extra Datei definiert, die ein Browser zur Darstellung der Struktur eines Dokuments verwendet, die mit Standard-HTML definiert wurde.


Auf diesem Weg kann ein Browser, der Stilvorlagen nicht unterstützt, das Dokument trotzdem als Standard-HTML-Dokument darstellen. Außerdem sollte durch die vom Autor vorgenommene Trennung das Standard-HTML-Dokument eigenständig und frei von Abhängigkeiten von den Stilvorlagen sein. Ein weiterer Vorteil der Verwendung von Stilvorlagen ist, daß auf Grund der Tatsache, daß Web-Dokumente im wachsendem Maß mit Nichtstandard-Methoden, wie z.B. über akustische Ausgabegeräte für hörbehinderte Menschen oder in anderen Zusammenhängen, wo Standard-Browser-Technologie nicht anwendbar ist, auf das strukturierte HTML-Dokument auf sinnvolle Art und Weise ausgegeben werden kann, ohne durch die überflüssigen und oft verwirrenden HTML-Erweiterungs-Tags für das visuelle Layout in einem Browser beeinflußt zu werden.



Ansätze für Stilvorlagen

Stilvorlagen sind als Konzept nicht an eine bestimmte Technologie oder Definition gebunden. In der HTML-Welt gibt es einen Standard, der kaskadierte Stilvorlagen (Cascading Style Sheets, CSS) genannt wird. Dabei handelt es sich um einen Standard, der vom World Wide Web Consortium, der Dachorganisation, die jede neue HTML-Generation definiert, vorgeschlagen wurde.


Durch die Verwendung von kaskadierten Stilvorlagen können Sie alles, von Schriftarten für HTML-Elemente bis zur Schriftfarbe, Hintergrundfarbe und -grafik, Ränder, Abstände, Schriftstile und vieles mehr, definieren. Im wesentlichen können Sie jeden Teil des Erscheinungsbilds Ihres Dokuments mit kaskadierten Stilvorlagen definieren. Anschließend werden diese Stildefinitionen in Browsern, die diese Art der Stilvorlagen unterstützen, wie dem Netscape Communicator und dem Microsoft Internet Explorer 4, für die Darstellung des Dokuments verwendet.


Ein weiterer Vorschlag für Stilvorlagen kommt vom ISO (International Organisation for Standardisation). Dieser Vorschlag trägt den Namen Document Style Semantics and Specification Language. Er bezieht sich auf das gesamte SGML und nicht nur auf HTML. Bis zur Drucklegung dieses Buches hat er aber keinen Zugang zur HTML-Welt gefunden. Da HTML allerdings eine Anwendung von SGML ist, ist es wichtig, dieser Alternative zu kaskadierten Stilvorlagen eine gewisse Aufmerksamkeit zuteil werden zu lassen. Es mag der Tag kommen, an dem diese Art der Stilvorlagen für die HTML-Welt relevant ist.

Schließlich, als wären zwei mögliche, auf Standards basierende Ansätze für Stilvorlagen noch nicht genug, hat Netscape eine eigene alternative Version der Stilvorlagen entwickelt. So wie Netscape mit den Ebenen eine Alternative für die Objektpositionierung anbietet, während sie den aufkommenden Standard unterstützen, bietet Netscape mit JavaScript-Stilvorlagen einen eigenen Ansatz für Stilvorlagen, während sie kaskadierte Stilvorlagen weiterhin unterstützen.


Dies hört sich nach einer etwas konfusen Situation an und da es sich um eine neue Technologie handelt ist dem auch so. Wie es allerdings mit allen neuen Technologien so ist, wird sich die Lage beruhigen und es wird sich das VHS der Stilvorlagen herauskristallisieren, wie das Betamax in der Bedeutungslosigkeit verschwinden wird.



Stilvorlagen und HTML

Das Schöne an dem Stilvorlagenkonzept ist, daß es flexibel ist. Die Tags und Attribute, die verwendet werden, um Stilvorlagen auf HTML-Vorlagen anzuwenden, binden weder Autoren noch Browser-Hersteller an eine einzelne Stilvorlagenart.


Statt dessen hat das W3C eine Reihe von Tags und Attributen definiert, mit denen beliebige Stilvorlagen auf ein Dokument angewendet werden können. Die Grundlagen dessen sind einfach:


Das <LINK>-Tag ist noch etwas erklärungsbedürftig. Dieses Tag verbindet eine externe Stilvorlagendatei mit dem aktuellen Dokument. Auf diesem Weg kann ein konsistenter Stil für eine Site durch den Sitemanager festgelegt und auf Dokumente, die von beliebigen Autoren in einer Organisation erstellt werden, angewendet werden.


Um das Tag effektiv einzusetzen, ist es nötig, persistente, Standard- und alternative Stile zu verstehen. Zunächst einmal die Grundlagen:


Das REL-Attribut des <LINK>-Tags kontrolliert einen Teil dieses Prozesses. Über REL=stylesheet werden die geladenen Stile persistent. Durch Einfügen des TITLE-Attributs, wie z.B. in


<LINK REL=stylesheet TITLE=Ein-Titel HREF="URL">


wird der Stil zum Standard-Stil.


Indem Sie REL=stylesheet in REL=alternate ändern, erzeugen Sie eine alternative Stilvorlage mit einem anderen Titel.


Zusätzlich zu den Möglichkeiten, Stilvorlagen in HTML-Dokumenten zu integrieren, wurden mit der Entwicklung der Stilvorlagen weitere Tags und Attribute eingeführt. Wie Sie zuvor bereits gesehen haben, können Sie das STYLE-Attribut bei den meisten Tags verwenden, um elementspezifische Stildefinitionen zu erzeugen. Zusätzlich können Sie über die Attribute ID und CLASS benannte Stile, die anderswo z.B. im Header des Dokuments oder in einer externen Datei definiert wurden, einem bestimmten Element zuweisen, wie das z.B. in <DIV ID="ID-Name"> oder in <P CLASS="Klassenname"> der Fall ist.


Der Unterschied dabei ist sehr fein. Eine Klasse (engl. class) ist ein sehr allgemein definierter Stil, der Eigenschaften für einige oder alle Elemente in einem Dokument festlegt. Die Klasse kann jedem Element über das CLASS-Attribut zugewiesen werden. Nur die Stildefinitionen für dieses spezielle Element in der Klasse werden auch auf das Element angewendet.


Die ID definiert auf der anderen Seite etwas, was einen bestimmten Wert im gesamten Dokument hat. Dies wird oft verwendet, um bestimmte Einstellungen einer Klasse für bestimmte Elemente zu überschreiben.


Das neue <SPAN>-Tag bietet eine Möglichkeit an, einen Stil auf einen Textteil anzuwenden, ohne in die Struktur des Dokuments einzugreifen (aus diesem Grund befindet sich dieses Tag auch nicht innerhalb eines strukturgebenden HTML-Tags). Damit können Sie z.B. dem ersten Buchstaben oder dem ersten Wort eines Dokuments einen Stil zuweisen. Da <SPAN> keine Auswirkungen auf den Text hat, wirkt sich nur die Stilvorlage auf das Erscheinungsbild aus.



Kaskadierte Stilvorlagen in der Praxis

Lassen Sie uns, bevor wir zum schwierigen Teil der Sache kommen, die Idee hinter kaskadierten Stilvorlagen besprechen. Was bedeutet kaskadiert bei dieser speziellen Art der Stilvorlagen? Ganz klar gesagt: Es sind keine Wasserfallkaskaden beteiligt.


Kaskadiert bezieht sich auf die Möglichkeit, Stilinformationen aus mehr als nur einer Quelle zu kombinieren. Ein Stil einer Organisation aus einer externen Datei kann z.B. mit dokumentspezifischen Stilen, die innerhalb des Dokuments definiert wurden, und elementspezifischen Stilen, die im STYLE-Attribut eines Elements definiert wurden, kombiniert werden. Kaskadiert ist das Ganze, da es eine festgelegte Hierarchie bei der Reihenfolge der Anwendung der Stilvorlagen gibt: Regeln in Vorlagen, die später definiert wurden, überschreiben solche in Stilen, die zuvor definiert wurden.


Nun sind Sie bereit, sich an den kaskadierten Stilvorlagen zu versuchen. Kaskadierte Stilvorlagen verwenden eine einfache Syntax für die Definition von Stileigenschaften.


Im wesentlichen wird der Stil eines Elements über eine Liste von Eigenschaft/Wert-Paaren definiert, die so ähnlich wie die folgende aussieht:


Name: Wert; Name: Wert; Name: Wert; ...


Die Namen sind hier die Namen von Eigenschaften, die Teil der Spezifikation der kaskadierten Stilvorlagen sind (und genau das werden Sie in diesem Kapitel lernen). Die Werte können beliebige, für die jeweilige Eigenschaft zulässige Werte sein. Diese Listen können auf verschiedenen Wegen verwendet werden, um Stile für ein Element festzulegen:


Lassen Sie uns jeweils ein Beispiel betrachten. Einen Stil in einem STYLE-Attribut zu erzeugen ist so einfach:


<DIV STYLE="Stildefinition">


oder


<H1 STYLE="Stildefinition">


Das Problem daran ist, daß Sie für jedes Auftreten eines Elements (z.B. ein Absatz) einen Stil definieren müssen, selbst wenn alle die gleiche Stildefinition haben. Sie haben zwei Möglichkeiten, dies zu umgehen.


Die erste Möglichkeit ist es, allen Elementen eines Typs einen Stil zuzuweisen. Die folgende Stilvorlage definiert z.B. einen Stil für alle <IMG>-Tags und einen weiteren für alle <H3>-Tags in einem Dokument:


<STYLE TYPE="text/css">
IMG { Stildefinition }
H3 { Stildefinition }
</STYLE>


Beachten Sie bitte das TYPE-Attribut in dem <STYLE>-Tag, mit dem angezeigt wird, daß es sich um kaskadierte Stilvorlagen handelt.


Dieser Ansatz macht es möglich, das Ihr gesamter HTML-Quelltext frei von STYLE-Attributen ist. Es gibt allerdings Situationen, in denen Sie vorgegebene Stile im gesamten Dokument verwenden wollen, aber gleichzeitig festlegen wollen, wann diese eingesetzt werden. Zum Beispiel könnten Sie abhängig vom Absatz zwei verschiedene Stile für das <DIV>-Tag haben oder einen Stil, der nur auf eine bestimmte Menge von Tags angewendet werden soll (z.B. alle Überschriften). Dafür können Sie benannte Stilvorlagen als alternativen Ansatz verwenden.


<STYLE TYPE="text/css">
#id-Name1 { Stildefinition }
#id-Name2 { Stildefinition }
</STYLE>


Anschließend können Sie wählen, wann Sie die Stile über das ID-Attribut einem HTML-Tag zuweisen:


<DIV ID="style-Name1">


oder


<LI ID="style-Name2">


Sie können bestimmte Elemente innerhalb einer ID-Eigenschaft zuweisen, indem Sie vor das Gatterzeichen den Namen des Elements einfügen:


<STYLE TYPE="text/css">
#id-name1 { Stildefinition }
H1#id-name1 { Stildefinition }
</STYLE>


Dieses Beispiel erzeugt zunächst eine Definition, die für alle Elemente gültig ist, und fügt anschließend spezielle Eigenschaften ausschließlich für das <H1>-Element hinzu.


Die Syntax zur Definition von Klassen ist ähnlich:


<STYLE TYPE="text/css">
.class-Name1 { Stildefinition }
H1.class-Name1 { Stildefinition }
</STYLE>


Es gibt ein weiteres, wichtiges Konzept, das wir besprechen sollten, bevor wir uns mit den Eigenschafen der kaskadierten Stilvorlagen beschäftigen. Die Rede ist von kontextbezogenen Selektoren. Nehmen wir einmal an, Sie wollten einen Stil für kursiven Text definieren, der in Überschriften der zweiten Stufe auftritt. Sie wollen, daß dieser Stil nur in Überschriften und nirgends sonst im Dokument auf kursiven Text angewendet wird. Um dies zu erreichen, verwenden Sie folgendes:


<STYLE TYPE="text/css">
H2 I { Stildefinition }
</STYLE>


Dies definiert einen Stil für alle Vorkommen von <I> in einem <H2>-Block.



Die Eigenschaften der kaskadierten Stilvorlagen

Die Eigenschaften der kaskadierten Stilvorlagen können in folgende, breit angelegte Kategorien eingeordnet werden:


Diese Gruppierung stammt von mir, da ich es sinnvoll finde, auf diese Weise zu denken. Das W3C hat seine Art der Gruppierung innerhalb des großen Spezifikationsdokuments für die kaskadierten Stilvorlagen.

Im nächsten Abschnitt des Kapitels werden wir uns einige der wesentlichen Eigenschaften ansehen und diese auch anwenden. Es gibt zu viele, um sie alle in einem Abschnitt eines einzigen Kapitels zu behandeln. Wenn Sie mehr Informationen zu diesem Thema benötigen, werden Sie in der Spezifikation der kaskadierten Stilvorlagen fündig. Diese können Sie im Web unter http://www.w3.org/pub/www/TR/REC-CSS1 einsehen.


Beim Schreiben des Buches standen nur Preview Releases des Internet Explorer und des Netscape Communicator zur Verfügung, die die kaskadierten Stilvorlagen noch nicht vollständig implementierten. Aus diesem Grund betrachten wir hier nur ausgewählte Eigenschaften. Sorry, so ist das Web.


Schriftart und -stil

Kaskadierte Stilvorlagen verfügen über eine umfangreiche Sammlung von Eigenschaften, die das Erscheinungsbild von Schriften definieren. Mit kaskadierten Stilvorlagen haben Autoren wesentlich mehr Kontrolle über Schriften, als dies bei dem <FONT>-Tag bei HTML der Fall war.


Tabelle 32.1 umreißt die wesentlichen Eigenschaften zur Kontrolle von Schrift.


Tabelle 32.1: Schrifteigenschaften der kaskadierten Stilvorlagen

Eigenschaft

Beschreibung

font-family

Legt die Schriftart fest. Mögliche Werte sind Schriftnamen (wie z.B. Arial, Times oder Palatino) oder einer von fünf elementaren Schriftnamen: SERIF, SANS-SERIF, CURSIVE, FANTASY, MONOSPACE.

font-size

Legt die Schriftgröße relativ, absolut oder prozentual fest.

font-style

Legt den Schriftstil fest: oblique, italic oder normal.

font-weight

Legt das Gewicht der Schrift fest. Mögliche Werte sind: normal, bold, bolder oder lighter.

font-variant

Legt fest, ob nur Großbuchstaben (small-caps) oder Groß- und Kleinbuchstaben (normal) verwendet werden sollen.

font

Legt mehrere Schrifteigenschaften auf einmal fest. Dafür wird eine Liste, bestehend aus den Eigenschaften font-weight, font-size, font-style, font-family und line-height (wird weiter unten in diesem Kapitel behandelt), übergeben.

color

Setzt die Farbe des Textes als RGB-Triple oder einen von 16 gültigen Farb-Namen: AQUA, BLACK, BLUE, FUCHSIA, GREY, GREEN, LIME, MAROON, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE, YELLOW.

text-decoration

Legt die Ausgestaltung der Schrift fest: underline, overline, line-through oder blink.

Zu dieser Liste gibt es ein paar Dinge anzumerken:


Das folgende Dokument zeigt einige der Effekte dieser Eigenschaften:


<HTML>
<HEAD>
<TITLE>CSS Font Properties</TITLE>
</HEAD>
<BODY>
<SPAN STYLE="font-family: Arial">font-family: Arial</SPAN>
<SPAN STYLE="font-family: fantasy">font-family: fantasy</SPAN>
<HR>
<SPAN STYLE="font-size: xx-small">font-size: xx-small</SPAN>
<SPAN STYLE="font-size: medium">font-size: medium</SPAN>
<SPAN STYLE="font-size: xx-large">font-size: xx-large</SPAN>
<HR>
<SPAN STYLE="font-style: italic">font-style: italic</SPAN>
<HR>
<SPAN STYLE="font-weight: 100">font-weight: 100</SPAN>
<SPAN STYLE="font-weight: 500">font-weight: 500</SPAN>
<SPAN STYLE="font-weight: 900">font-weight: 900</SPAN>
<HR>
<SPAN STYLE="font-variant: normal">font-variant: normal</SPAN>
<SPAN STYLE="font-variant: small-caps">font-variant: small-caps</SPAN>
<HR>
<SPAN STYLE="text-decoration: underline">text-decoration: underline</SPAN>
<SPAN STYLE="text-decoration: overline">text-decoration: overline</SPAN>
<SPAN STYLE="text-decoration: line-through"> text-decoration: line-through</SPAN></BODY>
</HTML>


Das Ergebnis, wie es der Internet Explorer 4 darstellt, sehen Sie in Abbildung 32.1.


Durch die Verwendung dieser Stile ist es möglich, eine Stilvorlage zu erzeugen, die in ihrem Erscheinungsbild einmalig ist:


<HTML>
<HEAD>
<TITLE>More font property examples</TITLE>
<STYLE TYPE="text/css">
H1 {font: bold large monospace; text-decoration: overline underline; color: red}
LI {font-family: fantasy; font-size: medium; font-weight: 100; font-variant: small-caps; color: blue}
</STYLE>
</HEAD>
<BODY BGCOLOR="aqua">
<H1>COMPUTER DOESN'T TURN ON?</H1>
<UL>
<LI>Check the power cord is plugged into the wall.
<LI>Check the power cord is plugged into the back of the computer.
<LI>Check the power switch is in the on position.
<LI>Check the monitor is plugged into the back of the computer.
<LI>Check the monitor is turned on.
</UL>
<HR>
<H1>STILL DOESN'T WORK?</H1>
<UL>
<LI>Call your vendor
</UL>
</BODY>
</HTML>


siehe Abbildung

Abbildung 32.1:
Verschiedene Schrifteigenschaften der kaskadierten Stilvorlagen

Dieser Quelltext erzeugt das Ergebnis, das Sie in Abbildung 32.2 sehen.


siehe Abbildung

Abbildung 32.2:
Über Stilvorlagen können Sie ein konsistentes Erscheinungsbild erzeugen

Beachten Sie bitte, daß im Header des Dokuments zwischen den Tags <STYLE> und </STYLE> eine Stilvorlage definiert wird. Diese Stilvorlage definiert Stile für das <H1>- und das <LI>-Tag. Dadurch werden auf jedes <H1>-Tag in dem Dokument die Eigenschaften angewendet, die in der Stilvorlage definiert sind. Desgleichen beim <LI>-Tag, das zuvor definierte Eigenschaften verwendet.


Auf diesem Weg können Sie das Erscheinungsbild aller HTML-Elemente in Ihrem Dokument an einer Stelle, der Stilvorlage, definieren. Anschließend müssen Sie sich nur noch um die Codierung des elementaren HTML-Textes kümmern.



Hintergrundfarben und -bilder

HTML bietet nur eine eingeschränkte Kontrolle über das Erscheinungsbild des Hintergrunds eines Dokuments an: Sie können mit BGCOLOR die Hintergrundfarbe eines Dokuments festlegen bzw. mit BACKGROUND ein Bild, das als Hintergrund dargestellt wird. Einige Browser erweitern diese Möglichkeiten durch die Möglichkeit, in Tabellen einzelnen Zellen einen Hintergrund zuzuweisen.


Kaskadierte Stilvorlagen bieten noch mehr Kontrolle. Es gibt sechs Eigenschaften zur Kontrolle des Hintergrunds. Da Stilvorlagen elementweise zugewiesen werden, können Sie auf einer Seite mehr als einen Hintergrund verwenden. Tabelle 32.2 bietet eine Übersicht über die sechs Eigenschaften.


Tabelle 32.2: Hintergrundeigenschaften der kaskadierten Stilvorlagen

Eigenschaft

Beschreibung

background-color

Legt die Hintergrundfarbe eines Elements fest. Mögliche Werte sind ein zulässiger Farb-Name, ein RGB-Triple oder transparent.

background-image

Legt das Hintergrundbild fest. Der Wert sollte die URL des Bildes oder none sein.

background-repeat

Gibt an, wie das Hintergrundbild angezeigt werden soll. Mögliche Werte sind repeat (wiederholt das Bild horizontal und vertikal), repeat-x (wiederholt das Bild nur horizontal), repeat-y (wiederholt das Bild nur vertikal), no-repeat (das Bild wird nicht wiederholt).

background-attachment

Gibt an, ob das Bild verankert ist oder mit dem Dokument gescrollt wird. Mögliche Werte sind scroll und fixed.

background-position

Legt die Ausgangsposition eines Hintergrundbilds fest. Die möglichen Werte werden weiter unten beschrieben.

background

Diese Eigenschaft kann man als Zusammenfassung aller anderen sehen. Sie übergeben dieser eine Kombination der Werte der anderen Eigenschaften.

Es ist offensichtlich, das diese Eigenschaften eine wesentlich feinere Kontrolle über Hintergründe und deren Erscheinungsbild ermöglichen, als dies bei den eingeschränkten HTML-Tags und -Attributen der Fall ist.


Zu einigen dieser Eigenschaften muß ich noch ein paar Worte sagen. Das W3C empfiehlt, eine Hintergrundfarbe festzulegen, für den Fall, das ein Hintergrundbild nicht verfügbar ist.


Aber auch die background-position-Eigenschaft bedarf noch der Klärung. Ein Hintergrundbild zu positionieren ist ein bißchen komplex. Mögliche Formate sind Schlüsselworte, Plazierungseinheiten und die Plazierung über Prozentangaben. Sie können z.B. die Anweisungen top, center, bottom, left und right zur Positionierung eines Hintergrundbilds zu Paaren, wie top right, center left oder center (steht für center center), kombinieren. Bei Prozentangaben läuft das Ganze etwas anders. Der Wert A% B% sagt aus, daß der Punkt A% von links und B% von oben bezogen auf das Hintergrundbild auf den Punkt A% von links und B% von oben bezogen auf das Element gelegt wird. Somit entspricht 0% 0% top left und 100% 100% bottom right.


Lassen Sie uns ein konkretes Beispiel betrachten: Wir plazieren ein Hintergrundbild in einem Browser-Fenster. Das Bild ist 100 x 100 Pixel groß und das Fenster mißt 200 x 200 Pixel. Wenn wir nun 10% 20% als Anweisung zur Positionierung übergeben, passiert folgendes:


Wenn Sie nur einen Prozentwert angeben, wird dieser als Horizontalwert und für den Vertikalwert wird der Standardwert 50% verwendet. Zu guter Letzt können Sie noch Einheiten wie Zentimeter zur Positionierung verwenden. So plaziert z.B. die Angabe 3cm 3cm die linke, obere Ecke des Hintergrundbilds 3 cm von links und 3 cm von oben von der linken, oberen Ecke des Elements entfernt.


Als dieses Buch geschrieben wurde, unterstützte weder der Netscape Communicator noch der Internet Explorer 4 Hintergrundbilder. Aus diesem Grund können wir hier kein Beispiel bringen. Die background-color-Eigenschaft funktionierte allerdings im Internet Explorer. Mit dieser kann man entweder die Hintergrundfarbe für ein einzelnes Element oder das ganze Dokument definieren:


<HTML>
<HEAD>
<TITLE>CSS Background Colors</TITLE>
<STYLE TYPE="text/html">
#mainback {background-color: yellow}
#typeback {background-color: #000000; color: white}
</STYLE>
</HEAD>
<BODY ID="mainback">
<DIV ID="typeback">This is an example of a
background color for an element.</DIV>
<HR>
</BODY>
</HTML>


Wie Sie in Abbildung 32.3 feststellen werden, können Sie mit kaskadierten Stilvorlagen Hintergrundfarben sowohl der gesamten Seite (mainback wird auf die gesamte Seite angewendet) als auch einzelnen Elementen, wie z.B. Absätzen (typeback wird auf diese Art verwendet), zuweisen. typeback definiert hier zusätzlich eine Schriftfarbe mit der color-Eigenschaft, so daß die Schrift vor dem schwarzen Hintergrund sichtbar wird.


siehe Abbildung

Abbildung 32.3:
Hintergrundfarben über kaskadierte Stilvorlagen


Eigenschaften zur Textausrichtung

Kaskadierte Stilvorlagen bieten Autoren eine ganze Reihe von Eigenschaften zur Textausrichtung an. Diese Eigenschaften ermöglichen die präzise typographische Kontrolle, die sonst den Anwendern von Textverarbeitungsprogrammen und Desktop-Publishing-Paketen zur Verfügung steht, im Web.


Die wesentlichen Eigenschaften zur Textausrichtung finden Sie in Tabelle 32.3.


Tabelle 32.3: Eigenschaften zur Textausrichtung.

Eigenschaft

Beschreibung

vertical-align

Legt die vertikale Ausrichtung eines Elements relativ zu dessen Elternelement, der Zeile, in der sich das Element befindet, oder der Zeilenhöhe der Zeile des Elements fest. Die Werte baseline, middle, sub, super, text-top und text-bottom arbeiten relativ zum Elternelement. top und bottom beziehen sich dagegen auf die Zeile selbst. Eine Prozentangabe hebt die Grundlinie des Elements über die des Elternelements.

text-align

Legt die Textausrichtung innerhalb des Elements fest. Mögliche Werte sind left, center, right oder justify.

text-indent

Legt den Einzug der ersten Zeile formatierten Textes in einem Element fest. Der Wert kann entweder eine absolute Länge oder ein prozentualer Anteil der Breite des Elements sein.

Das folgende Beispiel zeigt die Auswirkungen der text-align-Eigenschaft:


<HTML>
<HEAD>
<TITLE>Textausrichtung</TITLE>
</HEAD>
<BODY>
<DIV STYLE="text-align: left">Dieser Beispielabsatz ist linksbündig ausgerichtet. Beachten Sie bitte, daß der Text an der rechten Seite flattert und links bündig ist. Diese Eigenschaft übernimmt die Aufgaben des ALIGN-Attributs des DIV-Tag bei HTML.</DIV>
<HR>
<DIV STYLE="text-align: right">Dieser Beispielabsatz ist rechtsbündig ausgerichtet. Beachten Sie bitte, daß der Text an der linken Seite flattert und rechts bündig ist. Diese Eigenschaft übernimmt die Aufgaben des ALIGN-Attributs des DIV-Tag bei HTML.</DIV>
<HR>
</BODY>
</HTML>


Das Ergebnis sehen Sie in Abbildung 32.4.


siehe Abbildung

Abbildung 32.4:
Textausrichtung über kaskadierte Stilvorlagen

Das ist jetzt natürlich nicht so berauschend, da dies ja auch früher schon über das ALIGN-Attribut diverser HTML-Tags, wie <DIV> und <IMG>, möglich war.


Die text-indent-Eigenschaft bietet da schon interessantere Möglichkeiten. Viele Leute beschweren sich, daß es mit reinem HTML nicht möglich ist, die erste Zeile eines Absatzes einzuziehen. Natürlich haben sich diese Leute mit vielerlei Tricks beholfen, wie z.B. kleinen transparenten GIF-Grafiken, die sie am Beginn der Zeile plazierten. Dieser Ansatz erzeugt aber in manchen Browsern, wie z.B. Browser ohne Unterstützung transparenter GIFs oder Textbrowsern wie Lynx, seltsame Ergebnisse.


Bei kaskadierten Stilvorlagen steht Ihnen nun eine flexible Erstzeileneinrückung über die text-indent-Eigenschaft zur Verfügung. Wie in Tabelle 32.4 bereits erwähnt, können Sie hierbei zwei Wege gehen: Zum einen kann der Einzug über eine absolute Länge festgelegt werden und zum anderen über einen Prozentwert, der sich auf die Länge des Elements bezieht.


Lassen Sie uns mit einer absoluten Länge beginnen. Sie können eine der Standard-Maßeinheiten, die kaskadierte Stilvorlagen unterstützen, verwenden:


<HTML>
<HEAD>


<TITLE>Einzüge</TITLE>


</HEAD>
<BODY>


<DIV STYLE="text-indent: 0.5in">Dieser Absatz verfügt über einen Erstzeileneinzug von 0.5 inches. Über diese Technik können Sie ähnliche Layouts erzeugen, wie das in Textverarbeitungs- und Layout-Programmen der Fall ist.</DIV>


<HR>


<DIV STYLE="text-indent: 4cm">Dieser Absatz verfügt über einen Erstzeileneinzug von 4 Zentimetern. Über diese Technik können Sie ähnliche Layouts erzeugen, wie das in Textverarbeitungs- und Layout-Programmen der Fall ist.</DIV>


<HR>


<DIV STYLE="text-indent: 20px">Dieser Absatz verfügt über einen Erstzeileneinzug von 20 Pixeln. Über diese Technik können Sie ähnliche Layouts erzeugen, wie das in Textverarbeitungs- und Layout-Programmen der Fall ist.</DIV>


<HR>
</BODY>
</HTML>


Wie Sie in Abbildung 32.5 sehen können, erlauben absolute Einzüge eine flexible und präzise Kontrolle über die Größe des Einzugs.


siehe Abbildung

Abbildung 32.5:
Über Stilvorlagen können Sie Texteinzüge realisieren

Die einzige Gefahr hierbei ist, wenn Sie einen sehr kleinen Einzug wählen und der Benutzer ein extrem breites Fenster hat, daß der Einzug in der Bedeutungslosigkeit verschwindet. Aber auch ein großer Einzug in einem schmalen Fenster kann unerwünschte Ergebnisse produzieren, wie das Abbildung 32.6 zeigt.


siehe Abbildung

Abbildung 32.6:
Lassen Sie Sorgfalt walten, wenn Sie die Größe des Einzugs festlegen

Dies kann durch die Angabe eines Prozentwerts für den Einzug vermieden werden. Indem Sie z.B. der text-indent-Eigenschaft den Wert 10% zuweisen, erzeugen Sie einen Einzug, der 10% der Breite des Elements beträgt. Wie Sie in den Abbildungen 32.7 und 32.8 sehen können, ist das Ergebnis sowohl in einem durchschnittlich breiten Fenster als auch in einem schmalen Fenster akzeptabel.


siehe Abbildung

Abbildung 32.7:
Die Größe des Einzugs können Sie auch über Prozentwerte festgelegen

siehe Abbildung

Abbildung 32.8:
Prozentwerte funktionieren bei allen Fenstern


Abstände

Nach der Ausrichtung ist die Fähigkeit, die Abstände von Elementen auf einer Seite regeln zu können, ein sehr nützliches Layout-Feature. Dies erstreckt sich von der Kontrolle des Zeilen-, Wort- und Buchstabenabstands innerhalb des Textes über die Ränder von Elementen bis hin zum Freiraum in einem Dokument.


In Tabelle 32.4 sind einige nützliche Eigenschaften für die Abstandskontrolle aufgelistet.


Tabelle 32.4: Nützliche Eigenschaften für die Abstandskontrolle

Eigenschaft

Beschreibung

Word-spacing

Legt den Abstand fest, der dem Standardwortabstand hinzugefügt werden soll. Mögliche Werte sind eine absolute Länge oder normal (der Standardwert).

Letter-spacing

Legt den Abstand fest, der dem Standardbuchstabenabstand hinzugefügt werden soll. Mögliche Werte sind eine absolute Länge oder normal (der Standardwert).

Line-height

Legt den Abstand zwischen den Grundlinien der Zeilen fest. Ein Zahlenwert stellt dabei einen Faktor dar, mit dem die Schriftgröße multipliziert wird. Ein Längenwert gibt einen absoluten Abstand an. Ein Prozentwert dagegen legt die Höhe als Prozentsatz der Standardzeilenhöhe fest. Sie können auch normal angeben, was die Zeilenhöhe auf den Standardwert setzt.

Margin-top

Legt den oberen Rand eines Elements fest. Mögliche Werte sind eine Länge, ein Prozentwert oder auto.

Margin-right

Legt den rechten Rand eines Elements fest. Mögliche Werte sind eine Länge, ein Prozentwert oder auto.

Margin-bottom

Legt den unteren Rand eines Elements fest. Mögliche Werte sind eine Länge, ein Prozentwert oder auto.

margin-left

Legt den linken Rand eines Elements fest. Mögliche Werte sind eine Länge, ein Prozentwert oder auto.

margin

Legt die Ränder eines Elements fest. Sie können zwischen einem und vier Werten angeben, die eine Länge, ein Prozentwert oder auto sein können.

padding-top

Legt den Raum zwischen dem oberen Rand eines Elements und dessen Inhalt fest. Mögliche Werte sind eine Länge, ein Prozentwert oder auto.

padding-right

Legt den Raum zwischen dem rechten Rand eines Elements und dessen Inhalt fest. Mögliche Werte sind eine Länge, ein Prozentwert oder auto.

padding-bottom

Legt den Raum zwischen dem unteren Rand eines Elements und dessen Inhalt fest. Mögliche Werte sind eine Länge, ein Prozentwert oder auto.

padding-left

Legt den Raum zwischen dem unteren Rand eines Elements und dessen Inhalt fest. Mögliche Werte sind eine Länge, ein Prozentwert oder auto.

padding

Legt den Raum zwischen dem Rand eines Elements und dessen Inhalt fest. Mögliche Werte sind eine Länge, ein Prozentwert oder auto.

white-space

Gibt an, wie Leerraum in einem Element behandelt werden soll. Mögliche Werte sind normal (Leerraum wird unterdrückt, wie das bei Standard-HTML der Fall ist), pre (wie das <PRE>-Tag) und nowrap (benötigt das <BR>-Tag, um zu umbrechen).

Diese Eigenschaften zur Abstandskontrolle geben Ihnen viele Möglichkeiten in bezug auf das Layout. Lassen Sie uns mit den Eigenschaften letter-spacing, word-spacing und line-heigth beginnen. Mit der Hilfe dieser Eigenschaften haben Sie eine gute Kontrolle über das Erscheinungsbild von Text und Absätzen.


Sie können z.B. einen Absatz mit zweizeiligem Zeilenabstand mit der folgenden Anweisung erzeugen (siehe auch Abbildung 32.9):


line-height: 2


siehe Abbildung

Abbildung 32.9:
Veränderter Zeilenabstand mit line-height

Hier wurde line-heigth ein Zahlenwert zugewiesen. Dieser Wert (in unserem Fall 2) wird mit der Schriftgröße multipliziert. Das bedeutet, daß sich bei der Vergrößerung der Schrift auch der Zeilenabstand vergrößert, wie das in Abbildung 32.10 zu sehen ist.


Wenn Sie Prozentwerte angeben, erhalten Sie ähnliche Ergebnisse. line-height: 200% hat z.B. denselben Effekt wie line-height: 2, da hierdurch der Zeilenabstand auf 200% des Standardzeilenabstands gesetzt wird, was das gleiche wie eine Multiplikation mit 2 ist.


siehe Abbildung

Abbildung 32.10:
Der Zeilenabstand kann von der Schriftgröße abhängen

Bei absoluten Längen funktioniert das Ganze allerdings anders. line-height: 2cm setzt den Abstand zwischen den Grundlinien auf 2 Zentimeter, wie das in Abbildung 32.11 zu sehen ist. Das ist solange o. k., wie der Text nicht zu groß wird. Sollte dies passieren, verwendet der Microsoft Internet Explorer den Standardzeilenabstand. Wenn aber der zusätzliche Zeilenabstand ein wesentlicher Bestandteil Ihres Layouts ist, kann diese Reaktion problematisch sein.


Lassen Sie uns als nächstes einen Blick auf den Buchstabenabstand werfen. Standardmäßig wird der Buchstabenabstand aus Informationen in der Schrift über die Buchstabengröße abgeleitet. Durch die Eigenschaften letter-spacing können Sie diesem Standardwert zusätzlichen Freiraum hinzufügen.


Die folgende Stildefinition in dem HTML-Code erzeugt eine Überschrift für eine Seite. Die Buchstaben weisen einen wesentlich größeren Abstand als normal auf.


Mit ein paar weiteren Eigenschaften der kaskadierten Stilvorlagen können Sie ein Banner für eine Seite erzeugen, wie das in Abbildung 32.12 gezeigt wird:


<H1 STYLE="letter-spacing: 0.3in; font-family: cursive; font-weight: 900; color: yellow; background-color: black; margin: 0.1in">HEADLINE</H1>


siehe Abbildung

Abbildung 32.11:
Ein Zeilenabstand von 2 cm

siehe Abbildung

Abbildung 32.12:
Eine nette Überschrift


Die Rahmenart festlegen

Kaskadierte Stilvorlagen bieten diverse Eigenschaften zur Kontrolle der Rahmenart eines Elements. In HTML besaßen nur wenige Elemente, wie Bilder und Tabellenzellen, einen Rahmen. Über kaskadierte Stilvorlagen können Sie theoretisch jedem Element einer Seite einen Rahmen zuweisen.


Unglücklicherweise fehlten in den Preview Releases des Communicator und des Internet Explorer 4, die beim Schreiben des Buches verfügbar waren, die Eigenschaften zur Kontrolle von Rahmen.



Weiterführende Informationen zu kaskadierten Stilvorlagen

In diesem Abschnitt haben wir nur die Oberfläche der kaskadierten Stilvorlagen angekratzt. Das Thema ist einfach zu umfangreich, als daß man es in einem Abschnitt erschöpfend behandeln könnte.


Wenn Sie mehr Informationen zu kaskadierten Stilvorlagen haben wollen, können Sie diese auf der Web Site des W3C finden, wo die Spezifikation der kaskadierten Stilvorlagen abgelegt ist. Die Adresse ist http://www.w3.org/pub/WWW/TR/REC-CSS1.


Im Anschluß finden Sie noch ein paar weitere nützliche Informationsquellen aufgelistet:


siehe Abbildung

Abbildung 32.13:
Die Homepage des World Wide Web Consortiums (W3C) zum Thema kaskadierte Stilvorlagen


JavaScript-Stilvorlagen

Einer der Vorzüge des gesamten Stilvorlagenkonzepts ist, daß es flexibel ist. JavaScript ist einfach ein weiterer Typ Stilvorlagen, der die Standardmechanismen, wie <STYLE> und ID, verwendet, um Stilvorlagen auf Dokumente und Elemente in diesen Dokumenten anzuwenden. Dies vor Augen - was ist das Besondere an JavaScript-Stilvorlagen? Die Antwort gibt Netscape in der Dokumentation: »Bei JavaScript-Stilvorlagen findet jede stilistische Eigenschaft ihre Entsprechung in JavaScript.« Das bedeutet, daß die Stileigenschaften gut in die JavaScript-Umgebung integriert sind, so daß diese über Skripten erzeugt und manipuliert werden können.


Dabei fällt sofort auf, daß sich die Syntax zur Definition von Stilvorlagen eng an JavaScript anlehnt. Auf diesem Weg müssen Autoren anstatt die Syntax von HTML, kaskadierten Stilvorlagen und JavaScript lediglich die HTML- und JavaScript-Syntax lernen.


Wie bei kaskadierten Stilvorlagen können Sie benannte Klassen für Stile erzeugen und diese dann über das CLASS-Attribut zuweisen. Sie können auch Stile für alle Vorkommen eines bestimmten Tags definieren bzw. auch für bestimmte Seitenelemente.


Lassen Sie uns mit einem einfachen Beispiel beginnen:


<STYLE TYPE="text/JavaScript">
tags.DIV.marginLeft = 100;
</STYLE>


Was hier passiert, ist ziemlich offensichtlich: TYPE="text/JavaScript" wird anstelle von TYPE="text/css" verwendet, um zu kennzeichnen, daß hier eine JavaScript-Stilvorlage definiert wird. Bei tags handelt es sich um ein Objekt, das alle Tags von HTML definiert. DIV bezieht sich auf ein bestimmtes Tag und marginLeft ist eine Stileigenschaft. Beachten Sie hierbei bitte, daß Sie beim Zuweisen eines Werts das Standard-Gleichheitszeichen von JavaScript verwenden. Zusätzlich wird der ganze Ausdruck von einem Strichpunkt abgeschlossen, was auch wieder JavaScript-Standard ist.


Wenn Sie es bevorzugen, eine benannte Klasse zu erzeugen, verwenden Sie anstelle des Schlüsselworts tags das Schlüsselwort classes. Der folgende Code erzeugt z.B. eine Klasse mit dem Namen CLASSNAME und definiert eine Stileigenschaft für alle Elemente:


<STYLE TYPE="text/JavaScript">
classes.CLASSNAME.all.property = value;
</STYLE>


Wenn Sie innerhalb der Klasse zusätzlich eine spezielle Stileigenschaft definieren wollen, die nur auf das <P>-Tag angewendet wird, fügen Sie eine weitere Zeile in die Definition der Klasse ein:


<STYLE TYPE="text/JavaScript">
classes.CLASSNAME.all.property = value;
classes.CLASSNAME.P.property = value;
</STYLE>


Diese Klasse kann Elementen über das CLASS-Attribut zugewiesen werden, wie das z.B. in <DIV CLASS="CLASSNAME"> der Fall ist.


Lassen Sie uns einmal annehmen, Sie wollten in dieser Klasse eine kleine Ausnahme für ein bestimmtes Element, das zwar Element dieser Klasse ist, aber sich leicht unterscheiden muß, erzeugen. Hierfür verwenden Sie das ID-Attribut. Nehmen wir weiter an, Sie hätten bereits eine Klassendefinition, die den linken Rand wie folgt festlegt:


<STYLE TYPE="text/JavaScript">
classes.CLASSNAME.all.color = "red";
classes.CLASSNAME.P.marginLeft = 100;
</STYLE>


Allerdings gibt es ein paar Absätze, die einen größeren linken Rand benötigen. Hierfür können Sie eine ID erzeugen, die genau dies definiert:


<STYLE TYPE="text/JavaScript">
classes.CLASSNAME.all.color = "red";
classes.CLASSNAME.P.marginLeft = 100;
ids.IDNAME.marginLeft = 200;
</STYLE>


Nun können Sie das Ganze in einem Dokument verwenden:


<HTML>
<HEAD>
<STYLE TYPE="text/JavaScript">
classes.CLASSNAME.all.color = "red";
classes.CLASSNAME.P.marginLeft = 100;
ids.IDNAME.marginLeft = 200;
</STYLE>
</HEAD>
<BODY>

<P CLASS="CLASSNAME"> The Bah&aacute;'&iacute; Faith is the
youngest of the world's independent religions. Its founder,
Bah&aacute;'u'll&aacute;h (1817-1892), is regarded by
Bah&aacute;'&iacute;s as the most recent in the line of
Messengers of God that stretches back beyond recorded time
and that includes Abraham, Moses, Buddha, Zoroaster, Christ
and Muhammad.</P>

<P CLASS="CLASSNAME" ID="IDNAME">The central theme of
Bah&aacute;'u'll&aacute;h's
message is that humanity is one single race and that
the day has come for its unification in one
global society.</P>

</BODY>
</HTML>


Das Ergebnis sehen Sie in Abbildung 32.14. Beachten Sie bitte, daß bei beiden Absätzen die color-Eigenschaft dafür sorgt, daß der Text rot angezeigt wird (auch wenn man dies auf einem Schwarzweiß-Bild nicht sieht). Im zweiten Absatz wird allerdings die Einstellung für den linken Rand durch das ID-Attribut überschrieben.


siehe Abbildung

Abbildung 32.14:
Klassen können durch Ids überschrieben werden

JavaScript-Stilvorlagen bieten eine Möglichkeit, um noch einen Schritt weiterzugehen. Nehmen wir z.B. einmal an, Sie wollten eine Eigenschaft für fetten Text innerhalb von Listen definieren. Für diesen Zweck können Sie die contextual()-Methode verwenden:


<STYLE TYPE="text/JavaScript">
contextual(tags.LI,tags.STRONG).color = "blue";
</STYLE>


Bevor wir uns den einzelnen Eigenschaften der JavaScript-Stile zuwenden, gibt es einen letzten Punkt zu besprechen. Das Konzept ist wirklich einfach: Eingebettete Kindelemente erben die Eigenschaften der Eltern, solange diese nicht durch Eigenschaften überschrieben werden, die den Kindelementen zugewiesen wurden.


Ein einfaches Beispiel. Betrachten Sie den folgenden HTML-Code:


<DIV CLASS="CLASSNAME">This is a <STRONG>paragraph</STRONG> of text.</DIV>


In diesem Fall erbt das <STRONG>-Element die Eigenschaften der Klasse CLASSNAME, solange nicht Eigenschaften in einem Stil, der zuvor festgelegt wurde, andere Werte für die gleichen Eigenschaften des <STRONG>-Elementes definiert.



Stileigenschaften

Nun da Sie verstehen, wie JavaScript-Stilvorlagen erzeugt und manipuliert werden, sind Sie bereit, die Ihnen zur Verfügung stehenden Eigenschaften der JavaScript-Stilvorlagen in Angriff zu nehmen. Diese Eigenschaften können in die folgenden Gruppen eingeteilt werden:


Wir werfen lediglich einen kurzen Blick auf einige der Eigenschaften und wie diese verwendet werden. Wenn Sie alles über JavaScript-Stilvorlagen wissen wollen, sollten Sie sich die Dokumentation von Netscape unter http://developer.netscape.com/library/documentation/jsss/ ansehen.


Schrifteigenschaften

Die Schrifteigenschaften der JavaScript-Stilvorlagen erlauben es Ihnen, wie mit kaskadierten Stilvorlagen auch, Einfluß auf die Schriftgröße, die Schriftfamilie, das Schriftgewicht und den Schriftstil zu nehmen.


Folgende Eigenschaften stehen zur Verfügung:


Der fontSize-Eigenschaft können Sie verschiedenste Werte zuweisen: eine absolute Größe aus einer Liste benannter Werte: xx-small, x-small, small, medium, large, x-large und xx-large. Diese entsprechen denen bei kaskadierten Stilvorlagen.


Ein Beispiel sehen Sie in Abbildung 32.15.


siehe Abbildung

Abbildung 32.15:
Absolute Schriftgrößen

Sie können eine absolute Schriftgröße auch in Punkt oder als Höhe angeben. Die Anweisung fontSize = "12pt" erzeugt z.B. eine 12 Punkt große Schrift. Sie müssen hierbei allerdings vorsichtig sein, da Sie sich nicht sicher sein können, ob der Client die geforderte Punktgröße darstellen kann, bzw. ob diese im Client gut aussieht.


Schriftgrößen können über smaller bzw. larger auch relativ zur Schriftgröße des Elternelements definiert werden.


Betrachten Sie hierzu das folgende Beispiel:


<HTML>
<HEAD>
<STYLE TYPE="text/JavaScript">
tags.P.fontSize = "large";
tags.B.fontSize = "larger";
</STYLE>
</HEAD>
<BODY>
<P>Here we have text that gets <B>larger</B> when it is <B>bold</B>.</P>
</BODY>
</HTML>


Die Schriftgröße für das <B>-Tag wird hier größer in bezug auf das Elternelement festgelegt. In diesem Fall ist das <P>-Element das Elternelement. Dem <P>-Element wurde large als Schriftgröße zugewiesen. Auf diesem Weg wird die Schriftgröße des <B>-Elements x-Large, der nächste Wert innerhalb der weiter oben beschriebenen Skala der absoluten Schriftgrößen.


Die Eigenschaft fontFamily wird verwendet, um die Schrift für ein Element festzulegen. Als Wer kann eine Liste von einem oder mehreren Schriftfamiliennamen angegeben werden. Als Namen kommen konkrete Namen, wie z.B. Times oder Arial in Frage, oder aber einer der elementaren Schriftfamiliennamen (wie bei den kaskadierten Stilvorlagen): serif, sans-serif, cursive, monospace und fantasy. Die Namen in einer solchen Liste werden einer nach dem anderen durchprobiert, bis eine der Schriften auf dem System des Benutzers gefunden wird. Aus diesem Grund ist es sinnvoll, den Namen einer elementaren Schriftfamilie als letzten in der Liste anzugeben, so daß immer eine Übereinstimmung gefunden wird.


Die Eigenschaften fontWeight und fontStyle weisen das gleiche Verhalten auf, wie die entsprechenden Eigenschaften der kaskadierten Stilvorlagen. fontWeight können die Werte normal, bold, bolder und lighter zugewiesen werden, so wie Zahlenwerte von 100 bis 900. Bei fontStyle ist die Situation ähnlich. Die möglichen Werte für diese Eigenschaft sind normal, italic, italic small-caps, oblique, oblique small-caps und small-caps.



Texteigenschaften

In JavaScript bilden Texteigenschaften die Grundlage zur Kontrolle des Zeilenabstands, von Unter- und Überstreichung, der vertikalen und horizontalen Ausrichtung, des Einzugs und der Groß-/Kleinschreibung.


Lassen Sie uns mit der Ausrichtung und den Einzügen beginnen. Der Eigenschaft textAlign können die Werte left, right, center und justify zu gewiesen werden, um festzulegen, wie der Text in einem Element ausgerichtet werden soll:


<HTML>
<HEAD>
<STYLE TYPE="text/JavaScript">
ids.LEFT.textAlign = "left";
ids.RIGHT.textAlign = "right";
ids.JUSTIFY.textAlign = "justify";
</STYLE>
</HEAD>
<BODY>
<DIV ID="JUSTIFY">If you want to make a cheesecake, you need
some key ingredients. But, just what are those ingredients
other than the obvious ingredient: cheese? The following section
provides a list of some of the key ingredients in a chocolate cheesecake.</DIV>
<H1 ID="RIGHT">The Ingredients</H1>
<UL ID="LEFT">
<LI>Cream Cheese
<LI>Sugar
<LI>Cocoa
</UL>
</BODY>
</HTML>


Das Ergebnis dieses Quelltextes sehen Sie in Abbildung 32.16.


Beachten Sie bitte, daß in dem <UL>-Tag das ID-Attribut verwendet wird und daß das Kindelement <LI> diesen Stil erbt. Dies ist natürlich nicht sofort auf den ersten Blick ersichtlich, da es das Standardverhalten des <LI>-Tags ist, Elemente linksbündig auszurichten. Lassen Sie uns dies überprüfen, indem wir die linksbündige Ausrichtung in zentriert ändern:


<HTML>
<HEAD>
<STYLE TYPE="text/JavaScript">
ids.CENTER.textAlign = "center";
ids.RIGHT.textAlign = "right";
ids.JUSTIFY.textAlign = "justify";
</STYLE>
</HEAD>
<BODY>
<DIV ID="JUSTIFY">If you want to make a cheesecake,
you need some key ingredients. But, just what are those
ingredients other than the obvious ingredient: cheese?
The following section provides a list of some of the key
ingredients in a chocolate cheesecake.</DIV>
<H1 ID="RIGHT">The Ingredients</H1>
<UL ID="CENTER">
<LI>Cream Cheese
<LI>Sugar
<LI>Cocoa
</UL>
</BODY>
</HTML>


siehe Abbildung

Abbildung 32.16:
Textausrichtung mit JavaScript-Stilvorlagen

Wie Sie in Abbildung 32.17 sehen können, ist die Liste zentriert.


siehe Abbildung

Abbildung 32.17:
Kindelemente erben die Textausrichtung

Der Einzug von Text bietet eine weitere Möglichkeit, das Erscheinungsbild von Absätzen zu kontrollieren. Über die textIndent-Eigenschaft, der Sie sowohl eine absolute Länge als auch einen Prozentwert zuweisen können, können Sie den Einzug eines Absatzes festlegen.


Die Anweisung textIndent = "0.5in" erzeugt einen Einzug von einem halben Zoll, wohingegen textIndent = "10%" einen Einzug erzeugt, der 10 Prozent der Länge des Elements beträgt.


Über die lineHeight-Eigenschaft können Sie den Zeilenabstand kontrollieren. Diese Eigenschaft legt den Abstand zwischen den Grundlinien zweier Zeilen als Zahl, Länge oder Prozentwert fest.


Wenn Sie eine Zahl angeben, wird diese mit der aktuellen Schriftgröße des Elements multipliziert, um den Zeilenabstand zu ermitteln. Somit erzeugt lineHeight = 2 einen zweizeiligen Zeilenabstand.


Ein Prozentwert wird als Prozentsatz der Zeilenhöhe des Elternelements interpretiert. Und eine absolute Länge wird als solche umgesetzt.


Schließlich erlauben es noch zwei weitere Eigenschaften, mit dem Erscheinungsbild des Textes etwas zu spielen: textDecoration und textTransform. Über textDecoration kontrollieren Sie Unter-, Über- und Durchstreichung so wie eine blinkende Darstellung. Mögliche Werte sind: none, underline, overline, line-through und blink. In Abbildung 32.18 sehen Sie das Ergebnis der folgenden Beispielwerte:


siehe Abbildung

Abbildung 32.18:
Die möglichen Einstellungen der textDecoration-Eigenschaft

<HTML>
<HEAD>
<STYLE TYPE="text/JavaScript">
ids.NONE.textDecoration = "none";
ids.UNDER.textDecoration = "underline";
ids.OVER.textDecoration = "overline";
ids.THROUGH.textDecoration = "line-through";
</STYLE>
</HEAD>
<BODY>
<H1 ID="NONE">textDecoration = "none"</H1>
<H1 ID="UNDER">textDecoration = "underline"</H1>
<H1 ID="OVER">textDecoration = "overline"</H1>
<H1 ID="THROUGH">textDecoration = "line-through"</H1>
</BODY>
</HTML>


Wie Sie in der Abbildung oben sehen können, ist der Wert OVERLINE im Netscape Communicator nicht implementiert.


Die textTransform-Eigenschaft kontrolliert die Groß-/Kleinschreibung mit den folgenden Werten:



Blockeigenschaften

JavaScript-Stilvorlagen behandeln Elemente wie <H1> und <P> wie Boxen mit Text darin. Diese Boxen können mit Rahmen und Rändern versehen sein. An dieser Stelle kommen Blockeigenschaften ins Spiel. Die Tabelle 32.5 listet einige der Blockeigenschaften der JavaScript Stilvorlagen auf.


Tabelle 32.5: Blockeigenschaften der JavaScript-Stilvorlagen

Name

Beschreibung

marginLeft, marginRight, marginTop, marginBottom

Legt die Ränder eines Elements fest. Mögliche Werte sind ein Längenwert, Prozentwert oder auto für automatische Ränder.

margins(top, right, bottom, left)

Legt alle vier Ränder auf einmal fest.

paddingLeft, paddingright, paddingTop, paddingBottom

Legt den Freiraum zwischen dem Rahmen und dem Inhalt eines Elements fest. Mögliche Werte sind ein Längen- oder ein Prozentwert.

paddings(top, right, bottom, left)

Legt alle vier Paddingwerte auf einmal fest.

borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth

Legt die Breite des Rahmens in Pixel, Punkt oder m fest.

borderWidths(top, right, bottom, left)

Legt alle vier Rahmenwerte auf einmal fest.

borderStyle

Legt den Stil eines Rahmens fest bzw. ob ein Rahmen überhaupt vorhanden ist. Mögliche Werte sind none, solid und 3D.

borderColor

Legt die Farbe eines Rahmens fest. Mögliche Werte sind ein gültiger Farb-Name oder ein RGB-Triple.

width

Legt die Breite eines Elements als Längen- oder Prozentwert fest.

height

Legt die Höhe eines Elements als Längen- oder Prozentwert fest.

Lassen Sie uns das, was Sie bisher gelernt haben, verwenden, um ein Banner für eine Zeitung mit dem Namen Style Sheet Times zu erzeugen.


Wir beginnen mit dem Text:


<H1>Style Sheet Times</H1>


Ziemlich langweilig, nicht wahr? Lassen Sie uns den Text etwas aufpeppen, indem wir ihm die elementare Schriftfamilie Fantasy zuweisen und gleichzeitig etwas farbig machen (Sie sollten sich dies an Ihrem eigenen Computer ansehen - der Farben wegen):


<HTML>
<HEAD>
<STYLE TYPE="text/JavaScript">
tags.H1.fontFamily = "fantasy";
tags.H1.color = "blue";
</STYLE>
</HEAD>
<BODY>
<H1>Style Sheet Times</H1>
</BODY>
</HTML>


Als nächstes wollen wir einen Rahmen um das Ganze ziehen:


<HTML>
<HEAD>
<STYLE TYPE="text/JavaScript">
tags.H1.fontFamily = "fantasy";
tags.H1.color = "blue";
tags.H1.borderStyle = "solid";
tags.H1.borderColor = "red";
tags.H1.borderTopWidth = "4pt";
tags.H1.borderRightWidth = "1pt";
tags.H1.borderBottomWidth = "4pt";
tags.H1.borderLeftWidth = "1pt";
</STYLE>
</HEAD>
<BODY>
<H1>Style Sheet Times</H1>
</BODY>
</HTML>


Wie Sie in Abbildung 32.19 sehen können, ergibt dies einen Titel mit einem Rahmen, bei dem die Rahmenlinien oben und unten dicker als an den Seiten sind.


siehe Abbildung

Abbildung 32.19:
Die Überschrift erhält einen Rahmen

Allerdings sieht das Ganze noch nicht so gut aus. Zunächst einmal ist der Rahmen zu klein, um richtig wirken zu können. Dies können Sie mit der paddings()-Methode beheben (siehe auch Abbildung 32.20):


<HTML>
<HEAD>
<STYLE TYPE="text/JavaScript">
tags.H1.fontFamily = "fantasy";
tags.H1.color = "blue";
tags.H1.borderStyle = "solid";
tags.H1.borderColor = "red";
tags.H1.borderTopWidth = "4pt";
tags.H1.borderRightWidth = "1pt";
tags.H1.borderBottomWidth = "4pt";
tags.H1.borderLeftWidth = "1pt";
tags.H1.paddings("1cm,","1cm","1cm","1cm");
</STYLE>
</HEAD>
<BODY>
<H1>Style Sheet Times</H1>
</BODY>
</HTML>


siehe Abbildung

Abbildung 32.20:
Das Ergebnis der paddings()-Methode

Die paddings()-Methode gibt an, daß zwischen dem Rahmen und dem Text, der den Inhalt des Elements darstellt, ein Zentimeter Luft sein soll. Schließlich wollen Sie noch den Text zentrieren, was Sie über die textAlign-Eigenschaft erreichen:


<HTML>
<HEAD>
<STYLE TYPE="text/JavaScript">
tags.H1.fontFamily = "fantasy";
tags.H1.color = "blue";
tags.H1.borderStyle = "solid";
tags.H1.borderColor = "red";
tags.H1.borderTopWidth = "4pt";
tags.H1.borderRightWidth = "1pt";
tags.H1.borderBottomWidth = "4pt";
tags.H1.borderLeftWidth = "1pt";
tags.H1.paddings("1cm,","1cm","1cm","1cm");
tags.H1.textAlign = "center";
</STYLE>
</HEAD>
<BODY>
<H1>Style Sheet Times</H1>
</BODY>
</HTML>


Das Endergebnis sehen Sie in Abbildung 32.21.


siehe Abbildung

Abbildung 32.21:
Das Endergebnis


Farb- und Hintergrundeigenschaften

Der letzte Schwung Eigenschaften, den wir uns hier ansehen werden, sind Farb- und Hintergrundeigenschaften. Es gibt drei Eigenschaften in diesem Zusammenhang:


Da diese Eigenschaften nicht nur auf Dokumente und Tabellenzellen angewendet werden können, sondern auch auf andere Seitenelemente, können Sie damit interessante visuelle Effekte erzeugen. Lassen Sie uns dem Titel der kleinen Stilvorlagen-Zeitung, den wir zuvor erzeugt haben, eine Hintergrundfarbe zuweisen:


<HTML>
<HEAD>
<STYLE TYPE="text/JavaScript">
tags.H1.fontFamily = "fantasy";
tags.H1.color = "blue";
tags.H1.borderStyle = "solid";
tags.H1.borderColor = "red";
tags.H1.borderTopWidth = "4pt";
tags.H1.borderRightWidth = "1pt";
tags.H1.borderBottomWidth = "4pt";
tags.H1.borderLeftWidth = "1pt";
tags.H1.paddings("1cm,","1cm","1cm","1cm");
tags.H1.textAlign = "center";
tags.H1.backgroundColor = "yellow";
</STYLE>
</HEAD>
<BODY>
<H1>Style Sheet Times</H1>
</BODY>
</HTML>



Zusammenfassung

In diesem Kapitel haben Sie einen ersten Eindruck dessen erhalten, was mit Stilvorlagen möglich ist.


Kaskadierte Stilvorlagen, der Ansatz des World Wide Web Consortiums zur Implementation von Stilvorlagen, werden sowohl vom Netscape Communicator als auch vom Internet Explorer unterstützt. Der Internet Explorer 3 unterstützt auch einiges aus der Spezifikation der kaskadierten Stilvorlagen.


Zusätzlich zu den kaskadierten Stilvorlagen unterstützt der Netscape Communicator eine alternative Stilvorlagentechnologie: JavaScript-Stilvorlagen. Dieser Ansatz verwendet Erweiterungen von JavaScript, um Stilvorlagen zu erzeugen und zu definieren, die sich gut in die Netscape-Umgebung integrieren.


JavaScript-Stilvorlagen und kaskadierte Stilvorlagen bieten ähnliche Möglichkeiten, um das Erscheinungsbild von Schriften, die Ausrichtung und die Abstände von und in Text, Ränder und Rahmen sowie Hintergrundfarben und -bilder für Elemente auf einer Seite zu kontrollieren.



Fragen und Antworten

Frage:

Wie kann ich entscheiden, ob ich kaskadierte Stilvorlagen oder JavaScript-Stilvorlagen verwenden soll? Die Entscheidung treffen zu müssen verwirrt mich.

Antwort:

Lassen Sie sich nicht verunsichern. Sie sind nicht der einzige im Web, der angesichts dieser Entscheidung etwas unschlüssig ist. Wenn Sie Stile verwenden, um zusätzliche visuelle Effekte zu erzeugen, die für die Präsentation Ihrer Information an sich nicht wichtig sind, können Sie die Stilvorlagen verwenden, die Ihnen am liebsten sind. Wenn Sie das größtmögliche Publikum für Ihre Stile erreichen wollen, sollten Sie kaskadierte Stilvorlagen wählen, da hier momentan die Unterstützung durch die Browser am größten ist.

Frage:

Die Eigenschaften für Hintergrundfarben bzw. -bilder beider Spezifikationen bringen mich etwas durcheinander. Warum kann ich nicht einfach Tabellen verwenden und den einzelnen Zellen Hintergrundfarben bzw. -bilder zuweisen?

Antwort:

Sie haben völlig recht, daß Sie über Tabellen ähnliche Ergebnisse erzielen können. Das Problem ist allerdings, daß es bei den Tags für Tabellen einige Probleme gibt. Es handelt sich bei diesen nicht um rein strukturgebende Tags, was zur Folge hat, daß sie in manchen Browsern, wie z.B. Lynx, und Browsern mit Sprachausgabe für Blinde, nicht korrekt ausgegeben werden können. Das bedeutet, der Text in der Tabelle könnte in der falschen Reihenfolge ausgegeben werden und so in diesen Browsern unschön erscheinen. Wenn Sie Stilvorlagen verwenden, um die gleichen Ergebnisse zu erzielen, können Sie sich im Dokument auf die Codierung der Struktur konzentrieren. Dies garantiert, daß selbst in Browsern, die Stilvorlagen nicht unterstützen, das Dokument zumindest klar und verwendbar ist.


Copyright ©1998 by SAMS, einem Imprint der Markt&Technik Buch- und Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X


vorheriges KapitelTop Of PageInhaltsverzeichnisInfoseite