Cascading Stylesheets
Nach obenWas ist CSS?
CSS, die Abkürzung für Cascading Stylesheets, ist eine Formatierungssprache, die es erlaubt, die Präsentation der Elemente (Überschriften, Texten,..) von strukturierten Dokumenten, wie zum Beispiel (X)HTML, festzulegen. Damit ist der Vorteil verbunden, dass man den Inhalt einer Webseite von der Gestaltung (Design) trennen kann, was das Erstellen, Verändern und Verwalten von Webseiten erheblich erleichtert.
Besonders hilfreich ist CSS auch im Hinblick auf verschiedene Ausgabegeräte, zum Beispiel kann man die Ausgabe für Drucker, Handhelds oder Handy formatieren, indem man ein spezielles Stylesheet für diese Medien bereitstellt.
Nach obenWas ist ein Stylesheet?
Bei der Gestaltung von Dokumenten, wird das Aussehen einzelner Teile, zum Beispiel Überschriften, festgelegt. Da es äußerst lästig ist, Formatierungen für jedes Element einzeln vorzunehmen, ist es sinnvoll Regeln für Elementgruppen, zum Beispiel alle Absätze im Dokument, vornehmen zu können - diese Funktion übernimmt CSS.
Das Wort "Cascading" (kaskadierend) bedeutet, dass man mehrere Stylesheets für ein Dokument erstellen kann, die sich alle auf die Präsentation auswirken können. So kann man zum Beispiel ein Stylesheet globales für alle Seiten erstellen und eines für die Links einer bestimmten Seite.
Nach obenWas kann CSS?
Neben den üblichen Formatierungen von Farben und Schriften, wie man es zum Beispiel aus "Microsoft Word" kennt, kann man beliebig Elemente Positionieren, Hintergrundbilder und Vorlesestimmen festlegen sowie noch vieles mehr.
Wenn man sich mit CSS intensiver beschäftigt wird man schnell feststellen, dass CSS kaum Grenzen hat, die jedoch nicht durch sich selbst, sondern aufgrund inkonsequenter Umsetzung der Webstandards seitens der Browserentwickler zurückzuführen sind.
Nach obenWas gibt es für Versionen von CSS?
Offizielle Empfehlungen des W3C sind: CSS1 (1996), CSS 2 (1998). CSS 2 ist noch immer nicht von allen Browserherstellern implementiert. Der IE von Microsoft wird vorraussichtlich erst im Sommer 2005 diese W3C-Empfehlung umsetzen. CSS 3 ist bereits in der Entwicklung und wird modular aufgebaut sein, da einige Substandards wie die Audiowiedergabe getrennt entwickelt werden.
Hier kann man sich einen Überblick verschaffen, was für Neuerungen uns mit dem kommenden Standard auf uns zukommen werden.
Nach obenSyntax
Die Syntax besteht aus Regeln für bestimmte HTML-Elemente oder -Gruppen, die über einen Selektor ausgewählt werden. Dem Selektor werden dann für seine Eigenschaften Werte zugewiesen.
Im folgender Grafik sollt den Aufbau der CSS-Syntax illustrieren:
Der Selektor kann aus HTML-Elementen (zum Beispiel <p>) oder Klassen und IDs bestehen. Möglich ist auch Kombination oder Verschachtelung von Elementen und Klassen.
Zum Beispiel wirken sich folgende Formatierungen aussschließlich auf Text in Absätzen mit der Klasse "hinweis" aus , die sich in dem Container "box" befinden.
div#box p.hinweis
{
font-style: italic;
color: blue; /* das ist ein Kommentar :) */
}
Nach obenCSS in (X)HTML einbinden
Es gibt drei Möglichkeiten CSS in HTML einzubinden:
- Externes Stylesheet über das link-Element im head-Bereich des HTML-Dokuments
- Internes Stylesheet über das style-Element im head-Bereich des HTML-Dokuments
- Inline Stylesheet, d.h. innerhalb von HTML-Elementen über das style-Attribut
Beispiel für das Einbinden externer Stylesheets:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Beispiel 1</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
Seiteninhalt
</body>
</html>
Beispiel für das Einbinden interner Stylesheets:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Beispiel 2</title>
<style type="text/css">
<!--
/* Hier formatiert man nach Lust und Laune */
-->
</style>
</head>
<body>
Seiteninhalt
</body>
</html>
Beispiel für Inline Styles:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Beispiel 3</title>
</head>
<body>
<p style="margin:2em 1em; color:grey; font-style:italic;"></p>
</body>
</html>
Kean
einrücken vergessen sonst nicht schlecht ;) obwohl styletags in dem body direkt wenig sinn machen ;) schliesslich benutzt man css zur trennung und übersichtlichkeit