vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Woche 3

Tag 21

Style Sheets und das Style-Objekt

Wir haben das Ende unseres JavaScript-Lehrgangs fast erreicht. Für den letzten Tag haben wir uns aber noch ein sehr spannendes und interessantes Thema aufgehoben: die Verbindung von Style Sheets und JavaScript bzw. Aufgabenstellungen, die sich darum ranken.

Wir werden also heute Animationen mit JavaScript und das, was man als Dynamic HTML bezeichnet, in den Vordergrund stellen. Neben der Verbindung von Style Sheets und JavaScript wird dies auch die Behandlung eines Objekts beinhalten, das von Aktionen erzeugt wird, die über document auftreten - das Style-Objekt.

Das Kapitel können Sie sich als Endspurt vorstellen. Dementsprechend werden wir heute nochmals eine längere Strecke zurücklegen, die aber sicher sehr spannend und unterhaltsam wird.

Das Style-Objekt

Das Style-Objekt spezifiziert seit JavaScript 1.2 die stilistischen Charakteristika von einen HTML-Element. Es wird von den folgenden Eigenschaften oder Methoden des document-Objekts erzeugt (siehe dazu Tag 19):

document.classes 
document.contextual
document.ids
document.tags

Das Style-Objekt eröffnet die Möglichkeit, in Webseiten Dynamic HTML zu realisieren und Style Sheets mit JavaScript zu verbinden. Die Methoden (nicht allzu viele) und umfangreichen Eigenschaften des Objekts implementieren die CSS-Stileigenschaften von HTML in JavaScript. Das wird vor allem deutlich, wenn man dann die nachfolgend beschriebenen CSS-Eigenschaften mit denen des Objekts vergleicht.

Eigenschaften

Eigenschaft

Beschreibung

align

Ausrichtung eines HTML-Elements in seinem Elternelement.

backgroundColor

Spezifiziert eine Hintergrundfarbe für ein Element.

backgroundImage

Spezifiziert ein Hintergrundimage für ein HTML-Element.

borderBottomWidth

Spezifiziert die Breite von dem unteren Rahmen des HTML-
Elements.

borderColor

Spezifiziert die Farbe von dem Rahmen des HTML-Elements.

borderLeftWidth

Spezifiziert die Breite von dem linken Rahmen des HTML-Elements.

borderRightWidth

Spezifiziert die Breite von dem rechten Rahmen des HTML-Elements.

borderStyle

Spezifiziert den Stil vom Rahmen, wie einfach oder doppelt, um ein Blocksatz-HTML-Element.

borderTopWidth

Spezifiziert die Breite von dem oberen Rahmen des HTML-Elements.

clear

Spezifiziert die Seite des HTML-Elements, die umfließende Elemente erlaubt.

color

Spezifiziert die Farbe von dem Text eines HTML-Elements.

display

Überschreibt die normale Anzeige eines Elements und gibt an, ob ein Element in eine Zeile, als Blocksatzelement oder als Blocksatzlisteneintrag erscheinen soll.

fontFamily

Spezifiziert die Font-Familie, etwa Helvetica oder Arial, für ein HTML-Textelement.

fontSize

Spezifiziert die Fontgröße für ein HTML-Textelement.

fontStyle

Spezifiziert den Stil von der Schrift des HTML-Elements.

fontWeight

Spezifiziert die Dicke von der Schrift des HTML-Elements.

lineHeight

Spezifiziert den Abstand zwischen der Basislinie von zwei benachbarten Linien in einem Block.

listStyleType

Spezifiziert den Stil von dem Bullet in Listeneinträgen.

marginBottom

Spezifiziert die minimale Distanz zwischen dem Boden des HTML-Elements und der Spitze des darunter befindlichen Elements.

marginLeft

Spezifiziert die minimale Distanz zwischen der linken Seite des HTML-Elements und der rechten Seite von einem Nachbarelement.

marginRight

Spezifiziert die minimale Distanz zwischen der rechten Seite des HTML-Elements und der linken Seite von einem Nachbarelement.

marginTop

Spezifiziert die minimale Distanz zwischen der Spitze des HTML-
Elements und dem Boden von einem Nachbarelement.

paddingBottom

Spezifiziert, wie viel Leerraum zum Einfügen zwischen dem Boden von einem Element und seinem Inhalt, etwa Text oder ein Bild, gelassen wird.

paddingLeft

Spezifiziert, wie viel Leerraum zum Einfügen zwischen der linken Seite von einem Element und seinem Inhalt, etwa Text oder ein Bild, gelassen wird.

paddingRight

Spezifiziert, wie viel Leerraum zum Einfügen zwischen der rechten Seite von einem Element und seinem Inhalt, etwa Text oder ein Bild, gelassen wird.

paddingTop

Spezifiziert, wie viel Leerraum zum Einfügen zwischen der Spitze von einem Element und seinem Inhalt, etwa Text oder ein Bild, gelassen wird.

textAlign

Spezifiziert die Fließrichtung von einem HTML-Textelement in einem Block.

textDecoration

Spezifiziert Spezialeffekte wie Blinken u.ä. für ein HTML-Textelement.

textIndent

Spezifiziert die Größe der Einrückung vor der ersten formatierten Zeile eines HTML-Textblocks.

textTransform

Spezifiziert die Art von einem HTML-Textelement.

whiteSpace

Spezifiziert, ob nicht sichtbare Zeichen (so genannter white space) innerhalb eines HTML-Elements wegoptimiert werden sollen oder nicht.

width

Spezifiziert die Breite von einem HTML-Blockelement.

Tabelle 21.1: Eigenschaften von Style

Methoden

Methode

Beschreibung

borderWidths()

Spezifiziert die Breite der Rändern von einem HTML-Element.

margins()

Spezifiziert die minimale Distanz zwischen den Seiten von
einem HTML-Element und den Seiten der Nachbarelemente.

paddings()

Spezifiziert, wie viel Leerraum zwischen dem Inhalt eines
Elements und dem Rand gelassen wird.

Tabelle 21.2: Methoden von Style

Die praktische Anwendung des Objekts sehen wir gleich in Verbindung mit den Style Sheets bzw. haben wir bereits an Tag 19 genutzt.

Style Sheets

Style Sheets haben wir schon in früheren Passagen des Buches kennen gelernt (siehe dazu insbesondere Tag 4). Wie auch Scripte gehören sie nicht zu HTML, sondern sind eine eigenständige Technik, die seit HTML 4.0 in HTML verankert werden und - wie oben besprochen - via dem Style- Objekt mit JavaScript verbunden werden kann. Style Sheets kann man sich als eine Art Analogon zu Formatvorlagen im Rahmen von Textverarbeitungen vorstellen. Wesentliche Bedeutung erlangen sie durch den Umstand, dass sie eine Trennung von Layout und Inhalt einer Webseite ermöglichen, was mit anderen Techniken nur schwer oder gar nicht erreichbar wäre.

Es gibt nun verschiedene Versuche, Style Sheets zu standardisieren. Bedauerlicherweise muss man festhalten, dass man bis jetzt noch nicht zu einer vollständigen Einigung auf einen Standard gekommen ist oder sich eine Norm wirklich überzeugend durchsetzt. Dies gilt sogar für die Umsetzung von Cascading Style Sheets (CSS), die bereits im Januar 1997 vom W3C eingeführt wurden. Bezeichnend ist, dass, obwohl Cascading Style Sheets bereits seit 1998 in der 2. Version vorliegen und schon einige Jahre ins Land gegangen sind, der Internet Explorer 5.5 (Beta) nicht einmal den auf den Webseiten des W3C zu findenden Acid-Test zur korrekten Darstellung von CSS 1.0 (!!) besteht (http://www.w3.org/). Derzeit haben die neusten Browser also nicht einmal die Version CSS1 vollständig umgesetzt. Man kann sich nur darauf verlassen, dass die neuen Browser von Microsoft und Netscape die CSS1-Empfehlung zwar beide implementiert haben, aber sich nur in den Kernbereichen an die Vorschläge zur Umsetzung halten.

Die Verbindung von Style Sheets mit einer HTML-Seite kann darüber geschehen, dass man Style Sheets in eine Seite einbettet oder aus einer externen Datei importiert. Zur tatsächlichen Definition von Style Sheets stehen Ihnen mehrere Standardtechniken zur Verfügung (das haben wir an Tag 4 ausführlich behandelt):

Die wohl meistgebrauchte Technik zur Einbindung eines Style Sheet in eine Webseite erfolgt über die Notation eines <STYLE>-Containers direkt in den HTML-Code. In dem Inneren des <STYLE>-Containers werden - meist in HTML-Kommentare eingeschlossen, damit für ältere Browser die Anweisungen verborgen werden - alle HTML-Elemente definiert, denen ein besonderes Layout zugewiesen werden soll. Das Style Sheet wird mit dem Tag <STYLE> wie folgt notiert:

<STYLE TYPE="text/css"> 
<!--... irgendwelche Anweisungen ... -->
</STYLE>

Grundregeln von CSS-Deklarationen.

Die Syntax einer CSS-Deklaration sieht immer gleich aus. Es gibt jedes Mal den folgenden Aufbau:

name : wert

Dabei gibt

name

das zu formatierende Element (den so genannten Selector) an und

wert

die konkrete Stilinformation. Bei Bedarf werden mehrere Deklarationen mit Semikolon getrennt. In vielen Situationen werden die Werte auch in geschweifte Klammern gesetzt. Der Selector ist bis auf wenige Ausnahmen einer der existierenden HTML-Tags.

Ein HTML-Tag kann, mit einem Punkt abgetrennt, um die optionale Angabe einer Klasse erweitert werden. Die Syntax sieht so aus:

[HTML-Tag].[class]

Dies ist die Festlegung der Eigenschaften für eine Instanz eines Elements. Dabei legt man eine Klasse fest und verwendet diese bei der Stilzuweisung. Für class kann jeder beliebige Name genommen werden. Damit ist es möglich, verschiedene Stile für ein und dasselbe HTML-Element zu erstellen. Der ursprüngliche Selector, welcher vor dem Punkt steht, ist das Elternelement zu dieser Instanz.

Die Angabe eine Klasse kann auch alleine in der Stildeklaration angegeben werden. In diesem Fall muss einem Klassenbezeichner in der Deklaration ein Punkt vorangestellt werden und bei der konkreten Verwendung ein HTML-Element um den so benannten neuen Parameter erweitert werden.

Die Festlegung von Klassen bei Stilvereinbarungen ist besonders deshalb interessant, weil man mittels Scripten über diese Angabe auf diese Stilvereinbarungen zugreifen kann.

Beispiel1:

Das Beispiel zeigt die parallele Verwendung verschiedener Stilinformationen bei gleichen HTML-Elementen. Diese hier recht einfach gehaltenen Formatierungen werden von allen neueren Browsern unterstützt (CSS1.htm):

<HTML>
<HEAD>
<TITLE>Style Sheets</TITLE>
<STYLE TYPE="text/css">
H1
  {
  color : white
  }
H1.neuefarbe
  {
  color : blue
  }
H1.nocheinefarbe
  {
  color : cyan
  }
BODY
  {
  background : green
  }
.meineKlasse1
  {
  background : red;
  color : yellow
  }
.meineKlasse2
  {
  background : yellow;
  color : blue
  }
</STYLE>
</HEAD>
<BODY>
<H1>Überschrift H1 mit normalen Style-Sheets
</H1>
<H1 class=neuefarbe>
H1-Überschrift mit der Class-Information neuefarbe
</H1>
<P>Normaler Text und darin mit
<SPAN class=meineKlasse1>
meineKlasse1
</SPAN>
veränderte Farbe.
<H1 class=nocheinefarbe>
H1-Überschrift mit der Class-Information nocheinefarbe
</H1>
Nachfolgender Text <u class=meineKlasse1>unterstrichen, Style-Sheet-formatiert und hier noch mit
<SPAN class=meineKlasse2>meinKlasse2</SPAN>
formatiert.</u>
</BODY>
</HTML>

Abbildung 21.1:  Verschiedene Textformatierungen über  Style Sheets

Im <STYLE>-Container wird zuerst eine Stilinformation (Schriftfarbe Weiß) für alle Überschriften der Ordnung 1 vereinbart (H1 { color : white }). Danach wird über eine mit Punkt abgetrennte class-Erweiterung ein Unterstil (Schriftfarbe Blau) für die Überschriften der Ordnung 1 vereinbart (H1.neuefarbe { color : blue}). Die Angabe (H1.nocheinefarbe { color : cyan}) deklariert noch einen zweiten Unterstil (Schriftfarbe Grün) für die Überschriften der Ordnung 1. Die nächste Stildeklaration legt die Hintergrundfarbe der Webseite fest. Die beiden letzten Stildeklarationen deklarieren eine Stilinformation (rote Hintergrundfarbe und gelbe Textfarbe bzw. umgekehrt), die bei Bedarf an jedes HTML-Element als neu definierter Parameter angehängt werden kann.

Innerhalb des BODY-Bereichs werden die vereinbarten Stilinformationen angewandt. Einmal auf die Überschriften-Tags und über den <SPAN>- Container im normalen Textfluss. Dieser bietet sich geradezu für solche Stilvereinbarungen an, da er keinerlei eigene Wirkung hat (das ist genau genommen der Sinn, warum es den Container überhaupt gibt). Aber auch in Verbindung mit Elementen, die bereits eine Wirkung haben (wie in dem Beispiel <U>), lässt sich die Stilinformation einsetzen. Dabei gilt, dass Stilvereinbarungen über HTML so lange unverändert weiterwirken, so lange sie der Style-Sheet-Vereinbarung nicht in die Quere kommen. Ansonsten sollten Sie in dem Beispiel beachten, dass mit der Klasse meineKlasse2 eine Klasse geschaffen ist, die innerhalb eines Containers eingesetzt wird, der mit meineKlasse1 formatiert ist. Die innere Klasse überschreibt die Wirkung der äußeren Klasse in allen gleichen Eigenschaften. Hier sind das vollkommen deckungsgleiche, das kann aber auch nur eine teilweise Überdeckung der Eigenschaftenmenge sein. Dabei gilt wie bei HTML-Elementen, dass Stilvereinbarungen der äußeren Klasse so lange unverändert weiterwirken, so lange sie den Style-Sheet- Vereinbarung der inneren Klasse nicht widersprechen. Dies Verhalten ist kein Zufall - es gibt definierte Anwendungsregeln von CSS-Stil- Formatierungen. Das CSS-Formatierungsmodell teilt HTML-Elemente in zwei Gruppen ein. Es gibt einmal die Elemente, die einen abgesetzten Textblock darstellen - dazu zählen im Wesentlichen Überschriften, Listen, Absätze usw. Der andere Typ von Elementen sind diejenigen, welche im Fliesstext stehen; dazu zählen u.a. Hervorhebungen und Links. Bei den Stilattributen gibt es feste Regeln, die angewendet werden, wenn es zu Konflikten zwischen widersprechenden Stilanweisungen auf einer Seite kommt oder Anweisungen auf Elemente angewendet werden, die diese nicht umsetzen können:

Style Sheets lassen sich auch über eine so genannte ID auswählen. Dies wird zwar vom W3C nicht empfohlen, aber von fast allen Browsern unterstützt. Man ordnet damit eine Formatierung einem bestimmten Element (keiner Elementklasse wie eben) zu. Das funktioniert, indem bei der Deklaration eine Raute # statt eines Punkts vorangestellt wird. Die Syntax sieht dann so aus:

#[ID]

In einem konkreten Beispiel:

#meineID {color : red}

Anwenden kann man diese ID, indem man statt class dem jeweiligen Element id als Parameter nachstellt (im Beispiel wäre das so: <P id=meineID>).

Beispiel2:

Das Beispiel zeigt die Verwendung von IDs (CSS2.htm):

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
#farbe1 {color:blue}
#farbe2 {color:green}
#farbe3 {color:red}
-->
</STYLE>
</HEAD>
<BODY>
<H1 id=farbe3>Willkommen
</H1>
<P id=farbe1>Es grünt so grün
</P>
<P id=farbe2>Was sind wir wieder blau
</P>
</BODY>
</HTML>

Abbildung 21.2:  Verschiedene Textformatierungen über IDs

Wenn verschiedene Selectoren zusammen in einer Stilinformation deklariert werden, bilden sie eine Gruppe. Die einzelnen Selektoren werden durch Kommata voneinander getrennt und bekommen alle die jeweilig angegebenen Stile zugeordnet. Nicht explizit angegebene Attribute werden davon nicht beeinflusst.

Beispiel 3:

Das Beispiel zeigt die Verwendung einer Gruppe von Selektoren (CSS3.htm):

<HTML>
<HEAD>
<TITLE>Style Sheets</TITLE>
<STYLE TYPE="text/css">
H1, H3, H4, H6
  {
  color : yellow
  }
</STYLE>
</HEAD>
<BODY>
<H1>Überschrift H1
</H1>
<H2>Überschrift H2
</H2>
<H3>Überschrift H3
</H3>
<H4>Überschrift H4
</H4>
<H5>Überschrift H5
</H5>
<H6>Überschrift H6
</H6>
</BODY>
</HTML>

Abbildung 21.3:  Eine Gruppe von Selektoren

Grundsätzlich werden CSS-Stilvereinbarungen in verschiedene Kategorien unterteilt, die wir uns nun ansehen wollen.

Font-Stilvereinbarungen

Für die Verwendung von Stilvereinbarungen zur Beeinflussung von Schriften gibt es die in der folgenden Tabelle aufgelisteten CSS- Schriftformatierungseigenschaften (mit Angabe der erlaubten Werte). Der Wertebereich umfasst sowohl Konstanten wie large, medium oder small samt ihrer Abarten für Schriftgrößen als auch Längenangaben als absolute Werte (Pixel, Zentimeter, Millimeter, Zoll, Punkt, Pica) oder relativ (prozentuale Angaben) zu einer Referenzgröße (meist die Größe des Standardzeichensatzes). Des Weiteren können Farben in der RGB-Notation oder durch Angabe eines Farbnamens festgelegt werden und URLs über grafische Angaben für Hintergrundgrafiken).

Eigenschaft

Beschreibung

Wertebereich

Beschreibung

font-size

Schriftgrößen

xx-small

relativ zu den anderen Größen der Familie kleinste Schriftgröße

x-small

relativ zu den anderen Größen der Familie sehr kleine Schriftgröße

small

relativ zu den anderen Größen der Familie kleine Schriftgröße

medium

relativ zu den anderen Größen der Familie mittlere Schriftgröße

large

relativ zu den anderen Größen der Familie große Schriftgröße

x-large

relativ zu den anderen Größen der Familie sehr große Schriftgröße

xx-large

relativ zu den anderen Größen der Familie größte Schriftgröße

larger

relativ zum Elternstil größer

smaller

relativ zum Elternstil kleiner

Länge

Faktor, der mit der ursprünglichen Schriftgröße multipliziert wird. Einheit ist ein Em, was der Platz ist, der von dem Buchstaben M eingenommen wird.

Prozentwert

Multiplikationsfaktor mit der Größe der Elternschrift (in
Prozent)

Absolutangabe

absoluter Zahlenwert in einer Einheit für die Textgröße
(Pixel, Zentimeter, Millimeter, Zoll, Punkt, Pica)

font-family

Angabe einer ganzen Gruppe von Schrifttypen (Schriftfamilie). Mehrere Schriftfamilien werden durch Komma getrennt

serif

Schriften mit Häkchen an den
Linien (z.B. Times)

sans-serif

Schriften ohne Häkchen an den Linien (z.B. Helvetica)

cursive

geneigte Schriften

fantasy

dekorative Schriften

monospace

nichtproportionale Schriften

Angabe einer konkreten Schrift

(Times, Helvetica,...)

font-weight

Festlegung, wie fett eine Schrift dargestellt wird

normal

mittlere Gewichtung

bold

fette Darstellung

bolder

Verstärkung um eine Ebene

lighter

Verringerung um eine Ebene

Zahlenwert mit Abstufungen von 100 bis 900

Fett entspricht dem Wert 700.

font-style

Schriftstile

normal

Normaler Schriftstil. Entspricht gelegentlich Roman.

italic

kursiver Schriftstil

oblique

Kursiver Schriftstil. Die Neigung wird aber durch das System aus der normalen Schrift errechnet.

font-variant

Kapitälchen

normal

normal

small-caps

klein

font

Abkürzung für alle oben genannten Eigenschaften

font-style, font-variant, font-weight, font-size,
line-height, font-family

Die Angabe sämtlicher Attribute erfolgt in der angegebenen Reihenfolge ohne Kommata, es sei denn, es werden Schriftfamilien angegeben.

Tabelle 21.3: Font-Stilvereinbarungen

Die genannten Attribute mit ihren erlaubten Werten werden nicht alle von jedem Browser verstanden und auch die Darstellung kann teilweise erhebliche Unterschiede in verschiedenen Browsern aufweisen. Beachten Sie dazu auch das nachfolgende Beispiel.

Beispiel 4:

Das nachfolgende Beispiel zeigt die Verwendung von verschiedenen Stilinformationen in Zusammenhang mit Fonts (CSS4.htm):

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.a
  {
  font-size: large;
  font-family : sans-serif;
  font-weight: bolder
  }
.b
  {
  font-size: xx-large;
  font-family : fantasy;
  font-variant : small-caps ;
  font-weight: bold
  }
.c
  {
  font-size: xx-small;
  font-family : serif;
  font-weight: normal ;
  line-height : 180%
  }
.d
  {
  font-size: medium;
  font-family : cursive;
  font-variant : small-caps ;
  font-weight: lighter;
  line-height : 150%
  }
.e
  {
  font-size: 42pt;
  font-family : monospace;
  font-variant : normal ;
  font-weight: 888 ;
  line-height : 50%
  }
.f
  {
  font-size: small;
  font-family : serif;
  font-variant : small-caps ;
  font-weight: 111 ;
  line-height : 140%
  }
</STYLE>
</HEAD>
<body>
<DIV class=a>Hund
</DIV>
<DIV class=b>Katze
</DIV>
<DIV class=c>Maus
</DIV>
<DIV class=d>Vogel
</DIV>
<DIV class=e>Pferd
</DIV>
<DIV class=f>Fisch
</DIV>
<DIV class=b>Schwein
</DIV>
<DIV class=d>Rind
</DIV>
</BODY>
</HTML>

Abbildung 21.4:  Die Darstellung im Internet Explorer

Abbildung 21.5:  Die Darstellung im Navigator

Beachten Sie die Abbildungen, welche die unterschiedlichen Interpretationen zwischen dem Navigator und dem Explorer zeigen. Der Internet Explorer stuft den Fettwert besser ab und kann die Kapitälchen darstellen sowie verschiedene Schrifttypen (cursive und fantasy) richtig interpretieren (siehe Abbildung 21.4 und 21.5).

Stilvereinbarungen für Farbe und Hintergrund

Zur Beeinflussung von Farbe und Hintergrund in Webseite mittels Style Sheets steht eine Vielzahl von Eigenschaften bereit. Die nachfolgende Tabelle bietet dazu eine Übersicht. Die Farb- und Hintergrundangaben über CSS sind recht einfach anzuwenden, denn es gibt viele Übereinstimmungen zu gewöhnlichem HTML. Die Möglichkeiten sind jedoch erheblich erweitert und nicht vollständig identisch, weshalb es leicht Flüchtigkeitsfehler geben kann. Da dies keine Fehlermeldung im Browser auslöst, erkennt man nur, dass der Browser eine Stilinformation nicht wie gewünscht umsetzt. Dabei kann man aber nie ganz sicher sein, dass es nicht ein »normales« Problem eines Browsers ist, der mit den Angaben nicht vollständig zurechtkommt (siehe Tabelle 21.4).

Eigenschaft

Beschreibung

Wertebereich

Beschreibung

color

Textfarbe

Angabe der Farbe im RGB-Modell oder über Farbnamen

background-color

Hintergrundfarbe

Angabe der Farbe im RGB-Modell oder über Farbnamen

background-image

Hintergrundbild

url([URL des Bildes])

Die Funktion url() wird direkt hinter die Eigenschaft notiert und beinhaltet die Pfadangabe eines Bildes.

background-repeat

in Verbindung mit einem Hintergrundbild Art der Wiederholung

repeat

gekachelte Wiederholung über den gesamten Bereich

repeat-x

Wiederholung über die horizontale Zeile

repeat-y

Wiederholung über die vertikale Spalte

background
-position

Startposition eines Hintergrundbildes. In Kombination von einer horizontalen und einer vertikalen Angabe kann diese festgelegt werden.

left

Horizontale Positionierung links

center

Zentrierung, sowohl für die horizontale als auch die vertikale Positionierung

right

horizontale Positionierung rechts

top

vertikale Positionierung oben

bottom

vertikale Positionierung unten

Koordinaten-Tupel in %. 0% 0% steht für oben links, 100% 100% für unten rechts.

Positionierung über Koordinatenangaben

background
-attachment

Verankerung eines Hintergrundbildes

scroll

Hintergrundbild mit Text verbunden

fixed

Hintergrundbild mit dem Hintergrund verbunden

background

Abkürzung für alle oben genannten Eigenschaften zu Hintergrundfarben und Hintergrundgrafik

background-color, background-image, background-repeat, background
-attachment, background
-position,

Die Angabe sämtliche Attribute erfolgt in der angegebenen Reihenfolge ohne Kommata.

Tabelle 21.4: Stilvereinbarungen für Farbe und Hintergrund

Beispiel 5:

Es folgt nun eine Demonstration der verschiedenen Möglichkeiten zur Hintergrundgestaltung. Einige Elemente sind mit definierter Hintergrundfarbe und Textfarbe sowie individuellen Hintergrundbildern versehen. Was die Ausdehnung der Stilinformationen angeht, haben Navigator und Explorer verschiedene Ansichten1, wie die dem Quelltext folgenden Screenshots zeigen. Vergleichen Sie die Unterschiede in den Details (CSS5.htm):

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.a
  {
  color: red;
  background-color : yellow

  }
.b
  {
  color: blue;
  background-color : cyan;
  background-image:url(1.gif)
  }
.c
  {
  color: green;
  background-color : blue;
  background-image:url(2.gif)
  }
.d
  {
  background-image:url(1.jpg);
  color = White
  }
.bild
  {
  background-image:url(3.gif);
  color: Blue
  }
H1.bild2
  {
  background-image:url(2.gif);
  background-repeat:repeat-x;
  color: Blue
  }
.bild3
  {
  background-image:url(3.gif);
  background-repeat:repeat-y;
  color: Red
  }
</STYLE>
</HEAD>
<body class=bild3>
<DIV class=bild3>Die Würfel haben sich verformt
</DIV>
<SPAN class=bild>
<DIV class=a>Hund
</DIV>
<DIV class=b>Katze
</DIV>
<DIV class=c>Maus
</DIV>
<DIV>Vogel
</DIV>
<DIV class=a>Pferd
</DIV>
<DIV class=c>Fisch
</DIV>
<DIV>Schwein
</DIV>
<DIV class=a>Rind
</DIV>
</SPAN>
<p CLASS=d>
Das ist ein Text, der nur lang genug sein muss.
<BR>
Ob er irgendeinen Sinn hat oder nicht,
<BR>
das ist vollkommen egal
</p>
Jetzt ist der Absatz zu Ende.
<H1 class=bild2>
Big Brüter is cooking you
</H1>
</BODY>
</HTML>

Abbildung 21.6:  Das macht der Opera daraus

Abbildung 21.7:  Darstellung im Internet Explorer

Abbildung 21.8:  Die Darstellung im Navigator

Stilvereinbarungen zur Gestaltung von Textformatierungen

Das CSS-Konzept beinhaltet neben den allgemeinen Font- Beeinflussungsmöglichkeiten zahlreiche Eigenschaften, mit denen dann der daraus aufgebaute Text individuell gestaltet werden kann. Die nachfolgende Tabelle bietet einen Überblick.

Eigenschaft

Beschreibung

Wertebereich

Beschreibung

vertical-align

Vertikale Ausrichtung von Text, z.B. für tief- oder hochgestellten Text. Die als Basis dienende Grundlinie ist die Grundlinie des Elternelements, welches neu formatiert wird.

baseline

Ausrichtung an der Grundlinie

sub

Tiefstellung

super

Hochstellung

top

Ausrichtung des oberen Randes eines Elementes an dem größten Zeichen der aktuellen Zeile

text-top

Ausrichtung am oberen Rand

middle

zentrierte Ausrichtung in der Mitte einer Zeile

bottom

Ausrichtung des unteren Randes eines Elementes an dem am tiefsten stehenden Zeichen der aktuellen Zeile

text-bottom

Ausrichtung am unteren Rand

Angabe von Prozentwerten

Verschieben eines Elementes um einen positiven oder negativen Wert über oder unter die Grundlinie

text-transform

transformiert Zeichen, etwa in Klein- oder Großbuchstaben

capitalize

erster Buchstabe eines Wortes groß

uppercase

alle Buchstaben groß

lowercase

alle Buchstaben klein

none

keine Transformation

text-align

die üblichen Angaben der horizontalen Ausrichtung

left

linksbündig

right

rechtsbündig

center

zentriert

justify

Blocksatz

text-indent

Einrückung der ersten Zeile eines Textblocks

Angabe der direkten Länge oder einer Prozentangabe

Einheit in Ems oder Zoll

line-height

Abstand zwischen zwei benachbarten Grundlinien

Angabe als Faktor

ohne Einheit

word-spacing

Abstand zwischen einzelnen Worten

Einheit

Angabe in Ems

letter-spacing

Abstand zwischen einzelnen Buchstaben

Einheit

Angabe in Ems

text-decoration

weitergehende Textdekoration

none

keine

underline

unterstrichen

overline

Strich oben

line-through

durchgestrichen

blink

Blinken

line-height

Höhe einer Zeile

direkte Angabe der Länge oder in Prozent

Tabelle 21.5: Stilvereinbarungen zur Gestaltung von Textformatierungen

Diese Style-Sheet-Formatierungen zur Textgestaltung werden nur sehr mangelhaft in vielen Browsern unterstützt. Deshalb sollten Sie sich darauf nie verlassen. Beachten Sie das nachfolgende Beispiel (CSS6.htm).

Beispiel 6:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
.hoch
  {
  vertical-align:super
  }
.tief
  {
  vertical-align:sub
  }
.oben
  {
  vertical-align:text-top
  }
-->
</STYLE>
</HEAD>
<body>
<DIV type="text/css"
style="text-transform:capitalize;
text-align:center">
Macht <SPAN class=hoch>hoch </SPAN> die
<SPAN class=tief>Tür</SPAN>.
</DIV>
<p type="text/css"
style="text-transform:lowercase;
word-spacing:5Em;
text-align:right">
Auf die Plätzchen <SPAN class=oben>fertig </SPAN>
<SPAN class=tief>raus</SPAN>.
</p>
<p type="text/css"
style="text-decoration:line-through;
text-transform:uppercase">
Hin und weg.
</p>
</BODY>
</HTML>

Abbildung 21.9:  Der Internet Explorer gibt sich mehr Mühe

Abbildung 21.10:  Der Navigator will nicht richtig ran

Stilvereinbarungen zur Gestaltung von Textblock- Eigenschaften

Stilinformationen können auf ganze Textblöcke angewandt werden. Etwa zum Definieren von Abständen zu Rändern oder anderen Elementen, zum Festlegen von Rahmen usw. Die nachfolgend in der Tabelle angegebenen Eigenschaften behandeln immer einen vollständigen Textblock:

Eigenschaft

Wertebereich

Beschreibung

padding-left
padding-right
padding-top
padding-bottom
padding

Angabe in Pixeln oder Prozent

Padding (Polsterung) definiert den Abstand, den der Inhalt eines Elements (etwa Text oder Grafik) vom Rand des Elements hält. Der Hintergrund scheint durch. Wenn die Eigenschaft ohne nachgestellte Richtung angegeben wird, werden alle Seiten gepolstert. Sie können die
Eigenschaft ohne nachgestellte Richtung auch mit Werten - ohne Komma dazwischen - angeben. Dann werden die Werte in der Richtung oben, unten, rechts, links interpretiert. Fehlende Werte werden von gegenüberliegenden Seiten ergänzt.

margin-left
margin-right
margin-top
margin-bottom
margin

Angabe in Pixeln oder Prozent

Setzen von Rändern. Die Zusatzangaben -left, -right, -top, -bottom legen, wenn gebraucht, Platz zum benachbarten Element in der jeweiligen Richtung fest. Dabei können Sie auch negative Werte nehmen, um Abstände zu verkürzen.

border-color

Farbangabe

Rahmenfarbe

border-style

none, dotted, dashed, solid, double, groove, ridge, inset, outset

Erscheinungsbild eines Rahmens

border

Abkürzung für einen Rahmen

Ein Rahmen mit den gewünschten Ausprägungen. Die Breite, der Stil und die Farbe können nacheinander - ohne Komma - angegeben werden.

width

auto, Länge, Prozent

Breitenangabe. Es können Elemente mit Bindestrich angehängt werden (z.B. border-width= 5% oder border-top-width=10%)

height

auto, Länge

Höhenangabe (wie Breite)

float

left, right, none

Ausrichtung eines Blockelementes in Bezug auf umgebenden Text. Beispiel: float:left platziert ein Element, Text fließt rechts um das Element herum.

clear

left, right, both, none

Legt fest, ob floating Elemente auf der linken, rechten oder auf beiden Seiten erlaubt sind.

Tabelle 21.6: Stilvereinbarungen zur Gestaltung von Textblock-Eigenschaften

Beispiel 7:

Das Beispiel CSS7.htm zeigt die Anwendung von Padding und Rahmen. Auch hier werden wieder gewaltige Divergenzen zwischen verschiedenen Browsern zu sehen sein (siehe Abb. auf Seite 681).

<HTML>
<HEAD>
<BODY>
<SPAN type="text/css" style="padding: 5% 25%">
Puffer hier, Puffer da.
</SPAN>
<SPAN type="text/css"
style="border : 10pt groove red; padding : 10%">
Rahme mich
</SPAN>
<p type="text/css"
style="border : 25pt ridge white; padding-left: 5%">
WWW
</p>
</BODY>
</HTML>

Abbildung 21.11:  Der Internet Explorer

Abbildung 21.12:  Darstellung im Navigator

Positionierung mit CSS

Eine der interessantesten Anwendungen von Style Sheets sind Positionierungsangaben von beliebigen Elementen. Dies kann entweder mit relativen Positionsangaben oder über absolute Positionsangaben erfolgen. Für Letzteres gibt es die gemeinsam zu verwendenden Angaben:

position:absolute 
left=[Position]
top=[Position]

Damit können beliebige Elemente pixelgenau positioniert werden und sowohl der Navigator als auch der Explorer verstehen es.

Die beiden konkurrierenden Browser Navigator und Explorer kennen aber jeweils zwei zusätzliche Techniken zur Positionierung von Elementen, die der jeweilige Konkurrent nicht darstellen kann. Netscape stellt die Layer-Technik zur Verfügung. Diese versteht der Explorer nicht. Der Explorer hingegen kennt eine Abart der allgemeinen Positionierungstechnik, bei der der Positionierungsparameter mit STYLE als Attribut direkt in einen Tag geschrieben wird. Damit kann der Navigator nicht umgehen.

Beispiel 8

Das Beispiel CSS8.htm demonstriert mehrere Grafiken, die so positioniert werden, dass sie sich überlagern:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
.pos1 {position:absolute; left:60px; top:40px}
.pos2 {position:absolute; left:100px; top:60px}
.pos3 {position:absolute; left:140px; top:80px}
.pos4 {position:absolute; left:180px; top:70px}
-->
</STYLE>
<TITLE>Absolute Positionierung</TITLE>
</HEAD>
<BODY>
<DIV class=pos1><IMG src="2.jpg">
</DIV>
<DIV class=pos2><IMG src="1.gif">
</DIV>
<DIV class=pos3><IMG src="2.gif">
</DIV>
<DIV class=pos4><IMG src="3.gif">
</DIV>
</BODY>
</HTML>

Abbildung 21.13:  Überlagerte Bilder

Beispiel 9

Das zweite Beispiel, CSS9.htm zum Positionieren von Elementen legt Texte über Grafiken. Damit lassen sich sehr effektiv und ressourcenschonend Buttons beschriften (etwa bei der Verwendung als Links). Statt mehrerer Grafiken für verschiedene Buttons wird nur eine Grafik mit jeweils unterschiedlichen Texten überlagert:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
.pos1 {position:absolute; left:50px; top:40px}
.pos2 {position:absolute; left:50px; top:70px}
.pos3
  {
  position:absolute; left:55px; top:42px;
  color : yellow
  }
.pos4
  {
  position:absolute; left:55px; top:72px;
  color : yellow
  }
-->
</STYLE>
<TITLE>Absolute Positionierung</TITLE>
</HEAD>
<BODY>
<DIV class=pos1><IMG src="button.gif">
</DIV>
<DIV class=pos2><IMG src="button.gif">
</DIV>
<DIV class=pos3>Kontakt
</DIV>
<DIV class=pos4>Weiter
</DIV>
</BODY>
</HTML>

Abbildung 21.14:  Nur eine Grafik, aber zweimal verwendet  und unterschiedlich beschriftet

Das letzte Beispiel funktioniert allerdings nicht, wenn die im Browser eingestellte Schrift nicht der entspricht, die auf der Entwicklerplattform eingestellt oder deren Größe verändert ist. Auch sonstige Einstellungen können dazwischenfunken (etwa Zoom der Schrift).

Abbildung 21.15:  Plattformprobleme

Um die Technik sinnvoll einzusetzen, muss noch mehr festgelegt werden als bei dem letzten Beispiel. Das nächste Beispiel CSS10.htm sollte soweit alle Randbedingungen festhalten, dass die Geschichte gegen solche unterschiedlichen Situationen gefeit ist. Allerdings kann das Zoomen von Text immer noch Probleme machen (zumindest beim Netscape Navigator - der Internet Explorer ist damit abgesichert2).

Beispiel 10:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
.pos1 {position:absolute; left:50px; top:40px}
.pos2 {position:absolute; left:50px; top:70px}
.pos3
  {position:absolute; left:55px; top:42px;
  color : yellow;
  font-size: 12pt;
  font-family : Arial;
  font-weight : normal
  }
.pos4
  {position:absolute; left:55px; top:72px;
  color : yellow;
  font-size: 12pt;
  font-family : Arial;
  font-weight : normal
  }
-->
</STYLE>
<TITLE>Absolute Positionierung</TITLE>
</HEAD>
<BODY>
<DIV class=pos1><IMG src="button.gif" height=25>
</DIV>
<DIV class=pos2><IMG src="button.gif" height=25>
</DIV>
<DIV class=pos3>Kontakt
</DIV>
<DIV class=pos4>Weiter
</DIV>
</BODY>
</HTML>

JavaScript-Zugriff auf CSS

Wenn eine HTML-Seite vom Browser geladen wird, können im Rahmen vom Document Object Model (DOM - siehe Tag 19) die eigenständigen Elemente als Objekte klassifiziert werden (abhängig von der genauen Umsetzung der Browserhersteller). Auf diese Weise kann der Browser jedes unterscheidbare Element einer Seite eindeutig wiederfinden. Als Elemente fasst man in diesem Zusammenhang auch die unter CSS erstellten Stilvorlagen auf, die über Scripte auch angesprochen und verändert werden können.

Dies kann etwa direkt über Veränderungen der Webseite durch den Anwender (etwa über die Tastatur oder die Maus) geschehen oder auf Grund von Eingaben bei irgendwelchen Elementen als eine automatische Folgereaktion.

Das große Problem wird hier nur wieder sein, dass sich die Inkompatibilitäten der unterschiedlichen Ereignisbehandlungsmodelle mit den verschiedenen Style-Sheet-Konzepten potenzieren. Wenn Sie JavaScript unter dem Netscape-Browser in Verbindung mit einem Style- Sheet-Konzept einsetzen wollen, ist das Layer-Konzept in Verbindung mit dem Netscape-eigenen JSSS-Standard für Style Sheets natürlich ideal. Dahingegen werden Microsoft-Browser bei JSSS und dem Layer-Konzept bzw. dem Ereignismodell von Netscape aussteigen. Es ist also unbedingt von Nöten, zwei getrennte Projekte aufzubauen, wenn Sie mit JavaScript Style Sheets unter Ausnutzung des vollständigen Leistungsumfangs manipulieren wollen.

Für den Einsatz im Rahmen des Netscape-Modells verweisen wir auf Tag 19 und die Ausführungen zum Style- und document-Objekt. Hier wollen wir nach dem Microsoft-Modell vorgehen.

Im Mittelpunkt der dynamischen Veränderung von Webseiten über JavaScript steht das Attribut ID, mit dem Sie HTML-Tags erweitern können und über das ein Script ein Element in einer Webseite identifizieren kann.

Beispiel 11:

Das Beispiel CSSJS1.htm verwendet zwei Stilklassen (stil1 und stil2), die verschiedene Stilangaben definieren. Den beiden Absätzen in der Webseite wird jeweils eine der beiden Stilinformationen als Defaultwert zugewiesen. In dem nachfolgenden Formular wird über die Schaltfläche eine Funktion (farbwechsel()) aufgerufen, welche die beiden Stilvereinbarungen vertauscht. Gleichzeitig wird im Rahmen einer if-Abfrage kontrolliert, welche Stilvereinbarung aktuell zugewiesen ist, und immer die alternative ausgewählt (eine Schalterfunktionalität).

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
.stil1
  {
  color:red;
  font-style:italic;
  font-size=18;
  background-color = yellow
  }
.stil2
  {
  color:white;
  font-style:normal;
  font-size=42;
  background-color = blue;
  border : 15pt groove green;
  }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function farbwechsel()
{
if (P1.className=="stil1")
{
P1.className="stil2";
P2.className="stil1";
}
else
{
P1.className="stil1";
P2.className="stil2";
}
}
</SCRIPT>
<BODY>
<P class=stil1 id=P1>Das ist der Anfang
</P>
<P class=stil2 id=P2>Das ist das Ende
</P>
<form name="meinFormular">
<input type=button value="Farbwechsel"
onClick="farbwechsel()">
</form>
</BODY>
</HTML>

Abbildung 21.16:  Die Absätze verändern dynamisch ihr Aussehen

Abbildung 21.17:  Originalaussehen





Beispiel 12:

Das nächste Beispiel (CSSJS2.htm) beeinflusst dynamisch die Position von Elementen über Style Sheets. Dabei wird der HTML-<DIV>-Tag verwendet, der mit der ID versehen wird, worüber die Scripte auf die Stilinformation zugreifen. Sobald der Mauszeiger auf das Bild bewegt wird, wird die Funktion poswechsel() ausgelöst. Diese verschiebt jeweils das Bild auf die Alternativposition und verändert dabei die Hintergrundfarbe.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
.pos1
  {
  position:absolute; left:100px; top:60px;
  background-color = yellow
  }
.pos2
  {
  position:absolute; left:180px; top:100px;
  background-color = blue
  }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function poswechsel()
{
if (P1.className=="pos1")
{
P1.className="pos2";
document.bild.src='2.gif'
}
else
{
P1.className="pos1";
document.bild.src='1.gif'
}
}
-->
</SCRIPT>
</HEAD>
<BODY>
<DIV class=pos1 id=P1 onmouseover="poswechsel()">
<IMG src="1.gif" height=80 name="bild">
</DIV>
</BODY>
</HTML>

Abbildung 21.18:  Hintergrund und Position sind verändert

Abbildung 21.19:  Originalaussehen



Beispiel 13:

Das nächste Beispiel (CSSJS3.htm) veranschaulicht, wie man einem Anwender bei Hyperlinks Hilfestellung geben kann, welchen Link er gerade mit dem Mauszeiger überstreicht. Es wird in dem Beispiel dem gerade überstrichenen Link eine andere Hintergrundfarbe zugewiesen (Abb. siehe Seite 693):

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.farbe1
  {
  color:blue;
  background-color:white;
  font-size:18
  }
.farbe2
  {
  color:green;
  background-color:yellow;
  font-size:18
  }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function weiter1()
{
window.open("css1.htm","top");
}

function weiter2()
{
window.open("css2.htm","top");
}
function weiter3()
{
window.open("css3.htm","top");
}
function weiter4()
{
window.open("css4.htm","top");
}
function farbwechsel(a)
{
if (a.className=="farbe1")
{
a.className="farbe2";
}
else
{
a.className="farbe1";
}
}
</SCRIPT>
</HEAD>
<BODY>
<A   href="JavaScript:weiter1()"
  class=farbe1
  id=P1
  onMouseOver="farbwechsel(P1)"
  onMouseOut="farbwechsel(P1)">Link 1
</A><br>
<A   href="JavaScript:weiter2()"
  class=farbe1
  id=P2
  onMouseOver="farbwechsel(P2)"
  onMouseOut="farbwechsel(P2)">Link 2
</A><br>
<A   href="JavaScript:weiter3()"
  class=farbe1
  id=P3
  onMouseOver="farbwechsel(P3)"
  onMouseOut="farbwechsel(P3)">Link 3
</A><br>
<A   href="JavaScript:weiter4()"
  class=farbe1
  id=P4
  onMouseOver="farbwechsel(P4)"
  onMouseOut="farbwechsel(P4)">Link 4
</A><br>
</BODY>
</HTML>

Abbildung 21.20:  Mauszeiger auf Link 4

Abbildung 21.21:  Mauszeiger auf Link 1

Beispiel 14:

Das Beispiel CSSJS4.htm ist eine kleine Animation, die einmal ein animiertes GIF verwendet, es aber zusätzlich in der Größe verändert. Es entsteht der Eindruck, als würde sich die Fledermaus auf den Betrachter hin bewegen. Von zentraler Bedeutung ist bei dieser - wie allen folgenden - Animationen die Methode setTimeout(). Damit kann in definierten Zeitabständen ein Bild vergrößert oder - wie wir es später noch tun werden - verschoben werden. Die Animation startet, wenn der Mauszeiger auf das animierte GIF bewegt wird. Dazu wird dann die Funktion gross() aufgerufen. Wenn sich der Mauszeiger aus dem Bildbereich hinaus bewegt, wird die Funktion klein() aufgerufen, die das Bild auf die Originalgröße zurücksetzt und damit die Originalstartsituation wiederherstellt:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function gross()
{
setTimeout("document.bat.height=160",500);
setTimeout("document.bat.height=170",1000);
setTimeout("document.bat.height=180",1500);
setTimeout("document.bat.height=190",2000);
setTimeout("document.bat.height=200",2500);
setTimeout("document.bat.height=220",3000);
setTimeout("document.bat.height=250",3500);
setTimeout("document.bat.height=300",4000);
}
function klein()
{
document.bat.height=150;
}
</SCRIPT>
</HEAD>
<BODY>
<IMG src="bat1.gif" height=150 name="bat" onMouseOver="gross()"
onMouseOut="klein()">
</BODY>
</HTML>

Abbildung 21.22:  Aug in Aug mit der Maus

Abbildung 21.23:  Noch ist die Fledermaus weit weg

Beispiel 15:

Wir erweitern das Beispiel noch ein wenig. Nach zwei Zeitintervallen wird das Bild zweimal ausgetauscht - die Fledermaus explodiert und geht in eine Rose über (CSSJS5.htm):

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function gross()
{
setTimeout("document.bat.height=60",500);
setTimeout("document.bat.height=70",1000);
setTimeout("document.bat.height=80",1500);
setTimeout("document.bat.height=90",2000);
setTimeout("document.bat.height=100",2500);
setTimeout("document.bat.height=120",3000);
setTimeout("document.bat.height=150",3500);
setTimeout("document.bat.height=200",4000);
setTimeout("document.bat.src='14.gif'",4200);
setTimeout("document.bat.src='219.gif'",5000);
}
function klein()
{
document.bat.height=150;
}
</SCRIPT>
</HEAD>
<BODY>
<IMG
  src="bat1.gif"
  height=60
  name="bat"
  onMouseOver="gross()"
  onMouseOut="klein()">
</BODY>
</HTML>

Abbildung 21.24:  Es entsteht eine Rose

Abbildung 21.25:  Die Fledermaus explodiert

Beispiel 16:

Das abschließende und recht umfangreiche Beispiel ist eine vollständige Animation (CSSJS6.htm). Dabei werden mehrere animierte GIFs verwendet. Eines davon - die Fledermaus - wird entlang einer vorgegebenen Route verschoben. Diese ist aus Style-Sheet- Positionsangaben aufgebaut. Die Animation entsteht, indem das GIF in Zeitintervallen vergrößert und anhand der verschiedenen Positionen verschoben wird.

Die Aktionen können synchronisiert werden oder aber - wie bei uns - asynchron laufen, um die Effekte noch in Hinsicht auf 3D zu steigern. Wenn dann noch Bilder ausgetauscht werden, entsteht ein richtiges kleines Video. Die Handlung dieser Animation ist, dass sich die Fledermaus dem drehenden Totenkopf nähert. Wenn die Positionen deckungsgleich sind, werden beide3 (!) Bilder zeitgleich durch eine Explosion (ein neues animiertes GIF) ersetzt, die dann nach einem weiteren Zeitintervall durch ein animiertes GIF ersetzt wird, das ein Gewitter darstellt.

<HTML>
<HEAD>
<STYLE type="text/css">
.pos1
  {
  position:absolute;
  left:400px;
  top:100px
  }
.pos2
  {
  position:absolute;
  left:390px;
  top:110px
  }
.pos3
  {
  position:absolute;
  left:380px;
  top:120px
  }
.pos4
  {
  position:absolute;
  left:360px;
  top:130px
  }
.pos5
  {
  position:absolute;
  left:350px;
  top:150px
  }
.pos6
  {
  position:absolute;
  left:340px;
  top:160px
  }
.pos7
  {
  position:absolute;
  left:330px;
  top:140px
  }
.pos8
  {
  position:absolute;
  left:320px;
  top:130px
  }
.pos9
  {
  position:absolute;
  left:310px;
  top:120px
  }
.pos10
  {
  position:absolute;
  left:300px;
  top:130px
  }
.pos11
  {
  position:absolute;
  left:295px;
  top:145px
  }
.pos12
  {
  position:absolute;
  left:290px;
  top:150px
  }
.pos13
  {
  position:absolute;
  left:280px;
  top:160px
  }
.pos14
  {
  position:absolute;
  left:290px;
  top:165px
  }
.pos15
  {
  position:absolute;
  left:295px;
  top:170px
  }
.pos16
  {
  position:absolute;
  left:296px;
  top:185px
  }
.pos17
  {
  position:absolute;
  left:297px;
  top:200px
  }
.pos18
  {
  position:absolute;
  left:298px;
  top:215px
  }
.pos19
  {
  position:absolute;
  left:299px;
  top:230px
  }
.pos20
  {
  position:absolute;
  left:300px;
  top:250px
  }
.endpos
  {
  position:absolute;
  left:300px;
  top:260px
  }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function gross()
{
setTimeout("document.bat.height=60",200);
setTimeout("document.bat.height=65",400);
setTimeout("document.bat.height=70",600);
setTimeout("document.bat.height=75",800);
setTimeout("document.bat.height=80",1000);
setTimeout("document.bat.height=85",1200);
setTimeout("document.bat.height=90",1400);
setTimeout("document.bat.height=92",1600);
setTimeout("document.bat.height=94",1700);
setTimeout("document.bat.height=95",1800);
setTimeout("document.bat.height=96",1900);
setTimeout("document.bat.height=97",1950);
setTimeout("document.bat.height=98",2000);
setTimeout("document.bat.height=100",2200);
setTimeout("document.bat.height=105",2400);
setTimeout("document.bat.height=108",2600);
setTimeout("document.bat.height=110",2700);
setTimeout("document.bat.height=111",2800);
setTimeout("document.bat.height=112",2900);
setTimeout("document.bat.height=113",3000);
setTimeout("document.bat.height=114",3100);
setTimeout("document.bat.height=115",3200);
setTimeout("document.bat.height=116",3400);
setTimeout("document.bat.height=117",3600);
setTimeout("document.bat.height=118",3700);
setTimeout("document.bat.height=119",3800);
setTimeout("document.bat.height=120",3900);
setTimeout("document.bat.height=125",4000);
setTimeout("document.tk.height=125",4000);

setTimeout("P1.className='pos2'",300);
setTimeout("P1.className='pos3'",600);
setTimeout("P1.className='pos4'",900);
setTimeout("P1.className='pos5'",1200);
setTimeout("P1.className='pos6'",1600);
setTimeout("P1.className='pos7'",1900);
setTimeout("P1.className='pos8'",2100);
setTimeout("P1.className='pos9'",2200);
setTimeout("P1.className='pos10'",2300);
setTimeout("P1.className='pos11'",2500);
setTimeout("P1.className='pos12'",2800);
setTimeout("P1.className='pos13'",3100);
setTimeout("P1.className='pos14'",3400);
setTimeout("P1.className='pos15'",3600);
setTimeout("P1.className='pos16'",3700);
setTimeout("P1.className='pos17'",3900);
setTimeout("P1.className='pos18'",3950);
setTimeout("P1.className='pos19'",3980);
setTimeout("P1.className='pos20'",4000);

setTimeout("document.bat.src='14.gif'",4200);
setTimeout("document.tk.src='14.gif'",4200);
setTimeout("document.bat.src='233.gif'",5000);
setTimeout("document.tk.src='233.gif'",5000);
setTimeout("klein()",8000);
}
function klein()
{
document.bat.height=50;
P1.className='pos1';
document.bat.src='bat1.gif';
document.tk.height='75';
P2.className='endpos';
document.tk.src='30.gif';
}
</SCRIPT>
</HEAD>
<BODY bgcolor=black>
<SPAN class=pos1 id=P1>
<IMG
  src="bat1.gif"
  height=50
  name="bat"
  onClick="gross()">
</SPAN>
<SPAN class=endpos id=P2>
<IMG
  src="30.gif"
  height=75
  name="tk">
</SPAN>
</BODY>
</HTML>

Abbildung 21.26:  Die Animation endet im Gewitter

Abbildung 21.27:  Beim Zusammenstoß explodieren beide

Abbildung 21.28:  Die Fledermaus kommt dem Totenkopf näher

Abbildung 21.29:  Vor dem Klick sorgen nur die animierten GIFs für Bewegung

Die meisten Webanimationen beruhen auf einer ähnlichen Idee, wie wir sie gerade realisiert haben. Auch Flash-Animationen liegt diese Idee zugrunde, die beliebig verfeinert werden kann.

Zusammenfassung

Am letzten Tag des JavaScript-Lehrgangs haben wir uns das Style-Objekt angeschaut, das bei einigen Eigenschaften oder Methoden des document- Objekts erzeugt wird. Das Style-Objekt eröffnet die Möglichkeit, in Webseiten Dynamic HTML zu realisieren und Style Sheets mit JavaScript zu verbinden.

Style Sheets gibt es in verschiedensten Varianten. Wir haben uns auf die Behandlung von Cascading Style Sheets beschränkt, die die neuen Browser zumindest in den Kernbereichen recht einheitlich implementieren. Die Verbindung von Style Sheets mit einer HTML-Seite kann darüber geschehen, dass man Style Sheets in eine Seite einbettet oder aus einer externen Datei importiert. Die Syntax einer CSS-Deklaration sieht immer gleich aus. Es gibt jedes Mal den folgenden Aufbau:

name : wert

Dabei gibt

name

das zu formatierende Element (den so genannten Selector) an und

wert

die konkrete Stilinformation. Mehrere Deklarationen werden mit Semikolon getrennt. In vielen Situationen werden die Werte auch in geschweifte Klammern gesetzt. Der Selector ist bis auf wenige Ausnahmen einer der existierenden HTML-Tags.

Ein HTML-Tag kann, mit einem Punkt abgetrennt, um die optionale Angabe einer Klasse erweitert werden. Die Syntax sieht so aus:

[HTML-Tag].[class]

Dies ist die Festlegung der Eigenschaften für eine Instanz eines Elements. Dabei legt man eine Klasse fest und verwendet diese bei der Stilzuweisung. Für class kann jeder beliebige Name genommen werden. Damit ist es möglich, verschiedene Stile für ein und dasselbe HTML-Element zu erstellen. Der ursprüngliche Selector, welcher vor dem Punkt steht, ist das Elternelement zu dieser Instanz.

Eine Klasse kann auch alleine in der Stildeklaration angegeben werden. In diesem Fall muss einem Klassenbezeichner in der Deklaration ein Punkt vorangestellt und bei der konkreten Verwendung ein HTML-Element um den so benannten neuen Parameter erweitert werden.

Grundsätzlich werden CSS-Stilvereinbarungen in verschiedene Kategorien unterteilt, die wir uns in diesem Kapitel angesehen haben:

Der JavaScript-Zugriff auf CSS kann im Rahmen der Festlegungen erfolgen, die vom Document Object Model festgelegt werden. Wegen der Inkompatibilitäten der unterschiedlichen Ereignisbehandlungsmodelle sowie den verschiedenen Style-Sheet-Konzepte sollten getrennte Projekte für die verschiedenen Brower erstellt werden.

Fragen und Antworten

Frage:
Wenn Effekte aus dem Style-Sheet-Bereich genutzt werden, sollten die Browser-Welten getrennt werden, oder gibt es nicht einen kleinen gemeinsamen Nenner, den man nutzen kann?

Antwort:
Den gibt es schon, aber da die Unterschiede der Browser-Welten so komplex sind, macht es meist mehr Arbeit, jeden einzelnen Effekt auf verschiedenen Browserkonstellationen wasserdicht zu machen als gleich zu trennen. Prinzipiell sollten Sie aber in jedem Fall testen, was das Zeug hält. Animationen würde ich aber auf jeden Fall trennen.

Frage:
Muss man bei einer Animation jede Position einzeln notieren oder kann man da nicht mit Schleifen arbeiten?

Antwort:
Doch. Kann man. Das ist aber nicht ganz so einfach. Am sinnvollsten ist es, wenn man eine Seite neu schreibt. Das heißt, ein Script generiert Positions- und Größenwerte und daraus wird die Seite samt Style-Sheet-Informationen geschrieben. Aber prinzipiell werden Sie oft den Fall vorfinden, dass wirklich jede Position einer Animation in der Seite notiert ist und diese Positionen der Reihe nach aufgerufen werden.

Workshop

Nehmen Sie die Webanimationen aus den letzten Beispielen und verfeinern Sie diese. Eine Erweiterung wäre, wenn man unter Hinzuziehung der random()-Methode einen Zufallsmechanismus generierte, der beispielsweise dazu genutzt wird, die Auswahl der nächsten Position von einem Zufall abhängig zu machen. Etwa wenn die Methode einen Wert größer als 0,25 liefert, wird nach vorne gegangen, ansonsten wieder zurück auf die letzte Position. Oder nehmen Sie feinere Unterteilungen mit mehr Positionen und geringeren Größenveränderungen, die aber schneller aufgerufen werden. Man kann auch den Zufallsmechanismus dazu nutzten, verschiedene mögliche Wege auszuwählen. Eine weitere Verfeinerung wäre, wenn eine Animation endlos liefe. Dazu kann man eine Animation einfach rückwärts die Positionen oder Größenveränderungen wieder durchlaufen lassen. Solche Dinge machen vor allem Sinn, wenn man auf Schleifen zurückgreift.

Kontrollfragen

Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.

  1. Von welchen Eigenschaften oder Methoden des document-Objekts wird das Style-Objekt erzeugt?
  2. Wie können Style Sheets in eine Webseite integriert werden?
  3. Wie sieht die Syntax von einer CSS-Deklaration immer aus?
  4. Was sind die wichtigsten Elemente einer Animation?
  5. Ist das korrekt?
    H6.a 
    {
    color : blue
    }



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


123

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH