Cascading Style Sheets, level 2

1.Einführung

Den Gestaltungsmöglichkeiten mit CSS setzen die Beschränkungen der Browser noch Grenzen. HTML bedeutet »Hypertext Markup Language« und ist eine sogenannte Auszeichnungssprache. Sie hat die Aufgabe, die logischen Bestandteile eines Dokuments zu beschreiben. Mit einer überschaubaren Anzahl von Befehlen ist sie von jedem leicht zu erlernen, der nur ein wenig Englisch versteht.

Was Anfängern allerdings immer wieder Probleme bereitet, ist die uniforme Darstellung der Befehle. So ist beispielsweise eine Überschrift 1. Ordnung mit <H1>...</H1> schnell notiert, aber wie bitte sagt man dem Browser, dass er die Überschrift nicht in dieser eintönigen Times- Schrift darstellen soll und gefälligst etwas mehr Abstand zum Text danach lassen soll?
Die Browser-Hersteller erfanden allerlei Notlösungen gegen den Gestaltungsnotstand in HTML. Es begann mit dem <BLINK>-Tag von Netscape, ging weiter über das <FONT>-Tag, mit dessen Hilfe man zumindest ein wenig mit Schriftarten, Schriftgrößen und Schriftfarben spielen konnte, bis zum <SPACER>-Tag, das Räume und Abstände schaffen sollte. Doch all dies ist letztendlich Stückwerk. Um es ganz deutlich zu sagen: Eine Textformatierung mittels dieser Tag's kann immer nur eine Notlösung sein
HTML ist und bleibt eine Sprache zum Definieren von Dokumentstrukturen und zur Verlinkung von Seiten. Zum Formatieren und exakten Positionieren von Elementen ist die Sprache nicht ausgelegt.

An dieser Stelle setzen die Cascading Style Sheets (CSS) an. Schriftformatierung, Positionierung, Abstände, Ränder, Rahmen, Hintergründe, Farben, praktisch alle Gestaltungswünsche lassen sich damit realisieren. Mit Style Sheets sind sogar zentrale, separat speicherbare Dokumentvorlagen realisierbar, wie man sie aus professionellen Textverarbeitungssystemen kennt. CSS ist die Trickkiste der Designer, Konzepte genau nach Wunsch umzusetzen. Dabei ist die Style-Sheet-Sprache nicht einmal schwer zu verstehen. CSS klinkt sich nahtlos in HTML ein.

Mittlerweise existiert bereits die zweite Version der CSS-Sprache. Bedauerlicherweise haben die Browser noch nicht gleichgezogen und unterstützen nur einen Teil der zur Verfügung stehenden Befehle. Nicht einmal darin sind sich aber die großen Browser-Entwickler einig.

• Netscape 4.x interpretiert einen Teil der CSS-Version 1.0 und ein paar Befehle der CSS- Version 2.0. In der aktuellen Version 6.x werden endlich etwa 80% der CSS Befehle erkannt
• Der MS Internet Explorer kennt einen großen Teil der CSS-Version 1.0 bereits seit seiner Produktversion 3.0. Seit Version 4.0 interpretiert er einen Teil der CSS-Version 2.0 und einige spezielle, von Microsoft eingeführte, Style-Sheet-Angaben.
• Opera erkennt viele StyleSheets erst seit der (aktuellen) Version 6
• Amaya 5.3. erkennt als Referenzbrowser des W3C alle Standards nach CSS2 - aber nur diese ! Im Zweifellsfall ist dieser Browser ausschlaggebend !

Hier der (valide) Quelltext der CSS dieses Dokumentes:
/* Kommentare werden wie in C geschrieben */
BODY {
Background-Color: #fff;
Font-Family: Arial, Helvetica, Sans-Serif;
color: #000;
font-size: 10pt;
}
A:link {
Font-Family: Times, Times New Roman, Serif;
font-size: 11pt;
Font-Weight: normal;
color: blue;
Background-Color: #fff;
text-decoration: underline;
}
A:visited {
Font-Family: Times, Times New Roman, Serif;
font-size: 11pt;
Font-Weight: bold;
Background-Color: #fff;
color: purple;
text-decoration: underline;
}
A:hover {
Font-Family: Times, Times New Roman, Serif;
font-size: 11pt;
Font-Weight: bold;
color: blue;
Background-Color: #fff;
text-decoration: underline;
}
A:active {
Font-Family: Times, Times New Roman, Serif;
font-size: 11pt;
Font-Weight: bold;
color: red;
Background-Color: #fff;
text-decoration: underline;
}
LI {
Color: #000;
Background-Color: #fff;
Font-Family: Arial, Helvetica, Sans-Serif;
Font-Size: 8pt;
Font-Weight: normal;
Font-Style: normal;
Text-Align: left;
}
H1 {
Color: #008;
Background-Color: #fff;
Font-Family: Arial, Helvetica, Sans-Serif;
Font-Size: 18pt;
Font-Weight: bolder;
Font-Style: normal;
Text-Align: left;
letter-spacing: 5px;
}
#KLEIN {
font-family: Arial, Helvetica, Sans-Serif;
color: silver;
Background-Color: #fff;
font-style: normal;
text-align: center;
font-size: 8pt;
}
#QUELL {
font-family: Courier, Courier New, System;
color: red;
Background-Color: #ffc;
font-style: normal;
Font-Weight: bold;
text-align: center;
font-size: 10pt;
}
#KLEINQUELL {
font-family: Courier, Courier New, System;
color: #F00;
Background-Color: #ffc;
font-style: normal;
Font-Weight: normal;
text-align: left;
font-size: 8pt;
}
#FETT {
font-family: Arial, Helvetica, Sans-Serif;
color: black;
Background-Color: #fff;
font-style: normal;
Font-Weight: bold;
text-align: center;
font-size: 12pt;
letter-spacing: 1px;
}

bezahlte Bannerwerbung:

CSS Tutorial - ein Service von topwebHamster

diesen Button dürfen Sie auf Ihre Website einfügen, wenn sie die Prüfung des CSS- Validators http://jigsaw.w3.org/css-validator/validator-uri.html bestanden hat.