Tutorial zu Cascading StyleSheets
Einführung

Cascading StyleSheets (CSS, "kaskadierende Formatvorlagen") gibt es schon seit 1996. Dennoch können erst die Browser ab Version 4 diese Formatvorlagen weitgehend korrekt interpretieren. Es gibt jedoch noch Unterschiede zwischen den Darstellungen der einzelnen Browser.

Mit CSS können Sie die Darstellung der HTML-Elemente steuern. D.h., Sie können in den CSS-Angaben festlegen, wie bestimmte Bereiche des darzustellenden HTML-Dokuments aussehen sollen.

Z.B. können Sie...

  • die Schriftgröße und Schriftart für das ganze Dokument fest definieren;
  • festlegen, dass einzelne Elemente an von Ihnen gewünschten Bildschirmpositionen dargestellt werden;
  • multimediale Ausgaben einbauen (z.B. stehen in den CSS auch Befehle für Sprachausgabe oder für diverse Grafikausgaben zur Verfügung; doch leider wird dies momentan noch schlecht bis gar nicht durch die Browser unterstützt.)

Einsatz der Style-Sheets in Webseiten

Die Definition der CSS-Angaben wird innerhalb des "head"-Tags vorgenommen. Es gibt 2 Möglichkeiten:

  • die Definition der CSS im HTML-Dokument oder
  • den Verweis auf eine ausgelagerte CSS-Datei, welche die Definitionen enthält.
Insbesondere wenn dieselben Style-Sheets für mehereren HTML-Seiten genutzt werden sollen, empfiehlt sich der Einsatz einer CSS-Datei.

Mit Hilfe der folgenden Beispiele sehen Sie die Einsatzmöglichkeiten von Cascasding StyleSheets. Auch wenn alle Beispiele getestet wurden, kann es zu unerwarteten Effekten bei individuellen Browsern und Plattformen kommen.

Inhalt:

1.) Formatierung der Schrift innerhalb fest definierter HTML tags
2.) Zeichen- und Wortabstände mit CSS-Style-Sheets
3.) Erweiterte Möglichkeiten der Textauszeichnung
4.) Rahmen und farbiger Texthintergrund
5. und 5.a) Freies Positionieren von Schriftzügen und Grafiken
6.) Style Sheet Angaben in eine CSS-Datei auslagern.

// !! //

Beispiel 1. Formatierung der Schrift in <style>Tags:

<html>
<head>
<style type="text/css">
<!--
p {
font-family:arial;
font-size:smaller;
font-style:italic;
font-weight:light;
color:red;
}
//-->
</style>
</head>
<body>
<div> Dieser Text steht in einem <tt>div</tt>-Element. </div>
<p> Dieser Text steht in einem <tt>p</tt>-Element. </p>
</body>
</html>

Und so sieht's im Browser aus...

Erklärung des Codes:

Mit <style type="text/css"> wird die CSS-Definition eingeleitet. Wie bei JavaScript weist diese Angabe den Browser auf die nachfolgenden Style-Sheets hin. Ohne diese Angabe kann der Browser die entsprechende HTML-Seite nicht korrekt darstellen.

Übrigens: Die Formatvorlagen werden als Kommentar in das HTML-Dokument eingebunden, damit, falls der Browser eine CSS-Spezifikation nicht kennt, er diese nicht als darzustellenden Text ansieht.

Der Buchstabe p bezeichnet das HTML-Element, für das die in geschweiften Klammern folgende Definition gelten soll. Hier bedeutet das also, dass nur das Element "p" Formatvorlagen bekommt. Grundsätzlich können für alle HTML-Elemente StyleSheets definiert werden, wenn sie im Browserfenster dargestellt werden können.

Mit einer geschweiften Klammer wird die CSS-Spezifikation geöffnet. In unserem Fall werden 5 CSS-Angaben zur Formatierung des Textes verwendet.

"font-family:arial" - Definiert die zu verwendenen Schrift. Es sollten möglichst keine ausgefallenen Schriften verwendet werden, die für den lokalen Browser eventuell nicht vorhanden sind. Greifen Sie lieber auf Standardschrifttypen (arial, helvetica, courier) zurück.

"font-size:smaller" - Definition der Schriftgrösse. Weitere Größen: x-small, medium, large, larger,.. .

"font-style:italic" - Definition des Schriftstils. In diesem Fall ist es kursiv. Es gibt neben italic noch oblique (kursiv) und normal.

"font-weight:light" - Defintion der Schriftstärke. Auch hier existieren verschiedene Alternativen: bold = fett, lighter = dünner, normal = normal. Es kann auch mit numersichen Angaben gearbeitet werden. Die Zahlenreihe reicht von 100 bis 900: Je höher der Wert, desto fetter die Schrift.

"color:red" - Definition der Schriftfarbe.

Sie können innerhalb der geschweiften Klammern beliebig viele CSS-Angaben setzen. Die Angaben werden stets durch ein Semikolon getrennt!


Beispiel 2. Zeichen- und Wortabstände mit CSS:

<head>
<style type="text/css">
<!--
p {word-spacing:5mm; text-align:center}
//-->
</style>
</head>


Erklärung des Codes:

Im Gegensatz zu Beispiel 1 wurden hier alle CSS-Angaben in eine einzige Zeile geschrieben. Der Browser interpretiert beide Schreibweisen gleich.

"word-spacing:5mm" - Definition der Wortabstände. Die Wörter haben hier einen absoluten Abstand von 5mm. Die absoluten Abstände können auch in anderen Maßeinheiten angegeben werden: Z.B. pt (Punkt), cm (Zentimeter) und in (Inch).

Neben den absoluten die relativen Abstände. Die wichtigsten sind px und %.

  • px hängt ab von der jeweiligen Bildschirmauflösung des Browsers
  • % steht in Bezug zur Schriftnorm des jeweiligen Elements.
Der Unterschied: die absoluten Angaben sind durch den Einsatz von Maßeinheiten immer gleich (1mm = 1mm), doch die relativen Maßeinheiten stehen immer in Bezug auf eine veränderliche Größe und können unterschiedlich sein!

"text-align:center" - Definition der Textausrichtung. Erlaubt sind die drei aus HTML gängigen Angaben center, right und left. Hiermit haben Sie die Möglichkeit, jeden neuen Textabsatz oder auch nur ein Wort entsprechend auf dem Bildschirm auszurichten.

 

Beispiel 3. Erweiterte Möglichkeiten der Textauszeichnung.

<html>
<head>
<style type="text/css">
<!--
.weg {text-decoration:line-through}
#unter {text-decoration:underline}
//-->
</style>
</head>
<body>
<span class="weg">
Dieser Text wird durchgestrichen angezeigt.</span>
<span id="unter">
Dieser Text wird unterstrichen angezeigt.
</span>
</body>
</html>

So sieht's im Browser aus...

Erklärung des Codes:

Neben dem neuen Befehl fällt gleich eine andere Neuerung ins Auge. Die Einbindung findet nicht mehr wie gewohnt durch Zuweisung eines HTML Tags statt. Statt dessen finden wir in unserem Beispiel ".weg" und "#unter" vor.

".weg" - Definition einer Klasse. Diese Klasse kann in beliebige Tags integriert werden. In unserem Beispiel wenden wir die Klasse mit dem HTML Tag "span" an. Der wirkliche Vorteil an dieser Form der Einbindung liegt darin, dass Sie die Klassen nicht zwingend an ein bestimmtes HTML Tag binden. Sie können sie an beliebigen Stellen Ihrer HTML Seite erneut einsetzen. Sollte z.B. in einer nachfolgenden Aufzählung der Einsatz wieder erforderlich sein, so verwenden Sie einfach die Klasse erneut im entsprechenden Tag (also hier "<li class="weg">" wäre).

"#unter" - Definition eines unabhängigen Formates. Vom Prinzip her von der Wirkung ähnlich wie eine Klasse.

"text-decoration:underline" - Mit dieser Syntax haben wir die Möglichkeit Worte oder Textabschnitte z.B zu unterstreichen (underline), durchzustreichen (line-through), überstreichen (overline) oder blinkend (blink) darzustellen. Vorsicht bei overline und blink: Netscape hadert mit overline und IExplorer mit blink.


Beispiel 4. Rahmen und farbiger Texthintergrund.

<html>
<head>
<style type="text/css">
<!--
.rahmen {
width:150px;
background-color:#FFFFCC;
border-style:solid;
border-width:2px;
border-color:red;
}
//-->
</style>
</head>
<body>
<div class="rahmen">Dieser Text wird eingerahmt und mit
einem gelbwei&szlig;en Hintergrund angezeigt</div>
</body>
</html>

So sieht's im Browser aus...

Erklärung des Codes:

Die in diesem Beispiel neu hinzugekommenen eröffnen vielfätige gestalterische Möglichkeiten; jedoch werden hier erste grobere Unterschiede in der Interpretation der einzelnen Browser sichtbar.

Hierzu ein kleines Beispiel: Sie möchten um einen Absatz einen Rand erzeugen. Daraufhin notieren Sie in den CSS-Style-Sheet Angaben: border-width:5px;, denn es soll aus Ihrer Sicht nur ein Rand der Stärke 5px gezogen werden, die Art der Darstellung spielt kein Rolle.
Resultat: Netscape zeigt den Rand an, der IExplorer nicht...
Erklärung: Der IExplorer zeigt den Rand nur an, wenn neben der Rahmendicke auch die Art der Rahmenformatierung notiert wurde (z.B. border-style:solid;).

Beim Einsatz von border-color:FARBE; ergibt sich die gleiche Problematik. Auch hier wird der IExplorer keinen farbigen Rahmen ohne die Notierung der border-style Angabe anzeigen.

Eine weitere Eigenart des IExplorer findet sich in der Interpretierung der Rahmenweite: Während der Netscape Navigator die Weite der längsten Zeile im Absatz anpasst, orientiert sich der IExplorer an der Breite des Bildschirms. Verwenden Sie deshalb immer die Angabe width:BREITENANGABE; . So mit können Sie die verschiedenen Interpretationen umgehen.

"width:150px" - Allgemeine Formatierung der Breite. Die üblichen Einheiten sind: cm,px und %.

"background-color:#FFFFCC" - Formatierung der Hintergrundfarbe. Hiermit lassen sich Textabsätze oder auch nur einzelne Worte farblich hinterlegen.

"border-style:solid" - Formatierung der Darstellung des Rahmens. Es gibt zwei grundsätzliche Gruppen:

  • 2-dimensionale Darstellung
    • solid (normal durchgezogen),
    • double (doppelt durchgezogen),
    • dashed (gestrichelt - - - - )
    • dotted (gepunktet .....).
  • 3-dimensionelle Darstellung
    • ridge,
    • groove
    • outset

"border-width:2px" - Formatierung der Rahmenstärke. Die Stärke des Rahmen wird üblicherweise in px (Pixel) oder cm (Zentimeter) notoert.

"border-color:red" - Formatierung der Rahmenfarbe. Die Rahmenfarbe kann namentlich oder Hexadezimal notiert werden.

  weiter zu Seite 2

©2001 de Vries