XML-Darstellung mit CSS Stylesheets by ojp13483

VIEWS: 6 PAGES: 8

									XML-Darstellung mit CSS Stylesheets



Damit XML und CSS funktioniert muß der Browser drei
Voraussetzungen erfüllen.


• Der Browser muß XML verarbeiten können.


• Der Browser muß CSS kennen.


• Der Browser muß CSS in Verbindung mit XML erlauben.



Erfüllt werden diese Voraussetzungen von dem IE 5.0 und von
Netscape ab Version 6.0. Es genügt auch eine wohlgeformte
XML Datei.
Ein Beispiel: Abfahrtsplan am Bahnhof


Das Projekt besteht aus drei Teilen:


  • der DTD für die Validierung der XML Daten.

  • ein XML Dokument mit Daten und einer Einbindung der
    CSS Datei.

  • eine separate CSS Datei mit ihren Definitionen.




Die DTD und das gültige XML ist aus den Übungen bekannt.




Das XML Dokument muß um folgende
Verarbeitungsanweisung erweitert werden.


<?xml-stylesheet type="text/css" href="fahrplan.css" ?>
Die CSS Datei „fahrplan.css“.
bahnhof
 { position:absolute;
   top:10px;
   left:40px;
   background-color:#C0C0C0;
   padding:10px;
 }

name
{ position:relative;
  display:block;
  width:600px;
  background-color:#808080;
  color:#FFFFFF;
  font-family:Tahoma,Arial,Helvetica,sans-serif;
  font-size:48px;
  padding:5px;
}

abfahrt
 { position:relative;
   display:block;
   width:600px;
   background-color:#FFFF80;
   color:#000000;
   font-family:Tahoma,Arial,Helvetica,sans-serif;
   font-size:16px;
   padding:2px;
 }

ankunft
 { position:relative;
   display:block;
   width:600px;
   background-color:#FFFFFF;
   color:#000000;
   font-family:Tahoma,Arial,Helvetica,sans-serif;
   font-size:16px;
   padding:2px;
 }

zeit
 { position:relative;
   width:70px;
   vertical-align:top;
 }

usw...
Browseransicht
Grenzen und Probleme bei der Darstellung mit CSS




  • Ältere, auch CSS-fähige Browser können mit der Kombination
    aus XML-Daten und CSS nichts anfangen und zeigen entweder
    gar nichts oder Text ohne jede Formatierung an.


  • Mit CSS in Version 1.0 lassen sich nur Elemente formatieren,
    keine Attribute.


  • CSS bietet erst ab Version 2.0 die Möglichkeit, automatische
    Nummerierungs-Schemata auf Elemente anzuwenden, etwa auf
    Kapitelüberschriften (Kapitel 1, 1.1, 1.2, 1.2.1, 1.2, 1.3 usw.).


  • Es gibt mit CSS kaum sinnvolle Möglichkeiten, Daten bei der
    Anzeige zu filtern. In XSL/XSLT besteht eine solche
    Möglichkeit.


  • Die automatische Sortierung von Daten vor der Ausgabe, ist mit
    CSS derzeit nicht möglich.




Lösung dafür ist XSL / XSLT.
Das Formatierungsmodell von CSS

Jedes Element aus XML wird als Textblock dargestellt.


Beispiel:

    Adresse {
            display:block
            }

    Name      {
              display:inline
              }


Schrift mit CSS formatieren

Beispiel:
    Titel, Verlag, ISBN-Nummer, Autor, Erscheinungsjahr,
    Inhaltsangabe, Kategorie, Seitenzahl, Preis {
          display:block
    }
    Titel {
               font-family:Arial
               font-size: 18pt
          }
    Verlag, ISBN-Nummer {
                                  font-family:Arial
                                  font-size: 12pt
                               }
    Autor, Erscheinungsjahr, Inhaltsangabe {
                    font-family:"Courier New"
    }
Farben mit CSS definieren


Beispiel

Titel {
     font-family:Arial;
     font-size: 18pt;
     font-style: italic;
     letter-spacing: 8pt;
     text-align: center;
     text-transform: capitalize;
     color: red;
     background-color: blue
}


Hintergünde mit CSS in Textblöcken

In CSS gibt es 5 Eigenschaften um einen Hintergrund zu
definieren.

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
Beispiel für Fließtext um eine Grafik.

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="anlage5.css"?>
<Anlage>
     <Bild/>
     <Text>
     Fließtext Fließtext Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Fließtext Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Fließtext Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Fließtext Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Fließtext Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Fließtext Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Fließtext Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Sie nicht Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Sie nicht Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Sie nicht Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Sie nicht Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Sie nicht Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Sie nicht Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Sie nicht Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Sie nicht Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Sie nicht Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Sie nicht Fließtext FließtextFließtext Fließtext Fließtext
     Fließtext Sie nicht Fließtext FließtextFließtext Fließtext Fließtext
     </Text>
</Anlage>

Anlage     { display:block; }
Bild       { background: url(sparschwein.gif) no-repeat center center;
                 width: 134px;
                 height: 196px;
                 float: left; }
Text       { display: block }

								
To top