APEX und CSS

02.
Dezember
2009
Veröffentlicht von: Markus Dötsch

Die in den APEX-Versionen mitgelieferten Themes sind zwar gut und schön. Oft möchte man aber doch seine Corporate-Identity auch in seine APEX-Applikation integrieren. Bevor man sich jetzt aber auf die Themes und die darin enthaltenen HTML-Templates stürzt, sollte man sich Gedanken über den Einsatz von CSS (Cascading Style Sheets) machen. Hierbei ist die Idee von der Trennung von Inhalt und Layout zu beachten.


Modernes CSS-Design und APEX

Für ein modernes CSS-Design in APEX müssen folgende Regeln beachtet werden:

  • Anpassen der verwendeten Themes an das CSS-Design
  • Einbinden einer zentralen CSS-Datei
  • Vermeidung von spezifischen CSS-Formatierungen an einzelnen Stellen wie in Reports oder in anderen APEX-Elementen

Anstatt:

<p style="background-color: red;">

Besser:

<p class="roterAbsatz">

Und in der CSS-Datei:

.roterAbsatz{background-color: red;}


Verknüpfung von HTML und CSS

Um eine CSS-Anweisung einem HTML-Befehl zuzuweisen sind folgende Möglichkeiten gegeben:


Variante 1

Über eine ID – Diese muss einmalig im gesamten HTML-Dokument sein.

CSS-Datei:

#name {background-color: red;}

HTML-Datei:

<div id="name">

Die Raute (#) vor dem Namen in der CSS-Datei gibt an, dass es sich um eine ID handelt.


Variante 2

Über eine Klasse (class)  – Diese kann mehrmals im Dokument verwendet werden.

CSS-Datei:

.name {background-color: red;}

HTML-Datei:

<div class="name">

Der Punkt vor dem Namen in der CSS-Datei gibt an, dass es sich um eine Klasse handelt.


Variante 3

Über den Namen (Tag) des HTML-Befehls.

CSS-Datei:

h1 {background-color: red;}

HTML-Datei:

<h1>Meine Überschrift</h1>

Hier gilt die CSS-Anweisung für jede Überschrift der ersten Ordnung (h1) des gesamten HTML-Dokuments.


Aufbau der CSS Anweisungen

Der grundsätzliche Aufbau einer CSS-Anweisung besteht aus den folgenden Elementen:

Selektor { Eigenschaft: Wert; }

Der Selektor ist der Name eines HTML-Befehls oder ein frei gewählter Name für ein Element. Bei der Wahl des Namens sollte auf die Namenskonventionen geachtet werden. Sonst kann es zu Fehlern kommen, bei denen eine CSS-Anweisung von einem bestimmten Browser nicht interpretiert wird.

Die Eigenschaft ist das Schlüsselwort des Elementes, das verändert werden soll. Der Wert setzt sich aus Zahlen, Schlüsselwörtern oder Strings zusammen:

Beispiele:

background-color: red;
font-family: 'Courier New', serif;
border-width: 1px;

Grundsätzlich muss sehr auf die Syntax geachtet werden. Die Klammern, Doppelpunkte und Strichpunkte müssen an den richtigen Positionen angegeben werden.

#name {background-color: red;}

Eine einzeilige Darstellung ist genauso erlaubt wie beliebig viele Leerzeichen, Tabs und Zeilenumbrüche.

#name

             background-color:    red;
}

Das Thema CSS bietet weitaus mehr, als in diesem Beitrag angeschnitten wurde. Weitere Informationen zu diesem interessanten Thema erhalten Sie in unseren Opens internal link in current windowAPEX-Schulungen oder Sie sprechen mit unseren Opens internal link in current windowConsulting-Mitarbeitern.

APEX

Jede Menge Know-how für Sie!

In unserer Know-How Datenbank finden Sie mehr als 300 ausführliche Beiträge zu den Oracle-Themen wie DBA, SQL, PL/SQL, APEX und vielem mehr.
Hier erhalten Sie Antworten auf Ihre Fragen.