Cascading Style Sheets CSS
EinstiegDefinition von CSS
CSS Definition im HTML Element
CSS Definition zentral im HTML Dokument
CSS zentral in externer Datei definieren
Vorfahrtsregeln
Elemente
Kommentare
Links
Einstieg
Neben anderen Einsatzgebieten liegt ein Haupteinsatzgebiet der Cascading Style Sheets (kurz: CSS)
im Zusammenspiel mit HTML. Motivation ist hier die Trennung von Darstellung und Inhalt.
In HTML soll der Inhalt definiert werden wohingegen das Aussehen (Fonts, Farben, Abstände ...)
mithilfe von CSS definiert werden. CSS in Verbindung mit HTML ist Inhalt dieser Seite.
Verwendung findet CSS3 (CSS level 3).
Definition von CSS
Cascading Style Sheets lassen sich an drei Stellen definieren:
- Innerhalb eines HTML Elements
- Zentral in einer HTML Datei
- Innerhalb einer externen Datei
CSS Definition im HTML Element
Um CSS in einem HTML Element zu definieren, geben wir einfach die entsprechenden CSS-Definitionen
im style-Attribut des entsprechenden HTML Elementes an. Im nachfolgenden Beispiel
definieren wir, dass der Text im entsprechenden Absatz in grüner Farbe dargestellt werden
soll.
<p style="color:green;"> Ich bin ein grün geschriebener Text. </p>
Ich bin ein grün geschriebener Text.
Dieses kleine Beispiel zeigt auch, wie CSS Definitionen angegeben werden. Als Erstes geben wir
den Namen der Style Sheet Eigenschaft an. Darauf folgt ein Doppelpunkt, worauf der
Wert der Eigenschaft angegeben wird. Abschließend folgt ein (hier) optionales Semikolon.
Im Beispiel haben wir der Style Sheet Eigenschaft color den Wert green
zugewiesen.
Das Semikolon dient bei der Definition von Eigenschaften der Trennung von mehreren Definitionen. Bei der letzten Definition (was bei einer Definition immer der Fall ist) ist die Angabe des Semikolons optional.
Das nachfolgende Beispiel zeigt die Angabe zweier CSS Eigenschaften für ein HTML Element. Einmal wollen wir den Text in roter Farbe darstellen und weiter ihn rechtsbündig ausrichten.
<p style="color:red; text-align:center"> Ich bin ein zentral ausgerichteter, roter Text. </p>
Ich bin ein zentral ausgerichteter, roter Text.
CSS Definition zentral im HTML Dokument
Möchten wir für bestimmte HTML Elemente in einem HTML Dokument eine einheitliche Formatierung mit CSS definieren, macht es wenig Sinn, diese bei jedem Element zu wiederholen. Wenn wir später die Formatierung ändern wollten, müssten wir dann die Änderung an jedem Element vornehmen. CSS bietet uns hier die Möglichkeit im Head-Bereich des Dokumentes die Formatierung zentral für alle entsprechenden Elemente zu definieren.
<html>
<head>
<style type="text/css">
p {
text-align:center;
color:blue;
}
</style>
</head>
<body>
<p>
Ich bin Absatz 1.
</p>
<p>
Und ich bin Absatz 2.
</p>
</body>
</html>
Eingeleitet wird die CSS Definition mit dem style-Tag. Der style-Tag
ist nicht auf CSS beschränkt, so dass wir hier mit dem type-Attribut
festlegen müssen, dass es sich um CSS handelt. Hierzu weisen wir dem type-Attribut
den Wert text/css zu. Innerhalb des Tags definieren wir die gewünschten CSS Eigenschaften.
Im Beispiel weisen wir dem Tag p CSS Definitionen zu, die wir in geschweiften Klammern angeben.
Im Beispiel definieren wir, dass der Text zentral ausgerichtet in blauer Schrift dargestellt werden soll.
CSS zentral in externer Datei definieren
Die dritte Möglichkeit CSS zu definieren besteht darin, dies in einer externen Datei zu tun, welche im Anschluss von der HTML-Seite importiert (verlinkt) wird. Diese Vorgehensweise hat mehrere Vorteile. Gehören mehrere HTML-Seiten zu einem Projekt, können diese auf die gleichen CSS-Definitionen verweisen. Ändern wir CSS Definitionen, so hat dies direkt Einfluss auf alle zusammengehörenden Dateien. Ein weiterer wesentlicher Vorteil ist die Trennung von Inhalt und Gestaltung (engl. Layout). Innerhalb der HTML Datei beschreiben wir was dargestellt werden soll und innerhalb de CSS Datei beschreiben wir, wie es dargestellt werden soll. Neben CSS und HTML kommt in vielen Projekten JavaScript für die Seitenlogik zum Einsatz. JavaScript lässt sich ebenfalls in einer separaten Datei definieren, so dass wir drei verschiedene Dateien für die verschiedenen Aufgaben Inhalt, Darstellung und Logik haben. Diese Trennung vereinfacht die Entwicklung eines Projektes, was insbesondere bei wachsenden Projekten die Pflege vereinfacht.
Die Datei, innerhalb der wir unsere CSS-Definitionen beschreiben, ist eine normale Textdatei, welche die Endung ".css" aufweist. Das nachfolgende Beispiel zeigt, wie der Inhalt einer solchen Datei aussehen könnte. Im Beispiel definieren wir, das Absätze in blauer Schrift und zentral ausgerichtet dargestellt werden sollen. Des Weiteren definieren wir, dass Überschriften mit einer Fontgröße von 48 Pixeln dargestellt werden sollen.
p {
color:blue;
text-align:center;
}
h1 {
font-size:48px;
}
Einbinden können wir die externe CSS-Datei mit dem HTML-Tag link,
wobei wir die Attribute rel mit dem Wert stylesheet
und type mit dem Wert text/css belegen. Im Attribut
href definieren wir den Namen der einzubindenden Datei.
Das nachfolgende HTML-Beispiel zeigt die Einbindung einer externen CSS-Datei "myCSS.css", welche sich im gleichen Verzeichnis der HTML-Datei befindet.
<html> <head> <link href="./myCSS.css" rel="stylesheet" style="text/css"> </head> <body> <h1>Überschrift</h1> <p> Ich bin ein Absatz. </p> </body> </html>
Vorfahrtsregeln
Nachdem wir nun die Möglichkeiten kennengelernt haben, wo wir CSS-Elemente definieren können, stellen wir uns die Frage nach der Priorität. Sind konkurrierende Beschreibungen definiert, welche kommt dann zum Einsatz? Zum Beispiel könnte die Schriftart für einen Absatz in einer externen Datei, im HTML-Header und im entsprechenden Tag definiert sein.
Die höchste Priorität haben die Definitionen, die direkt am entsprechenden HTML-Tag gemacht werden. Die zweithöchste Priorität haben die Elemente im HTML-Header gefolgt von den Definitionen in der externen Datei. Als Regel können wir hier festhalten, dass umso näher ein CSS-Element am entsprechenden HTML-Element definiert wird umso höher ist die Priorität der Definition.
Elemente
Nachfolgend eine Auswahl von CSS Elementen.
text-align
text-align
Mithilfe des Elements text-align definieren wir die Ausrichtung von Textblöcken.
Folgende Werte können wir text-align zuordnen:
text-align:left |
Linksbündige Darstellung |
text-align:right |
Rechtsbündige Darstellung |
text-align:center |
Zentral ausgerichtete Darstellung |
text-align:justify |
Blocksatz Darstellung |
Kommentare
Auch bei Cascading Style Sheets sind Kommentare sinnvoll. Zum einen können wir beschreiben,
was die Aufgabe einzelner Bereiche ist. Zum anderen können wir bestimmte Elemente zu
Testzwecken zeitweise "ausschalten". Möchten wir CSS innerhalb einer
HTML-Datei kommentieren, so verwenden wir die Zeichen /* für die Einleitung
des Kommentars und */ für das Ende des Kommentars. Der Kommentar kann
dabei mehrere Zeilen in Ansruch nehmen.
Das nachfolgende Beispiel zeigt die Kommentierung eines CSS Bereiches innerhalb einer HTML-Datei.
<html>
<head>
<style type="text/css">
p {
text-align:center;
/* Ich
bin ein
Kommentar */
color:blue;
}
</style>
</head>
<body>
<p>
Ich bin Absatz 1.
</p>
<p>
Und ich bin Absatz 2.
</p>
</body>
</html>
Auch innerhalb einer CSS-Datei
erfolgt die Kommentierung wie ein Mehrzeilenkommentar wie in C, Java ... .
Alles, was zwischen den Zeichen /* und */ steht,
wird als Kommentar gewertet.
Nachfolgend ein Ausschnitt einer CSS-Datei mit einem Kommentar.
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
/*
Ich bin ein Kommentar
*/
a:hover, a:active {
outline: 0;
}
Links
http://de.wikipedia.org/
http://de.wikipedia.org/wiki/Cascading_Style_Sheets
http://de.selfhtml.org/
http://de.selfhtml.org/css/
W3C 
CSS Validation Service
http://jigsaw.w3.org/css-validator/