Web-basierte Anwendungssysteme XHTML- CSS Prof. Dr. Sergej Alekseev (alekseev@fb2.fra-uas.de) Prof. Dr. Armin Lehmann (lehmann@e-technik.org) 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 <head><link rel="stylesheet" type="text/css" href="styles.css"/></head> <head><style type="text/css"> [ ] </style></head> Die Formatdefinition erfolgt innerhalb eines Elements <h1 style type="[ ]">Überschrift</h1> Seite 3 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17
HTML und CSS in Kombination body { font-family: sansserif; h1 { styles.css color: red; font-size: 22px; index.htm <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"/> <meta charset="utf-8"> <title>erstes HTML-Dokument</title> </head> <body> <h1>hallo!</h1><p>dies ist mein erstes HTML- Dokument</p> Jens Mustermann, jens@mustermann.de </body></html> 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 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"/> <meta charset="utf-8"> <title>erstes HTML-Dokument</title> </head> <body> <h1>hallo!</h1><p>dies ist mein erstes HTML- Dokument</p> Jens Mustermann, jens@mustermann.de </body></html> 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 id-selektor p { <p> text-align: center; color: red; <div id=#para1> #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 <p class="center">.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 <p class="center 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="_blank" href="..." > 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: Einheit cm mm in px pt pc Beschreibung Zentimeter Millimeter Inch (1in = 96px = 2.54cm) Pixels (1px = 1/96in) Points (1pt = 1/72in) Picas (1pc = 12pt) Seite 12 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17
CSS-Längen Relative Längen: Einheit em ex Beschreibung % Prozent Relativ zur font-size eines Elements (2em = 2*font-size) Relativ zur Höhe der Schriftart (selten genutzt) Seite 13 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 <!DOCTYPE html> <html> <head> </head> <body> <div>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.</div> </body> </html> Browser aufrufen 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 <p style="font-size:3.3em; color:#990033"> Hello World </p> 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 <style type="text/css"> p {font-size:3.3em; color:#990033 </style> 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 {color: red div[class="c1"] {color: orange p.form1 {color: blue; font-size: 120% p[class="form2"] {color: yellow; font-size: 120% *.form3 {color: green; font-size: 160%.form3 {color: chocolate; font-size: 120%; und eine HTML-Datei mit folgendem Body <body> </body> <div class="c1" > Hello World</div> <p class="form1"> Hello World</p> <p class="form2"> Hello World</p> <h3 class="form3"> Hello World</h3> <h3 class="form1"> Hello World</h3> <!-- nicht erkannt --> Seite 22 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17
Übung 5 Erstellen Sie das dargestellte Layout mittels <div>-tags Erzeugen Sie für jedes <div> 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