CSS - Cascading Style Sheet

Wenn Sie in einer Style-Sheet-Datei die Formatierungsangaben definieren, können Sie diese den einzelnen Dateien Ihrer Internet-Präsentation zuordnen. Auf diese Weise stellen Sie sicher, dass die Formatierung in allen diesen Dateien übereinstimmt. Änderungen, die Sie in der Style-Sheet-Datei vornehmen, wirken sich sofort auf alle Dateien aus, denen Sie diese zugeordnet haben.

Mittels Style-Sheet-Angaben können Sie Formatierungen definieren, die mit HTML-Befehlen nicht möglich sind.

Zuordnung der Style-Sheet-Datei

Setzen Sie folgenden Verweis in den Kopfteil Ihrer HTML-Dateien:

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

Die Parameter für "rel" und "type" sind in dieser Form anzuführen. Als Parameter für "ref" geben Sie den Pfad zur Datei wie bei einem Hyper-Link an.

Syntax in der CSS-Datei

Der Name der CSS-Datei trägt die Endung ".css". Inhaltlich sind keine weiteren Angaben mehr erforderlich, die diese als CSS-Datei kennzeichnen. Sie brauchen hier nur mehr die einzelnen Format-Definitionen anführen.

Dazu führen Sie an, welches Formatierungselement Sie definieren möchten und in geschwungener Klammer geben Sie die gewünschten Definitionen an. Beenden Sie jede Festlegung mit einem Strichpunkt. Auf diese Weise können Sie auch mehrere Definitionsangaben hintereinander, innerhalb der geschwungenen Klammer, anführen. Zwischen Definition und zugewiesenem Wert setzen Sie einenDoppelpunkt.

Angaben für das gesamte Dokument

body {

margin-top:20px; margin-bottom:20px; margin-left:10px; margin-right:10px; background-color:#FFFFFF; font-family:arial; font-size:14px; }

Auf diese Weise legen Sie fest, dass der Abstand zum Seiteninhalt vertikal (oben und unten) grundsätzlich 20 Bildpunkte und horizintal(links und rechts) 10 Bildpunkte zu betragen hat. Genauso wie eine Hintergrund-Farbe können hier auch ein Hintergrund-Bild { background-image:url(bild.jpg); } zuordnen. Die Schrift-Definition in diesem Bereich legt fest, dass diese Schrift zu verwenden ist, wenn für einen Text keine andere Formatierungsangabe zugeordnet ist.

Die hier angeführten Definitionen werden auf jeden Fall für die Darstellung einer HTML-Datei, der die CSS-Datei zugeordnet wird, verwendet, auch wenn im Body-Befehl der HTML-Datei etwas anderes steht.

Angaben für den Rollbalken

Die farbliche Anpassung des Rollbalkens an Ihre Internet-Seite ist über Style-Sheets möglich, funktioniert aber nicht bei allen Browsern. Diese Angaben sind im Rahmen der Body-Definitionen anzuführen.

scrollbar-face-color:#FFFFFF (weiss);		scrollbar-arrow-color:#000000 (schwarz);
scrollbar-highlight-color:#00DD00 (grün);		scrollbar-3dlight-color:#FF0000 (rot);
scrollbar-shadow-color:#FFEE00 (gelb);		scrollbar-darkshadow-color:#0000FF (blau);
srollbar-track-color:#DDDDDD (grau);

An der nebenstehenden Grafik sehen Sie die Auswirkungen der Farb-Zuordnung.

Formatangaben für den Text

Den Formatierungselemente können Sie die Werte auch nach und nach zuordnen. Jede weitere Definition brucht denn nur noch die Abweichungen zu enthalten.

p,h1,h2,h3,h4,h5,h6,li,div,td,th,address,b,i,small { font-family:arial; color:#000000; } ordnet den gängigen Formatierungselementen für die Schrift erst einmal die Schriftart "Arial" in schwarzer Farbe zu. Die einzelnen Elemente können denn beispielsweise folgendermaßen definiert sein.

h1 { font-size:24pt; font-weight:bold; }
h2 { font-size:22px; color:#C10000; font-weight:bold; }
h3 { font-size:20px; color:#C10000; font-weight:bold; }
h4 { font-size:18px; color:#C10000; font-weight:bold; }
h5 { font-size:16px; color:#C10000; font-weight:bold; }
h6 { font-size:14px; color:#C10000; font-weight:bold; }

p,li,div,td,th,td,address,blockquote { font-size:14px; font-style:normal; font-weight:500; }
i     { font-size:14px; font-style:italic; font-weight:500; }
b     { font-size:14px; font-weight:bold; }
small { font-size:12px; font-weight:bold; }
big   { font-size:16px; font-weight:bold; }

In der HTML-Datei können Sie dann die Formatierungselemente wie gewohnt verwenden.

Eigene Formatierungselemente definieren

Sie können auch eigene Formatierungselemente definieren:

.rot  { color:#C10000; }

Diese Definition können Sie dann in der HTML-Datei als Klasse zuweisen:

Überschriften werden üblicherweise mit einem Abstand, den sie auch in einem Style-Sheet definieren können zum restlichen Text ausgeführt. Wenn Sie einmal die selbe Schrift wie in der Überschrift, jedoch ohne diesen Abstand benötigen, können Sie sinnvollerweise analog den festgelegten Überschriften, zusätzliche Schriftformate definieren.

Formatierungselemente für Listen

ol { margin-top:0px; margin-bottom:5px; }
ul { margin-top:0px; margin-bottom:5px; list-style-image:url(square.gif); }
li { margin-left:-5px; }

So legen Sie fest, dass nach geordneten Listen immer ein Abstand von 5 Bildpunkten eingehalten wird. Das gilt auch für ungeordnete Listen, denen Sie als eigenes Bullet die Grafik "square.gif" zuordnen. Die Listenelemente werden gegenüber der normalen Darstellung um 5 Bildpunkte nach links gerückt.

Formatierungselemente für Bilder

.bildl { border:0; margin-right:30px; margin-bottom:20px; }
.bildr { border:0; margin-left:30px; margin-bottom:20px; }
.rand  { border-color:#C10000; border-width:1px; border-style:solid; }

Auf diese Weise können Sie Bildern, die linksbündig ausgerichtet sind, class="bildl" zuordnen, damit rechts von diesen ein Rand von 30 Bildpunkten und unterhalb ein Rand von 20 Bildpunkten eingehalten wird. Bei rechtsbündig ausgerichteten Bilden könne Sie mit class="bildr" für einen Abstand von 30 Bildpunkten auf der linken Seite und 20 Bildpunkten unterhalb sorgen.

Mit class="rand" können Sie zB Bildern einen dünnen roten Rand zuordnen. Ganauso können Sie diese Definition auch für Ränder oder Gitternetzlinien von Tabellen verwenden.

Formatierungselemente für Hyperlinks

a:link    { color:#910021; text-decoration:none; }
a:visited { color:#910021; text-decoration:none; }
a:hover   { color:#DD4520; text-decoration:none; }
a:active  { color:#DD4520; text-decoration:none; }

Mit "text-decoration:none" legen Sie fest, dass die Hyper-Links nicht unterstrichen werden sollen, sondern sich lediglich in der Farbe vom restlichen Text abheben. Im konkreten Fall würden Links im Normalfall und jene, die bereits besucht wurden, dunkelrot angezeigt. Aktuelle Links würden in einem helleren Rot angezeigt. Diese Farbe gilt auch für den Hover-Effekt. Der Hover Effekt tritt ein, wenn der Mauszeiger über den Link-Text gezogen wird.