Warning: include_once(/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php): failed to open stream: No such file or directory in /var/www/html/fields/dbp13/local/config.php on line 4

Warning: include_once(): Failed opening '/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php' for inclusion (include_path='.:/opt/php/lib/php') in /var/www/html/fields/dbp13/local/config.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/fields/dbp13/local/config.php:4) in /var/www/html/pmwiki-2.2.86/pmwiki.php on line 1250
Datenbankpraktikum SS 2013 - Datenvisualisierung - Css

CSS - Cascading Stylesheet

Thomas Sobieroy

Abb. 1: Ausschnitt aus der Main.css
CSS ist eine deklarative Sprache zum Strukturieren von Stylevorlagen. Häufig wird CSS eingesetzt um an einer zentralen Stelle das Aussehen einer Applikation festzulegen. Im Rahmen der Datenvisualisierung wurde CSS Version 3 eingesetzt um das Aussehen der Oberfläche zu kontrollieren. Daher lässt sich die Oberfläche durch die Datei css\main.css beliebig anpassen.
Im Allgemeinen zeichnet sich CSS dadurch aus, dass zu einem Html-Element eine Regel erstellt wird. Der Browser lädt diese Regeln und passt so das Verhalten eines Elements entsprechend der Regel an. Abb.1 zeigt typische Regeln. Die Raute bedeutet, dass die ID eines html Elements der ID der Regel entsprechen muss. Danach wird ein Befehl für diese Element zu geteilt z.B. wie in Abb. 1 ,dass die Höhe nicht kleiner als 65% sein darf. Wenn statt einer ID ein NAME eines html-Elements existieren muss wird statt der Raute der Punkt gewählt und dann der entsprechende Bezeichner.

Abb. 2: Änderung einer CSS-Datei durch Javascript
In der Datenvisualisierung war es notwendig, dass mit Javascript CSS Regeln geändert wurden. Abb. 2 zeigt exemplarisch die Änderung eines Elements. Solche Änderungen können weiter zusammengefasst und gekapselt werden um ganze Frameworks zu entwickeln. Im Rahmen des Praktikums waren mehrere solcher Frameworks im Einsatz. Besonders Bootstrap und Highcharts bedienen sich solcher Methoden.

Eine Besonderheit der Cascading Stylesheet Sheets ist das Boxmodell. Das Boxmodell ermöglicht die Ausrichtung anhand der Abstände untergeordneter Elemente. Wie in Abbildung 3 dargestellt, kann man mittels innen liegender Elemente den Aufbau einer Seite leicht strukturieren. Die Verschachtelung nach innen macht so auch die Konfiguration übersichtlich, da es um jedes Element einen beinhaltenden Container geben kann. Dies führt letztlich zu einem Topdown bzw. Bottomup Ansatz, der das korrekte setzen des Layouts stark vereinfacht im Gegensatz zu den Möglichkeiten die Html 5 bietet.
Abb. 3: CSS Boxmodell


Page last modified on August 23, 2013, at 07:01 PM