Einführung in Cascading-Style-Sheets (CSS)

 

Inhaltsverzeichnis

I. Cascading-Style-Sheets (CSS)

Um den FES-Style-Sheet in eine Datei einzubinden, bedarf es einer einzigen Zeile:
<link rel=stylesheet type="text/css" href="http://www.fes.de/fes.css">
Diese Zeile muß im Quelltext zwischen <head></head> stehen; in den Musterseiten ist diese Zeile bereits enthalten.

Die weiteren Ausführungen dienen lediglich der Information, bzw. dem Vorhaben den Stil einer einzelnen Seite zu verändern (daher der Name Cascading).

1. Sinn und Zweck von CSS
2. Einbinden von CSS

3. Nachschlagewerk im Internet


I. Cascading-Style-Sheets (CSS)

1. Sinn und Zweck von CSS

Die Cascading Style Sheets (CSS) sind eine unmittelbare Ergänzung zu HTML. CSS ist eine Sprache, die extra für HTML entwickelt wurde. Die Formateigenschaften einzelner HTML-Befehle können mit Style-Sheets beliebig definiert werden und auf die ganze Datei bzw. auf mehrere Dateien (ganzes Projekt) angewendet werden.

Beispiel
Sie können mit Style-Sheets Formateigenschaften bestimmen.
z.B.:
Überschrift 1. Ordnung: Schriftgröße von 16 Punkt, Schriftart Verdana, fett, Farbe: rot.

Formatdefintion (HTML-Befehl):
h1 { font-size:16pt; font-family:Verdana, Arial, Helvetica; color:#FF0000; font-style:bold; }

Erklärung der Formatdefinition:
h1 = Seitenüberschriften;
font-size = Schriftgroesse;
16pt = 16 Punkt;
font-family = Schriftart;
Verdana,Arial = Schriftarten;
color = Farbe;
#FF0000
= rot;
font-style = Schriftstil;
bold = fett

Weitere Möglichkeiten, die CSS bietet:

  • beliebige Bereiche einer HTML-Datei mit
    eigener Hintergrundfarbe, eigenem Hintergrundbild (Wallpaper) oder mit Rahmen definieren;
  • Grafik, Textabsatz, Tabelle oder Bereich aus mehreren Elementen
    pixelgenau [!] im Anzeigefenster des Browsers positionieren.
  • Auch für Drucklayouts gibt es Befehle zur Definition eines Seitenlayouts.

top

2. Einbinden von CSS

Style-Sheet-Definitionen können auf verschiedene Weise in das Dokument eingebunden werden

  1. Zentrale Einbindung in die Datei

    Definitionen können zentral angeben werden.

    Beispiel
    Im Kopf der HTML-Datei können zentrale Definitionen zur Gestaltung der Überschrift 1. Ordnung notiert werden. Alle Überschriften 1. Ordnung, der entsprechenden HTML-Datei, erhalten dann Formateigenschaften, die einmal zentral definiert sind.

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/css">
    <!-- /* ... Style-Sheet-Angaben ... */ //-->
    </style>
    </head>
    <body>
    </body>
    </html>


    Wichtig
    Damit Browser, die Style-Sheets nicht kennen, die CSS-Angaben nicht versehentlich als anzuzeigenden Text interpretieren, wird der Bereich der eigentlichen CSS-Angaben in einen mehrzeiligen HTML-Kommentar (<!-- /*..CSS-Angaben....*/ -->) eingebunden.


  2. Seperate Dateien

    Definitionen können in separaten Dateien angeben werden. Auf diese Weise kann für große Projekte ein einheitliches z.B. firmenspezifsches Layout entworfen werden, d.h. mit einigen kleinen Änderungen in der zentralen Style-Sheet-Datei kann für Hunderte von HTML-Dateien ein anderes Layout erstellt werden. So wird Kodierarbeit gespart und die HTML-Dateien werden verkleinert. Diese Verfahren nutzen wir zur Zeit.

    <html>
    <head>
    <title>Titel der Datei</title>
    <link rel=stylesheet type="text/css" href="http://www.fes.de/fes.css">
    <style type="text/css">
    <!-- ... Extra-Style-Sheet-Angaben ... //-->
    </style>
    </head>
    <body>
    </body>
    </html>

    Die referenzierten Datei (hier: http://www.fes.de/fes.css ) muß als reine Textdatei mit der Endung .css erstellt sein. Die Css-Datei soll ausschliesslich Formatdefinitionen (h1 { Arial, Helvetica, sans-serif; font-size:18pt; }) enthalten (auch keine HTML-Befehle). Eine solche Datei können Sie mit jedem einfachen Texteditor erstellen.

top

3. Nachschlagewerk im Internet

SELFHTML - 'Kapitel CSS Style-Sheet':
Das große Referenzbuch zu HTML von Stefan Münz

top

 

  net edition: joachim.vesper & simas 2001 / 2002