Upload
truongmien
View
214
Download
0
Embed Size (px)
Citation preview
Facts & Figures
Mittelständischer IT-Dienstleister
Technologie-orientiert
Branchen-unabhängig
Hauptsitz
Ratingen240
Beschäftigte
Gründung
1994
Niederlassung
Frankfurt am MainAusbildungs-
betrieb
Inhabergeführt
Zertifizierter
Partner von
Oracle,
Microsoft
und SAP
28 Mio. Euro
Umsatz
Managing Technology
Bachelor Angewandte Informatik
Wirtschaftsinformatik
Oracle APEX Berater
APEX (SQL/PLSQL)
Front-End (HTML/CSS/JS)
UI/UX
Vorher tätig in
Design und Entwicklung im Web
Kleine Änderungen
Neue UI-Elemente
Corporate Design
Redesign (Oder alles neu)
Spezielle Anforderungen
Responsive
User Experience
APEX im Internet
…Für den WOW-Effekt…
5
Wozu CSS?
Motivation
HyperText Markup Language
Definiert die Struktur
Die Bausteine von Webanwendungen
Cascading Style Sheets
Definiert die Darstellung
Wie sollen die Bausteine aussehen
HTML != CSS
Basics
Klare Trennung zwischen Struktur und Darstellung!
Element <div> div {…style…}
Klasse <div class=”doag”> .doag {…style…}
ID <div id=”doag”> #doag{…style…}
HTML & CSS
Basics
HTML CSS
HTML:
<div class=„box“>CSS is awesome</div>
CSS:
.box {
width: 400px;
height: 400px;
text-transform: uppercase;
border: 10px #000000 solid;
font-family: helvetica;
font-weight: bold;
font-size: 155px;
line-height: 132px;
}
HTML + CSS
CSS Basics
Attributselektoren
Selektoren
[a] Alle Elemente die das Attribut besitzen
[a=‘v‘] Alle Elemente mit dem exakten Attribut/Wert
[a~=‘v‘] Attribute die eine Zeichenkette enthalten (Durch Leerzeichen getrennt)
[a|=‘v‘] Attribute die mit einer Zeichenkette anfangen (Durch Bindestrich getrennt)
[a^=‘v‘] Attribute die mit einer Zeichenkette anfangen
[a$=‘v‘] Attribute die mit einer Zeichenkette enden
[a*=‘v‘] Attribute die eine Zeichenfolge beinhalten
!Mega hilfreich im APEX-Umfeld! +jQuery
Beispiele:
[HEADERS=“status“](In Reports) [data-series=“Element1“](Charting)
[href$=“.pdf“](Dateien) [disabled](UI-Elemente)
[class*=“mobile“]
!Essenziell!
Nachfahrenselektor E F {…}
Kindselektor E > F {…}
Selektor-Liste E , F {…}
z.B.: #meineRegion .t-Region-body,
#meineAndereRegion > .t-Region-body {
…style…
}
(Auch nett)
Nachbarselektor E + F {…}
Geschwisterselektor E ~ F {…}
Kombinatoren
Selektoren
strukturelle Pseudoklassen
:root
:empty
:first-child
:last-child
:nth-child()
:nth-last-child()
:only-child
:first-of-type
:last-of-type
:nth-of-type()
:nth-last-of-type()
:only-of-type
Pseudoklassen & Elemente
Selektoren
dynamische Pseudoklassen
:any-link, :link, :visited
:hover, :active, :focus
:target
:disabled, :enabled, :checked
:valid, :invalid
:in-range, :out-of-range
Pseudoelemente
::first-line
::first-letter
::before, ::after
::backdrop
::selection
[Quelle: wiki.selfhtml.org]
Oder: Aka warum springt mein Selektor nicht an? (Negativbeispiel)
Cascading Order
!important...letzter Ausweg!?
* A=0, B=0, C=0, D=0 Spezifität 0 0 0 0
h1 A=0, B=0, C=0, D=1 Spezifität 0 0 0 1
ul li A=0, B=0, C=0, D=2 Spezifität 0 0 0 2
a::after A=0, B=0, C=0, D=2 Spezifität 0 0 0 2
p:first-child A=0, B=0, C=1, D=1 Spezifität 0 0 1 1
a:not([href]) A=0, B=0, C=1, D=1 Spezifität 0 0 1 1
ul.nav [href] A=0, B=0, C=2, D=1 Spezifität 0 0 2 1
#author A=0, B=1, C=0, D=0 Spezifität 0 1 0 0
#editor p A=0, B=1, C=0, D=1 Spezifität 0 1 0 1
style="" A=1, B=0, C=0, D=0 Spezifität 1 0 0 0
Im Detail
Cascading Order
!important…selten notwendig
Chrome Developer Tools
Box Model
Beispiel: CSS is awesome
width
height
content
margin: Außenabstand
border: Rahmen
padding: Innenabstand
content: Inhalt
display: block
Beispiel: <div>
Erscheint in neuer Zeile
Breitet sich auf 100% aus
„Der“ Baustein
display: inline
Beispiel: <span>
Erscheint nicht in neuer Zeile
Breitet sich nicht auf 100% aus
Hauptsächlich für Textformatierung
weitere hilfreiche: none, list-item, flex, inline-block
CSS-Property: display
PL/SQL-Region
HTML-DOM mit CSS-Klassen
CSS beinhaltet
Layout
Abstände (Box Model)
Textformatierung
Farben
CSS3
transform: rotate (-90deg)
Konferenzplaner
Layout Beispiel
display: inline-block
display: block
display: block
display: block
->block (float: left)
static
Dafault
relative
fixed
absolute
CSS-Property: position
Ich bin default
Ich auch
Ich bin relative (left: 100px)
Ich bin „fixed“ und behalte meine Position
beim scrollen (top: 0; right: 0)
Ich bin default Ich bin absolute
(top: 0; right: 0)
Gruppieren
@media only screen and (max-width: 550px) {
.class1 {…}
.class2 {…}
#id1 > .class1 {…}
}
Abhängig vom Medium
Ein-/Ausblenden von Elementen
Schriftgröße anpassen
Padding/Margin/Width ändern
APEX-Grids manipulieren
Unterschiedliche Ausgabemedien steuern
Media Queries
@media only screen and (max-width: 600px) {.bewertung-region .t-AVPList-label {
width: 40%;}
}
Zahlreiche neue „Features“
Unterteilt in Module
Unterschiedlicher Entwicklungsstand
Und Browserunterstützung
Candidate Recommendation (CR)
Nicht alle brauchen vendor perfixes
z.B.:
-webkit- (Chrome, Safari)
-moz- (Firefox)
-o- (Old versions of Opera)
-ms- (Internet Explorer)
Allgemein
CSS3
Aufbau:
.klasse {
transition: [transition-property]
[transition-duration]
[transition-timing-function]
[transition-delay];
}
Beispiel:
.klasse {
transition: background-color 0.5s ease;
background-color: white;
}
. klasse:hover { background-color: red; }
Animationen ohne viel Aufwand (Farben/Größen/Positionen)
Transition
2D/3D Transforms
Skalieren
Drehen
„Translate“ (Bewegen)
„Skew“ (Schräglage)
Animations
Komplexe Animationen gestalten
Mit Keyframes
Flexbox
Neue Layoutingmethode
“CSS-Hacks“ nicht notwendig
Webfonts
Fonts benutzen, die beim Endanwender nicht installiert sind
Farben
RGBA
HSL
HSLA
Transparenz
…und noch viel mehr…
Kleine Aufzählung
Weitere Features