C++, C , Java,

CSS Pur!

CSS – Cascading Stylesheets zur Gestaltung von (X)HTMLDokumenten


CSS steht für Cascading Stylesheets. Stylesheet bedeutet so viel wie Formatvorlage. Cascading, »kaskadierend «, bezieht sich darauf, dass auf einzelne Elemente mehrere auch unterschiedliche Formatierungsvorschriften wirken können, die in hierarchischer Reihenfolge, wie eine Kaskade, vom Browser ausgewertet werden und letztendlich die Formatierung im Zusammenspiel festlegen.
 


css

Eigenschaften und Werte


In einem Stylesheet stehen die sogenannten CSS-Deklarationen: Eine CSS-Deklaration setzt sich immer aus einer Eigenschaft und einem Wert zusammen. Der Wert wird der Eigenschaft zugewiesen. So erhält durch
 

color: red;

die Eigenschaft color (Text- bzw. Vordergrundfarbe) den Wert red (rot). Eigenschaft und Wert werden durch Doppelpunkt getrennt. Leerzeichen können vor und nach dem Doppelpunkt stehen, müssen aber nicht. Eine Deklaration wird mit dem Strichpunkt (Semikolon) abgeschlossen. Bei mehreren Deklarationen kann bei der letzten Deklaration der Strichpunkt auch fehlen:
 

color: red; background-color: white

Bei den folgenden Erläuterungen der CSS-Grundlagen werden erst einmal nur die beiden Eigenschaften color (Vorder- bzw. Textfarbe) und background-color (Hintergrundfarbe) verwendet. Als Werte werden englische Farbnamen benutzt; welche Werte darüber hinaus möglich sind, erfahren Sie später.


Einbinden von CSS


CSS-Angaben können Sie auf unterschiedliche Arten mit den (X)HTML-Dateien verknüpfen: über Inline-Stile, in einem eingebetteten Stylesheet oder in einer externen Datei.


Inline-Stile

Soll nur ein einzelnes Element innerhalb eines Dokuments formatiert werden, so bietet sich die Formatierung über Inline-Stile an: Notieren Sie hierfür direkt im Element, das Sie formatieren möchten, das Attribut style. Als Werte schreiben Sie die CSS-Eigenschaften.

<p style="color: red; background-color: blue; ">roter Text auf blauem Hintergrund</p>


Eingebettetes Stylesheet

Eingebettete Stylesheets sind die richtige Wahl, wenn Formate für mehrere Elemente innerhalb einer (X)HTML-Datei gelten sollen, aber nicht für mehrere (X)HTML-Dateien. Hierfür schreiben Sie die CSS-Angaben in den Dokumentkopf innerhalb des head-Bereichs.


Eingeleitet werden die Stylesheet-Angaben durch das Element style, dem als Attribut der MIME-Typ text/css zugewiesen ist:

<style type="text/css"> ... </style>

 

Darauf folgt in XHTML ein CDATA-Abschnitt. Die CDATA-Kennzeichnung muss selbst wiederum durch CSS-Kommentare /* und */ geschützt werden. Innerhalb dieses CDATA-Bereichs stehen die eigentlichen CSS-Angaben.


Dann schreiben Sie das (X)HTML-Element, für das die Formatierungen gelten sollen. Im Beispiel wird zum einen h1 und zum anderen p formatiert.
 

<style type="text/css">
/* <![CDATA[ */
h1 {
background-color: blue;
color: white;
}
p {
background-color: white;
color: blue;
}
/* ]]> */
</style>


 

Hinter dem Element fassen geschweifte Klammern die CSS-Angaben zusammen. In beiden Fällen werden eine Hinter- und eine Vordergrundfarbe festgelegt. Damit erhalten alle Überschriften der 1. Ebene (h1) einen blauen Hintergrund und eine weiße Textfarbe; alle Absätze (p) haben einen weißen Hintergrund und einen blauen Text. Und hier jetzt einmal das eingebettete Stylesheet im Gesamtzusammenhang – der Blindtext wurde etwas gekürzt.

© 2011 - 2013 Moerifeone
Diese Webseite wurde kostenlos mit Homepage-Baukasten.de erstellt. Willst du auch eine eigene Webseite?
Gratis anmelden