Die Trennung von Text und Format bedeutet vor allem bei der Erstellung sehr großer Dokumente einen erheblich geringeren Aufwand. Mit der Definition von Stylesheets eröffnen sich tolle und - sind sie einmal definiert - immer wieder verwendbare Gestaltungsmöglichkeiten.
Die Definition erfolgt im Kopfbereich Ihres HTML-Dokumentes mit
<STYLE TYPE = "text/css">
<!--
- "Ihr Style sheet" -
-->
</STYLE>
Im Beispiel "überlappende Fenster" wurde mit Absicht ein großes Spektrum an Text- und Zeichensatzattributen verwendet. Einfach mal ausprobieren!
| <HTML>
<HEAD>
<TITLE>CSS</TITLE>
<STYLE TYPE = "text/css">
<!--
#Layer1 {position:absolute; left:50px; top:50px; width:200px; height:200px;
z-index:1; background-color: #FFFF00; font-size: 14pt; color:"red"; horizontal-align:middle}
#Layer2 {position:absolute; left:200px; top:100px; width:200px; height:100px;
z-index:2; background-color: #000000; font-size:large; color:white; font-style:italic}
#Layer3 {position:absolute; left:100px; top:150px; width:150px; height:200px;
z-index:3; background-color: #FF0000; text-decoration:underline; font-size:15pt; font-weight:bold}
#Layer4 {position:absolute; left:150px; top:200px; width:300px; height:200px;
z-index:4; background-color: green; font-size: 16pt; color:yellow; letter-spacing:1.1em; line-height:150%}
#Layer5 {position:absolute; left:25px; top:300px; width:200px; height:200px;
z-index:5; background-color: blue; font-size: 18pt; color:pink; font-family: "Arial"}
#Layer6 {position:absolute; left:25px; top:260px; width:850px; height:100px;
z-index:6; font-size: 20pt; font-family: "Times New Roman"; font-size:20pt; font-weight:bold; letter-spacing:0.3em}
-->
</STYLE>
</HEAD>
<BODY bgcolor="lightblue"> |
Mit <DIV ID= ""> wird die entsprechende Formatierung aufgerufen.
<DIV ID="Layer1">Layer mit Style 1</DIV>
<DIV ID="Layer2">Layer mit Style 2</DIV>
<DIV ID="Layer3">Layer mit Style 3</DIV>
<DIV ID="Layer4">Layer mit Style 4</DIV>
<DIV ID="Layer5">Layer mit Style 5</DIV>
<DIV ID="Layer6">Sieht ganz interessant aus, oder? (Style 6)</DIV>
</BODY>
</HTML> |
Zeichensatzattribute:
font-family: "Helvetica" (Schriftart)
font-size: 16pt (Schriftgröße)
font-style: italic (kursiv)
font-variant: small-caps (Kapitälchen)
font-weight: bold (Fettdruck)
Textattribute;
letter-spacing: 0.5em (Abstand zwischen den Zeichen)
text-align: left (Absatzausrichtung links)
text-decoration: underline (unterstrichen)
line-height: 150% (Zeilenhöhe)
text-indent: 10% (Einrückung)
Der "z-index" regelt übrigens die "Überlappungspriorität": Objekte mit hohem Index überlagern solche mit niedrigeren Indices.
