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.
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.
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.
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
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.
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-highlight-color:#00DD00 (grün); | ||
An der nebenstehenden Grafik sehen Sie die Auswirkungen der Farb-Zuordnung.
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
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.
Sie können auch eigene Formatierungselemente definieren:
.rot { color:#C10000; }
Diese Definition können Sie dann in der HTML-Datei als Klasse zuweisen:
<p class="rot"> | schreibt den Text im gesamten Absatz rot |
<td class="rot"> | schreibt den Text in der gesamten Zelle rot |
<font class="rot"> | schreibt den folgenden Text rot |
Ü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.
.big3 { font-size:20px; color:#C10000; font-weight:bold; }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.
.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,
Mit
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