SAPUI5 – Grundlagenwissen Teil 2 (CSS)
Willkommen zu dem zweiten Teil der dreiteiligen Blogserie über die Grundlagen von SAPUI5. Diese Blogbeiträge sollen Sie, den erfahrenen ABAP-Coder und SAP GUI Experten, unterstützen und ermutigen die benötigten Basics der Webentwicklung zu erlernen, um einen reibungslosen Umstieg auf die SAPUI5 Entwicklung zu gewährleisten.
In dem letzten Beitrag haben wir eine sehr simple Webseite im Texteditor erstellt und sind auf die Basics von HTML eingegangen.
Mit Hilfe dieser Basis wird es Ihnen ein leichtes sein sich in die SAPUI5 Materie einzuarbeiten und weitaus komplexere Webseiten in kürzester Zeit zu entwickeln.
Doch die Elemente sehen in Ihrer Grundform natürlich nicht schön und modern aus. Wie kann man hier sein Corporate Design einfügen?! Mit dieser Fragestellung kommen wir zu unserem Hauptthema in diesem Beitrag -> CSS. CSS bedeutet Cascading Style Sheet. Diese Technologie wird genutzt, um Ihrer Website einen ordentlichen “Anstrich” zu verpassen, sprich Ihren durch HTLM eingefügten Inhalt zu formatieren, was für die Entwicklung mit SAPUI5 unabdingbar ist.
Das Prinzip von CSS ist relativ einfach. Sie definieren einen sogenannten “Selektor” und eine “Deklaration”.
Dieser Selektor bestimmt auf welches HTML-Element sich Ihr neu definiertes Layout bezieht:
Beispiel für das HTML-Element Absatz, Sie erinnern sich, das war das Element <p>:
p{ font-size: 12px;
color:red; }
Durch diese Definition haben Sie folgende Regel definiert. Jedes Absatzelement in Ihrer Webseite hat eine Schriftgröße 12 und die Schriftfarbe Rot.
Natürlich werden Sie jetzt denken, “wie blöd, dann kann ich nur eine Regel für alle Absätze definieren?!”… Zu Recht, das wäre wirklich sehr ungünstig. So ist es aber nicht. Hier kommen die Begriffe Klasse und ID ins Spiel.
Sie können HTML-Elementen IDs zuordnen.
<p id=“footer”>Besuchen Sie uns auch auf <a href=“https://mindsquare.de”> Mindsquare.de</a></p>
Wie Sie hier sehen hat dieser Absatz eine eindeutige ID “footer”, mit dieser können Sie diesen Absatz alleine ansprechen.
Welche Formatierung macht für eine Fußleiste Sinn?!
Als footer sollte er eine kleine Schriftgröße und ein unauffälliges Grau als Schriftfarbe haben.
Natürlich sollte der Absatz auch ganz unten auf der Seite stehen, sonst macht der Name “footer” wenig Sinn. Die Textanordnung sollte mittig sein.
IDs werden mit dem Zeichen “#” angesprochen, folgende Regel bewirkt, dass sich der Schriftzug klein und grau unten mittig auf der Website befindet.
#footer{
font-size: 12px;
color:gray;
text-align: center;
padding-top: 90%;
}
Das Ergebnis sieht wie folgt aus:
SAPUI5 – Grundlagenwissen Teil 2 (CSS)
CSS Formatierungen können als <style> HTML-Element direkt in den Header eingefügt werden oder über eine Referenz auf eine externe Datei eingebunden werden. Dies erfolgt über das HTML-Element <link href=“style.css” rel=“stylesheet”>
Sie können auch Klassen definieren, also mehrere Elemente einer Klasse zuordnen. Dies tun Sie über die Eigenschaft “class” eines HTML-Elementes.
<p class=“information”>Der Fachbereich informiert über alle relevanten Themen rund um das Thema mobile Anwendungen</p>
Diese Klassen sprechen Sie in Ihrer Style Definition mit einem Punkt an:
.information{
font-size: 12px;
color:blue;
}
Ebenfalls ist es auch möglich CSS-Definitionen “inline” in einem HTML-Element zu definieren:
<p id=”footer” style =”color:red” >Besuchen Sie uns auch auf <a href=”https://mindsquare.de”> Mindsquare.de</a></p>
Sie fragen sich nun bestimmt zu Recht, was eigentlich passiert, wenn ich in meiner CSS-Datei eine Regel festlege und diese dann später überschreibe, beispielsweise durch eine inline Ergänzung, welche zählt?
Hier greift die CSS-Hierarchie, diese lautet:
Wenn alle Selektoren gleich sind, greift die zuletzt definierte CSS-Regel.
Sie haben nun bereits den Klassen- und den ID-Selektor kennen gelernt, im folgenden führe ich alle vorhandenen Selektoren auf:
Universalselektor:
Dieser Selektor ist für alle Elemente gültig:
*{ font-size: 12px; }
Typselektor:
Mit diesem Selektor können Sie explizit genannte HTML-Elemente adressieren.
h1{ font-size: 18px;
color:red; }
ID-Selektor:
Dieser ist Ihnen ja bereits bekannt, er referenziert auf eine ID, die Sie einem HTML-Element auf Ihrer Webseite zugeordnet haben.
#footer{
font-size: 12px;
color:gray;
text-align: center;
padding-top: 90%;
}
Klassen-Selektor:
Mit diesem Selektor adressieren Sie alle HTML-Elemente die der betreffenden Klasse zugehören.
.adress{
font-size: 9px;
color:gray;
}
Nachfahrselektor:
Dieser Selektor ermöglicht Ihnen Verschachtelungen zu definieren. Ihre Regel greift nur, wenn das angegebene Element in einem anderen Element vorkommt.
p a{
font-size: 12px;
color:blue;
}
In diesem Beispiel wird ein <a>-Element nur mit blauer Schriftfarbe und Schriftgröße 12 dargestellt, wenn es sich in einem Absatz befindet.
Ich hoffe ich konnte Ihnen einen kleinen überschaubaren Überblick zum Thema CSS bieten, der Ihre Neugierde geweckt hat. Eine ausführliche Referenz zu beiden Themen (HTML5 und CSS) finden Sie unter http://www.w3schools.com
In meinem nächsten Teil dieser SAPUI5 Blogreihe gehe ich auf die Skriptsprache JavaScript und den DOM-Baum ein.
Die Webentwicklung ist zwar sehr verschieden zu der Entwicklung mit ABAP im SAP Umfeld, jedoch sehr interessant und kann viel Spaß machen. Diese Technologien sollten Sie kennen und beherrschen, da SAPUI5 auf diesen aufsetzt und diese nutzt.
Bei Fragen zu diesem Beitrag oder zu SAPUI5 allgemein zögern Sie bitte nicht die Kommentarfunktion zu nutzen, wir kommen dann schnellstmöglich auf Sie zurück.
