Web-basierte Anwendungssysteme XHTML- CSS Prof. Dr. Sergej Alekseev (
[email protected]) Prof. Dr. Armin Lehmann (
[email protected])
Fachbereich 2 Informatik und Ingenieurwissenschaften Wissen durch Praxis stärkt
Seite 1
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Cascading Style Sheets - CSS CSS ermöglicht die Anpassung des optischen Erscheinungsbildes von HTML-Dokumenten im Browser: Schriftarten und/oder Größen Farben Positionierungen Mit CSS kann eine ganze Homepage relativ einfach und einheitlich gestaltet werden CSS durch W3C standardisiert, aktuelle Version ist CSS3
Seite 2
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Einbinden von CSS-Dateien LINKING Die Formatdefinition befindet sich in einer externen CSS-Datei
EMBEDDING Die Formatdefinition wird mittels des Elements style direkt in der HTML-Datei eingefügt […]
INLINE Die Formatdefinition erfolgt innerhalb eines Elements Überschrift
Seite 3
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
HTML und CSS in Kombination styles.css body { font-family: sans-
serif; } h1 { color: red; font-size: 22px;
}
index.htm Erstes HTML-Dokument Hallo!Dies ist mein erstes HTMLDokument Jens Mustermann,
[email protected]
Seite 4
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Vorteile von CSS Klare Trennung von Struktur/Inhalt und Erscheinungsbild CSS ermöglicht Anpassung an z.B. Ausgabegeräte mittels @media Parameter + all – default
+ screen – für Ausgabe auf PCs, tablets, usw. + print – für Ausgabe auf Druckern + speech – für Ausgabe mit Sprachausgabe Seite 5
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
HTML und CSS in Kombination styles.css body { background-color: pink; } @media screen and (min-width: 480px) { body { background-color: lightgreen; } }
Browser aufrufen
index.htm Erstes HTML-Dokument Hallo!Dies ist mein erstes HTMLDokument Jens Mustermann,
[email protected]
Seite 6
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
CSS-Syntax CSS-Datei besteht aus einer Regelsammlung Eine Regel besteht aus einem oder mehreren Selektoren und einem Deklarationsblock Selektoren universal | type | class | ID | combined Deklarationsblock "{" * (attribute ":" value ";") "}" Beispiel: Selektor
Deklaration
Deklaration
p {font-size:3.3em;color:#990033;} Seite 7
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Selektoren Selektoren werden benötigt, um das HTML-Element zu wählen z.B. anhand von name, id, class, attribute, … Element-Selektor
p { text-align: center; color: red; }
id-Selektor
#para1 { text-align: center; color: red; }
Seite 8
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Selektoren Klassen-Selektor
.center { text-align: center; color: red; }
Nur für spezielles Element mit der Klasse p.center { text-align: center; color: red; }
Benutzt zwei Style-Klassen center und large
Klassenselektoren können in einem Dokument mehrfach verwendet werden, ID-Selektoren nur einmal Seite 9
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Selektoren Gruppierung von Selektoren h1, h2, p { text-align: center; color: red; }
Attribut-Selektor a[target] { background-color: yellow; } a[target="_blank"] { background-color: yellow; }
Seite 10
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Selektoren All-Selektor * { background-color: gray; }
Zuweisung gilt für alle HTML-Elemente im Dokument
Seite 11
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
CSS-Längen Vielen CSS-Attributen muss eine Länge zugewiesen werden, z.B.: width, height, line-height, left, top, fontsize, margin, etc.
Absolute Längen:
Seite 12
Einheit
Beschreibung
cm
Zentimeter
mm
Millimeter
in
Inch (1in = 96px = 2.54cm)
px
Pixels (1px = 1/96in)
pt
Points (1pt = 1/72in)
pc
Picas (1pc = 12pt)
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
CSS-Längen Relative Längen:
Seite 13
Einheit
Beschreibung
em
Relativ zur font-size eines Elements (2em = 2*font-size)
ex
Relativ zur Höhe der Schriftart (selten genutzt)
%
Prozent
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
CSS-Werte Absolute Längen, sind horizontale oder vertikale Maße h2 {line-height:3cm} h3 {word-spacing:4mm} h4 {font-size:14pt}
Relative Längen body {font-size:12pt} p {line-height:1.5em}
Farben body {color:black; background: white} body {color:#000000; background: #ffffff}
Seite 14
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
CSS Box Model CSS nutzt zur Darstellung von Blockelementen das Box Model
Margin – Abstand zu anderen Elementen, Seitenrand, transparent Border – Rahmen (Farbe, Stil, Breite) Padding – Abstand zw. Border und Content, transparent Seite 15
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
CSS Box Model
Seite 16
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
HTML und CSS in Kombination styles.css div { background-color: lightgrey; width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }
index.htm
Browser aufrufen
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Seite 17
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Seite 18
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Übung 1 Erstellen Sie eine HTML-Datei mit folgendem Inhalt im Body Hello World
Seite 19
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Übung 2 Erstellen Sie eine HTML-Datei mit folgendem Inhalt im Head p {font-size:3.3em; color:#990033}
Seite 20
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Übung 3 Erstellen Sie eine HTML-Datei die eine CSS-Datei integriert und folgendes darstellt.
Seite 21
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Übung 4 - Selektoren Erstellen Sie eine CSS-Datei mit folgendem Inhalt div.c1 div[class="c1"] p.form1 p[class="form2"] *.form3 .form3
{color: red} {color: orange} {color: blue; font-size: 120%} {color: yellow; font-size: 120%} {color: green; font-size: 160%} {color: chocolate; font-size: 120%;}
und eine HTML-Datei mit folgendem Body Hello World Hello World Hello World Hello World Hello World
Seite 22
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
Übung 5 Erstellen Sie das dargestellte Layout mittels -Tags Erzeugen Sie für jedes einen id-Selektor Verwenden Sie nur folgende CSS-Attribute: width, height, background-color, margin, float
Seite 23
Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann
Web-basierte Anwendungssysteme WS 2016/17
