Box 24
 Home   Infos   Tipps   Webmail   Humor   Polizei   Gästebuch   Downloads   Chat   Suchen   Feedback   Links 

 
 Anmelden/Login   Neuanmeldung/New User   Java Telnet Applet   Telnet   
 

Layouts mit Stylesheets

Syntax

Stylesheets sind einfach aufgebaut, sie bestehen aus normalen ASCII-Text und sind dementsprechend sehr schnell geladen und ausgeführt. Die einfachste Variante einer Regel sieht etwa so aus:

P {color: blue}

Das erklärt dem Browser, dass der Text innerhalb der <P></P>-Tags blau dargestellt werden soll. Sie besteht aus einem Selektor (hier P) und einer Deklaration, die in geschwungene Klammern eingebettet ist und selber aus einer Eigenschaft (color) und deren Wert (blue) besteht. Als Selektor kann jeder beliebige HTML-Tag dienen. Zusätzlich können über Klassen auch eigene Selektoren definiert werden. Selektoren und Eigenschaften können beliebig gruppiert werden:

P, H1 {color: blue; font-family: arial}

Es gibt vier Möglichkeiten, Stylesheets in einer Website anzuwenden, von denen jede bestimmte Vorteile hat:

1. Einbetten

Beim Einbetten eines Stylesheets werden die Regeln direkt im HTML-Dokument definiert. Diese Regeln werden jedoch nur auf das einzelne Dokument angewendet:

<HTML>
<STYLE TYPE="text/css">
<!-- 
H3 {color: blue; font-family: arial} 
P {background: red; font-family: courier} 
--> 
</STYLE>
<BODY>
...

Damit Browser ohne CSS-Unterstützung diesen Code ignorieren, sollte das TYPE="text/css" -Attribut angegeben werden. Zudem sollten die Regeln innerhalb eines Kommentar-Tags gesetzt werden, damit ältere Browser die Regeln nicht direkt in der Seite anzeigen.

2. Link

Statt die selben Layouts in jeder einzelnen Seite anzugeben, kann in jedem Dokument einer Site auf ein zentrales Stylesheet-Dokument verwiesen werden, das die Regeln für alle Seiten enthält. Wenn darin z.B. die Fontgrösse geändert wird, wirkt sich das sofort auf die gesamte Site aus.

Dieses Stylesheet-Dokument beinhaltet nichts anderes als die Regeln. In der HTML-Seite wird dann anstelle des Style-Tags ein Link-Tag in den Header eingefügt, der auf das Stylesheet-Dokument verweist:

<HEAD>
<LINK REL=stylesheet HREF="meinstylesheet.css" TYPE="text/css">
</HEAD>

3. Importieren eines Stylesheets

Diese Methode funktioniert wie das Linking, allerdings mit dem Unterschied, dass Linking nicht mit anderen Varianten der Stylesheet-Implementation genutzt werden kann, das Importieren dagegen schon. Das sähe dann etwa so aus:

<STYLE TYPE="text/css">
<!--
@import url (meinstylesheet.css);
P {color: blue; font-family: arial}
-->
</STYLE>

Wichtig ist, dass die @import-Zeile immer an erster Stelle kommen muss. Allerdings lassen sich so nacheinander beliebig viele Stylesheets importieren, die sich gegenseitig ergänzen können. Diese Methode wird erst ab Internet Explorer 4.0 unterstützt.

4. Lokale Styles

Zusätzlich gibt es noch die Möglichkeit, dem aktuellen Tag direkt im HTML-Dokument Styles zuzuweisen, die dann nur für diesen Tag Gültigkeit haben:

<BODY>
<P STYLE="color: blue; font-family: arial">Hier steht etwas</P>
</BODY>

Nachteil dieser Methode ist, dass der Code für jeden Tag eingegeben werden muss, bei dem er genutzt werden soll. Ihr Vorteil liegt darin, wenn die Regeln eines Stylesheets an einem bestimmten Ort ausser Kraft gesetzt werden sollen.

Klassen, IDs und Kaskaden

Jeder HTML-Tag kann als Selektor dienen. Wenn allerdings beispielsweise verschiedene Titel erster Klasse auf der selben Seite unterschiedlich formatiert werden sollen, versagt diese Methode. Die CSS-Spezifikation sieht für solche Fälle so genannte Klassen vor, die im externen oder im eingebetteten Stylesheet angegeben werden können.

H1.rot {color: red; font-family: arial}
H1.blau {color: blue; font-family: times}

Um dies dann anzuwenden, ist der HTML-Code zu ändern:

<H1 CLASS=rot>Erste Überschrift in rot</H1>
<H1 CLASS=blau>Erste Überschrift in blau</H1>

Klassen können beliebig benannt werden. Wichtig ist nur, dass in der Stylesheet-Definition und im HTML-Dokument der selbe Name benützt wird und dass zwischen dem Tag und dem Namen ein Punkt eingegeben wird.

Klassen lassen sich auch ohne zugehörigen HTML-Tag definieren, was dieses Konzept einiges flexibler macht. Eine Klasse kann so jedem beliebigen Tag zugewiesen werden, dessen Inhalt dann grün erscheint.

.grün {color: green}

Das Selbe lässt sich auch mit IDs erreichen, die ihre Vorzüge vor allem in der Zusammenarbeit mit Scripts haben. Die Syntax unterscheidet sich von den Klassen nur durch das vorangestellte Zeichen: Anstelle eines Punktes wird das #-Zeichen benutzt.

#grün {color: green}
<H1 ID="grün">Grüne Überschrift</H1>

Schliesslich lassen sich auch kontextbezogene Selektoren definieren, die nur dann zur Anwendung kommen, wenn eine bestimmte Voraussetzung erfüllt ist. So kann etwa festgelegt werden, dass fett gesetzter Text rot erscheint, aber nur in einem normalen Abschnitt und nicht in einem Titel. Der zugehörige Code sieht so aus:

P B {color: red}
<H1><B>Peter Bichsel</B>, Schriftsteller</H1>
<P>Autor von <B>Kindergeschichten</B></P>

Die Regel erklärt dem Browser, dass er fetten Text nur dann rot formatieren soll, wenn er innerhalb eines P-Tags vorkommt. Der fett gesetzte Text der ersten Zeile im obigen Beispiel wird deshalb nicht rot, derjenige in der zweiten Zeile dagegen schon.

Den Vorteil haben Stylesheets aus der Verknüpfung der verschiedenen Methoden, mit denen sie auf ein HTML-Dokument angewendet werden können. Allerdings birgt diese Verknüpfungsmöglichkeit auch Probleme: Es kann vorkommen, dass sich die Regeln verschiedener importierter oder eingebetteter Sheets widersprechen. Gelöst wird dieses Problem durch den Browser, der über eine vordefinierte Kaskierungs-Reihenfolge verfügt. Jedes Stylesheet unterliegt dieser offiziellen Hierarchie und wird entsprechend von einem Stylesheet mit höherer Priorität verdrängt. Diese Hierarchie sieht folgendermassen aus:

  1. Lokale Styles
  2. Eingebettete Stylesheets
  3. Stylesheets, auf die ein Link zeigt
  4. Importierte Stylesheets
  5. Standard-Styles des Browsers

Leider haben Netscape und Microsoft diese Hierarchie in ihren Browsern nur unvollständig implementiert. Beide Browser geben den verlinkten Stylesheets eine höhere Priorität als den eingebetteten. Aber selbst wenn diese Implementation geglückt wäre, gäbe es noch Probleme: Wie soll sich der Browser verhalten, wenn sich verschiedene Regeln derselben Kategorie und Priorität widersprechen? Auch dieses Problem hat das W3C in der Spezifikation gelöst.

Fontformatierung

Mittels CSS lassen sich Fonts besser formatieren. Sie ermöglichen diverse Formatierungen, die mit reinem HTML nicht machbar sind. Zum Beispiel erlaubt es eine Funktion, Fonts zu benennen. Damit sucht der Browser aus einer Liste von Fonts denjenigen aus, welcher auf dem System installiert ist. Das ist vor allem dann praktisch, wenn der Webdesigner nicht die Standardfonts verwendet. Beim PC und dem Mac unterscheiden sich die Namen der Fonts oft, obwohl auch hier die Schriften ähnlich sind. Mit den Stylesheets lässt sich für beide Systeme der passende Font angeben.

P {font-family: "Bookman Old Style", "Times New Roman", Times, serif}

Hier sucht der Browser für die Formatierung des Abschnitts zuerst nach dem Font Bookman Old Style . Findet er diesen, benutzt er ihn, wenn nicht, sucht er nach Times New Roman, der Standard-Serif-Schrift auf PCs. Auf dem Mac, wo diese beiden PC-Schriften nicht vorhanden sind, benutzt er direkt die Times. Der Wert serif schliesslich sagt dem Browser, dass er denjenigen Font benutzen soll, den ihm das System als Standard-Serif-Schrift angibt.

Zu beachten ist bei diesem Prozedere, dass immer der genaue Font-Name angegeben werden muss, wie er beispielsweise im Schriften-Menü von Word angezeigt wird. Ausserdem müssen Font-Namen mit mehreren Wörtern in Anführungszeichen gesetzt werden, und die font-family -Eigenschaft sollte immer zuhinterst in der Regel aufgeführt werden, weil sie von Internet Explorer 3.0 sonst mitunter ignoriert wird.

Spezialeffekte

CSS besitzt zahlreiche weitere Eigenschaften, um das Aussehen von Schriften an bestimmte Bedürfnisse anzupassen. Viele davon sind auch in HTML enthalten, Stylesheets sind aber wesentlich flexibler. Die Eigenschaft font-size etwa erlaubt es, den Schriften beinahe beliebige Grössen zuzuweisen, und zwar entweder über Grösseneinheiten wie etwa Pixel, Points oder Millimeter, über Schlüsselwörter wie small , x-large oder larger, oder über prozentuale Werte, die sich auf eine anderswo definierte und vererbte Grösse beziehen.

Die Eigenschaft font-style mit den Werten italic oder oblique setzt Text kursiv, während font-weight für den Fett-Satz zuständig ist. Diese Eigenschaft erlaubt natürlich den Wert bold, darüber hinaus können aber auch numerische Werte definiert werden: 100, 200 bis 900. Normaler Text besitzt den Wert 400, tiefere Werte machen den Satz leichtgewichtig, hohe Werte ergeben Fett-Satz. Natürlich macht die numerische Angabe nur bei Schriftarten Sinn, die auch verschiedene Fett-Schnitte haben.

Drei weitere Eigenschaften sind für verschiedene Spezialeffekte zuständig: Die Eigenschaft font-variant mit dem Wert small-caps sollte Text in Kapitälchen umformatieren, wird allerdings von keinem aktuellen Browser richtig unterstützt. Mit text-transform lassen sich Sätze je nach Wert in Grossbuchstaben (uppercase) oder in kleine Buchstaben (lowercase) transformieren. Der Wert capitalize sorgt schliesslich dafür, dass jedes Wort mit einem Grossbuchstaben anfängt.

Die Eigenschaft text-decoration schliesslich ist ein Container für verschiedenste Effekte: Mit den Werten underline, overline und line-through lassen sich Wörter und Sätze unter-, über- und durchstreichen. Interessant ist hier der Wert none, mit dessen Hilfe es möglich ist, die störende Unterstreichung von Text-Links zu entfernen. Der zugehörige Code:

A {text-decoration: none} 
<A HREF="http://www.box24.ch">Link</A>

Das Resultat ist ein normaler Text ohne besondere Kennzeichnung, der aber als Link funktioniert.

Abschnittsformatierung

Mit CSS können nicht nur Schriften sondern auch Abschnitte formatiert werden. Diese Eigenschaften ermöglichen es, den horizontalen und vertikalen Abstand zwischen Buchstaben, Wörtern und Zeilen zu ändern und Abschnitte mit Rändern und Rahmen zu versehen.

Allerdings werden die vorgesehenen Eigenschaften von den Browsern nur teilweise unterstützt - einzelne davon sogar nur von speziellen Versionen, wie etwa word-spacing , das nur von der Mac-Version von Internet Explorer 4.0 unterstützt wird.

Mit der Eigenschaft line-height wird der Abstand zwischen einzelnen Zeilen kontrolliert. Diese Eigenschaft beziehlt sich immer auf die Grundlinie von zwei Zeilen. Die Werte können entweder als Zahl mit oder ohne Masseinheit oder als Prozentwert angegeben werden.

B {font-size: 12pt; line-height: 11pt}

Mit der line-height-Eigenschaft lässt sich auch überlappender Text produzieren, indem ein niedriger Wert eingegeben wird. Allerdings gibt es dafür noch bessere Methoden, die in einem folgenden Abschnitt besprochen werden.

Tags für die horizontale Ausrichtung von Text (links-/rechtsbündiger Flattersatz oder Blocksatz) sind schon in HTML enthalten. Stylesheets ermöglichen dies mit der Eigenschaft text-align, die nur auf gesamte Abschnitte einen Einfluss hat und deshalb nur mit den <P> -, <Hx>-, <BLOCKQUOTE>- und <UL>-Tags zusammenarbeitet. Interessanter wäre die Eigenschaft vertical-align , mit der Elemente bezogen auf ein übergeordnetes Element vertikal ausgerichtet werden können. Leider wird auch diese Eigenschaft nur unvollständig unterstützt.

Auch die Eigenschaft text-indent wirkt sich nur auf Abschnitte aus. Akzeptiert werden ganze Zahlen mit Masseinheit oder aber Prozentwerte. Auch negative Zahlen sind möglich, damit werden hängende Einzüge angegeben.

Mit verschachtelten Tabellen und einem komplizierten Layout kreierte man bisher Rahmen oder Abstände um einen Textblock. Mit Stylesheets lässt sich dies nun einfacher bewerkstelligen. Die Stylesheets behandeln Textblöcke, Bilder, Applets und Ähnliches als Inhalt einer Box, die aus dem Element selber, dem Abstand zwischen Element und Rahmen (padding ), dem Rahmen selber (border) sowie dem Rand um den Rahmen (margin) besteht. All diese Bestandteile können von CSS einzeln beeinflusst werden.

P {margin-top: 50px; margin-bottom: 20px; 
margin-left: 10px; margin-right: 10px}

Damit wird die Breite bzw. die Höhe des Randes um den Rahmen verändert. Jeder Wert kann individuell gesetzt werden, auch der Einsatz nur einzelner Seiten ist möglich. Auch hier sind sowohl Werte mit Masseinheiten als auch Prozentwerte möglich. Genau gleich wie die margin -Eigenschaft funktioniert auch das padding-Attribut.

Zwischen diesen beiden Elementen einer Box steht der Rahmen, der verschiedene weitere Optionen bietet - sowohl Rahmenbreite als auch Farben lassen sich definieren, darüber hinaus sogar der Stil der Umrahmung. Möglich sind etwa einfache und doppelte Rahmen oder solche im 3D -Look. Allerdings wird die border-Eigenschaft derzeit leider ausschliesslich von Communicator und auch da nicht vollständig unterstützt. Ein einfaches Beispiel:

P {border-color: green; border-style: double;border-width: 3px}

Diese Regel umrahmt den Abschnitt mit einem doppelten grünen Rahmen von 3 Pixeln Breite.

Hintergrundfarben

Auch mit normelem HTML lassen sich Farben im Vorder- oder Hintergrund definieren. Mit den Farbeigenschaften der Stylesheets lässt sich auch nicht unbedingt Neues bewerkstelligen. Man kann jedoch Farben definieren, die nicht mit dem Erscheinen eines Tags neu angewendet werden müssen. Das nächste Beispiel etwa zeigt jeden kursiven Text im Dokument rot an.

I {color: red}

Farben können auf drei verschiedene Arten angegeben werden:

  1. Farbnamen wie red, fuchsia, grey etc.
  2. Hexadezimale Werte wie etwa #FF1493
  3. RGB-Werte wie beispielsweise {color: rgb(255, 20, 147)}

Eine schöne Übersicht über fast alle möglichen Farben mitsamt Name, HEX- und RGB-Wert bietet Hypes Color Specifier.

Das Einfärben von einzelnen Bereichen im Hintergrund ist nun einfacher geworden. Wo bisher Tabellen definiert und die Zellen mit Hintergrundfarben gefüllt wurden, reicht nun die Definition von Klassen mit unterschiedlichen Hintergrundfarben, die anschliessend auf die entsprechenden Abschnitte oder einzelne Wörter angewendet werden.

P.pink {background-color: rgb(255, 20, 147)}

Nun wird natürlich auch diese Eigenschaft von Communicator, Internet Explorer 3.0 und 4.0 verschieden interpretiert. Nur Internet Explorer 4.0 füllt einen kompletten, rechteckigen Kasten mit der Farbe, die beiden anderen Browser hinterlegen nur den Text. Umgehen lässt sich das, indem der Textblock oder das Element in <DIV>- oder <SPAN>-Tags eingebettet wird.

Interessant werden Stylesheets, wenn es um Hintergrundbilder geht: Über die Eigenschaft background-image können beliebige Hintergrundgrafiken für verschiedene Elemente definiert werden. Zudem ist es auch möglich, die Erscheinungsweise der Grafik genau zu kontrollieren.

Mit dem Attribut background-repeat wird bestimmt, ob ein Hintergrundbild gekachelt werden soll. Dafür stehen die Werte no-repeat , repeat-x, repeat-y und einfach nur repeat zur Verfügung. Während mit ersterem Wert das Bild nur gerade einmal erscheint, wird es mit x und y in horizontaler resp. vertikaler Richtung wiederholt. Ohne solche Angaben produziert repeat ein ganz normales gekacheltes Hintergrundbild, wie es überall im Web zu finden ist.

Normale HTML-Hintergrundbilder scrollen mit der Seite mit. Mit Stylesheets hingegen können sie mit der Eigenschaft background-attachment und den Werten fixed oder scroll fixiert werden. Damit scrollen die Texte einer Seite über einen gleich bleibenden Hintergrund. Diese Eigenschaft wird jedoch nur mit dem Internet Explorer. Zudem funktioniert diese Eigenschaft auch nur, wenn sie auf die gesamte Seite (auf den BODY-Tag) angewendet wird.

BODY {background-attachment: fixed; 
background-image: url(\test\background.gif)}

Positionierung von Elementen

Eine interessante Funktion der Stylesheets ist die Positionierung von Elementen. Bisher wurden dafür Tabellen und unsichtbare GIFs eingesetzt. Mit Stylesheets lassen sich nun die Elemente exakt positionieren, sichtbar und unsichtbar machen oder überlagern.

.LOGO {position: absolute; left: 100px; top: 42px}

Diese Regel bestimmt, dass die linke obere Ecke des Elements mit der ID Logo genau 42 Pixel von oben und 100 Pixel von links von der oberen linken Ecke des Browserfensters entfernt platziert wird und dass diese Position in keinem Fall verändert wird. Sollen sich Elemente anderen in der Seite platzierten Elementen anpassen, hilft der Wert relative für das Attribut position weiter. Auf diese Weise werden Textblöcke, Grafiken und Ähnliches relativ zu ihrer standardmässigen Position im Fenster platziert. Allerdings ist mit diesem Wert Vorsicht geboten: Die Dinge werden damit sehr schnell ziemlich kompliziert.

Beide Positionierungsmethoden können auf jedes beliebige HTML-Element angewandt werden, Werte für das left- und top -Attribut können wie gehabt mit den üblichen Masseinheiten oder als prozentuale Werte definiert werden.

Mit diesen Eigenschaften lässt sich nun schon einiges anfangen. Die CSS-Spezifikation sieht aber noch mehr vor, sie lässt uns nämlich auch Höhe und Breite sowie die Sichtbarkeit der Elemente kontrollieren. Teilweise werden diese Attribute allerdings von den Browsern noch nicht unterstützt.

Keine Probleme zumindest mit Internet Explorer verursachen width und visibility. Mit dem Code

DIV {position: absolute; left: 150px; top: 10px; width: 200px}

wird definiert, dass der Block wie vorgesehen platziert wird, zusätzlich aber maximal 200 Pixel breit wird. Man kann diesem Beispiel nun noch das Attribut visibility: hidden hinzufügen, was bewirkt, dass der gesamte Block mitsamt seinem Inhalt zunächst verborgen bleibt - der dafür benötigte Platz wird allerdings trotzdem belegt. Text, der etwa um ein unsichtbares Bild fliesst, scheint eine leere Fläche zu umrahmen. Interessant wird dieses Attribut zusammen mit JavaScript, wo eine Aktion aufgrund eines Ereignisses ausgeführt werden kann. Wird also etwa auf einen bestimmten Text geklickt, könnte dort auf diese Weise ein zuvor unsichtbares Menü erscheinen. Den Anwendungsmöglichkeiten sind kaum Grenzen gesetzt.

z-index

Ein sehr wichtiges Attribut als Hilfsmittel bei der Positionierung von Elementen ist schliesslich der z-index . Wie soll der Browser nämlich mit exakt positionierten Elementen umgehen, die sich überschneiden? Z-Index gibt die Möglichkeit, dieses Problem zu lösen, indem die Reihenfolge der Elemente in der z-Achse definiert wird.

.pic {position: relative; left: 0px; top:0 px; z-index:1} 
DIV {position: absolute; left 10px; top: 10px; z-index:2}

Dieser Code platziert ein beispielsweise 300x500 Pixel grosses Bild genau in der linken oberen Ecke des Browserfensters. Damit der Text im DIV -Block, der je zehn Pixel von der Ecke entfernt positioniert wird, über dem Bild erscheint und damit lesbar ist, weisen wir ihm einfach einen höheren z-index-Wert zu.

Auf diese Weise lassen sich nicht nur Text mit Bildern, sondern auch verschiedene Textblöcke oder Bilder unter sich überlagern. Neue Möglichkeiten zeigen sich zusammen mit JavaScript und Dynamic HTML.