CSS steht für Cascading Style Sheets. Wenn Sie bereits Grundkenntnisse in HTML besitzen, können Sie damit HTML-Tags Formatierungen zuweisen. Dabei haben Sie wesentlich mehr Möglichkeiten als mit HTML selbst. Zum Beispiel können Sie häufig benutzte Formatvorlagen zentral definieren und sparen somit Zeit und Speicherplatz. Aber lesen Sie selbst…
Einbindung
Es gibt drei verschiedene Möglichkeiten CSS in eine HMTL-Datei einzubinden. Die einfachst Art ist im Tag selbst mit dem Zusatz style=. Mehrere CSS-Befehle werden mit einem Semikolon voneinander getrennt. Zum Beispiel:
<p style=”color:red; font-size:10pt; font-family:arial”>Text</p>
<span style=”text-align:center”>Text</span>
Die zweite Möglichkeit: Sie definieren die Style-Anweisungen im head-Bereich mit <style> und </style>. Sie schreiben den zu formatierenden HTML-Tag und danach in geschweiften Klammern und von Semikolon getrennt die gewünschte Formatierung des Tags. In etwa so:
<html><head>
<style type=”text/css”>
<!–
p { color:red; font-size:10pt; font-family:arial }
table { background-color:#ffcc66; }
//–>
</style>
</head><body></body></html>
Einer der größten Vorteile von CSS liegt wohl in der dritten Möglichkeit der Einbindung. Sie lagern die gesamten Formatierungen in eine externe Datei aus. So kann die sog. Formatvorlage auf allen Seiten Ihrer Homepage wirken. Dabei sparen Sie eine Menge Quelltext und können Ihr gesamtes Layout blitzschnell und einfach ändern. Das externe Style Sheet erstellen Sie mit einem Texteditor und speichern es mit der Dateiendung “.css” ab, z. B. “style.css”. Dort schreiben Sie nur die Styleangaben hinein. Binden Sie sie dann in den head Ihrer HTML-Dateien ein.
<link rel=”stylesheet” href=”style.css” type=”text/css”>
Der Inhalt der externen CSS-Datei könnte wie folgt lauten:
body { background-color:#ffff99; font-family:arial,helvetica,sans-serif; }
table { background-color:#ffffff; }
h1,h2 { text-decoration:none; text-align:center; font-size:18pt; }
CSS Verknüpfungen
Sie können CSS-Befehle durch Verknüpfungen auch miteinander verbinden.
Komma: Damit wenden Sie dieselbe Definition auf mehrer HTML-Elemente an.
div,td,p,a { font-size:10pt; font-family:Arial,Helvetica,sans-serif; }
Punkt: Verbinden Sie Elemente und Unterklassen miteinander. Schreiben Sie in einen HTML-Tag den Zusatz: class=”unterklassename” und in die CSS-Datei:
p.unterklassenname { color:red }
Grundbefehle
Beachten Sie bitte, dass nicht alle Browser alle CSS-Befehle unterstützen.
Schriftstil: font-family:
Schriftgröße: font-size:
Schriftgewicht: font-weight:
Textdekoration: text-decoration:
Textfarbe: color:
Abstand oben: margin-top:
Abstand unten: margin-bottom:
Texteinrückung: text-indent:
Horizontale Ausrichtung: text-align:
Rahmenfarbe: border-color:
Hintergrundfarbe: background-color:
Hintergrunfbild: background-image:url(back.gif)
Verweise
Mit a:link definieren Sie den normalen Link, mit a:visited einen bereits beuschten Verweis, mit a:active einen aktiven Verweis und mit a:hover einen Verweis, der sich beim Berühren mit der Maus ändert. Beispiel:
a:link { color:#0059ff; text-decoration:underline; font-weight:bold }
a:visited { color:#0059ff; text-decoration:underline }
a:active { color:#000000; text-decoration:none }
a:hover { color:#000000; text-decoration:overline; background-color:#ffff00 }
Style-Sheet-Dateien für unterschiedliche Ausgabemedien
Häufig ist es sinnvoll eine Formatierung für den Bildschirm und eine für den Drucker zu haben. So können Sie jeweils das optimale Layout festlegen. Dies realisieren Sie mit dem Zusatz media= beim Einbinden Ihrer externen CSS-Datei.
<link rel=stylesheet media=”all” href=”style.css”>
<link rel=stylesheet media=”screen” href=”monitor.css”>
<link rel=stylesheet media=”print” href=”printer.css”>
media=”all” läßt die Style-Sheets in allen Medientypen wirksam werden, media=”screen” nur bei der Bildschirmpräsentation und media=”print” für die Ausgabe über Drucker.
Link zum Thema:
CSS Befehle – großes Befehlsverzeichnis von SELFHTML mit Erklärungen
(AM | 14.10.01)
