DevTrain Startseite Advanced Developers Conference vom 14.-15. Februar 2011  
  
  
SUCHEN:  
ARTIKEL ONLINE: 525   

Kategorien
.NET
Datenbanken
Web
XML

Allgemein
Camp
Foren
Events
Persönliche Einstellungen
Registrieren
Prämien Shop
Kontakt
Impressum
Über DevTrain

Autoren


   Autor: Artikel Drucken
        
"Überlappende Fenster" mit Style sheets

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.


DevTrain Camp - Schneller zum .NET 3.5 Developer
 
Verwandte Artikel      Verlinkte Dokumente
    Keine verknüpften Dokumente
    Keine Links vorhanden

  Erfasst am:
  Gültig bis:
2 Ratings
Bewertung: 60,0%
schlecht    sehr gut  

 
© Copyright 2007 ppedv AG