Cascading Style Sheets Teil III

Definition von CSS

Das Prinzip der Kaskadierung

CSS beruht auf dem Prinzip der Vererbung oder Überlagerung (Cascading) von Informationen. Wird also eine Definition für den Tag <body> vorgenommen, so gilt diese Angabe für das gesamte HTML-Dokument. Sollen einzelne Tags dann davon abweichende Parameter übergeben bekommen, so werden diese zusätzliche angegeben.
Zur Zeit funktioniert dies allerdings erst in wenigen Browsern: genauer gesagt im Microsoft IE5 und in Opera. Bei Netscape müssen leider die Tags noch alle einzeln definiert werden (Version 4.5).

Die Syntax

CSS ist nicht HTML, daher gilt für CSS eine andere Syntax als für HTML. Layoutanweisungen werden in geschweiften Klammern übergeben, also z.B.:

<!--
body {font-family: Arial, Verdana, Sans-serif; text-align:left}
-->
Die einzelnen Befehle werden wie aus Programmiersprachen bekannt, per Strichpunkt/Semikolon übergeben. Werden, wie im oberen Beispiel verschiedene Parameter übergeben, so sucht der Browser, bis er den in diesem Fall richtigen Font gefunden hat. CSS-Anweisungen stehen oft in HTML-Kommentarzeichen: alle Browser, die CSS interpretieren können, überlesen die Kommentare in diesem Fall, für die Browser der älteren Generationen gilt: sie lesen die CSS-Anweisung wie einen Kommentar und überlesen sie damit. Kommentare in CSS werden mit folgender Syntax ausgezeichnet:
	/* Kommentar in CSS */

Die Definition von Klassen

Da HTML nur eine begrenzte Zahl von Tags bereithält, muß es möglich sein, die Tags um bestimmte Layoutinformationen erweitern zu können. Dafür wurde das Attribut "class" in HTML definiert. Es kann einzelen Tags übergeben werden und ermöglicht so für ein und dasselbe Tag verschiedene Darstellungen fetszulegen:

Beispiel
Definition in CSS:
	P.rot {color:red}
	P.blau {color:blue}
	
Übergabe in HTML:
	<P class="rot"> Dieser Text ist rot </P>
	<P class="blau"> Dieser Text ist blau </P>

Neben der Definition von Klassen für einzelne Tags können auch allgemeine Klassen definiert werden, die für alle Tags anwendbar sind:
	.rot {color:red}
	
in HTML:
	<P class="rot"> Dieser Text ist rot </P>
	<em class="rot"> Dieser ebenfalls </em>
	
	
Verschiedene Ausgabeformate

Mit dem @-Zeichen können verschiedene Layoutparameter für verschiedene Ausgabeformen definiert werden. Steht z.B. im Stylesheet:

	@media print 
		{IMG {display:none}
					}

so wird damit festgelegt, daß beim Ausdruck alle Grafiken und Bilder nicht gedruckt werden sollen.
Weitere Infos
http://www.w3.org/Style/css

 

Copyright & Kontakt
jcpohl@gmx.de
© www.jcpohl.de 1999/2000