CSS
<yambe:breadcrumb>Hypermedia|Hypermedia</yambe:breadcrumb>
| Ein wesentliches Merkmal einer Auszeichnungssprache ist die Trennung von Inhalt, Struktur und Layout der Dokumente. Dieses Prinzip wurde anfänglich in HTML nicht konsequent umgesetzt: Es existieren zahlreiche Tags zur Layoutgestaltung. Zur Trennung von Layout und Struktur dienen Cascading Stye Sheets (CSS). |
Grundlagen
CSS ist die Abkürzung für Cascading Style Sheets und die Formatierungssprache für HTML. CSS wurde in den 90-er Jahren als Standard vom World Wide Web Consortium (W3C) [1] verabschiedet und wird mittlerweile von allen gängigen Browsern fast zu 100% implementiert.
Ein wesentliches Merkmal einer Auszeichnungssprache ist die Trennung von Inhalt, Struktur und Layout der Dokumente. Dieses Prinzip wurde anfänglich in HTML nicht konsequent umgesetzt: Es existieren zahlreiche Tags zur Layoutgestaltung. Zur Trennung von Layout und Struktur dienen Cascading Stye Sheets (CSS), die mit den HTML-Dokumenten verknüpft werden oder in eine HTML-Datei direkt eingebunden werden können. Die Funktionsweise von CSS1 (standardisiert 1996) ist in etwa vergleichbar mit Druckformatvorlagen in Textverarbeitungsprogrammen. Die Möglichkeiten bei der Verwendung von CSS2 (standardisiert bereits 1998) gehen dabei, soweit dies der Client unterstützt, im Bereich des seitenorientierten Layouts weit über die Tags zur optischen Präsentation in HTML hinaus und in Kombination mit HTML eignet sich CSS auch als vollwertige Seitenbeschreibungssprache, wie beispielsweise Postscript. Die Ausgabe ist aber nicht nur auf eine optische Präsentation begrenzt, es existieren auch Befehle für die akustische Ausgabe.
Welche Vorteile bringt mir CSS?
CSS war eine Revolution im Webdesign. Die konkreten Vorteile sind:
- Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-Sheet-Datei heraus;
- präzisere Kontrolle über das Layout;
- verschiedene Layouts für verschiedene Medientypen (Bildschirmanzeige, Druck etc.);
- eine Vielzahl von fortgeschrittenen und anspruchsvollen Techniken.
Aufbau einer CSS Regel
Eine CSS Regel ist immer nach folgendem Schema aufgebaut:
Selektor { Attribut: Wert; }
Der Selektor steht für jedes zu formatierende HTML-Element. Das Attribut oder auch Eigenschaft genannt, stellt die Möglichkeit dar, wie ein HTML-Element formatiert werden kann. Die Möglichkeiten richten sich hier nach dem Element selbst. Der Wert definiert die konkrete Gestalt der Formatierung und kann beispielsweise in Pixel, Farbcodes oder anderen Einheiten angegeben sein.
Ein einfacher Absatz kann mithilfe folgender Regel formatiert werden:
p {
font-size: 12px;
color: black;
}
Kommentare werden auf zwei Arten verwendet, einerseits können kurze Textstellen zur Erklärung geschrieben werden, man kann aber auch die Regel mit Hilfe eines Kommentars 'ausblenden' bzw. deaktivieren.
/* Kommentar für einfachen Absatz */
p {
font-size: 12px;
color: green;
}
/* Die folgende Regel kommt nicht zur ausführung, da sie auskommentiert ist */
/*
h1 {
font-size: 16px;
font-weight: bold;
text-decoration: underline;
}
*/
Einbinden in HTML
CSS Regeln können auf 3 unterschiedliche Arten in HTML eingebunden werden.
Verwendung als Style Attribut
<p style="font-weight: bold;">fett geschriebener Absatz</p>Nachteil: Man benötigt für jeden Absatz, den man speziell formatieren möchte, dieses Style-Attribut im <p>-Tag. Ändert man die Formatierung für Absätze, müsste jeder Absatz händisch umformatiert werden.
Style Element
<head>
<title>CSS-Einbindung per 'style'-Element</title>
<style type="text/css">
p {
font-weight: bold;
}
</style>
</head>Vorteil: Ersparnis von Formatierungen jedes einzelnen Elements.
Nachteil: Jede einzelne Seite muss mit dem Style-Bereich ausgestattet werden. Bei mehreren Seiten erhöht sich der Wartungsaufwand
Als Link zu einer ausgelagerten CSS Datei
<link rel="stylesheet" type="text/css" href="format.css" />Der große Vorteil an Variante 3 ist die zentrale Datei, die Änderungen werden dann sofort für alle Seiten übernommen, die diese Datei eingebunden haben. Es sinkt somit die Fehleranfälligkeit, man vermeidet Codeverdopplung und erhöht somit die Wartbarkeit der Website.