Cascading Style-Sheets (CSS)

Sie sind hier: Startseite › Cascading Style-Sheets

CM, 01.09.2001

Cascading Style-Sheets: Allgemeiner Aufbau einer HTML-Datei mit Style-Sheet-Ergänzung (Numerische Angaben, Notationsmöglichkeiten), Anwender-relative Farbangaben, Schriftformatierung, Abstände, Ränder, Ausrichtung und Rahmen, Hintergrundfarben und -bilder, Listen und Tabellen, Pseudo-Formate, Cursor und Spezialfilter.

  1. Allgemeiner Aufbau
  2. Farbangaben
  3. Schriftformatierung
  4. Abstände, Ränder, Ausrichtung und Rahmen
  5. Hintergrundfarben und -bilder
  6. Listen und Tabellen, Mehrspaltiger Textfluss
  7. Pseudo-Formate
  8. Cursor und Spezialfilter

Allgemeiner Aufbau einer HTML-Datei mit Style-Sheet-Ergänzung

Style-Sheet-Deklarationen werden im Head-Bereich (Kopfdaten) der HTML-Datei festgelegt (im Beispiel fett):

<html>
<head>
<style type="text/css">
<!--
Hier stehen alle Deklarationen.
//-->
</style>
</head>
...

Die auf diese Weise festgelegten Style-Sheets sind für das ganze Dokument gültig. Die HTML-Kommentarzeichen beugen die irrtümliche Erkennung seitens verschiedener Browser vor.

Style-Sheets können jedoch auch in einer separaten Datei definiert werden. Dann kann man mit jeder beliebigen Datei auf diese rückwirkend zugreifen und erspart sich einige Arbeit. Änderungen brauchen so nur einmal in dieser separaten Datei festgehalten werden, alle darauf zugreifenden Dateien werden automatisch abgeändert.

Mit der Referenz-Angabe

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

im Head-Bereich kannst Du die separate CSS-Datei in jede beliebige Datei einbinden.

Um die korrekte Anzeige unter Netscape positiv zu beeinflussen, solltest Du möglichst keine Leerzeichen in dem Definitionsbereich der Style-Sheets verwenden.

Desweiteren solltest Du beachten, dass die korrekte Interpretation manchmal auch an der unsachgemäß notierten Form einiger Tags scheitern kann. Um das zu umgehen, solltest Du alle Tags vorbildlich beenden

Beispiel:
<p> ... </p>

Numerische Angaben

Absolute Angaben:

  • pt: Punkt (= 1/72 inches)
  • pc: Pica (= 12 Punkt)
  • in: Inch (= 2,54 cm)
  • mm, cm: Milli-, Zentimeter

Relative Angaben:

  • em: bezogen auf elementeigene Schrifthöhe
  • ex: bezogen auf elementeigene Höhe des Buchstabens x
  • px: Pixel (Bildschirmauflösung)
  • %: Prozent gegenüber Elementnorm

Solltest Du Bruchzahlen verwenden wollen, so nutze anstelle eines Kommas einen Punkt!

Beispiel:
0.5 cm statt 0,5 cm

Notationsmöglichkeiten

Style-Sheet-Angaben können in separaten Dateien bzw. im Head-Bereich definiert werden. Das Notationsprinzip gleicht dann folgendem Beispiel:

h3 {background-color:#00ff00; color:#ff0000; font-family:arial;}

Solltest Du jedoch einzelne Passagen definieren wollen, so kannst Du das innerhalb Deines Dokumentes tun. Diese Definitionen sind dann selbst bei externen abweichenden Definitionen gültig. Ein Beispiel dafür:

...Text...
<p style="text-indent:0.5cm">noch viel mehr Text</p>

Zur Startseite | Zum Seitenanfang

Anwender-relative Farbangaben

Bezug zu den Bildschirmfarben des Anwenders.

Beispiel:
body {background-color:activeborder; color:activecaption;}

Mögliche Angaben:

  • activeborder: aktive Fenstertitelzeile
  • activecaption: Überschrift der aktiven Fenstertitelzeile
  • appworkspace: Hintergrund der aktiven Anwendung
  • background: Hintergrund
  • buttonface: Buttons in Dialogfenstern
  • buttonhighlight: 3D-Schatten von Buttons in Dialogfenstern
  • buttontext: Texte beschrifteter Buttons in Dialogfenstern
  • captiontext: Überschriften in Dialogfenstern
  • greytext: deaktivierter Text in Dialogfenstern
  • highlight: ausgewählte Einträge in Auswahllisten
  • highlighttext: selektierter Text
  • inactiveborder: nicht aktive Fenstertitelzeile
  • inactivecaption: Überschrift einer nicht aktiven Fenstertitelzeile
  • infobackground: Tooltips und Hints
  • infotext: Text für Tooltips und Hints
  • menu: Menüleisten
  • menutext: Menüeinträge
  • scrollbar: Scroll-Leiste
  • window: Hintergrund von Dokumentenfensten
  • windowframe: Fensterrahmen
  • windowtext: Text in Dokumentenfenstern

Zur Startseite | Zum Seitenanfang

Schriftformatierung

Textfarbe: color

Verschiedene Farbdefinitionen lockern Deine Homepage etwas auf. Nicht übertreiben!

body {color:#00ff00;}

Schriftart: font-family

Definition der Schriftart. Sollte die erste Schriftart vom Browser nicht erkannt werden, so greift dieser auf die zweitdefinierte zurück. Schriftartnamen, die Leerzeichen enthalten, sollten in Anführungszeichen gesetzt werden.

h1,h2,h3 {font-familiy:arial,verdana,helvetica;}

Schriftgröße: font-size

Selbst festlegbare Größe von Schriften.

h1 {font-size:14pt;}

Schriftstil: font-style

Neigung der Schrift. Mögliche Angaben: italic (kursiv), oblique (kursiv), normal (Voreinstellung)

h3 {font-style:italic;}

Schriftvariante: font-variant

Näckische Variante: Kapitälchen (kleine Großbuchstaben).

h5 {font-variant:small-caps;}

Schriftgewicht: font-weight

Mögliche Varianten: bold (fett), bolder (besonders fett), lighter (dünner).
Auch Angabe in numerischen Werten möglich: 100 (besonders dünn), 200, 300 ... bis 900 (besonders fett)

dt {font-weight:bolder;}

Wortabstand: word-spacing

Erzwingbarer Wortabstand. Bei Überschriften brauchbar.

h2 {word-spacing:10mm;}

Zeichenabstand: letter-spacing

Erzwingt Zeichenabstand. Dient besonderer Hervorhebung.

h1 {letter-spacing:4em;}

Textdekoration: text-decoration

Mögliche Angaben: underline (unterstrichen), overline (überstrichen), line-through (durchgestrichen).

a:link {text-decoration:underline;}

Texttransformation: text-transform

Ganze Textpassagen können mit diesen Angaben hervorgehoben werden: capitalize (Wortanfänge als Großbuchstaben), uppercase (nur Großbuchstaben), lowercase (nur Kleinbuchstaben).

h4 {text-transform:uppercase;}

Zur Startseite | Zum Seitenanfang

Abstände, Ränder, Ausrichtung und Rahmen

Abstände, Ränder: margin

Genaues Bestimmen der Position. Mögliche Angaben: -top (oben), -bottom (unten), -left (links), -right (rechts).

body {margin-top:0;}

Texteinrückung: text-indent

Bei großen Textpassagen einsetzbar. Dient der Übersichtlichkeit.

p {text-indent:0.5cm;}

Zeilenhöhe: line-height

In Zusammenhang mit längeren Fließtexten und in Verbindung mit Angaben zur Schriftgröße hilfreich. Eigene Zeilenhöhe bestimmbar.

p {font-size:12pt; line-height:14pt;}

Vertikale Ausrichtung: vertical-align

Erspart eine Menge Schreibarbeit, wenn einheitliche Definitionen für beispielsweise Tabellen anwendbar sind. Mögliche Angaben: top (obenbündig), middle (mittig), bottom (untenbündig), baseline (an der Basislinie ausrichtend), sub (tiefergestellt), sup (höhergestellt), text-top (am oberen Schriftrand), text-bottom (am unteren Schriftrand)

td {vertical-align:top;}

Horizontale Ausrichtung: text-align

Ausrichten von Textabsätzen. Mögliche Angaben: center (zentriert), left (links), right (rechts), justify (Blocksatz).

th {text-align:left;}

Rahmendicke oben: border-top-width

Breite der Rahmenlinie oberhalb des Bezugselementes. Mögliche Angaben: thin (dünn), medium (mittel), thick (dick). Auch Angabe in numerischen Werten.

body {border-top-width:5mm; border-top-style:solid;}

Rahmendicke unten: border-bottom-width

Breite der Rahmenlinie unterhalb des Bezugselementes. Mögliche Angaben: thin (dünn), medium (mittel), thick (dick). Auch Angabe in numerischen Werten.

body {border-bottom-width:5mm; border-bottom-style:solid;}

Rahmendicke links: border-left-width

Breite der Rahmenlinie links des Bezugselementes. Mögliche Angaben: thin (dünn), medium (mittel), thick (dick). Auch Angabe in numerischen Werten.

body {border-left-width:5mm; border-left-style:solid;}

Rahmendicke rechts: border-right-width

Breite der Rahmenlinie rechts des Bezugselementes. Mögliche Angaben: thin (dünn), medium (mittel), thick (dick). Auch Angabe in numerischen Werten.

body {border-right-width:5mm; border-right-style:solid;}

Rahmendicke alle Seiten: border-width

Breite der Rahmenlinie rund um das Bezugselement. Mögliche Angaben: thin (dünn), medium (mittel), thick (dick). Auch Angabe in numerischen Werten.

body {border-width:5mm; border-style:solid;}

Rahmenfarbe: border-color

Der für beliebige Elemente definierte Rahmen kann so eine selbst festlegbare Farbe erhalten.

body {border-width:5mm; border-style:solid; border-color:#00ff00;}

Rahmentyp: border-style

Verschiedene Interpretationen seitens der Browser! Mögliche Angaben: none (kein), dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen), double (doppelt durchgezogen), groove/ridge/inset/outset (verschiedene 3D-Effekte)

body {border-width:5mm; border-style:ridge; border-color:#00ff00;}

Innenabstände: padding

Ignoration seitens des Opera-Browsers. Mögliche Angaben: -top (oben), -bottom (unten), -left (links), -right (rechts). Innenabstände können auch allgemein angegeben werden (padding:5mm).

td {padding-right:5mm;}

Zur Startseite | Zum Seitenanfang

Hintergrundfarben und -bilder

Hintergrundfarbe: background-color

Für einzelne Elemente festlegbar.

h1 {background-color:#00ff00;}

Hintergrundbild: background-image

Hintergrundgrafik wird als Wallpaper wiederholt. Kontrast zu Text beachten!

table {background-image:url(xxx.gif);}

Wiederholungs-Effekt: background-repeat

Wiederholungsverhalten einer Hintergrundgrafik. Verschiedene Interpretationen seitens der Browser! Mögliche Angaben: repeat (wiederholen), repeat-x (eine Zeile lang wiederholend), repeat-y (eine Spalte lang wiederholend), no-repeat (nur Einzelbild)

table {background-image:url(xxx.gif); background-repeat:no-repeat;}

Wasserzeichen-Effekt: background-attachment

Verschiedene Interpretationen seitens der Browser! Mögliche Varianten: scroll (mitscrollen), fixed (festes Hintergrundbild)

table {background-image:url(xxx.gif); background-attachment:fixed;}

Hintergrundposition: background-position

Verschiedene Interpretationen seitens der Browser! Mögliche Varianten: top (obenbündig), center (zentriert), middle (mittig), bottom (untenbündig), left (links), right (rechts). Auch Notation im Verhältnis zum Rand möglich. Der erste Wert steht dann für den Abstand nach links, der zweite für den Abstand nach oben.

table {background-image:url(xxx.gif); background-position:center;}
table {background-image:url(xxx.gif); background-position:1cm 2cm;}

Zur Startseite | Zum Seitenanfang

Listen und Tabellen

Darstellungstyp: list-style-type

Je nach Listentyp auswählbar. ul: disc, circle, square; ol: decimal (1.,2.,3.,4.), lower-roman (i.,ii.,iii.,iv.), upper-roman (I.,II.,III.,IV.), lower-alpha (A.,B.,C.,D.)

ul {list-style-type:disc;}
ol {list-style-type:decimal;}

Listeneinrückung: list-style-position

Sehr fragliche Wirkungsweise - Insbesondere bei der nahezu vollkommenden Ignoration des outside-Befehls seitens der Browser! Mögliche Varianten: inside (eingerückt), outside (ausgerückt)

ul {list-style-position:inside;}

Eigene Bullet-Grafik: list-style-image

Eigene Grafik als Aufzählungszeichen.

ul {list-style-image:url(xxx.gif);}

Position einer Tabellenüberschrift: caption-side

Position einer Tabellenüberschrift oder Tabellenunterschrift. Mögliche Angaben: top, topleft, topright, bottom, bottomleft, bottomright

table {caption-side:top;}

Mehrspaltiger Textfluss

Zum CSS-2.0-Standard gehörend. Wird jedoch derzeit weder vom Internet Explorer, noch vom Netscape noch vom Opera erkannt. Wäre aber ein schönes Werkzeug, wenn es mal funktionieren würde!

Anzahl Spalten: columns

Automatischer Textumbruch mit optimaler Spaltennutzung.

div {columns:2;}

Spaltenabstand: column-gap

Abstand zwischen den einzelnen Spalten. Nur numerische Angaben erlaubt.

div {columns:3; column-gap:0.5cm;}

Trennstrichdicke: column-rule-width

Trennstrich zwischen den Spalten. Nur in Kombination mit Angabe des Trennstrichtypes wirksam.

div {columns:4; column-rule-width:2mm; column-rule-style:solid;}

Trennstrichtyp: column-rule-style

Aussehen der Trennstriche zwischen den Spalten. Mögliche Angaben: none (kein), dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen), double (doppelt durchgezogen), groove/ridge/inset/outset (verschiedene 3D-Effekte)

div {columns:4; column-rule-style:solid; column-rule-width:2mm;}

Trennstrichfarbe: column-rule-color

Farbe der Trennlinien bei mehrspaltigem Textfluss.

div {columns:4; column-rule-style:solid; column-rule-width:2mm; column-rule-color:#00ff00;}

Zur Startseite | Zum Seitenanfang

Pseudo-Formate

Verweise

Verweis zu noch nicht besuchten Seiten:

a:link {color:#ff0000;}

Verweis zu bereits besuchten Seiten:

a:visited {color:#00ff00;}

Verweis zu gerade aktiven Seiten:

a:active {color:#0000ff;}

Erstes Absatzzeichen

Von Druckschriften her bekannter typographischer Effekt: Erzwingen eines separaten Erscheinungsbildes für das erste Zeichen der ersten Zeile.

p:first-letter {font-size:14pt;}

Einzelne Bereiche formatieren

Um Style-Sheets an beliebigen Stellen innerhalb eines Textes zu definieren, kannst Du den <span>-Tag verwenden. Damit kannst Du theoretisch jedes einzelne Wort nach Deinen Wünschen formatieren!

<html>
<head>
<title>span-Tag</title>
</head>
<body>
<p>Absatz mit <span style="color:#00ff00;">blauem</span> Wort!</p>
</body>
</html>

Der Opera-Browser ignoriert Angaben mit diesem <span>-Tag!

Zur Startseite | Zum Seitenanfang

Cursor und Spezialfilter

Netscape und Opera ignorieren die folgenden Angaben gnadenlos!

Cursor

Der Cursor kann verschiedene selbstbestimmbare Formen annehmen. Mögliche Angaben:

  • crosshair (Fadenkreuz)
  • pointer (Zeiger)
  • move (Kreuz, Bewegung signalisierend)
  • n-resize (Pfeil nach oben zeigend)
  • ne-resize (Pfeil nach rechts oben zeigend)
  • e-resize (Pfeil nach rechts zeigend)
  • se-resize (Pfeil nach rechts unten zeigend)
  • s-resize (Pfeil nach unten zeigend)
  • sw-resize (Pfeil nach links unten zeigend)
  • w-resize (Pfeil nach links zeigend)
  • nw-resize (Pfeil nach links oben zeigend)
  • wait (Wartezustand signalisierend)
  • help (Hilfesymbol)

Es kann auch eine eigene Grafik (.gif/.jpg) als Cursor eingebunden werden: url(xxx.gif).

a {cursor:wait;}

Spiegelung: filter:FlipH()

Verändern von Elementen. In diesem Fall: Vertikal spiegelverkehrt.

<img src="xxx.gif" style="filter:FlipV()">

Spiegelung: filter:FlipV()

In diesem Fall: Horizontal spiegelverkehrt.

<img src="xxx.gif" style="filter:FlipV()">

Verschmelzung: filter:Alpha()

Farbliche Verschmelzung von Vorder- und Hintergrundelementen. Erwartete Parameter: opacity (Deckgrad am Ursprung der Verschmelzung. 0: vollkommen transparent ... 100: vollkommen abdeckend), finishopacity (Deckgrad am Ende der Verschmelzung. 0: vollkommen transparent ... 100: vollkommen abdeckend), style (Wirkungsart des Filters. Werte 0,1,2,3.)

<img src="xxx.gif" style="filter:Alpha(opacity=100, finishopacity=0, style=2)">

Verwisch-Effekt: filter:Blur()

Für Grafiken geeignet. Erwartete Parameter: direction (Richtung), strength (Stärke des Verwisch-Effektes) und add=0, wenn ausschließlich die Verwischspur angezeigt werden soll.

Mögliche Angaben für direction:

  • 0: nach oben
  • 45: nach oben rechts
  • 90: nach rechts, 135: nach unten rechts
  • 180: nach unten
  • 225: nach unten links
  • 270: nach links
  • 315: nach oben links

<img src="xxx.gif" style="filter:Blur(direction=90, strength=40)">

Glühender Rand: filter:Glow()

Für Schriftzüge sehr schönes Gestaltungsmittel. Erwartete Parameter: color (Glühfarbe), strength (Glühstärke. Werte zwischen 1 und 20 sind empfehlenswert.).

<div style="width:100%; font-size:24pt; color:#ffffff; filter:Glow(color=#0000ff, strength=10)">xxxxxxxxx</div>

Graustufen: filter:Gray()

Umwandlung sämtlicher Farbinformationen eines Elementes in Graustufen.

<img src="xxx.gif" style="filter:Gray()">

Invertieren: filter:Invert()

Umwandlung sämtlicher Farbinformationen eines Elementes in deren Komplementärfarbe.

<img src="xxx.gif" style="filter:Invert()">

Transparenzmaske: filter:Mask()

Für transparente .gif-Grafiken gedacht. Ersetzt alle transparenten Pixel der Grafik durch gewünschte Farbe und alle nicht-transparenten Pixel werden statt dessen transparent! Erwarteter Parameter: color(Farbangabe für vorher transparenten Bereich)

<img src="xxx.gif" style="filter:Mask(color=#0000ff)">

Schatten: filter:Shadow()

Schattenbildung in gewünschter Farbe. Erwartete Parameter: color (Schattenfarbe), direction (Richtung).

Mögliche Angaben für direction:

  • 0: nach oben
  • 45: nach oben rechts
  • 90: nach rechts
  • 135: nach unten rechts
  • 180: nach unten
  • 225: nach unten links
  • 270: nach links
  • 315: nach oben links

<div style="width:100%; font-size:24pt; color:#ffffff; filter:Shadow(color=#0000ff, direction=315)">xxxxxxxxx</div>

Welleneinfluss: filter:Wave()

Wellenförmige Verzerrung. Erwartete Parameter: freq (Wellenfrequenz. Realistisch sind Werte zwischen 5: große Wellen und 50: kleine Wellen), light (Licht im Welleneffekt. Werte zwischen 0 und 100.), phase (Beginn der Sinus-Wellphase in Prozent. Werte von 0: normaler Wellenbeginn über 25: bei ca. 90° bis 100.), strength (Effekt-Stärke. Werte zwischen 1 und 10 sind vertretbar.), add (0: Original wird nicht mit angezeigt, 1: Original wird mit angezeigt.)

<div style="width:100%; font-size:24pt; color:#ffffff; filter:Wave(freq=3, light=25, phase=25, strength=2)">xxxxx</div>

Foto-Negativ-Effekt: filter:XRay()

Graustufenkonvertierung mit Foto-Negativ-Effekt.

<img src="xxx.gif" style="filter:XRay()">