 |
Style-Datei anlegenDie Style-Datei wird als reine Textdatei angelegt. Sie enthält ohne Angabe des Schlüsselwortes "style" ausschließlich die Definitionsausdrücke, also könnte sie etwa wie folgt lauten, auch Kommentarzeilen könnte sie enthalten:
H1,P,TABLE{font-family:helvetica;color:red;font-size:14pt}
H2,OL,UL{font-family:arial;color:green;font-size:12pt}
...
/* jetzt reicht es mit den Styles! */ |
Style-Datei speichern Die fertige Datei wird unter einem selbst gewählten
Namen mit der Kennung ".css", z.B. "styledat.css",
am besten in den Ordner gespeichert, der auch die zu formatierenden
Webseiten enthält. Das erleichtert den Aufruf.
Style-Datei einbinden
Im <head>- Teil jedes einzubeziehenden Dokuments
wird eingetragen:
| <LINK REL="stylesheet" TYPE="text/css" HREF="styledat.css"> |
oder alternativ, mit genau derselben Wirkung:
<STYLE TYPE="text/css">
@import url(styledat.css);
</STYLE> |
Damit wird die Style-Datei bei Öffnung des Dokuments
hinzugeladen. Zulässig sind auch mehrere solcher Befehlszeilen,
die unterschiedliche Style-Vorschriften übereinanderladen
("kaskadieren").
Wenn die Style-Datei sich nicht im gleichen Ordner wie die
Webseite befindet, muß bei href natürlich
der relative Pfad oder auch eine komplette URL stehen.
Optional könnte in der Lade-Zeile noch erscheinen: "MEDIA=..."
Dieser Eintrag muß gegenwärtig noch entfallen,
denn Netscape 4.x ignoriert ggf. wegen dieses Eintrages die
CSS-Datei komplett. Das ist immer dann der Fall, wenn dort
etwas anderes als "screen" auftaucht. Dieser Eintrag
verweist auf noch nicht realisierte Möglichkeiten, die
Formatierungsmerkmale für unterschiedliche Ausgabemedien
zu differenzieren. Vorgesehen sind in der Norm als Medieneinträge:
screen, print, projection, aural (für Sprachsynthese-Ausgabe),
braille (für Blindenschriftwiedergebe), tty,
tv, all.
Weitere Möglichkeiten bietet die Vergabe eines "TITLE=..."-Eintrages.
Mit ihm lassen sich CSS-Dateien verknüpfen bzw. zur Wahl
anbieten. Gleich, wenn die Browser es auch zulassen!
Anpassung "gestylter" Tags im Dokument vornehmen
Solange sich die Style-Angaben nur auf sowieso vorhandene
Tags wie <body> oder <h1> beschränken,
muß man nichts anpassen. Nutzt man spezielle Tags
wie <p> oder <div>, die nicht sowieso
an allen gewünschten Stellen stehen oder auch Klassen,
dann müssen die erforderlichen Tags bzw. Klassen-Tags
noch eingetragen werden. Und dann muß man:
Sich freuen, wenn es klappt!
CSS de Luxe
ist möglich, wenn man eine Script-Sprache wie JavaScript
einsetzt. Denn dann kann man beim Dokumentenstart den Typ
des aufrufenden Browsers erfragen und aus einer vorhandenen
Palette von CSS-Dateien die passende auswählen. Natürlich
kann man auch wochentags- oder zeitabhängig die Schriftfarben
wechseln ...
|
|
|
DIENSTE
