Cascading Style Sheets in html:

Cascading Style Sheets (abgekürzt CSS) sind ein probates Mittel, um genaue Angaben zum Erscheinungsbild der Elemente einer web-Seite zu bestimmen.
Obendrein: Die Verwendung von CSS wird mit Hinblick auf HTML >= 4.01 sowie XHTML / XML ausdrücklich empfohlen !
Somit soll das Aufblähen der html-Seiten durch unzählige Formatierungsanweisungen wieder rückgängig gemacht werden, obendrein kann man mit Hilfe von CSS das Erscheinungsbild einer Webseite sogar auf verschiedenen Ausgabemedien (Bildschirm, Drucker, Sprachausgabe etc.) beeinflussen.

Weitergehende Informationen und Details siehe (wie üblich) SelfHtml.

Allgemeines zu Cascading Style Sheets:

Neben Schrift und Farbe können Elemente genau positioniert werden, selbst Anweisungen für künstliche Sprachausgabesysteme sind möglich.

Diese Angaben werden weitgehend von Netscape ab der Version 4.x und vom IE ab 3.0 verstanden.

Der Vorteil von CSS besteht nicht nur darin, eine neue Sprache zur Formatierung von html-Elementen zu haben.

Ob man jetzt z.B. eine Tabellenzelle mit
<td><font color=#"FF0000">Knallroter Text</font></td>
mittels eines <font>-Tags so formatiert, daß enthaltener Text rot erscheint, oder mit
<td style="color:#FF0000;">Knallroter Text</td>
per style-Angabe im <td>-Tag erreicht, ist beinahe wurscht, da bei Tabellenzellen solche Angaben leider für jede Zelle einzeln gemacht werden müssen.

Interessanter sind die Möglichkeiten, CSS-Angaben zentral zu definieren, damit z.B alle Tabellenzellen durch eine einzige css-Anweisung gemeinsame Eigenschaften erhalten, bzw. daß Tabellenzellen, die mit <td class="beispiel"> ausgezeichnet wurden, die Eigenschaften annehmen, die eben für die Klasse "beispiel" definiert wurden.

Zurück zum Anfang dieses Dokumentes.


Zentrale StyleSheet-Angaben können vereinbart werden für:

Die zentrale Vereinbarung kann erfolgen

Zurück zum Anfang dieses Dokumentes.


Zentrale Definition von CSS-Angaben im head-Bereich einer html-Datei:

<head>
  <style type="text/css">
      td { color:#FF0000; font-family:Verdana,Arial,sans-serif; font-style:italic; font-size:12pt; font-weight:bold; }
      p  { color:#000000; font-family:"Century Schoolbook",Times,serif; font-size:12pt; } /* Bsp. für Kommentar im css-Absatz */
  </style>
</head>

CSS-Anweisungen stehen innerhalb des <style>-Tags.
Innerhalb der CSS-Anweisungen können wiederum Kommentare nach folgendem Schema stehen: /* Kommentartext */

Früher wurden html-Kommentare benutzt, um die eigentlichen CSS-Anweisungen einzubetten.
Dadurch sollten ältere Browser, die das unbekannte <style>-Tag ignorieren, davon abgehalten werden, die CSS-Anweisungen ungewollt auf der Seite darzustellen (mehr Infos).

Der folgende Link öffnet die zentrale CSS-Datei dieses Web-Projektes.

Zurück zum Anfang dieses Dokumentes.


Definition von CascadingStyleSheet-Angaben in einer externen css-Datei:

Oft ist es sinnvoll, in einem umfangreichen Web-Projekt mit vielen Seiten ein einheitliches Design durchzusetzen.

Werden in einem solchen Fall alle Angaben, die das Erscheinungsbild betreffen, in einer zentralen Datei gemacht, können alle html-Seiten davon Gebrauch machen, die diese zentrale css-Datei referenzieren.

<head>
  <link rel="stylesheet" type="text/css" href="formate.css" />
</head>

verweist im <head>-Bereich einer html-Datei auf eine externe Datei namens "formate.css", die CSS-Angaben enthält.

So eine Datei enthält nur reine CSS-Angaben und kann wie folgt aussehen:

p,td,b,i { font-family:Arial,sans-serif; }
/* hier wird für Text, der in den html-Elementen Absatz, Tabellenzellen, fetten und kursiven Text eine serifenlose Schrift zugewiesen. */

Zurück zum Anfang dieses Dokumentes.


Vereinbarung von Klassen:

Sowohl im html-Dokument wie auch in externen Dateien können CSS-Klassen definiert werden:

.allgemein1    { ... }
*.allgemein2   { ... }
body.schreiend { ... }
body.dezent    { ... }

Die Angaben ".xyz" und "*.xyz" entsprechen einander und werden auf alle html-Elemente angewendet, die über das Attribut class="xyz" verfügen.
Die Angaben "body.schreiend" und "body.dezent" steuern die Ausgabe der html-Seiten, deren <body>-Tag das Attribut <body class="schreiend"> oder <body class="dezent"> besitzt..

Zurück zum Anfang dieses Dokumentes.


Verschachtelung von CSS:

CSS-Definitionen können auch verschachtelt werden.

h2 i           { color:blue; }
table.vtop td  { vertical-align:top; }

Die erste Angabe bewirkt, daß Text, der innerhalb einer h2-Überschrift von einem <i>-tag-Paar (italic=kursiv) umschlossen wird, in der Farbe Blau erscheint.

Die zweite Zeile kann bei folgendem Problem helfen:

Tabellenzellen, bei denen Fließtext in kleinen Browserfenstern mehrfach umgebrochen wird, werden vertikal vergrößert. Text von kleinerer Menge, der in seitlich benachbarten Zellen steht, wird in der in der Höhe vergrößerten Reihe mittig angeordnet. In vielen Fällen ist es aber erwünscht, daß dieser weniger umfangreiche, benachbarte Text in der jeweiligen Zelle oben angeordnet wird.

In html gesprochen kann man in jedes <td>-tag das Attribut valign="top" einfügen.
In einer CSS-Variante würde statt dessen in <td>-tag z.B. eine Klassen-Angabe a'la class="obenanordnen" eingefügt werden.

Beide Varianten erzeugen bei umfangreicheren Tabellen mit vielen Zellen eine Menge zusätzlichen Quellcode.

Eine geschickte Lösung für den Fall, daß der Inhalt aller Zellen einer Tabelle vertikal oben ausgerichtet werden soll, kann so aussehen, wie in der zweiten Zeile beschrieben. Die CSS-Anweisung vertical-align:top; würde nur für Zellen gelten, deren Tabelle im <table>-tag die Klassen-Angabe class="vtop" enthält. Alle <td>-tags brauchen dann weder html-Attribute noch CSS-Klassen enthalten, um den gewünschten Effekt zu erreichen.

Zurück zum Anfang dieses Dokumentes.


sog. Pseudoformate (Links):

Mit den Pseudoformaten ":link, :visited, :hover, :active" kann das Aussehen von Hyperlinks in Abhängigkeit von folgenden Zuständen bestimmt werden:

:link = für Verweise zu noch nicht besuchten Seiten
:visited = für Verweise zu bereits besuchten Seiten
:hover = für Verweise, während der Anwender mit der Maus darüber fährt
:active = für gerade angeklickte Verweise
:focus = für Verweise, die per Tastatur (Tabulator-Taste) angesteuert werden.

Diese Pseudoformate müssen in genau dieser Reihenfolge eingegeben werden !

Sie wurden bereits in CSS 1.0 definiert und werden selbstverständlich vorwiegend von Netscape-Browsern nur unvollständig interpretiert.

Ein Beispiel:
a         { text-decoration:none; font-family:verdana,arial; font-weight:bold; }
a:link    { color:#FEFFCF; }
a:visited { color:#EDEEBE; }
a:hover   { color:#0000FF; }
a:active  { color:#FF0000; }
a:focus   { color:#0000FF; }

Ein solche Vereinbarung gilt dann für alle <a>-Verweise im Dokument.
Alternativ kann auch z.B. mit a.spezial:hover eine Unterklasse definiert werden, die dann nur für solche Links gilt, die mit <a class"spezial"> ausgezeichnet wurden.

Den folgenden zwei Beispiel-Links werden per CSS-hover-Definition animierte Gif-Grafiken zugewiesen, die als Hintergrund-Bild gekachelt werden:
Test-Link 1
Test-Link 2

In diesem Dokument ist im head-Bereich folgende CSS-Definition enthalten:

<style type="text/css">
  a.pulse1         { text-decoration:none; font-weight:bold; }
  a.pulse1:link    { color:#FFFFFF; }
  a.pulse1:visited { color:#00C000; }
  a.pulse1:hover   { color:#0000FF; background-image:url(ani_b_w.gif); }
  a.pulse1:active  { color:#00FF00; }
  a.pulse2         { text-decoration:none; font-weight:bold; }
  a.pulse2:link    { color:#FFFFFF; }
  a.pulse2:visited { color:#00AAAA; }
  a.pulse2:hover   { color:#0000FF; background-image:url(ani_b_w1.gif); }
  a.pulse2:active  { color:#00FF00; }
</style>

und die Links selbst wurden notiert als:

<a class="pulse1" href="#">Test-Link 1</a>
<a class="pulse2" href="#">Test-Link 2</a>

Zurück zum Anfang dieses Dokumentes.


CSS - und wieder Ärger mit Netscape (bis hin zu den 6er Versionen):

- Der Mist-Netscape interpretiert lokal die Verweise auf z.B. Bilder aus Sicht der html-Seite.
  Online passt es dann wieder, d.h., Referenzen werden relativ zur Position der CSS-Datei interpretiert.
  Entsprechend muß der relative Pfadverweis (z.B. "../") entfernt bzw. wieder angefügt werden.

- Um getrennte CSS-Dateien zu handhaben, die z.B. vom alten Netscape erst gar nicht gesehen werden sollen,
  kann ein simples "@import url(schwierige.css);" in einer CSS-Datei eingefügt werden.
  Allerdings dürfen Klassennamen nicht doppelt vorkommen, da macht der IE Ärger.
  Solche getrennte CSS-Dateien dürfen sich nicht überschneiden, sondern müssen sich ergänzen.

- Fügt man hingegen in dem html-Dokument folgendes ein:
    <link rel="stylesheet" type="text/css" href="einfache.css">
    <style type="text/css"> @import url(schwierige.css); </style>
  dann laden alle halbwegs CSS-fähige Browser zumindest die Datei "einfache.css".
  Bessere Browser laden danach noch die "schwierige.css".
  Bei dieser Variante dürfen sogar gleiche Klassennamen in den CSS-Dateien vergeben werden.
  Mit diesem Verfahren kann man z.B. in "einfache.css" auf z.B. bildschirmfüllende Hintergrundbilder für Netscape verweisen,
  während ein Nachladen der "schwierige.css" dann kleinere Grafiken referenziert, die nicht z.B. gekachelt und fixiert sein sollen.

- Ein "schmutziger" Trick, so etwas auf andere Art zu erreichen, kann per Javascript bewerkstelligt werden:
    <script type="text/javascript">GetBody("pics", "logoblass");</script>
  anstelle des <body>-Tags ruft folgende Funktion auf:

function GetBody(BildPfad, CssKlasse)
{
  if (document.all)            // simple Erkennung für MS-kompatible Browser, die mit CSS 1.0 klarkommen.
    document.writeln("<body class=\"" + CssKlasse + "\">");
  else
    if (CssKlasse == "logo")
      document.writeln("<body background=\"" + BildPfad + "/bgns.gif\">");
    else
      document.writeln("<body background=\"" + BildPfad + "/bgnsblass.gif\">");
}

- Ein "sauberer" Trick besteht darin, im head-Bereich ein Javascript aufzurufen, daß auf verschiedene CSS-Dateien verweist:
    <script type="text/javascript" src="inc/tools.js"></script>
    <script type="text/javascript">CheckFrameSet(); GetCssFile("inc");</script>
  referenziert zuerst eine javascript-Funktionen-Sammlung und ruft danach 2 Funktionen auf:
  - evtl. Nachladen eines Framesets und
  - Zuweisen einer Browser-spezifischen CSS-Datei.

  Die javascript-Funktion GetCssFile() sieht so aus:

function GetCssFile(Pfad)
{
  if (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5)
   document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"" + Pfad + "/ns4.css\">");
  else
    document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href='" + Pfad + "/formate.css'>");
}

Zurück zum Anfang dieses Dokumentes.


CSS - für verschiedene Ausgabemedien (Druck):

CSS-Anweisungen können auch so deklariert werden, daß sie für verschiedene Ausgabemedien wie Drucker oder Monitor verschieden interpretiert werden. 

@media print
{
  div.druckfuss  { position:absolute; bottom:50px; }
}
bewirkt, daß z.B. ein mit 
class="druckfuss"
gekennzeichneter Absatz bei der Ausgabe auf einem Drucker (oder auch die Seiten-Druckvorschau im Firefox-Brwoser) an den unteren Rand gesetzt wird, während die Bildschirmausgabe davon unbeeinflusst bleibt.

Mehrere Medien können mit 

@media screen, handheld ...
bezeichnet werden.

Gültige Medientypen sind 

all, aural, braille, embossed, handheld, print, projection, screen, tty, tv
.
Zurück zum Anfang dieses Dokumentes.

Zurück zur Startseite