Web-basierte Anwendungssysteme XHTML- CSS
Werbung
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 <head><link rel="stylesheet" type="text/css" href="styles.css"/></head> EMBEDDING Die Formatdefinition wird mittels des Elements style direkt in der HTML-Datei eingefügt <head><style type="text/css"> […] </style></head> INLINE 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 styles.css body { font-family: sans- serif; } h1 { 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 HTMLDokument</p> Jens Mustermann, [email protected] </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 HTMLDokument</p> Jens Mustermann, [email protected] </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 <p> p { text-align: center; color: red; } id-Selektor <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: 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 <!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> 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 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 <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 --> </body> 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
