Diese Seite wird nicht zur Online-Ansicht empfohlen und das Verhalten der Links wird fehlerhaft sein; sie ist aber nützlich, wenn Sie die Anleitung zu Cascading Style Sheets aus dem Webbrowser heraus drucken wollen. Beachten Sie auch, daß die Seiten über Style Sheets mit HomeSite hier nicht enthalten sind, sondern in der kompletten Anleitung der Anleitung zu HomeSite 2.5 nachzulesen sind.

Wenn Ihre Bildschirmauflösung auf 640x480 Pixel steht, sollten Sie vielleicht besser diesen Abschnitt ohne seitliches Menü ansehen.

1. Inhalt
2. Einführung
3. Vorteile
4. Einschränkungen
5. Einbinden
6. Vorrang
7. Vererbung
8. Styles angeben
9. Eigenschaften und Werte für Fonts
10. Eigenschaften und Werte für Text
11. Eigenschaften und Werte für Hintergrund und Farben
12. Eigenschaften und Werte für Boxen
13. Eigenschaften und Werte für Klassifikationen
14. Eigenschaften und Werte für Positionierung
15. Eigenschaften und Werte für den Ausdruck
16. Eigenschaften und Werte für Filter
17. Eigenschaften und Werte für Fonts
18. Eigenschaften und Werte für Text
19. Eigenschaften und Werte für Hintergrund und Farben
20. Eigenschaften und Werte für Boxen
21. Eigenschaften und Werte für Klassifikationen
22. Eigenschaften und Werte für Positionierung
23. Eigenschaften und Werte für den Ausdruck
24. Eigenschaften und Werte für Filter
25. Beispiele für Filter
26. Andere Eigenschaften und Werte
27. Schriften
28. Farben
29. Spezielle Effekte: Overlays
30. Positionieren in Netscape 4.0x
31. Positionieren in Internet Explorer 4.0x
32. Positionieren in Internet Explorer 3.0x
33. Overlays mit Scripts
34. Style Sheet Links mit Scripts
35. Einheiten
36. Weitergehendes
37. Beispiel für ein Style Sheet
38. Übung
39. Übung II
40. Style Sheet-Editoren
41. Komplette Anleitung (Auf einer Seite: nicht empfohlen zur Online-Betrachtung, aber nützlich, wenn Sie diese Anleitung aus dem Browser heraus drucken wollen; beachten Sie, daß diese Komplett-Anleitung nicht die Seiten über Style Sheets mit HomeSite enthält, die stattdessen in der Komplett-Anleitung in der Anleitung zu HomeSite 2.5 zu finden sind.)

Style Sheets mit HomeSite 2.5

1. Werkzeugleiste für Styles
2. Styles einfügen
3. Embedded Styles
4. Linked Style Sheets

Style Sheets für das Web wurden schon vor einigen Jahren vorgeschlagen und werden seitdem entwickelt, aber erst seit kurzer Zeit haben sie breite Beachtung gefunden. Der Grund ist, daß Style Sheets nutzlos sind, solange sie nicht von Browsern unterstützt werden, und kein verbreiteter Browser tat das, bevor Microsoft teilweise Unterstützung von Cascading Style Sheets (CSS) in Version 3.0 des Internet Explorer anbot. Unterstützung von Style Sheets ist gegeben in IE 3.0 und höher sowie in Netscape 4.0 und höher.

Dieser Abschnitt bietet einen Überblick über CSS, über die Vorteile und Einschränkungen beim Benutzen von Style Sheets und eine Anleitung zu deren Benutzung. Dieser Abschnitt basiert selbst auf Style Sheets, und wenn Sie mehrere Browser haben, sollten Sie vielleicht die Darstellung dieser Seiten z.B. in Internet Explorer (3.0 oder höher) und einem anderen Browser, der keine Style Sheets unterstützt (z.B. Netscape 3.0 oder früher) vergleichen. Beachten Sie, daß Sie die Auswirkungen der Style Sheets nur sehen könenn, wenn Sie die Seiten mit Internet Explorer oder Netscape Communicator 4.0 (oder höher) ansehen.

Zuerst sollte gesagt werden, daß so ziemlich alles, was Sie mit Style Sheets anstellen können, auch mit konventionellen HTML Tags erreicht werden kann (es gibt einige Ausnahmen, und manche Sachen können nur mit kniffligen HTML-Tricks dargestellt werden). Trotzdem bleiben einige gewichtige Vorteile durch die Benutzung von Style Sheets:

1. Logische Trennung von Informationsstruktur und -formatierung

Im Guide to HTML (engl. Original) wird HTML beschrieben als ein System zur Formatierung von Dokumenten; praktisch gesehen ist das korrekt, aber es entspricht nicht dem Grundgedanken von HTML. Ursprünglich wurde HTML als System zur Strukturierung von Informationen entwickelt, das den relativen Status von Informationsblöcken (Hauptüberschrift, Unterüberschrift, normaler Absatz usw.) auszeichnen und es dem lokalen Browser überlassen sollte, darüber zu entscheiden, welche Formatierung benutzt werden sollte, um die jeweilige Struktur darzustellen. Dieses Design resultierte aus der Idee, daß Web-Dokumente komplett unabhängig von speziellen Voraussetzungen der Plattform oder der Software sein sollten. Es passt auch zur traditionellen Beziehung zwischen Autoren und Herausgebern von gedruckten Texten, wo der Autor den Inhalt und die Informationsstruktur vorgibt und der Herausgeber entscheidet, wie der Text genau aussehen soll. Textverarbeitungen und Systeme zum Desktop Publishing haben allerdings viel von der Entscheidung über das Aussehen des Textes, genau wie über den Inhalt, zurückgegeben in die Hände der Autoren, und viele Autoren sind recht zurückhaltend, wenn sie jetzt diese Macht zurück in die Verantwortung der Webbrowser zurückgeben sollen.

In der Konsequenz wurde HTML zu einer komplexen und recht unordentlichen Kombination von Tags zur Strukturierung und zur Formatierung, was das Verwalten einer großen und komplexen Website sehr schwierig macht (wenn Sie z.b. das FONT Tag benutzen und eine Schriftart auf einer Reihe von Seiten ändern wollen, können Sie Stunden damit zubringen, alle Stellen zu finden, wo das Tag auftaucht). Style Sheets erlauben es Ihnen nun, die Formatierungscodes, die auf mehrere Seiten angewandt werden, zu isolieren, so daß generelle stilistische Änderungen durch Editieren einer einzigen Datei erreicht werden können.

2. Reduzieren der nötigen Bandbreite und der Ladezeit

Wenn ein Benutzer eine Webseite anfordert, dann muß der Browser den gesamten HTML-Code auf der Seite untersuchen, um sie darzustellen. Wenn Sie eine menge komplexer Formatierungen auf Ihrer Seite haben, muß der Browser auf jeder Seite sehr viel prüfen. Durch Auslagern dieser Formatierungsinformationen in ein einzelnes Style Sheet, auf das die einzelnen Seiten verweisen, reduzieren Sie die Menge von Code in den entsprechenden Seiten und verringern dadurch die Datenmenge, die übermittelt und überprüft werden muß. Das bewirkt schneller geladene Seiten und damit glücklichere Benutzer.

Nach dem Lesen der vorherigen Seite fragen Sie sich jetzt vielleicht "Warum soll ich dann nicht für alle Webseiten Style Sheets verwenden?" Der erste Teil der Antwort ist: das sollten wir wahrscheinlich tun. Der zweite Teil allerdings ist: es ist noch nicht so einfach, wie es wohl sein sollte.

Die Probleme sind vielfältig und zusammenhängend. Selbst jetzt, wo CSS sowohl von Internet Explorer als auch von Netscape unterstützt werden, von denen einer von der großen Mehrheit der Websurfer benutzt wird, gibt es immer noch eine große Zahl von Benutzern, die ein ältere Version von Netscape als 4.0 einsetzen, und sogar manche, die noch IE 2.0 verwenden. Das ist an sich kein großes Problem, solange Sie dafür sorgen, daß Seiten, die Styles verwenden, auch von Browsern ohne Unterstützung für CSS akzeptabel dargestellt werden. Ein zweiter und ernsterer bedenklicher Punkt ist, daß bis jetzt die Implementierung von CSS zwischen Netscape und IE variiert und selbst zwischen IE 3 und 4. Um das zu umgehen haben Entwickler zwei Optionen:

1. sehr einfache Style Sheets zu schreiben, die mit allen drei Browsern funktionieren
2. ein JavaScript zu verwenden, um den Browsertyp des Benutzers zu erkennen und dann entsprechend auf verschiedene Style Sheets zu verweisen (und in manchen Fällen unterschiedliche Codezeilen zu schreiben). Ein Script, das diese Aufgabe übernimmt, wird später in dieser Anleitung vorgestellt

Zusätzlich sollten Webautoren folgendes berücksichtigen:

• Wenn Sie in einem Intranet arbeiten, dessen Benutzer keinen CSS-fähigen Browser einsetzen, hat der Einsatz von Style Sheets wenig (keinen) Sinn
• Wenn Sie Style Sheets für ein allgemeines Internet-Publikum einsetzen möchten, sollten Sie Sorgfalt walten lassen, damit Benutzer mit Browsern ohne CSS-Fähigkeiten immer noch eine akzeptable Darstellung Ihrer Seiten erreichen

Wenn Sie diesen zweiten Weg gehen wollen, werde ich später einige Tips geben, um Ihre Seiten kompatibel sowohl zu CSS- als auch nicht-CSS-Browsern zu gestalten, lassen Sie mich aber hier einige generelle Vorsichtsmaßnahmen darstellen:

• Wenn Sie daran denken, zwar Style Sheets zu benutzen, aber die ganzen normalen Formatierungscodes für nicht-CSS-Browser beizubehalten, dann tun Sie's nicht: das verfehlt den Zweck gründlich (die lokale Formatierung wird die Styles übergehen und Sie werden nur mehr Bandbreite brauchen, um Styles zu übertragen, die am Ende gar nichts tun)
• Wenn Sie daran denken, parallel Seiten mit und ohne Style Sheets zur Verfügung zu stellen, dann tun Sie's nicht: jeder, der den Gedanken schon einmal hatte und das versucht hat, wird Ihnen bestätigen, daß die Verwaltung von parallelen Seiten ein Alptraum ist, den man nicht mitmachen sollte, solange man nicht 1) zu Tode gelangweilt ist und einen Weg sucht, effektiv Zeit zu vergeuden, oder 2) unter Androhung von Gewalt dazu gezwungen wird...

Das Fazit lautet: wenn Sie im Internet Style Sheets verwenden wollen, müssen Sie bereit sein, den Preis zu zahlen, daß manche Benutzer (hoffentlich eine schnell sinkende Zahl) ziemlich karge Seiten zu sehen bekommen werden.

Styles können auf verschiedene Arten in Dokumente eingefügt werden:

1. durch linking (Verbinden) einer separaten Style Sheet-Datei mit einer oder mehreren Webseiten

   Das ist die Methode, die ich empfehle, weil sie es erlaubt, ein einziges Style Sheet für viele Seiten, vielleicht sogar für Ihre ganze Site zu verwenden, was am effizientesten ist. (Das funktioniert unter Umständen nicht, wenn Sie dazu neigen, die Formatierung auf jeder Seite stark abwandeln, was aber generell keine gute Idee im Sinne der effektiven Kommunikation ist.) Es trennt auch die Styleangaben völlig von den Inhalten der Seiten, was verhindert, daß Browser ohne CSS-Fähigkeiten die Styleinformationen für Seiteninhalte halten.

   In diesem Fall definieren Sie die Styles in einer separaten Datei mit der Endung .css und verweisen darauf mit einem link-Tag, das in den Abschnitt head jeder HTML-Datei eingebaut wird, die das jeweilige Style Sheet benutzen soll:

   Beispiel

   <html>
   <head>
   <link rel=STYLESHEET href="../../styles/ie4.css" type="text/css">
   <title>...</title>
   </head>
   <body>...

   Beachten Sie das Attribut "type=text/css", auch benutzt im <style> Tag unten, wodurch diese Angabe als Cascading Style Sheet identifiziert wird. (Die neueste Version des Internet Explorer benötigt das nicht mehr, aber es ist am sichersten, es einzubauen, da andere Browser es vielleicht brauchen, wenn sie die Unterstützung für Style Sheets einbauen.)

2. durch embedding (Einbetten) eines Style Sheets in eine einzelne Webseite

   In diesem Fall definieren Sie die Styles in einem style-Tag, das zwischen dem <html>-Tag und dem <body>-Tag steht:

   Beispiel

   <html>
   
   <style type="text/css">
   <!--
   P { font-size: 10pt; font-family: "Verdana, Arial, Sans-Serif"; color: #000066 }
   H1 { font-size: 16pt; font-family: "Impact, Arial, Sans-Serif"; color: #990000 }
   -->
   </style>
   
   <head>...</head>
   <body>...

   Beachten Sie, daß die genauen Style-Angaben (auf die ich auf den folgenden Seiteneingehen werde) in einem comment (Kommentar)-Tag eingebettet sind -- das stellt sicher, daß Browser, die keine CSS unterstützen, diese Zeilen als darzusstellenden Inhalt interpretieren.

3. durch Hinzufügen von inline style attributes zu Tags wie <p>, <div> oder <span>

   In diesem Fall geben Sie einen Style für einen einzelnen Block Text an oder benutzen das <span>-Tag, um den Style für ein Wort oder einen Satz anzugeben:

   Beispiel

   <div style="margin-left: 0.5in; font-size: 10pt">
   Das würde einen eingezogenen Absatz mit
   <span style="font-weight: bold; background: #FFFF00">hervorgehobenem Text</span>
   darin ergeben
   </div>

In manchen Fällen könnte es vorkommen, daß Sie unterschiedliche Funktionen von Styles für den gleichen Text durch eine Kombination eines "linked style sheet", eines "embedded style tag" und von "inline style attributes" verwenden. Wenn diese unterschiedlichen Angaben untereinander in Konflikt geraten, muß der Browser entscheiden, welcher Wert davon zu benutzen ist. Die Auswahl geschieht auf der Grundlage einer Regel der Rangfolge [precedence] (das ist es, was durch cascading Style Sheets ausgedrückt wird; die Styles bauen aufeinander auf).

Die Rangfolge der Cascading Style Sheets ist wie folgt:

• inline styles attributes haben Vorrang vor embedded style tags
• embedded style tags wiederum haben Vorrang vor linked style sheets

Es ist wichtig, sich diese Anordnung einzuprägen, damit Sie wissen, welche Werte von Style andere überschreiben.

Ein weiteres grundlegendes Konzept, bevor wir uns den Details der Definition von Styles eidmen. Wie wir auf den folgenden Seiten sehen werden, kann man Style-Angaben sowohl für linked style sheets als auch embedded style tags für verschiedene HTML-Elemente wie <p>, <h1>, <li>, <table> usw. machen. Einiges an zusätzlicher Flexibilität bei Styles kann durch Style-Vererbung (inheritance) erreicht werden. Vererbung bedeutet, daß Sie zusätzliche Klassen (classes) jedes Elements angeben können, und jede Klasse wird einige der Style-Angaben des Grundelements erben, solange nicht explizit neue Werte eingetragen werden oder die jeweilige Funktion nicht vererbt wird. (Die Tabelle der Eigenschaften (properties) zeigt, welche vererbt werden und welche nicht.)

Beispiel

P
{
font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif', 'Helvitica';
font-weight: bold;
font-size: 11pt;
color: #000066;
position: relative;
margin-left: 1cm;
}

erstellt einen Absatz, der so aussieht wie dieser... während

P.small
{
font-family: 'Arial', 'Sans-Serif';
font-weight: normal;
font-size: 8pt;
text-align: center;
}

einen Absatz mit diesem Aussehen produziert.

Um den Basisabsatz zu erstellen, würden Sie einfach ein <p>-Tag benutzen, und zum Darstellen des kleinen, zentrierten Absatzes würden Sie das Attribut class=small hinzufügen (<p class=small>). Beachten Sie, daß auch generelle Klassen definiert werden können, die dann mit beliebigen HTML-Elementen Verwendung finden:

Beispiel

.note
{
font-size: 10pt;
color: #006600;
background: #FFFFFF;
position: relative;
padding: 2pt;
border-width: thin;
border-style: ridge;
}

Ist diese Klasse definiert, dann wird ein von <blockquote class=note> umgebener Absatz so wie dieser aussehen. (Die Umrandung ist nicht sichtbar, wenn Sie IE 3.x einsetzen)

Achten Sie darauf, daß nur eine Ebene von Klassen erlaubt ist: eine Klasse P.note.red wird nicht funktionieren.

Spezielle Klassen für Links

Sie sollten sich auch der vordefinierten Klassen für das <a>-Tag bewusst sein:

A.link { color: #FFFF00 }
A.visited { color: #990099 }
A.active { color: #FF0000 }

Wenn Sie wollen, daß Links und bereits besuchte Links sich durch unterschiedliche Farben hervorheben, wie wir es von den meisten Webseiten gewohnt sind, dann müssen diese Klassen in Ihren Style Sheets definiert sein. Und es gibt noch eine Einschränkung: die Klasse A.active wird von Internet Explorer noch nicht unterstützt. Das ist schade, da der aktive Link bei Seiten in Frames nützlich sein kann, bei denen ein Frame den Inhalt eines Abschnitts darstellt (d.h. die Farbänderung des aktiven links würde automatisch den derzeitigen Standort des Benutzers in der Inhaltsliste kennzeichnen, ein Effekt, den Webdesigner normalerweise durch komplizierte und ineffiziente Mittel erreichen). Da die Klasse A.active aber möglicherweise nützlich werden kann, empfehle ich trotzdem, sie jetzt schon in Ihren Style Sheets einzubauen, damit sie schon da ist, wenn die Unterstützung dafür eintrifft -- bis dahin wird sie bestimmt nicht schaden.

Es gibt einige andere vordefinierte "pseudo-classes" für die erste Zeile und den ersten Buchstaben von Textblocks, aber diese werden noch nicht von Internet Explorer unterstützt.

Allgemein gesprochen ist Vererbung eine machtvolle Abkürzung zum Erstellen von Variationen eines Styles, in der gleichen Art, in der Vererbung es objekt-orientierten Programmierern erlaubt, effizient Variationen von Objekten zu erstellen (Style Sheets zu erstellen ist eigentlich eine sehr einfache Form des objekt-orientierten Programmierens). Gelegentlich kann aber die Vererbung zu einem Ärgernis werden, da bestimmte Eigenschaften vererbt werden, die Sie eigentlich nicht haben wollten (wir werden später ein Beispiel sehen).

Wie Sie vielleicht schon beim Betrachten der Beispiele auf den vorhergehenden Seiten gesehen haben, werden Styles angegeben als Paare property: value (Eigenschaft: Wert), die durch Strichpunkte getrennt sind. Jeder Wert kann durch Anführungszeichen umgeben sein und Werte aus mehreren Wörtern wie "Trebuchet MS" sollten es immer sein; daran sollten Sie besonders dann denken, wenn Sie einen HTML-Editor verwenden, um Eigenschaften und Werte automatisch einzusetzen, da viele die Anführungszeichen weglassen.

Inline Styles

Bei inline styles wird die Textkette aus den Paaren property: value in Anführungszeichen eingeschlossen und als Wert für das Attribut style gesetzt:

<li style="font-size: 10pt; font-weight: bold">

Linked und Embedded Styles

Bei linked style sheets oder embedded style tags werden die Style-Angaben für verschiedene selectors (jedes HTML-Element kann ein Selector sein) gesetzt. In diesem Fall sind die Paare property: value der Style-Definition in spitzen Klammern (braces) eingeschlossen, die nach dem Selector stehen:

H2
{
font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
font-weight: bold;
font-size: x-large;
color: #660066;
}

Beachten Sie, daß für den Fall, daß einer der Werte aus mehreren Wörtern besteht (wie im Fall der Werte für font-family im obigen Beispiel) jeder Wert in der Liste für diese Eigenschaft von Anführungszeichen umgeben sein sollte.

Erinnern Sie sich auch daran, daß Sie mehrere Klassen (aber nur eine Ebene tief) für einen Selector angeben können, um die Styleangaben zu variieren, wie wir es bei der Erklärung von Vererbung sahen.

Styles im Kontext

Schließlich sollten Sie auch wissen, daß sie contextual Styles erstellen können, indem Sie zwei Selectors kombinieren:

P STRONG { color: #FF0000 }

Dieser Style würde nur Text betreffen, der innerhalb eines STRONG Elements steht und dieses wiederum in einem PARAGRAPH Element. Wenn Sie möchten, daß mit STRONG ausgezeichneter Text vom Kontext unabhängig immer gleich aussieht, dann erstellen Sie einfach ein simples Style mit STRONG als Selector:

STRONG { color: #FF0000 }

In beiden Fällen müssen Sie wissen, daß jede andere Styleangabe für das Element, in dem der Text mit Auzeichnung STRONG auftaucht, wirksam bleibt, solange die Styleangabe für STRONG diese nicht explizit überschreibt.

Unten finden Sie eine Tabelle der Style-Eigenschaften und -Werte für Fonts (Schriftarten) -- andere Eigenschaften und Werte sind auf den folgenden Seiten aufgeführt. (Ich habe hier nur Eigenschaften und Werte aufgenommen, die im Moment von Internet Explorer und Netscape erkannt werden -- weitere werde ich hinzufügen, sobald sie unterstützt werden)

Häufig benutzte Eigenschaften und Werte für Cascading Style Sheets

Legende der Tabelle
Unterstützt von Internet Explorer 3.x Unterstützt von Internet Explorer 4.x Unterstützt von Netscape 4.x	pt = points (Punkte) in = inches (Zoll) cm = centimeters (Zentimeter) px = pixels (Pixel) em = Höhe der Schriftart des jeweiligen Elements (die Einheit em wird noch nicht häufig unterstützt und sollte sehr vorsichtig eingesetzt werden)

	Eigenschaft	Beschreibung	Werte	Beispiel
Schrift-Eigenschaften
	font-size (Schriftgröße; wird vererbt)	Legt die Größe des Texts fest	Größe (pt, in, cm, px) Prozentsatz der normalen Größe relativ: xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller	{ font-size: 12pt } { font-size: 200% } { font-size: x-large }
	font-family (Schriftartenfamilie; wird vererbt)	Legt die Schriftart und Alternativen fest (in der Reihenfolge der Ähnlichkeit)	Name der Schriftart Name der Schriftfamilie	{ font-family: "Trebuchet MS," "Sans-serif" }
	font-weight (Schriftgrad; wird vererbt)	Legt den Schriftgrad der Schrift fest	normal bold (fett) (andere Optionen werden später unterstützt)	{ font-weight: bold }
	font-style (Schriftstil; wird vererbt)	Stellt Text kursiv dar	normal italic (kursiv) (mehr Optionen werden später unterstützt; 'oblique smallcaps' nur in IE4 möglich)	{ font-style: italic }
	font-variant (Schrift-Variante; wird vererbt)	Gibt einen anderen Schriftschnitt an	smallcaps (mehr Optionen werden später verfügbar sein)	{ font-variant: smallcaps }
	@font-face	Gibt die Quelle für eine Schriftart an, die nicht auf dem System des Benutzers vorhanden ist (beachten Sie die Anmerkung unter dieser Tabelle)	@font-face { font-family: (font-family) ; url(URL); }	@font-face comic { src:url(http://site/comicbold.eot); }

Der spezielle Style @font-face wird wahrscheinlich in der Final-Version von IE4 implementiert sein, vorausgesetzt, er wird vom World Wide Web Consortium akzeptiert; im Moment konnte ich noch keine Informationen über den Aufbau oder Beispiele dieser ".eot" (Open Type) Dateien finden -- besuchen Sie Microsoft's Typography Page, um sich über die Entwicklung zu informieren; ich werde diese Seite aktualisieren, wenn mehr Informationen verfügbar werden.

Unten sehen Sie die Style-Eigenschaften und Werte für Text. (Ich habe hier nur Eigenschaften und Werte aufgenommen, die im Moment von Internet Explorer und Netscape erkannt werden -- weitere werde ich hinzufügen, sobald sie unterstützt werden)

Häufig benutzte Eigenschaften und Werte für Cascading Style Sheets

Legende der Tabelle
Unterstützt von Internet Explorer 3.x Unterstützt von Internet Explorer 4.x Unterstützt von Netscape 4.x	pt = points (Punkte) in = inches (Zoll) cm = centimeters (Zentimeter) px = pixels (Pixel) em = Höhe der Schriftart des jeweiligen Elements (die Einheit em wird noch nicht häufig unterstützt und sollte sehr vorsichtig eingesetzt werden)

	Eigenschaft	Beschreibung	Werte	Beispiel
Text-Eigenschaften
	line-height (Zeilenhöhe; wird vererbt)	Legt den Abstand der Grundlinien des Textes fest	Größe (pt, in, cm, px, em) Prozentsatz (%) von font-size (Schriftgröße)	{ line-height: 18pt } { line-height: 120% }
	text-decoration (Textauszeichnung; wird nicht vererbt)	Unterstreicht oder hebt Text sonstwie hervor	none (keine) underline (unterstrichen) overline (Überstrichen) line-through (durchgestrichen)	{ text-decoration: underline }
	text-align (Textausrichtungwird vererbt)	Legt die Ausrichtung des Textes fest, am linken oder rechten and bzw. zentriert	left (linksbündig) center (zentriert) right (rechtsbündig)	{ text-align: right }
	text-indent (Texteinzug; wird vererbt)	Legt den Abstand vom linken Rand fest	Größe (pt, in, cm, px)	{ text-indent: 0.5in }
	vertical-align (vertikale Ausrichtung; wird nicht vererbt)	richtet Text innerhalb des Elements vertikal aus	baseline (Grundlinie) sub (tiefgestellt) super (hochgestellt) top (oberer Rand) text-top (oben am Text) middle (Mitte) bottom (unterer Rand) text-bottom (unten am Text) Prozentsatz der Zeilenhöhe (line-height) von der Grundlinie (baseline) aus (%)	{ vertical-align: super }
	text-transform (Text-Umwandlung; wird vererbt)	Legt die Zeichen des Texts fest	capitalize (wandelt den ersten Buchstaben jedes Worts in Großbuchstaben um) uppercase (alle Buchstaben großgeschrieben) lowercase (alle Buchstaben kleingeschrieben)	{ text-transform: capitalize }
	letter-spacing (Speerung des Textes; wird vererbt)	Legt die Sperrung des Textes (den Abstand zwischen einzelnen Buchstaben) fest (Ünterstützung für die Final-Version von IE 4.0 erwartet)	normal, Größe (pt, in, cm, px, em)	{ letter-spacing: 2pt }

Unten finden Sie eine Tabelle der Style-Eigenschaften und -Werte für Farben und Hintergrund -- andere Eigenschaften und Werte sind auf den folgenden Seiten aufgeführt. (Ich habe hier nur Eigenschaften und Werte aufgenommen, die im Moment von Internet Explorer und Netscape erkannt werden -- weitere werde ich hinzufügen, sobald sie unterstützt werden)

Häufig benutzte Eigenschaften und Werte für Cascading Style Sheets

Legende der Tabelle
Unterstützt von Internet Explorer 3.x Unterstützt von Internet Explorer 4.x Unterstützt von Netscape 4.x	pt = points (Punkte) in = inches (Zoll) cm = centimeters (Zentimeter) px = pixels (Pixel) em = Höhe der Schriftart des jeweiligen Elements (die Einheit em wird noch nicht häufig unterstützt und sollte sehr vorsichtig eingesetzt werden)

	Eigenschaft	Beschreibung	Werte	Beispiel
Color and Background
	color (Farbe; wird vererbt)	Legt die Farbe des Textes fest	Farbname Tripel aus RGB-Werten Hex-Code RGB-Werte	{ color: blue } { color: #00F } { color: #0000FF } { color: RGB 0.0 0.0 1.0 }
	background (Hintergrund; wird nicht vererbt) (IE3.x unterstützt Hintergrundbilder nur in embedded Style Sheets)	Legt das Hintergrundbild oder die -farbe fest	url(URL) (mit oder ohne repeat zum Kacheln); Farbname (oder transparent oder zwei Farbnamen, wobei dann überblendet wird, getrennt durch ein /); RGB-Tripel (Hex-Code)	{ background: url(image1.gif) repeat } { background: Red } { background: Red / Blue } { background: transparent } { background: #CCCCCC }
	background-color (Hintergrundfarbe; wird nicht vererbt) (IE3.x unterstützt Hintergrundbilder nur in embedded Style Sheets)	Legt die Hintergrundfarbe fest	Farbname; RGB-Tripel (Hex-Code)	{ background-color: Red } { background-color: #CCCCCC }
	background-image (Hintergrundbild; wird nicht vererbt) (IE3.x unterstützt Hintergrundbilder nur in embedded Style Sheets)	Legt das Hintergrundbild fest	URL	{ background-image: url(image1.gif) }
	background-repeat (Kachelung des Hintergrunds; wird nicht vererbt) (IE3.x unterstützt Hintergrundbilder nur in embedded Style Sheets)	Schaltet die Wiederholung ein, um Hintergrundbilder zu kacheln	repeat (Wiederholung horizontal und vertikal); repeat-x (Wiederholung horizontal); repeat-y (Wiederholung vertikal); no-repeat (keine Wiederholung)	{ background-repeat: repeat-y }
	background-attachment (Fixieren des Hintergrunds; wird nicht vererbt) (IE3.x unterstützt Hintergrundbilder nur in embedded Style Sheets)	Fixiert ein Hintergrundbild oder gestattet es ihm, mit dem rest der Seite zu scrollen	scroll (scrollt mit) oder fixed (fixiert)	{ background: fixed }
	background-position (Psoition des Hintergrunds; wird vererbt) (IE3.x unterstützt Hintergrundbilder nur in embedded Style Sheets)	Legt den Ursprung des Hintergrundbilds fest (Beachten Sie, daß die Standardposition, 0,0 oder 0%,0%, die linke obere Ecke des Element ist)	Position (x y) oder (x% y%); top, center, bottom (oben, Mitte, unten) left, center, right (links, zentriert, rechts)	{ background-position: 2cm 1cm } { background-position: 50% 20% } { background-position: top center } { background-position: top } { background-position: bottom right }

Unten finden Sie eine Tabelle der Style-Eigenschaften und -Werte für Boxen -- andere Eigenschaften und Werte sind auf den folgenden Seiten aufgeführt. (Ich habe hier nur Eigenschaften und Werte aufgenommen, die im Moment von Internet Explorer und Netscape erkannt werden -- weitere werde ich hinzufügen, sobald sie unterstützt werden)

Häufig benutzte Eigenschaften und Werte für Cascading Style Sheets

Legende der Tabelle
Unterstützt von Internet Explorer 3.x Unterstützt von Internet Explorer 4.x Unterstützt von Netscape 4.x	pt = points (Punkte) in = inches (Zoll) cm = centimeters (Zentimeter) px = pixels (Pixel) em = Höhe der Schriftart des jeweiligen Elements (die Einheit em wird noch nicht häufig unterstützt und sollte sehr vorsichtig eingesetzt werden)

	Eigenschaft	Beschreibung	Werte	Beispiel
Eigenschaften für Boxen und Ränder
	margin-left (linker Rand; wird nicht vererbt)	Legt den Abstand vom linken Rand der Seite fest	Größe (pt, in, cm, px)	{ margin-left: 1in }
	margin-right (rechter Rand; wird nicht vererbt)	Legt den Abstand vom rechten Rand der Seite fest	Größe (pt, in, cm, px)	{ margin-right: 1in }
	margin-top (oberer Rand; wird nicht vererbt)	Legt den Abstand zum unteren Rand des vorherigen Elements fest	Größe (pt, in, cm, px)	{ margin-top: -20pt }
	margin-bottom (unterer Rand; wird nicht vererbt)	Legt den Abstand zum oberen Rand des nächsten Elements fest	Größe (pt, in, cm, px)	{ margin-bottom: 20pt }
	margin (Rand; wird nicht vererbt)	Legt Ränder an den vier Seiten eines Elements fest (wenn nur ein Wert angegeben ist, gilt dieser für alle Seiten; sind es zwei oder drei, dann werden für die fehlenden Werte die der gegenüberliegenden Seite benutzt.)	Größe (pt, in, cm, px) oder Prozentsatz der Schriftgröße in folgender Reihenfolge: oben, rechts, unten, links (also im Uhrzeigersinn)	{ margin: .5cm .5cm 1cm .5cm }
	padding (wird nicht vererbt)	Legt das Padding (Abstand Rand des Elements - Inhalt des Elements) an allen vier Seiten des Inhalts eines Elements fest (wenn nur ein Wert angegeben ist, gilt dieser für alle Seiten; sind es zwei oder drei, dann werden für die fehlenden Werte die der gegenüberliegenden Seite benutzt.)	Größe (pt, in, cm, px) oder Prozentsatz der Schriftgröße in folgender Reihenfolge: oben, rechts, unten, links (also im Uhrzeigersinn)	{ padding: .5cm .5cm 1cm .5cm }
	padding-top (oberes Padding; wird nicht vererbt)	Legt das Padding am oberen Rand des Inhalts eines Elements fest	Größe (pt, in, cm, px) oder Prozentsatz der Schriftgröße	{ padding-top: 5pt }
	padding-right (rechtes Padding; wird nicht vererbt)	Legt das Padding am rechten Rand des Inhalts eines Elements fest	Größe (pt, in, cm, px) oder Prozentsatz der Schriftgröße	{ padding-right: 5pt }
	padding-bottom (wird nicht vererbt)	Legt das Padding am unteren Rand des Inhalts eines Elements fest	Größe (pt, in, cm, px) oder Prozentsatz der Schriftgröße	{ padding-bottom: 5pt }
	padding-left (wird nicht vererbt)	Legt das Padding am linken Rand des Inhalts eines Elements fest	Größe (pt, in, cm, px) oder Prozentsatz der Schriftgröße	{ padding-left: 5pt }
	border-top-width (Breite der oberen Begrenzung; wird nicht vererbt)	Legt die Breite der oberen Begrenzung eines Elements fest	Größe (pt, in, cm, px); thin, medium, thick (dünn. mittel, dick)	{ border-top-width: thin }
	border-right-width (Breite der rechten Begrenzung; wird nicht vererbt)	Legt die Breite der rechten Begrenzung eines Elements fest	Größe (pt, in, cm, px); thin, medium, thick (dünn. mittel, dick)	{ border-right-width: thin }
	border-bottom-width (wird nicht vererbt)	Legt die Breite der unteren Begrenzung eines Elements fest	Größe (pt, in, cm, px); thin, medium, thick (dünn. mittel, dick)	{ border-bottom-width: thin }
	border-left-width (wird nicht vererbt)	Legt die Breite der linken Begrenzung eines Elements fest	Größe (pt, in, cm, px); thin, medium, thick (dünn. mittel, dick)	{ border-left-width: thin }
	border-width (wird nicht vererbt)	Legt die Breite der Begrenzung eines Elements auf allen Seiten fest; in der Reihenfolge oben, rechts, unten, links, also im Uhrzeigersinn (wenn nur ein Wert angegeben ist, gilt dieser für alle Seiten; sind es zwei oder drei, dann werden für die fehlenden Werte die der gegenüberliegenden Seite benutzt.)	Größe (pt, in, cm, px); thin, medium, thick (dünn. mittel, dick)	{ border-width: thin thin thick thin }
	border-top-color (wird nicht vererbt)	Legt die Farbe der oberen Begrenzung eines Elements fest	Farbname oder Hex-Code	{ border-top-color: green }
	border-right-color (wird nicht vererbt)	Legt die Farbe der rechten Begrenzung eines Elements fest	Farbname oder Hex-Code	{ border-right-color: green }
	border-bottom-color (wird nicht vererbt)	Legt die Farbe der unteren Begrenzung eines Elements fest	Farbname oder Hex-Code	{ border-bottom-color: #00FF00 }
	border-left-color (wird nicht vererbt)	Legt die Farbe der linken Begrenzung eines Elements fest	Farbname oder Hex-Code	{ border-left-color: thin }
	border-color (wird nicht vererbt)	Legt die Farbe aller Begrenzungen eines Elements auf allen Seiten fest; in der Reihenfolge oben, rechts, unten, links, also im Uhrzeigersinn (wenn nur ein Wert angegeben ist, gilt dieser für alle Seiten; sind es zwei oder drei, dann werden für die fehlenden Werte die der gegenüberliegenden Seite benutzt; beachten Sie, daß Netscape 4.0 nur einen Wet erlaubt)	Farbname oder Hex-Code	{ border-color: green #FFFF00 #00FFFF green } (IE4) { border-color: green } (IE4 oder Netscape 4)
	border-top-style (wird nicht vererbt)	Legt das Aussehen (style) der oberen Begrenzung eines Elements fest	Name des Styles (none, solid, double, groove, ridge, inset, outset)	{ border-top-style: ridge }
	border-right-style (wird nicht vererbt)	Legt das Aussehen der rechten Begrenzung eines Elements fest	Name des Styles (none, solid, double, groove, ridge, inset, outset)	{ border-right-style: solid }
	border-bottom-style (wird nicht vererbt)	Legt das Aussehen der unteren Begrenzung eines Elements fest	Name des Styles (none, solid, double, groove, ridge, inset, outset)	{ border-bottom-style: groove }
	border-left-style (wird nicht vererbt)	Legt das Aussehen der linken Begrenzung eines Elements fest	Name des Styles (none, solid, double, groove, ridge, inset, outset)	{ border-left-style: inset }
	border-style (wird nicht vererbt)	Legt das Aussehen aller Begrenzungen eines Elements fest	Name des Styles (none, solid, double, groove, ridge, inset, outset)	{ border-style: outset }
	border-top (wird nicht vererbt)	Legt die Breite, die Farbe und das Aussehen der oberen Begrenzung eines Elements fest	Breite, Farbe und Style	{ border-top: thin green ridge }
	border-right (wird nicht vererbt)	Legt die Breite, die Farbe und das Aussehen der rechten Begrenzung eines Elements fest	Breite, Farbe und Style	{ border-right: thin green ridge }
	border-bottom (wird nicht vererbt)	Legt die Breite, die Farbe und das Aussehen der unteren Begrenzung eines Elements fest	Breite, Farbe und Style	{ border-bottom: thin green ridge }
	border-left (wird nicht vererbt)	Legt die Breite, die Farbe und das Aussehen der linken Begrenzung eines Elements fest	Breite, Farbe und Style	{ border-left: thin green ridge }
	border (wird nicht vererbt)	Legt die Breite, die Farbe und das Aussehen aller Begrenzungen eines Elements fest	Breite, Farbe und Style	{ border: thin green ridge }
	float (wird nicht vererbt)	Lässt das Element auf eine Seite rücken und anderen Text darumfließen. (Verwendet in den Elementen DIV und SPAN.)	left, right oder none (link, rechts oder eben nicht)	{ float: left }
	clear (wird nicht vererbt)	Gibt an, ob das Element von 'floating' Elementen umgeben sein darf -- führt dazu, daß das Element unterhalb jeglicher 'floating' Elemente auf der angegebenen Seite angeordnet wird.	left, right oder both (links, rechts, beide)	{ clear: left }

Unten finden Sie eine Tabelle der Style-Eigenschaften und -Werte für Klassifizierungen -- andere Eigenschaften und Werte sind auf den folgenden Seiten aufgeführt. (Ich habe hier nur Eigenschaften und Werte aufgenommen, die im Moment von Internet Explorer und Netscape erkannt werden -- weitere werde ich hinzufügen, sobald sie unterstützt werden)

Häufig benutzte Eigenschaften und Werte für Cascading Style Sheets

Legende der Tabelle
Unterstützt von Internet Explorer 3.x Unterstützt von Internet Explorer 4.x Unterstützt von Netscape 4.x	pt = points (Punkte) in = inches (Zoll) cm = centimeters (Zentimeter) px = pixels (Pixel) em = Höhe der Schriftart des jeweiligen Elements (die Einheit em wird noch nicht häufig unterstützt und sollte sehr vorsichtig eingesetzt werden)

	Eigenschaft	Beschreibung	Werte	Beispiel
Eigenschaften: Klassifizierungen
	display (Anzeige; wird nicht vererbt)	bewirkt, daß das Element nicht dargestellt wird (kein Platz wird dafür auf der Seite reserviert)	keine	{ display: none }
	list-style-type (wird vererbt)	Legt das Erscheinungsbild für die Markierungen von Listenpunkten fest (zum Einsatz mit LI-Elementen)	disk; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none (ausgefüllter Kreis; Kreislinie; Quadrat; Zahlen; kleine röm. Zahlen; große röm. Zahlen; kleine Buchstaben; große Buchstaben)	{ list-style-type: square }
	list-style-image (wird vererbt)	gibt ein Bild an, das für die Markierungen der Listeneinträge verwendet wird (zum Einsatz mit LI-Elementen)	url(URL); keins	{ list-style-image: url(redball.jpg) }
	list-style-position (wird vererbt)	gibt die Position der Markierungen für Listeneinträge an (zum Einsatz mit LI-Elementen)	inside; outside (innen, außen)	{ list-style-position: inside }
	list-style (wird vererbt)	Gibt die Position, das Aussehen und einen Bild-URL der Markierungen für Listeneinträge an (zum Einsatz mit LI-Elementen)	inside; outside disk; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none URL	{ list-style: inside disk url(redball.jpg) }

Unten finden Sie eine Tabelle der Style-Eigenschaften und -Werte für Positionierungen -- andere Eigenschaften und Werte sind auf den folgenden Seiten aufgeführt. (Ich habe hier nur Eigenschaften und Werte aufgenommen, die im Moment von Internet Explorer und Netscape erkannt werden -- weitere werde ich hinzufügen, sobald sie unterstützt werden)

Häufig benutzte Eigenschaften und Werte für Cascading Style Sheets

Legende der Tabelle
Unterstützt von Internet Explorer 3.x Unterstützt von Internet Explorer 4.x Unterstützt von Netscape 4.x	pt = points (Punkte) in = inches (Zoll) cm = centimeters (Zentimeter) px = pixels (Pixel) em = Höhe der Schriftart des jeweiligen Elements (die Einheit em wird noch nicht häufig unterstützt und sollte sehr vorsichtig eingesetzt werden)

	Eigenschaft	Beschreibung	Werte	Beispiel
Positioning: Eigenschaften
	clip (wird nicht vererbt)	Gibt ein Gebiet eines Elements an, das transparent dargestellt werden soll	rect (oben rechts unten links) wobei oben rechts unten links entweder auto sind oder Längenwerte (pt, in, cm, px)	{ clip: rect (5pt auto auto auto) }
	height (Höhe; wird nicht vererbt)	Gibt die Höhe eines Elements an (am nützlichsten zum Skalieren von Bildern; das Seitenverhältnis bleibt erhalten, wenn width (Breite) als auto angegeben ist)	auto oder Längenwerte (pt, in, cm, px) oder Prozentsatz	{ height: 50px }
	width (wird nicht vererbt)	Gibt die Breite eines Elements an (am nützlichsten zum Skalieren von Bildern; das Seitenverhältnis bleibt erhalten, wenn height (Höhe) als auto angegeben ist)	auto oder Längenwerte (pt, in, cm, px) oder Prozentsatz	{ width: 50% }
	left (wird nicht vererbt)	Gibt die linke Position eines Elements relativ oder absolut an	auto oder Längenwerte (pt, in, cm, px) oder Prozentsatz	{ left: 2pt }
	top (wird nicht vererbt)	Gibt die obere Position eines Elements relativ oder absolut an	auto oder Längenwerte (pt, in, cm, px) oder Prozentsatz	{ top: -2pt }
	overflow (wird nicht vererbt)	Legt die Handhabung eines Elements fest, das relativ oder absolut positioniert ist und ein anderes Element überdeckt	clip (überdeckter Teil bleibt unsichtbar) oder none (überdeckter Teil wird angezeigt) oder scroll (um den überdeckten Teil freizugeben)	{ overflow: clip }
	position (wird nicht vererbt)	Gibt an, ob das Element positioniert werden kann	absolute (absolut bezogen auf das Dokument); relative (relativ in Bezug auf das übergeordnete Element); static (statisch; Standardwert -- nicht positioniert)	{ position: relative }
	visibility (wird nicht vererbt)	Gibt an, ob das Element sichtbar ist (Platz für das Element wird in beiden Fällen reserviert)	visible; hidden (sichtbar, versteckt)	{ visibility: hidden }
	z-index (wird nicht vererbt)	Gibt an, ob das Element ober- oder unterhalb anderer überlappender Elemente legt (beachten Sie, daß Netscape 4.0 dies mit dem Attribut layer behandelt)	number (Zahl; positiv für oberhalb, negativ für unterhalb, startend bei 1; als Standard erhalten aufeinander folgende Elemente höhere Nummern)	{ z-index: 2 }
	white-space (wird nicht vererbt)	Gibt an, ob das Element normal angezeigt wird oder wie ein vorformatierter Text	normal; pre (normaler Text, vorformatiert)	{ white-space: pre }

Unten finden Sie eine Tabelle der Style-Eigenschaften und -Werte zum Drucken -- andere Eigenschaften und Werte sind auf den folgenden Seiten aufgeführt. (Ich habe hier nur Eigenschaften und Werte aufgenommen, die im Moment von Internet Explorer und Netscape erkannt werden -- weitere werde ich hinzufügen, sobald sie unterstützt werden)

Häufig benutzte Eigenschaften und Werte für Cascading Style Sheets

Legende der Tabelle

Unterstützt von Internet Explorer 3.x Unterstützt von Internet Explorer 4.x Unterstützt von Netscape 4.x

	Eigenschaft	Beschreibung	Werte	Beispiel
Eigenschaften zum Drucken
	page-break-before (Umbruch davor; wird nicht vererbt)	fügt Seitenumbruch ein (nur für Druckzwecke)	always (immer); auto (wenn nötig); left (fügt einen oder zwei Seitenumbrüche ein, bis eine leere linke Seite erreicht ist); right (fügt einen oder zwei Seitenumbrüche ein, bis eine leere rechte Seite erreicht ist)	{ page-break-before: always }
	page-break-after (Umbruch danach; wird nicht vererbt)	fügt Seitenumbruch ein (nur für Druckzwecke)	always (immer); auto (wenn nötig); left (fügt einen oder zwei Seitenumbrüche ein, bis eine leere linke Seite erreicht ist); right (fügt einen oder zwei Seitenumbrüche ein, bis eine leere rechte Seite erreicht ist)	{ page-break-after: always }

Unten finden Sie eine Tabelle der Style-Eigenschaften und -Werte für Filterungen. (Ich habe hier nur Eigenschaften und Werte aufgenommen, die im Moment von Internet Explorer und Netscape erkannt werden -- weitere werde ich hinzufügen, sobald sie unterstützt werden)

(Beachten Sie, daß die Filterung, wie sie in IE 4.0 implementiert ist, scheinbar nur funktioniert, wenn Sie die Filtereigenschaften in einer Klasse angeben [z.B. .dropshadow] und darauf mit einem TD, DIV oder SPAN Tag mit dem passenden Attribut 'class' zugreifen. Bei manchen Filten müssen Sie auch Eigenschafen für Positionierung, Höhe und Breite angeben, um sie zum Arbeiten zu bewegen.)

Häufig benutzte Eigenschaften und Werte für Cascading Style Sheets

Legende der Tabelle
Unterstützt von Internet Explorer 3.x Unterstützt von Internet Explorer 4.x Unterstützt von Netscape 4.x	pt = points (Punkte) in = inches (Zoll) cm = centimeters (Zentimeter) px = pixels (Pixel) em = Höhe der Schriftart des jeweiligen Elements (die Einheit em wird noch nicht häufig unterstützt und sollte sehr vorsichtig eingesetzt werden)

	Eigenschaft	Beschreibung	Werte	Beispiel
Filtering Properties
	filter (visuelles Filtern) (wird nicht vererbt)	wendet verschiedene visuelle Filter für spezielle Effekte an	Generelle Form: { filter: filtername(parameter1, parameter2...)	{ filter: dropshadow (color=#9999FF, offx=3pt, offy=5pt) }
	Alpha	Legt eine gleichmäßige Transparenz fest.	filter: alpha(Opacity=, FinishOpacity=, Style= StartX=, StartY=, FinishX=, FinishY=)	filter: alpha(Opacity=75, FinishOpacity=15, Style=1)
	Blur	Erweckt den Anschein, sich schnell zu bewegen (Bewegungsunschärfe).	filter: blur(Add=, Direction=, Strength=)	filter: blur(Add=1, Direction=90, Strength=10)
	Chroma	Macht eine bestimmte Farbe transparent.	filter: chroma(Color=)	filter: chroma(Color=#ffff00)
	DropShadow	Erstellt einen Umriss des Objekts.	filter: DropShadow(Color=, OffX=, OffY=, Positive=)	filter: DropShadow(Color=#003399, OffX=3, OffY=3, Positive=1)
	FlipH	Erstellt ein horizontal gespiegeltes Bild.	filter: fliph	filter: fliph
	FlipV	Erstellt ein vertikal gespiegeltes Bild.	filter: flipv	filter: flipv
	Glow	Fügt einen Strahlenkranz um die Umrisse eines Objekts.	filter: glow(Color=, Strength=)	filter: glow(Color=#00FF00, Strength=30)
	Grayscale	Entfernt die Frabinformation aus einem Bild.	filter: gray	filter: gray
	Invert	Invertiert, d.h. dreht die Werte für Farbe, Sättigung und Helligkeit um.	filter: invert	filter: invert
	Light	Projiziert eine Lichtquelle auf ei Objekt.	filter: light	filter: light
	Mask	Erstellt aus einem Objekt eine transparente Maske.	filter: mask(Color=)	filter: mask (Color=#009933)
	Shadow	Erstellt eine versetzte ausgefüllte Silhouette.	filter: shadow(Color=, Direction=)	filter: shadow(Color=#9900FF, Direction=135)
	Wave	Erstellt eine sinusförmige Verformung der X-Achse entlang.	filter: wave(Add=, Freq=, Phase=, LightStrength=, Strength=)	filter: wave(Add=1, Freq=10, Phase=90, LightStrength=10, Strength=10)
	XRay	Zeigt nur die Ränder des Objekts an.	filter: xray	filter: xray
	filter (Durchlässigkeits-Filter) (wird nicht vererbt)	erlaubt es, sichtbare Elemente aufzudecken oder zu verstecken, wobei vordefinierte Muster verwendet werden	Generelle Form: { filter: revealtrans (duration=duration, transitionshape=transitionshape)} (Die Dauer (duration) wird angegeben in Sekunden.Millisekunden) (Die Form der Maske (transition shape) ist definiert durch einen Wert von 1-23, wie folgt:) Maskentyp Wert Box in 0 Box out 1 Circle in 2 Circle out 3 Wipe up 4 Wipe down 5 Wipe right 6 Wipe left 7 Vertical blinds 8 Horizontal blinds 9 Checkerboard across 10 Checkerboard down 11 Random dissolve 12 Split vertical in 13 Split vertical out 14 Split horizontal in 15 Split horizontal out 16 Strips left down 17 Strips left up 18 Strips right down 19 Strips right up 20 Random bars horizontal 21 Random bars vertical 22 Random 23	{ filter: revealtrans (duration=2.0, transition=10 }
	Ich habe die Maskenypen nicht übersetzt, da ich mir nicht unter allen etwas vorstellen kann
	filter (Überblendungs-Filter) (wird nicht vererbt)	lässt ein sichtbares Element ein- oder ausblenden	Generelle Form: { filter: blendTrans (Duration=duration} (Die Dauer (duration) wird angegeben in Sekunden.Millisekunden)	{ filter: blendTrans (duration=2.0, transition=10 }

	.StyleSheetHiddenPlaceHolder { display: none; }

	H1
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: xx-large;
		color: #660066;
		text-align: Left;
		position: relative;
		}

	H2
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 18pt;
		color: #660066;
		text-align: Center;
		position: relative;
		}

	H3
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 16pt;
		color: #660066;
		position: relative;
		}

	H4
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #660066;
		background: transparent;
		width: auto;
		height: auto;
		position: relative;
		left: auto;
		top: auto;
		}

	H5
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 10pt;
		color: #660066;
		background: #FFFFCC;
		position: relative;
		}

	P
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		position: relative;
		margin-left: 1cm;
		}

	BLOCKQUOTE
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		position: relative;
		margin-left: 2cm;
		}

	PRE
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 10pt;
		color: #990000;
		text-align: left;
		margin-left: 1cm;
		position: relative;
		}

	I
	{		
		color: #000099;
		position: relative;
		}

	B
	{		
		color: #990000;
		position: relative;
		}

	UL
	{		
		position: relative;
		margin-left: 1.5cm;
		}

	OL
	{		
		position: relative;
		margin-left: 1.5cm;
		}

	LI
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		margin: .4cm;
		position: relative;
		}

	TABLE
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #006600;
		position: relative;
		}

	TR
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		position: relative;
		}

	TD
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		position: relative;
		}

	TH
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 12pt;
		color: #990000;
		background: #CCCC99;
		position: relative;
		}

	.blue
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 12pt;
		color: #990000;
		background: #CCFFFF;
		position: relative;
		}

	CAPTION
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 10pt;
		color: #000066;
		margin: .1in;
		position: relative;
		}

	A:active
	{		
		color: #FF0000;
		}

	DIV
	{		
		position: relative;
		}

	.note
	{		
		font-size: 10pt;
		color: #006600;
		background: #FFFFFF;
		position: relative;
		padding: 2pt 2pt;
		border-width: thin;
		border-style: groove;
		}

	.float
	{		
		width: 40%;
		text-align: left;
		float: right;
		font-size: 10pt;
		color: #006600;
		background: #FFFFFF;
		position: relative;
		padding: 4pt 4pt;
		border-width: thin;
		border-style: groove;
		}

	.small
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: 8pt;
		text-align: center;
		}

	.red
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: 8pt;
		color: #FF0000;
		text-align: center;
		position: relative;
		}

	.redleft
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-size: 10pt;
		color: #990000;
		text-align: left;
		position: relative;
		}

	.indent
	{		
		margin-left: 1cm;
		position: relative;
		}

	.noindent
	{
		margin-left: 0;
		position: relative;
		}

	.large
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-style: italic;
		font-weight: bold;
		font-size: 16pt;
		color: #660066;
		text-align: left;
		position: relative;
		}

	.shadow
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: xx-large;
		color: #9966FF;
		text-align: left;
		height: 0;
		position: absolute;
		left: -1pt;
		top: -1pt;
		}

	.first
	{		
		border-top-width: thin;
		border-left-width: thin;
		border-left-color: #66CC99;
		border-top-color: #66CC99;
		border-top-style: outset;
		border-left-style: inset;
		padding-top: 2pt;
		padding-left: 2pt;
		}

	.hugeding
	{		
		font: 80pt 'Wingdings', 'fantasy';
		color: #FFFF99;
		position: relative;
		}

	.shadow3
	{		
		font: Bold x-large 'sans-serif';
		color: #339999;
		position: absolute;
		left: 50pt;
		top: 35pt;
		z-index: 3;
		}
	

	.StyleSheetHiddenPlaceHolder { display: none; }

	H1
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 30pt;
		color: #660066;
		}

	H2
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: x-large;
		color: #660066;
		}

	H3
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 12pt;
		color: #660066;
		background: #FFFFCC;
		}

	H4
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #660066;
		background: #FFFFCC;
		}

	H5
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 10pt;
		color: #660066;
		background: #FFFFCC;
		}

	P
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		margin-left: 1cm;
		}

	BLOCKQUOTE
	{		
		font-family: "'Trebuchet MS', 'Arial', 'Sans-Serif'";
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		margin-left: 2cm;
		}

	PRE
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 12pt;
		color: #990000;
		}

	XMP
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 10pt;
		color: #990000;
		text-align: left;
		}

	I
	{		
		color: #000099;
		}

	B
	{		
		color: #990000;
		}

	UL
	{		
		margin-left: 1.5cm;
		}

	OL
	{		
		margin-left: 1.5cm;
		}

	LI
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TD
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TH
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 12pt;
		color: #990000;
		background: #CCCC99;
		}

	TH.blue
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 12pt;
		color: #990000;
		background: #CCFFFF;
		}

	CAPTION
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 10pt;
		color: #000066;
		margin: .1in;
		}

	A:active
	{		
		color: #FF0000;
		}

	.note
	{		
		font-size: 10pt;
		color: #006600;
		background: #FFFFFF;
		}
	.small
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 8pt;
		text-align: center;
		}

	.red
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 8pt;
		color: #FF0000;
		text-align: center;
		}

	.redleft
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 10pt;
		color: #990000;
		text-align: left;
		}

	.indent
	{ margin-left: 1cm }

	.noindent
	{
		margin-left: 0;
		position: relative;
		}

	.large
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-style: italic;
		font-weight: bold;
		font-size: 16pt;
		color: #660066;
		text-align: left;
		margin-left: 1cm;
		}

	.shadow
	{		
		font-family: "'Trebuchet MS', 'Arial', 'Sans-Serif'";
		font-weight: bold;
		font-size: 30pt;
		color: #9999FF;
		text-align: left;
		margin-top: -48pt;
		margin-left: -1pt;
		}

	P.hugeding
	{		
		font: 80pt 'Wingdings', 'fantasy';
		color: #FFFF99;
		}

	.shadow3
	{		
		font-family: "'Trebuchet MS', 'Arial', 'Sans-Serif'";
		font-weight: bold;
		font-size: 30pt;
		color: #336666;
		text-align: left;
		margin-top: -70pt;
		margin-left: 38pt;
		}
	

	.StyleSheetHiddenPlaceHolder { display: none; }

	H1
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-style: bold;
		font-weight: bold;
		font-size: xx-large;
		color: #666666;
		text-align: left;
		position: relative;
		}

	H2
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: x-large;
		color: #660066;
		}

	H3
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: large;
		color: #660066;
		}

	H4
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: medium;
		color: #660066;
		}

	H5
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: medium;
		color: #660066;
		}

	P
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		margin-left: 1cm;
		}

	BLOCKQUOTE
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		margin-left: 2cm;
		position: relative;
		}

	PRE
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: 10pt;
		color: #990000;
		text-align: left;
		margin-left: 1cm;
		position: relative;
		}

	EM
	{		
		color: #000099;
		}

	STRONG
	{		
		color: #990000;
		}

	UL
	{		
		margin-left: 1.5cm;
		}

	OL
	{		
		margin-left: 1.5cm;
		}

	LI
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TABLE
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #006600;
		}

	TR
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TD
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TH
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: large;
		color: #990000;
		background: #CCCC99;
		}

	CAPTION
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: small;
		color: #000066;
		margin: .1in;
		}

	A:link
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #0000FF;
		}

	A:visited
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #990099;
		}

	A:active
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #FF0000;
		}
	.small
	{		
		font-family: 'Trebuchet MS', 'Verdana', 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: small;
		text-align: center;
		}

	.red
	{		
		font-family: 'Trebuchet MS', 'Verdana', 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: small;
		color: #FF0000;
		text-align: center;
		}

	.redleft
	{		
		font-family: 'Trebuchet MS', 'Verdana', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #990000;
		text-align: left;
		}

	.indent
	{		
		margin-left: 1cm;
		}

	.noindent
	{		
		margin-left: 0;
		position: relative;
		}

	.large
	{		
		font-family: 'Trebuchet MS', 'Arial', 'sans serif';
		font-style: bold;
		font-weight: bold;
		font-size: 18pt;
		color: #999999;
		text-align: left;
		margin-top: .4cm;
		margin-left: .02cm;
		}

	.blue
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		color: #990000;
		background: #CCFFFF;
		}


	.note
	{		
		font-size: small;
		color: #006600;
		background: #FFFFFF;
		border: thin #006600 ridge;
		}

	.first
	{		
		padding-top: 2pt;
		padding-left: 2pt;
		border-top-width: thin;
		border-left-width: thin;
		border-left-color: #66CC99;
		border-top-color: #66CC99;
		border-top-style: outset;
		border-left-style: inset;
		}

	.hugeding
	{		
		font: 80pt 'Wingdings', 'fantasy';
		color: #FFFF99;
		position: relative;
		}

	.shadow
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: xx-large;
		color: #9966FF;
		text-align: left;
		}

	.shadow3
	{		
		font: Bold x-large 'Trebuchet MS', 'sans-serif';
		color: #339999;
		position: absolute;
		}
		
	#layer1
	{		
		position: relative;
		}

	#layer2
	{		
		position: absolute;
		left: -2pt;
		top: -2pt;
		}

	#layer3
	{		
		position: absolute;
		left: 40pt;
		top: 30pt;
		}
	

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">



<html>

<head>

    <title>CSS Test</title>

    <!-- Link zum Style Sheet; 

	wenn Sie unterschiedliche Beispiel-Style Sheets

 	unter anderen Namen testen wollen, ändern Sie den Wert href

	im Tag, um auf das neue Style Sheet zu verweisen -->

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

</head>

<body bgcolor="White">

<!-- Unten stehen Elemente, um die Funktionen

im Style Sheet sample1.css zu demonstrieren. Wenn Sie Ihre eigenen 

Style Sheets mit mehr Tags und Klassen erstellen, können Sie 

weitere Elemente hinzufügen, um Beispiele Ihrer Styles zu sehen. -->

    <h1>Dies ist eine H1-Überschrift</h1>

        <p class="first">

	Das ist ein Absatz

	der Klasse "first" </p>

    <h2>Dies ist eine H2-Überschrift</h2>

        <p>Das ist ein normaler Absatz mit

	<b>fettem</b> und 

	<i>kursivem</i> Text.</p>

    <h3>Dies ist eine H2-Überschrift</h3>

        <ul>

            <li>dies ist ein Aufzählungspunkt mit 

	einem Dummy-Link <a href="css_test.html">link</a> darin

        </ul>

        <pre>

        Das ist

		vorformatierter Text.

        </pre>

    <table>

    <tr>

        <th>Eine Tabellenüberschrift</th>

    </tr>

    <tr>

        <td>Eine Datenzelle einer Tabelle</td>

    </tr>

    </table>

    <p class="last">Hier ein Absatz

	der Klasse "last" </p>

</body>

</html>
	

	H1 {
		font-family: Arial;
		font-size: xx-large;
		font-weight: bold;
		color: #800000;
		background: #FFFFCC;
		text-align: center;
		padding: 4pt;
		border-top: inset;
		border-bottom: inset;
		position: relative;
	}
	
	H2 {
		font-family: Arial;
		font-size: x-large;
		font-weight: bold;
		color: #FFFFCC;
		background: #800000;
		text-align: center;
		padding: 3pt;
		border-top: inset;
		border-bottom: inset;
		position: relative;
	}
	
	H3 {
		font-family: Arial;
		font-size: large;
		font-weight: bold;
		color: #800080;
		text-align: center;
		border-top: inset;
		border-bottom: inset;
		position: relative;
	}
	
	A {
		font-family: Arial;
		font-weight: bold;
		color: #0000FF;
		text-decoration: underline;
		position: relative;
	}
	
	A:LINK {
		font-family: Arial;
		font-weight: bold;
		color: #0000FF;
		text-decoration: underline;
		position: relative;
	}
	
	A:VISITED {
		font-family: Arial;
		font-weight: bold;
		color: #800080;
		text-decoration: underline;
		position: relative;
	}
	
	B {
		font-family: Arial;
		font-weight: bold;
		color: #800000;
		position: relative;
	}
	
	I {
		font-family: Arial;
		font-weight: bold;
		font-style: italic;
		position: relative;
	}
	
	LI  {
		font-family: Arial;
		font-size: medium;
		color: #000080;
		position: relative;
	}
	
	P {
		font-family: Arial;
		font-size: medium;
		color: #000080;
		position: relative;
	}
	
	TD {
		font-family: sans-serif;
		font-size: medium;
		background: #99CCCC;
	}
	
	TH {
		font-family: sans-serif;
		font-size: medium;
		font-weight: bold;
		color: #FF0000;
		background: #FFFF00;
		text-align: center;
		position: relative;
	}
	
	PRE {
		font-family: monospace;
		font-size: medium;
		background: #CCFFFF;
		position: relative;
		left: 1cm;
	}
	
	.first {
		border-top: ridge;
		border-left: ridge;
		position: relative;
	}
	
	.last {
		border-bottom: ridge;
		border-right: ridge;
	}