Designprinzipien
Syntax und Vokabular
Die Einbindung von CSS in ein XHTML-Dokument
Es gibt drei Möglichkeiten, CSS in ein Dokument einzubinden:
- Einbinden per
style-Attribut direkt in das Start-Tag des Elementes.<p style="text-align:right; font-weight:bold"> Fetter und rechtsbündig ausgerichteter Text</p>- Diese so genannten Inline-Styles eignen sich womöglich, wenn Angaben nur ein einziges Mal an einer bestimmten Stelle vorkommen sollen und die Vergabe einer Klasse oder ID nicht in Frage kommt (warum auch immer) oder nicht erwünscht ist.
- Einbinden per
style-Element in den Dokumentenkopf.<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Einbindung per 'style'-Element</title> <style type="text/css"> /* Stylesheet Angaben */ </style> </head> <body> <p>Hallo Welt!</p> </body> </html>- Bei der Angabe
type="text/css"handelt es sich um die Formatdefinition, die keinesfalls weggelassen werden darf.
- Bei der Angabe
- Einbinden eines separaten Stylesheets per
link-Element im Dokumentenkopf.<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Einbindung per 'link'-Element</title> <link rel="stylesheet" href="stylesheets/default.css" type="text/css" title="Default Style" /> </head> <body> <p>Hallo Welt!</p> </body> </html>In diesem Beispiel wird eine externe Datei »default.css« eingebunden, die in einem Unterverzeichnis »stylesheets« liegt. Das
rel-Attribut muss den Wertstylesheethaben. Dashref-Attribut gibt den Dateipfad an,typehier ebenfalls die Formatdefinition. Über das Attributtitlekönnen Sie das Stylesheet bezeichnen. Dies ermöglicht es zum Beispiel, das Stylesheet im Mozilla abzustellen oder ein anderes zu wählen.- Vor allem bei Style-Angaben, die mehrere Dokumente beschreiben sollen (wie zum Beispiel in dieser Einführung) ist ein externes Stylesheet vorzuziehen, da sich eine einzige Änderung darin auf alle Dokumente auswirken würde, die das Stylesheet eingebunden haben. Darüber hinaus realisiert dies die beste Trennung von Markup und Layout.
Verschiedene Medientypen
- CSS bietet die Möglichkeit, Stylesheets für unterschiedliche Ausgabemedien festzulegen. So können Sie für Ihr Dokument eigene Stylesheets zum Beispiel für die Präsentation am Bildschirm und für die Ausgabe am Drucker schreiben. Der User-Agent bzw. das Gerät, das Ihre Seite dann darstellt, sollte das geeignete Stylesheet auswählen.
Folgende Medientypen stehen zur Verfügung:
all- Für alle Medientypen
aural- Für Sprachbrowser, die den Inhalt der Webseite vorlesen.
braille- Für Ausgabegeräte mit so genannter Braille-Zeile. Der Text der Webseite wird in eine veränderte Oberflächenstruktur der Braille-Zeile umgewandelt und ist so für blinde Menschen tastbar.
embossed- Für "Braille-Drucker". Der Text der Website wird dabei gestanzt und ist dann für blinde Menschen tastbar.
handheld- Für kleine Handcomputer wie Palms oder Handys, zumeist mit kleinen monochromen Bildschirmen und geringer Bandbreite.
print- Für die Ausgabe durch Drucker.
projection- Für Projektoren und ähnliche Geräte.
screen- Für die Ausgabe auf dem Bildschirm, also auf dem Monitor.
tty- Für die Ausgabe auf nicht-grafischen Ausgabemedien mit Festbreitenschrift, wie zum Beispiel Terminals oder auch Textbrowser wie Lynx.
tv- Für die Ausgabe auf Fernsehern oder ähnlichen Geräten.
- Die Einbindung erfolgt dabei über das XHTML-Attribut
mediaoder die@media-Regel innerhalb der CSS-Syntax:
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" /><style type="text/css">
/* Styles für alle Medientypen */
@media print {
/* Styles nur für die Ausgabe durch Drucker */
}
</style>Styles importieren
- CSS bietet die Möglichkeit, innerhalb eines Stylesheets (oder eines
style-Elementes) andere Stylesheets zu importieren. Dafür gibt es die@import-Regel.
Folgende Zeilen sind äquivalent und binden alle Regeln innerhalb der Datei oldstyle.css in ein vorhandenes Stylesheet mit ein:
@import "oldstyle.css";
@import url("oldstyle.css");Soll der Import nur für bestimmte Medientypen gelten, schreiben Sie den Import zum Beispiel wie folgt:
@import url("oldprint.css") print;
@import url("braille.css") braille, embossed;