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.

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:

• Eine Stildefinition kann einem bestimmten Tag ⁿber das STYLE-Attribut hinzugefⁿgt werden (wie z.B. <DIV STYLE="Stildefinition"> oder <H1 STYLE="Stildefinition">).
• Eine Stildefinition kann zwischen den Tags <STYLE> und </STYLE> erzeugt werden. Dies sollte am Anfang eines HTML-Dokuments geschehen.
• Eine Stilvorlage kann aus einer externen Datei ⁿber <LINK REL=stylesheet HREF="Name-der-Stilvorlagendatei"> importiert werden.

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:

• Persistente Stile werden immer angewendet, unabhΣngig von der lokalen Wahl eines Benutzers.
• Standard-Stile werden verwendet, wenn die Seite geladen wird, k÷nnen aber vom Benutzer abgeschaltet werden, um alternativen Stilen den Vorrang zu geben.
• Alternative Stile werden als Option fⁿr den Benutzer angeboten, die der Benutzer anstatt der Standard-Stile wΣhlen kann.

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:

• Im STYLE-Attribut eines HTML-Tags (vgl. die Diskussion der Positionierung von Objekten im Microsoft Internet Explorer 4 in Kapitel 31, ╗Alles wird dynamisch½).
• In einer benannten Klasse oder Stilvorlage zwischen den Tags <STYLE> und </STYLE> (sehen Sie auch hier im Abschnitt ⁿber die Positionierung von Objekten im Internet Explorer 4 in Kapitel 31 nach).
• In einer Stildefinition fⁿr ein bestimmtes HTML-Tag zwischen <STYLE> und </STYLE>. Dieser Typ der Definition legt den Stil fⁿr alle Vorkommen eines bestimmten HTML-Tags fest. Sie k÷nnten z.B. festlegen, da▀ alle <H1>-Tags rote Schrift verwenden.

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:

• Schriftart und -stil
• Hintergundfarben und -bilder
• Textausrichtung
• AbstΣnde
• Stil von RΣndern
• Verschiedenes (darunter Skalierung, Textumbruch und Listen)

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.

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

Zu dieser Liste gibt es ein paar Dinge anzumerken:

• Bei der Festlegung der Schriftfamilie ⁿber font-family k÷nnen Sie eine durch Kommas getrennte Liste mit verschiedenen Schriftnamen angeben. Wenn auf dem System, auf dem der Browser ausgefⁿhrt wird, eine bestimmte Schrift nicht verfⁿgbar ist, wird die nΣchste Schrift in der Liste verwendet. Das W3C empfiehlt, da▀ der letzte Name in der Liste einer der elementaren Schriftgruppennamen sein sollte. Der Grund dafⁿr ist, da▀ jeder Browser eine Standardschrift fⁿr jede elementare Schriftfamilie besitzen sollte.
• Wenn Sie die Schriftgr÷▀e ⁿber font-size festlegen, werden absolute Gr÷▀en ⁿber Schlⁿsselworte wie xx-small, x-small, small, medium, large, x-large und xx-large definiert. Diese Werte sind im Browser konkreten Schriftgr÷▀en zugeordnet. Relative Gr÷▀en definieren Sie als gr÷▀er oder kleiner in bezug auf die Schriftgr÷▀e des Elternelements.
• Fⁿr die Angabe des Gewichts der Schrift gibt es eine Reihe von Zahlenwerten: 100, 200, 300, 400, 500, 600 700 und 800. Der font-weight-Eigenschaft k÷nnen Sie entweder einen der Werte normal, bold, bolder oder lighter zuweisen oder einen der Zahlenwerte. normal ist dabei dem Zahlenwert 400 zugeordnet und bold 700. ▄ber bolder und lighter legen Sie das Schriftgewicht relativ zu dem Elternelement fest.

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>

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

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

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:

• Im Hintergrundbild wird der Punkt 10% von links und 20% von oben ausgewΣhlt. Anders gesagt ist der Punkt 10 Pixel von links und 20 Pixel von oben betroffen.
• Im Browser-Fenster wird auch der Punkt 10% von links und 20% von oben ausgewΣhlt. In diesem Fall ist der Punkt 20 Pixel von links und 40 Pixel von oben betroffen, wenn man die Prozentangabe in konkrete Werte des Browser-Fensters umrechnet.
• Das Hintergrundbild wird nun so in dem Browser-Fenster plaziert, da▀ die beiden oben genannten Punkte zur Deckung kommen.

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.

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.

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.

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.

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.

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.

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

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

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.

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>

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:

• Eine Schnellⁿbersicht: http://webcom.net/~gmc/html/quick_ref.html
• Ein Artikel zu Stilvorlagen finden Sie auf der Web Site des ZD Internet Magazins: http://www.zdim.com/content/anchors/199704/28/1.html.
• Strukturen und Regeln der kaskadierten Stilvorlagen: http://www.htmlhelp.com/reference/css/structure.html.
• Die Homepage des W3C: http://www.w3.org/pub/WWW/Style/ (siehe auch Abbildung 32.13):

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.

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:

• Schrifteigenschaften
• Texteigenschaften
• Blockeigenschaften
• Farb- und Hintergrundeigenschaften
• Sonstige Eigenschaften

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:

• fontSize
• fontFamily
• fontWeight
• fontStyle

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.

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>

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

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:

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

• capitalize. Sorgt dafⁿr, da▀ der Anfangsbuchstabe aller Worte ein Gro▀buchstabe ist.
• uppercase. Wandelt alle Buchstaben in Gro▀buchstaben um.
• lowercase. Wandelt alle Buchstaben in Kleinbuchstaben um.
• none. Neutralisiert geerbte Einstellungen fⁿr textTransform.

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

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.

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>

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.

Farb- und Hintergrundeigenschaften

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

• color. Setzt die Vordergrund- oder Textfarbe eines Elements.
• backgroundColor. Legt die Hintergrundfarbe eines Elements fest.
• backgroundImage. Gibt die URL eines Hintergrundbilds an.

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