vorlesungsunterlagen, reinisch, 2001 10 31

style-sheets

styles wurden entwickelt, um tags (wieder) zur strukturierung zu verwenden und vom layout unabhaengig zu machen.
mit styles definieren sie groesse, farbe, abstaende ...

styles sind fuer (fast) jeden tag anwendbar.
wenn styles ohne einen bestimmten tag verwenden wollen, koennen sie den tag <span>...</span> ('span' hat sonst keine auswirkung) verwenden.

urspruenglich nur von ms internetexplorer unterstuetzt, bei netscape teilweise problematisch (vor allem bei verschachtelungen).
praktisch vor allem fuer globale layoutdefinitionen.

definition im 
<head>
	<style type="text/css">
	//<!-- 
	/*kommentar*/
	span {
	font-size:200%;
	}
	span.erster {
	background-color:#929292;
	}
	span.zweiter {
	background-color:#ff0000;
	}
	//-->
	</style>
</head>

<body>
blabla 
<span> blabla </span>
<span class="erster"> blabla 1 </span>
<span class="zweiter"> blabla 2 </span>
</body>

ausfuehrliche prinzipielle infos siehe:
http://xarch.tu-graz.ac.at/publ/tutorial/html/muenz.70/tdbb.htm

oder definition direkt im tag (nicht zu empfehlen):
	<p style="color:#ff0000;">...</p>

groessenangaben:

pt (punkt = 1/72 inches)
pc (pica = 12 punkt)
in (inch = 2,54 cm; ein monitor hat 72 dpi = DotsPerInch)
mm (millimeter)
cm (zentimeter) 
em (elementeigene schrifthoehe)
ex (buchstabenhoehe)
px (pixel)
%

formatierungsangaben fuer styles siehe:
http://xarch.tu-graz.ac.at/publ/tutorial/html/muenz.70/tdc.htm

positionierung mittels styles (sg. 'layer'):

ermoeglicht freie anordnung von elementen neben- und uebereinander.
urspruenglich mittels des tags <layer> von netscape eingefuehrt, inzwischen durch eine erweiterung der style-sheets zur gaenze abgeloest.
achtung, werden erst ab den browserversion 4+ unterstuetzt (aber auch erst bei den neueren)!

<span style="position:absolute; top:100px; left:45px; width:300px; height:400px; background-color:#ff0000; layer-background-color:#ff0000;"> blabla </span>

siehe auch:
http://xarch.tu-graz.ac.at/publ/tutorial/javascript/dynduo/stylesheets/stylesheets.html
http://xarch.tu-graz.ac.at/publ/tutorial/html/muenz.70/tdch.htm