haben für CSS3 eine große Bedeutung. Bei <span> handelt es sich um ein sogenanntes Inline-Element, das innerhalb anderer HTML5-Elemente eingesetzt wird. Das

-Blockelement hingegen ersetzt andere Elemente und erzeugt einen Kasten, der mit CSS3 gestaltet werden kann. Lokale CSS3-Definitionen haben eine noch höhere Priorität als zentrale oder externe CSS3, so dass sich eine dreistufige Kaskadierung ergibt. CSS3-Datei (farbe.css) h1 {color:red;}

Kaskade CSS3 können extern, zentral und lokal definiert werden und dabei sich widersprechende Eigenschaften enthalten: Im Beispiel ist die Textfarbe rot, blau und grün. Die Regel lautet, dass lokale CSS3 vor zentralen vor externen CSS3 berücksichtigt werden: Der Text wird deshalb grün dargestellt.

49

2.3 Selektoren Auf Seite 47 haben Sie den allgemeinen Aufbau einer CSS3-Regel kennengelernt: Aufbau einer CSS3-Regel Selektor {

Eigenschaft1: Wert1; Eigenschaft2: Wert2; ...

}

Der Selektor befindet sich immer vor einer geschweiften Klammer und gibt das Element an, auf das sich die CSS3Eigenschaft(en) beziehen. CSS3 stellt unterschiedliche Typen von Selektoren bereit, die sich darüber hinaus miteinander kombinieren lassen. Hierdurch wird ein sehr flexibler Einsatz der Stylesheets möglich.

HTML5-Elemente Die Verwendung von HTML5-Elementen als Selektoren haben Sie bereits kennengelernt. Beachten Sie, dass in diesem Fall die spitzen Klammern weggelassen werden müssen. HTML5-Elemente (Tags) Allgemeine Definition tag {

Eigenschaft1: Wert1; Eigenschaft2: Wert2; ...

2.3.1 Einfache Selektoren Universalselektor Mit Hilfe eines Universalselektors (*) können Sie CSS3-Eigenschaften definieren, die für alle HTML5-Elemente gelten sollen. Sie sparen sich hierdurch einige Schreibarbeit. Im Beispiel wird allen Elementen eine weiße Hintergrundfarbe, graue Vordergrundfarbe sowie die Schriftart „Lucida Sans“ zugewiesen.

}

Beispiel h1

p

{

color: red; font-size: 18px; } { color: black; font-size: 14px; }

Universalselektor Allgemeine Definition *

{

Eigenschaft1: Wert1; Eigenschaft2: Wert2; ...

}

Beispiel *

50

{

background-color: white; color: gray; font-family: ”Lucida Sans Unicode“; }

Vielleicht fragen Sie sich, was passiert, wenn zusätzlich der Universalselektor – z. B. mit grauer Textfarbe – definiert wurde. In diesem Fall überschreiben die CSS3-Eigenschaften der HTML5Elemente die des Universalselektors.

CSS3 Klassen Die wenigen HTML5-Elemente reichen zur Spezifikation von CSS3-Eigenschaften nicht aus. So ist es beispielsweise mit einem einzigen

-Element nicht möglich, unterschiedliche Absätze zu realisieren. Um dies zu ermöglichen, können Sie eigene Selektoren definieren, die als Klassen bezeichnet werden. Eine Klasse wird durch einen Punkt (.) gefolgt von einem beliebigen Namen definiert. Einzige Einschränkung ist, dass der Name nicht mit einer Ziffer beginnen darf. Eine Klasse kann in jedem beliebigen HTML5-Element mit Hilfe des Schlüsselworts class aufgerufen werden.

Um den Gültigkeitsbereich einer Klasse auf ein bestimmtes HTML5-Element einzugrenzen, wird dieses Element vor den Punkt geschrieben. Im Beispiel überschreibt die mit dem Absatz

verbundene Klasse die Klassendefini tion darüber.

Klassen

Klassen mit HTML5-Elementen kombinieren

Allgemeine Definition

Allgemeine Definition

.meine_klasse { Eigenschaft1: Wert1; Eigenschaft2: Wert2; ... }

tag.meine_klasse { Eigenschaft1: Wert1; Eigenschaft2: Wert2; ... }

Aufruf der Klasse

Aufruf der Klasse

...

...

Beispiel

Beispiel

<meta charset=“utf-8“> Klassen <style> * {font-family: ”Lucida Sans Unicode“;} .rot {color: red;} .blau {color: blue;} .gruen {color: green;}

Überschrift

Hier steht ein erster Absatz

Hier steht ein zweiter Absatz

Überschrift

Hier steht ein erster Absatz

...

51

Individualformate Maximale Flexibilität ermöglichen – wie der Name ausdrückt – Individualformate. Sie unterscheiden sich in ihrer Definition von Klassen dadurch, dass sie nicht durch den Punkt-, sondern durch den Rauten-Operator (#) definiert werden. Individualformate sind dafür gedacht, dass sie nur einmal verwendet werden. Der Aufruf im HTML-Element erfolgt durch das id-Attribut. Individualformate Allgemeine Definition #mein_id { Eigenschaft1: Wert1; Eigenschaft2: Wert2; ... }

Aufruf des Individualformats ...

Beispiel <meta charset=“utf-8“> Individualformate <style> * {font-family: „Lucida Sans Unicode“;} #kursiv {color:blue;} span#kursiv {color:red;}

Überschrift

Hier steht ein erster Absatz.

Hier steht ein <span id=“kursiv“> zweiter Absatz

Pseudoklassen und -elemente Pseudoklassen und -elemente werden üblicherweise mit HTML5-Elementen kombiniert. Bei Pseudoklassen erfolgt die Verbindung mit dem HTML5-Element durch einen Doppelpunkt (:), bei Pseudoelementen durch zwei Doppelpunkte (::). In der Tabelle finden Sie eine unvollständige Liste mit Pseudoklassen und -elementen. Wer sich näher mit diesem Thema auseinandersetzen will, wird unter www.w3schools.com/cssref/ css_selectors.asp fündig. Pseudoklassen und -elemente Pseudoklassen :link :visited :hover :active :focus :nth-of-type(n)

unbesuchter Link besuchter Link mit Maus berührter Link (sogenannter „Mouseover“) aktuell angeklickter Link ausgewähltes Element, z. B. Formularfeld N-tes Vorkommmen eines HTML5-Elements. Das n in der Klammer kann eine Ziffer, eine Funktion (z.B. 2n) oder ein Schlüsselwort (even für gerade, odd für ungerade) sein.

Pseudoelemente

Wie bei Klassen können auch Individualformate auf ein bestimmtes HTML5Element beschränkt werden. Im Beispiel führt das Individualformat #kursiv mit dem <span>-Element zu einer anderen Farbe als ohne.

52

::first-line erste Zeile ::first-letter erster Buchstabe ::before Einfügen vor dem Element, content gibt den Inhalt an. ::after Einfügen nach dem Element, content gibt den Inhalt an.

CSS3

Pseudoklassen und -elemente Beispiel <meta charset=“utf-8“> Pseudoklassen <style> * {font-family:“Lucida Sans Unicode“;} a {color:white;} a:link {background-color:blue;} a:visited {background-color:red;} a:hover {background-color:green;} tr:nth-of-type(even) {background-color:silver;} td::first-letter{color:red;} td::after {content:“ Zeile“;}

Überschrift

1. Link 2. Link 3. Link

hinterlegt. Durch die Pseudoelemente werden in jeder Tabellenzeile der erste Buchtstabe (first-letter) rot hinterlegt und der Text „Zeile“ ergänzt.

2.3.2 Vererbung Das Prinzip der Vererbung besagt, dass CSS3-Eigenschaften übergeordneter Eltern- oder parent-Elemente an untergeordnete Kind- oder child-Elemente weitergegeben werden. Im Beispiel vererbt das parentElement die Hintergrund- und Textfarbe sowie die Schrift an alle child-Elemente. Diese definieren die Hintergrundfarbe neu und überschreiben damit das parent-Element. Vererbung Beispiel <meta charset=“utf-8“> Vererbung <style> body {background-color:white; color:white; font-family:“Lucida Sans Unicode“} header {background-color:gray;} article {background-color:red;} footer {background-color:green;}

Kopfbereich

<article>1. Textbeitrag <article>2. Textbeitrag

Das Beispiel zeigt drei Links, wobei der erste bereits besucht wurde (visited) und der dritte gerade mit der Maus berührt (hover) wird. In der Tabelle werden alle ungeraden Zeilen (odd) grau

53

2.3.3 Kombinierte Selektoren Die Kombination von Klassen, Indivi dualformaten und Pseudoklassen/-elementen mit HTML5-Elementen haben Sie bereits kennengelernt. CSS3 bietet weitere Möglichkeiten, wie Sie Selektoren miteinander kombinieren können. Kombination einfacher Selektoren Allgemeine Definition Aufzählung gleichberechtigter Selektoren element1, element2

{...}

Beschränkung auf element2 innerhalb von element1 element1 element2

{...}

Beschränkung auf element2 als Kind-Element von element1 element1 > element2

{...}

Beispiel <meta charset=“utf-8“> Kombination <style> * {font-family:“Lucida Sans Unicode“;} header,footer{background-color: silver;} article > p {color: white; background-color:red;}

Kopfbereich

Mein Textbeitrag

Hier noch mehr Text.

Im Beispiel wird der graue Hintergrund auf die Elemente

und

übertragen. Einen roten Hintergrund erhält hingegen nur der Absatz

, der Kind-Element von <article> ist. Der zweite Absatz ist Kind-Element von

und würde daher nur rot hinterlegt, wenn zwischen article und p kein Größer-Zeichen (>) stünde.

2.3.4 Rangfolge und Spezifität Autoren-, Benutzer- und BrowserStylesheets In den vergangenen Abschnitten haben Sie die Möglichkeiten kennengelernt, die Sie als Autor einer Website zur Definition von CSS3-Selektoren haben. Sie werden deshalb auch als AutorenStylesheets bezeichnet. Jeder Browser zeigt HTML5-Seiten an – auch wenn kein Stylesheet definiert ist. Er verwendet hierzu voreingestellte Browser-Stylesheets, die allen HTML5-Elementen bestimmte Grund eigenschaften und Werte zuordnen. Die dritte Möglichkeit besteht darin, dass der Anwender im Browser eigene Einstellungen vornimmt. Durch diese Benutzer-Stylesheets wird es beispielsweise möglich, die Schriftgröße an das Display oder die Lesegewohnheiten anzupassen. Welche Stylesheets werden verwendet, wenn sich die Autoren-, Benutzerund Browser-Stylesheets widersprechen? Rangfolge Autoren- werden vor Benutzer- und diese werden vor Browser-Stylesheets berücksichtigt.

Wenn also der Nutzer die Grundschrift in 20 px haben möchte, der Webdesig ner aber 14 px definiert, dann würde

54

CSS3 deklarieren Sie dieses Stylesheet als important. ! Im Beispiel werden Absätze durch die Zusatzangabe !important in der Schriftart „Georgia“ angezeigt. Ohne die Angabe würden sie in der „Arial“ angezeigt, weil diese Angabe unterhalb steht und somit die erste Schriftvorgabe überschreiben würde.

Browser-Stylesheets bei Google Chrome

die Einstellung des Nutzers – zu dessen Ärger – überschrieben. Das Beispiel verdeutlicht, weshalb Sie beim Webdesign nicht mit absoluten Einheiten (px, pt), sondern mit relativen Einheiten arbeiten sollten, die sich auf die Grundschriftgröße beziehen (siehe Seite 57). !important-Deklaration Es gibt aber auch Fälle, in denen Sie ein bestimmtes Stylesheet erzwingen möchten. Um dies zu erreichen, !important Beispiel Rangfolge <style> p {font-size: Georgia; !important} p {font-family: Arial;} } ...

Spezifität von Selektoren Abschließend muss geklärt werden, in welcher Reihenfolge die unterschiedlichen und sich möglicherweise widersprechenden Selektoren berücksichtigt werden. Betrachten Sie hierzu das Beispiel: Welche Farbe hat der Absatz, wenn für Universalformat weiß, HTML5-Element blau, Individualformat (id) orange, Klasse (class) grün und lokales Stylesheet rot zugewiesen wurde? Probieren Sie es aus – der Absatz erscheint rot. Dies ist nicht selbsterklärend, sondern wurde von den CSS3-Entwicklern so festgelegt Spezifität Beispiel Spezifität <style> * {color: white;} p {color: blue;} #orange {color: orange;} .gruen {color: green;}

Für diesen Absatz wurden verschiedene Selektoren definiert.

55

Selektor(kombination) Einfache Selektoren Universalelement

A

B

C

D

Beispiel

0

0

0

0

*

{...}

HTML5-Element

0

0

0

1

body

{...}

Klasse oder Pseudoklasse

0

0

1

0

.rot

{...}

Individualformat

0

1

0

0

#blau {...}

Lokale style-Definition

1

0

0

0

...

HTML5-Element:Pseudoklasse

0

0

1

1

a:hover

{...}

HTML5-Element HTML5-Element

0

0

0

2

article p

{...}

Individualformat HTML5-Element

0

1

0

1

#blau p

{...}

Individualformat HTML5-Element:Pseudoklasse

0

1

1

1

#rot a:hover {...}

Kombinierte Selektoren (Beispiele)

und als Spezifität bezeichnet. Die Spezifität legt die Reihenfolge fest, in der die verschiedenen Stylesheet-Defini tionen berücksichtigt werden. Hierzu gibt es vier Gruppen von A bis D, wobei Gruppe A die höchste und Gruppe D die niedrigste Spezifität zugeordnet ist. Anders gesagt: A überschreibt B, B Spezifität Beispiel <meta charset=“utf-8“> Kombinationen <style> * {font-family: „Lucida Sans Unicode“;} p {color:blue;} p.farbe {color: orange;} p > span {color: red;} p #farbe {color:gray;} p #farbe span {color:maroon;}

Welche Farbe?

Ein blauer Absatz mit etwas <span>rot.

Ein oranger Absatz mit etwas <span style=“color: green“>grün.

<span id=“farbe“>Ein grauer Absatz mit etwas <span>braun .

56

überschreibt C, C überschreibt D. Bei kombinierten Selektoren brauchen Sie also nur die Spezifitäten zu kombinieren, wie die Beispiele in der Tabelle zeigen. Die vier Ziffern ergeben zusammen eine vierstellige Zahl, und je größer diese Zahl ist, umso höher ist die Spezifität des Stylesheets. Die höchste Spezifität in der Tabelle besitzen somit InlineStylesheets mit (1 0 0 0), die niedrigste der Universalselektor mit (0 0 0 0). Somit ist klar, weshalb der Absatz auf der vorherigen Seite in Rot dargestellt wird. Das Beispiel links zeigt, dass sich nun fast beliebig viele Kombinations möglichkeiten ergeben und man Gefahr läuft, den Überblick zu verlieren. Wichtig ist vor allem, dass Sie „Ihre“ Stylesheets“ von Anfang an gut strukturieren und dokumentieren.

CSS3

2.4 Maßeinheiten Die Vielzahl unterschiedlicher Maßeinheiten bei CSS3 ist zunächst verwirrend. Wenn Sie allerdings bedenken, dass Sie mit CSS3 nicht nur Webseiten, sondern auch deren „Druckversion“ formatieren, haben auch Längenangaben wie cm oder Inch ihre Berechtigung. Absolute Maßeinheiten Absolute Maßeinheiten sind feste Größen mit Einheiten, die Sie aus dem Printbereich kennen: Millimeter, Zentimeter, Punkt, Pica. Sie ergeben am Bildschirm keinen Sinn, bieten sich jedoch an, wenn Sie Stylesheets für den Ausdruck einer Website formatieren. Relative Maßeinheiten Relative Maßeinheiten besitzen keine festen Größen, sondern beziehen sich immer auf eine (variable) Voreinstellung. Beispiele sind die aus der Typografie bekannten Höhenangaben der Buchstaben M oder x. Bei CSS3 werden diese als em bzw. ex gekennzeichnet. Die Angabe 1.5 em*) bezeichnet die 1,5-fache M-Höhe der im Browser eingestellten Grundschrift (Standard: 16 px). Eine weitere wichtige relative Maßeinzeit ist die Prozentangabe. Sie bezieht sich auf das übergeordnete Element oder auf die Größe des Browserfensters. Bei Verkleinerung des Fensters verkleinert sich ein mittels Prozent definiertes Layout dementsprechend auch. Bei der häufig verwendeten Angabe px Absolute Maßeinheiten Einheit Bedeutung px Pixel, absolute Anzahl der Bildpunkte eines Monitors

handelt es sich weder um eine echte absolute noch um eine echte relative Angabe. Denn die Anzahl an Pixeln hängt von der auf dem Display eingestellten Auflösung ab, ist also relativ in Bezug auf die Displaygröße. Flüssige Layouts Bereits heute geht die überwiegende Anzahl der Nutzer mit mobilen Endgeräten ins Internet. Diese gibt es – vom Smartphone über Tablets bis zu Laptops – in allen möglichen Größen. Für Webdesign gilt deshalb heute folgende Grundforderung: Flüssiges (liquid) Layout Nur durch relative Maßeinheiten wird es möglich, das Layout einer Website an die unterschiedlichen Displaygrößen der Endgeräte anzupassen.

Denn mit absoluten Angaben, und dies gilt letztlich auch für Angaben in Pixel (px), lässt sich ein Layout nur an eine Displaygröße optimal anpassen. Ein weiteres Argument für relative Angaben ist ihre Bedienfreundlichkeit. Insbesondere bei „barrierefreien“ Seiten, die auch Menschen mit Einschränkungen einen Zugang gewähren, muss es dem Nutzer möglich sein, sich die Darstellung nach Wunsch anzupassen. Verabschieden wir uns also von der Vorstellung, eine Website mit einem festen Layout entwerfen zu können.

Beispiel width:100px;

*) Kommazahlen Beachten Sie, dass Kommazahlen mit Dezimalpunkt (.) und nicht mit Komma notiert werden müssen!

Relative Maßeinheiten Einheit Bedeutung px Pixel ist (auch) relativ, da die Anzahl der Pixel von der Monitorauflösung abhängig ist.

Beispiel top:50px; bottom:100px;

mm

Millimeter

height:20mm;

cm

Zentimeter

margin:1cm;

em

M-Höhe, Bezug: Schriftgröße 16 px

font-size:1.2em

pt

Punkt (= 0,3528 mm)

line-height:12pt;

ex

x-Höhe, Bezug zu Kleinbuchstaben

font-size:0.8ex

pc

Pica (= 12 pt)

font-size: 1pc;

%

width:50%;

in

Inch (= 2,54 cm)

padding: 0.5 in

Prozent, Bezug zum übergeordneten Element/Browserfenster

57

2.5 Farben 2.5.1 Hexadezimale Farbangaben Die Angabe von Farben in hexadezimaler Schreibweise erfolgt bei CSS3 durch das #-Zeichen, gefolgt von drei mal zwei Hexadezimalziffern für den Rot-, Grün- und Blauanteil der Farbe: Hexadezimale Farbdefinition #xxxxxx

Rotanteil Blauanteil Grünanteil

Farben aus Photoshop oder Illustrator Hexadezimale Farb angaben können Sie aus dem Farbwähler direkt entnehmen A.

Mit einer zweistelligen Hexadezimalzahl (xx) pro Farbkanal lassen sich von 00 bis FF insgesamt 256 unterschiedliche Farben darstellen. Zusammen bildet die sechsstellige Hexadezimalzahl also den kompletten RGB-Farbraum von 256 x 256 x 256 = 16,7 Millionen Farben ab. Die Mischfarbe ergibt sich nach den Gesetzmäßigkeiten der additiven Farbmischung. Beispiele für Farbangaben: #123456 #AE35DF #0F3A5E Der Vorteil der hexadezimalen Schreibweise ist, dass Sie eine Farbangabe einfach aus Photoshop oder Illustrator

A kopieren und an der entsprechenden Stelle im Quellcode einfügen können. Die Buchstaben A bis E des Hexadezimalcodes können Sie wahlweise groß oder klein schreiben. „Websichere“ Farben Zur verbindlichen Darstellung von Farben auf unterschiedlichen Rechnern und Betriebssystemen wurde ursprünglich eine Auswahl von 216 Farben als „websichere“ Farben definiert. Hierzu setzen Sie im Farbwähler das Häkchen bei Nur Webfarben anzeigen B . Um eine websichere Farbe zu erhalten, dürfen pro Farbkanal die Hexadezi malzahlen 0, 3, 6, 9, C und F immer nur paarweise verwendet werden. Dies ergibt 6 x 6 x 6 = 216 Farben. Beispiele: Schwarz: #000000 Weiß: #FFFFFF Blau: #0000FF Gelb: #FFFF00 Grau: #999999 Heute haben websichere Farben aus technischer Sicht keine Bedeutung mehr. Um Farbabstände und -harmonien zu finden, kann es jedoch hilfreich sein, den großen RGB-Farbraum auf einige wenige Farben einzuschränken.

2.5.2 Dezimale Farbangaben Eine zweite Möglichkeit der Farbangabe besteht darin, den Rot-, Grün- und Blauanteil als Dezimalzahl anzugeben: Dezimale Farbdefinition rgb(xxx,xxx,xxx)

Rotanteil

Grünanteil

Blauanteil

C B

58

A

Die „xxx“ stehen in diesem Fall für dezimale Farbwerte. Sie können wahl-

CSS3 weise als Zahlen von 0 bis 255 oder prozentual angegeben werden. Die Zahlenwerte können Sie ebenfalls direkt im Photoshop- oder Illustrator-Farbwähler C (vorherige Seite) ablesen. Transparenz Farbangaben in dezimaler Schreibweise bieten den Vorteil, dass Sie durch Angabe eines vierten Wertes die Transparenz der Farbe von völlig durchsichtig (0) bis undurchsichtig (1.0) angeben können. Hängen Sie in diesem Fall ein „a“ für Alphakanal an rgb. Transparenz rgba(xxx,xxx,xxx,y.z)

Transparenz

Beispiel: Die Angabe 0.6 bedeutet, dass die Farbe zu 40 % durchsichtig ist. Beachten Sie bitte, dass wie bei Maßangaben auch hier Dezimalzahlen nicht mit Komma, sondern mit einem Punkt geschrieben werden.

2.5.3 Farbnamen Für 140 Farben können Sie auch vordefinierte Namen verwenden, z. B.: color: blue; background-color: white; Die Tabelle links unten zeigt eine kleine Auswahl, alle Farbnamen finden Sie beispielsweise unter www.w3schools. com/colors/colors_hex.asp.

2.5.4 Farbverläufe Mit CSS3 können Sie einen Hintergrund mit einem linearen und radialen Farbverlauf versehen. Farbverläufe Allg. Definition eines linearen Farbverlaufs background: linear-gradient(richtung, farbe1,farbe2,...); richtung kann z. B. to bottom, to top, to right, to left oder eine Winkelangabe z. B. 45deg sein.

Allg. Definition eines radialen Farbverlaufs background: radial-gradient(farbe1, farbe2,...);

Hex-Code

Farbname

Beispiel

#000000

black

#808080

gray

#C0C0C0

silver

#FFFFFF

white

#00008B

darkblue

#00FFFF

cyan

#006400

darkgreen

#008000

green

#800080

purple

#EE82EE

violet

#FF0000

red

#FF5400

orangered

#FFA500

orange

#FFD700

gold

#FFFF00

yellow

#FFFFF0

ivory

<meta charset=“utf-8“> Farbverläufe <style> #box1 {height:200px; width:200px; background: linear-gradient (45deg,yellow,red);} #box2 {height:200px; width:200px; background: radial-gradient (cyan,blue);}

59

2.6 Typografie

Google Fonts Google stellt Filter A zur Suche nach einer passenden Schrift bereit. Klicken Sie auf das Icon B, um eine Schrift zu verwenden. Danach muss lediglich der angezeigte Quellcode kopiert und in der HTML5-Datei eingefügt werden.

Für die typografische Gestaltung von Webseiten stellen Ihnen die CSS3 Möglichkeiten zur Verfügung, die Sie aus dem Bereich der Typografie für Printmedien kennen. Der Unterschied zu Printmedien besteht jedoch darin, dass es im Web eine Vielzahl an Endgeräten gibt. Diese unterscheiden sich nicht nur hinsichtlich ihres Formats, sondern auch hinsichtlich Betriebssystem, Webbrowser und Browserversion. Und obwohl sich die Browserhersteller immer besser an die Standards des W3C halten, können Sie nicht grundsätzlich davon ausgehen, dass Ihr Design auf unterschiedlichen Plattformen und mit unterschiedlichen Browsern identisch aussieht. Im schlimmsten Fall kommen ältere Browserversionen zum Einsatz, die das gewünschte Feature noch gar nicht unterstützen. Die typografische Gestaltung von Webseiten erfordert deshalb Erfahrung. Eine wichtige Hilfe ist hierbei caniuse. com, da Sie dort prüfen können, welche

A

B

60

Browserversion für eine gewünschte CSS3-Eigenschaft erforderlich ist. Sie sollten sich auf CSS3-Eigenschaften begrenzen, die durch alle aktuellen Browser interpretiert werden.

2.6.1 Schriftart Da es sich bei HTML5- und CSS3Dateien um reine Textdateien handelt, ist es nicht möglich, Schriftdateien einzubinden. Lange Zeit mussten sich Webdesigner/-innen auf Systemschriften, also die Schriften des Betriebssystems, beschränken. Dies hatte zur Folge, dass auf Webseiten die immer gleichen Schriften wie Arial, Verdana oder Georgia zu sehen waren – eine völlig unbefriedigende Situation! Mit CSS3 wurde (endlich) eine Möglichkeit geschaffen, auch andere Schriften zu verwenden: Die Idee besteht darin, den Zeichensatz über einen Link mit dem Dokument zu verknüpfen. Die Schriftdatei kann sich dabei auf demselben oder auf einem anderen Server befinden. Einige wichtige Formate dieser sogenannten Webfonts sind: TrueType-Fonts (.TTF) OpenType-Fonts (.OTF) Web Open Font Format (.WOFF) Bei WOFF handelt es sich um ein Containerformat, das TrueType- oder OpenType-Schriften einbettet und komprimiert. Hierdurch wird die Ladezeit der Schrift reduziert. Natürlich muss – wie im Printbereich auch – beachtet werden, dass auch für Schriften eine Nutzungslizenz erforderlich ist. Es gibt jedoch auch Anbieter mit Open-Source-Fonts, die Sie lizenzfrei verwenden dürfen, z. B. Google Fonts, siehe unter fonts.google.com. Eine Übersicht über die Anbieter von Webfonts finden Sie hier: http://webfontsanbieter.de.

CSS3 Die Verwendung von Webfonts ist denkbar einfach: Kopieren Sie den auf der Website des Schriftanbieters angegebenen in den Ihrer HTML5-Datei. Der Zugriff auf die Schrift erfolgt dann mit font-family. Liegt Ihnen die Schrift als Datei vor, können Sie diese alternativ zu mit dem CSS3-Element @font-face einbetten. Schriftart Verwendung einer Systemschrift font-family: Arial; font-family: “Times New Roman“; font-family: Verdana, Arial, sans-serif;

Hinweise: • Schriftnamen mit Leerzeichen müssen in Anführungszeichen gesetzt werden. • Bei Angabe mehrerer Schriften werden diese durch Komma getrennt. Der Browser verwendet die erste Schrift von links nach rechts, die im Betriebssystem installiert ist. Verwendung eines Webfonts mit <style> p {font-family: ”Open Sans“;}

Hinweis: Die unter href anzugebende Adresse kopieren Sie vom Anbieter der Schrift in den Dateikopf Ihrer Datei. Verwendung einer Schriftdatei mit @font-face <style> @font-face { font-family:Corbel; src:url(corbel.ttf); } p {font-family:Corbel}

Hinweise: • Im Beispiel liegt die Schriftdatei im selben Verzeichnis wie die HTML-Datei. • Bei externen Schriftdateien muss die komplette URL in der Form: http://... angegeben werden.

2.6.2 Schriftattribute Nachdem Sie die gewünschte Schrift mit Ihrer Webseite verlinkt haben, stehen Ihnen zahlreiche Möglichkeiten zur Formatierung zur Verfügung. Hierbei geht es nicht nur um eine ansprechende typografische Gestaltung, sondern auch um die Frage optimaler Lesbarkeit auf allen späteren Ausgabegeräten vom Smartphone bis zum großen Monitor. Generell gilt, dass der Nutzer der Website die Schriftdarstellung beeinflussen können sollte. Aus diesem Grund sind relative Schriftmaße, die sich auf die im Browser eingestellte Grundschrift beziehen, sinnvoller als absolute, feste Schriftmaße. W3C empfiehlt die Verwendung der relativen Einheit em (siehe Seite 57). Hierbei ist zu beachten, dass der Internet Explorer diese Einheit erst ab Version 10 unterstützt. Schrifteigenschaften Schriftgröße font-size: 10px; font-size: 1.5em; font-size: 100%;

absolute Einheit relative Einheit relative Einheit

Schriftstil font-style: normal; font-style: italic; font-style: oblique;

normal kursiv schräg

Schriftstärke font-weight: font-weight: font-weight: font-weight: font-weight: font-weight: ... font-weight: font-weight:

normal; bold; bolder; lighter; 100; 200; ... 800; 900;

normal fett (bold) extra fett dünn extra dünn dünn fett extra fett

Zulässige Kombination font: bold 2.0em Verdana;

61

Schrifteigenschaften (Fortsetzung)

Absätze

Zeichenabstand

Zeilenumbruch

letter-spacing: 0.2em; letter-spacing: 1px;

white-space: normal; Text umbricht am rechten Browserrand white-space: pre; Text umbricht wie im

Hinweis: Alternativ können Sie font-stretch verwenden. Wortabstand

... <style> p.ohne {white-space:normal;} p.mit {white-space:pre;} ...

Dies ist ein Text, der den Textumbruch demonstriert.

...

word-spacing: 0.5em; word-spacing: 2px;

Schriftfarbe (siehe Seite 58) color: color: color: color:

black; #0000FF; rgb(100,200,0); rgb(100%,20%,10%);

Textauszeichnung text-decoration: none; text-decoration: underline; text-decoration: overline; text-decoration: blink; text-decoration: line-through;

Zeilenabstand ohne unterstrichen überstrichen blinkend durchgestrichen

2.6.3 Zeilenumbruch Standardmäßig füllt HTML5 den zur Verfügung stehenden Platz mit Text auf, also bis zum rechten Rand des Browserfensters. Aus diesem Grund müssen Sie im Quellcode angeben, wo Sie Absätze haben möchten. Bei HTML5 dient hierzu das
-Tag. Seit CSS3 gibt es die Möglichkeit, mit Hilfe von white-space den Zeilen umbruch aus dem Editor zu übernehmen und sich auf diese Weise die Verwendung von
zu ersparen.

62

Editor gesetzt

Beispiel

line-height: 1.5em; line-height: 18px;

Erstzeileneinzug text-indent: 1.0em; text-indent: 2mm;

Satzart text-align: text-align: text-align: text-align:

left; right; center; justify;

Flattersatz, links Flattersatz, rechts Mittelachsensatz Blocksatz

Vertikale Textausrichtung vertical-align: top; oben vertical-align: middle; mittig vertical-align: bottom; unten

2.6.4 Abstände und Rahmen Bei Absätzen

, Überschriften

bis

, Tabellen und Listen
bzw.
handelt es sich um sogenannte Blockelemente. Diese können Sie wahlweise mit einem Innenabstand, Außenabstand, mit einer Rahmenlinie, Hintergrundfarbe oder einem Hintergrundbild versehen.

CSS3 Die CSS3-Elemente zur Gestaltung und Formatierung von Blockelementen finden Sie ab Seite 66.

Eigenschaften, die zur Formatierung von Tabellen dienen, sind: Tabellen

2.6.5 Listen

Zellenabstand

Listen stellen ein wichtiges HTML5- Element zur Gliederung von Texten dar. Unterschieden werden dabei Aufzählungslisten,
für „unordered list“, die in jeder Zeile mit einem Aufzählungszeichen beginnen, und nummerierte Listen,
für „ordered list“, die mit Ziffern oder Buchstaben beginnen. Listen können verschachtelt werden, so dass Sie beispielsweise eine Aufzählungsliste auch innerhalb einer nummerierten Liste platzieren können.

border-spacing: 5px;

Überlagerung von Rahmen border-collapse: separate; border-collapse: collapse;

keine überlagert

Umgang mit leeren Zellen empty-cells: show; empty-cells: hide;

Anzeige keine Anzeige

Hinweis: Besser ist es, leere Zellen zu vermeiden. Platzieren Sie zumindest ein Leerzeichen ( ) in jeder Zelle.

Listen Aufzählungszeichen bei
list-style-type: list-style-type: list-style-type: list-style-type:

none; disc; circle; square;

ohne gefüllter Kreis leerer Kreis Quadrat

Nummerierung bei
list-style-type: list-style-type: list-style-type: list-style-type: list-style-type:

decimal; 1., 2., 3. lower-roman; i., ii., iii. upper-roman; I., II., III. lower-alpha; a., b., c. upper-alpha; A., B., C.

Position des Aufzählungszeichens list-style-position: innerhalb des Textblockes inside; outside; außerhalb des Textblockes

Eigene Grafik als Aufzählungszeichen list-style-image: url(punkt.gif)

2.6.6 Tabellen Tabellen dienen, wie im HTML5-Kapitel deutlich betont, nicht zum Layouten von Webseiten, sondern ausschließlich zur Darstellung tabellarischer Daten.

Zur Gestaltung des Textes innerhalb einer Tabelle und zur Formatierung der Tabelle selbst (Farben, Rahmen, Abstände) verwenden Sie die CSS3Eigenschaften, die in den vorherigen Abschnitten besprochen wurden. Sie können die Eigenschaften wahlwei-

63

se auf die gesamte Tabelle
, einzelne Datenzellen anwenden. Auf diese Weise können Sie beispielsweise Tabellen mit abwechselnder Zeilenfarbe realisieren.

2.6.7 Hintergründe Jedem sogenannten Blockelement einer HTML5-Datei, also beispielsweise Header
, Artikel <article> oder dem , können Sie wahlweise eine Hintergrundfarbe oder ein Hintergrundbild zuweisen. Um das gesamte Browserfenster mit einer Farbe oder einem Hintergrundbild zu versehen, weisen Sie die Farbe oder das Bild dem -Tag zu (siehe Beispiel). Der Zugriff auf Webseiten erfolgt mit unterschiedlichen Endgeräten wie Laptops, Tablets oder Smartphones. Da sich diese Geräte hinsichtlich Seitenverhältnis und Auflösung unterscheiden, brauchen Sie einen Hintergrund, der sich an die unterschiedlichen Displaygrößen anpasst. Hierfür gibt es folgende Möglichkeiten: Bildwiederholung Standardmäßig wird ein Bild links oben platziert und mehrfach dargestellt, wenn das Browserfenster größer ist als das Bild. Mit der Eigenschaft background-repeat können Sie dies unterbinden, indem Sie die Option norepeat wählen. Bildposition Bei Monitoren oder Displays liegt der Nullpunkt des Koordinatensystems in der linken oberen Ecke. Mit der Eigenschaft background-position geben Sie an, welchen horizontalen und vertikalen Abstand ein Bild von diesem Punkt haben soll.

64

Hintergrundfarbe oder -bild Hintergrundfarbe (siehe Seite 58) background-color: #CCCCCC;

Hintergrundbild background-image: url(“grafik.gif“);

Bildwiederholung background-repeat: repeat; Wiederholung background-repeat: repeat-y; nur senkrecht background-repeat: repeat-x; nur waagrecht background-repeat: no-repeat; ohne Whg.

Bildposition background-position: background-position: background-position: background-position: background-position:

50px 100px; 100% 50%; top left; bottom right; center center;

Bildgröße background-size: background-size: background-size: background-size:

400px 300px; 100% 50%; contain; cover;

Scrollverhalten background-attachment: scroll; Bild scrollt background-attachment: fixed; Bild fest

Beispiel <style> body {margin:0px; background:#333; background-image:url(“back.jpg“); background-position: 100% 50%; background-repeat:no-repeat; background-size:cover; }

Wichtiger als absolute Angaben in Pixel sind prozentuale Angaben, weil hierdurch eine Anpassung an unterschiedliche Displaygrößen möglich wird. Die Angabe 100% 50% bewirkt, dass das Bild horizontal komplett (100 %) dargestellt wird und vertikal von der Bildmitte (50 %) aus „aufgefüllt“ wird. Sie bestimmen hierdurch also den Bildausschnitt, der gezeigt wird, wenn das Bild nicht komplett in das Fenster passt.

CSS3 Bildgröße Die zweite wichtige Eigenschaft für Hintergrundbilder in flexiblen Layouts ist background-size. Auch hier sind absolute Angaben in Pixel oder relative Angaben in Prozent möglich. Die Option contain passt das komplette Bild in den verfügbaren Platz komplett ein,

was zur Folge hat, dass horizontal oder vertikal freie Bereiche sichtbar bleiben können. Für Hintergründe empfiehlt sich die Verwendung der Option cover, da hierbei der gesamte Platz gefüllt wird, ohne dass das Bild verzerrt wird. Auf diese Weise bleibt immer ein Bildausschnitt sichtbar. Flexibles Hintergrundbild Oben wird das komplette BIld mit der CSS3-Eigenschaft background-size: contain in den zur

Verfügung stehenden Bereich eingepasst. Unten sorgt die CSS3-Eigenschaft background-size: cover dafür, dass der

background-size: contain;

zur Verfügung stehende Bereich immer komplett ausgefüllt wird. Hierdurch wird eine flexible Anpassung des Bildes an unterschiedliche Displaygrößen erreicht.

background-size: cover;

65

2.7 Layout Die „Königsdisziplin“ im Umgang mit CSS3 ist das Erstellen kompletter Layouts. Wie im Printbereich werden für Layouts Rahmen – sogenannte Blockelemente – verwendet, die erst im zweiten Schritt mit dem gewünschten Content versehen werden. Leider ist der Umgang mit CSS3-Layouts alles andere als einfach. Dies liegt einerseits an den vielfältigen Möglichkeiten, die Sie zum Platzieren von Blockelementen haben. Andererseits ist es heutzutage Pflicht, dass Layouts flexibel sind und sich an die unterschiedlichen Endgeräte dynamisch anpassen. Dabei gilt die Forderung Mobile First, weil die Mehrzahl der User mit mobilen Endgeräten ins Internet geht, und die Darstellung auf mobilen Endgeräten damit optimiert werden muss. Mehr hierzu finden Sie in Kapitel 2.8 ab Seite 76. 100

200

300

400

500

2.7.1 CSS3-Boxmodell Blockelemente stellen die Grundbausteine dar, aus denen sich beliebige Layouts aufbauen lassen. Wichtige Blockelemente dienen zur Seitenstrukturierung wie der gesamte Dateikörper , Kopfbereich
oder Fußbereich
. Die zweite Gruppe der Blockelemente beschreiben die Textstruktur mit Absätzen
, Überschriften, z. B.
, Tabellen
und teilweise auch auf einzelne Datenreihen

oder Listen
oder
. Ein weiteres, häufig verwendetes Blockelement, ist das
-Element. Um den Umgang mit Blockelemen ten zu verstehen, muss zunächst das sogenannte CSS3-Boxmodell erläutert werden. Betrachten Sie hierzu die folgende Grafik:

600

700

800

900

B

100 200 300 400

padding

600 700 800

66

Blockelement

left margin

border-width

D A width

height

500

Blockelemente können Sie sich als Kas ten (Box) vorstellen. Jedes Blockelement kann mit einem Rahmen, einem Außenoder Innenabstand sowie mit einer Farbe versehen werden. Das allgemeine Blockelement
ist ausschließlich zur Formatierung mit CSS3 gedacht.

top

CSS3-Boxmodell

E

C

1000

1100

CSS3 Ein Blockelement erzeugt zunächst einen leeren Rahmen („Box“), der sich an beliebiger Stelle auf dem Bildschirm platzieren lässt. Jede Box ist durch folgende Eigenschaften gekennzeichnet: Breite (width) und Höhe (height), z. B. in Pixel oder prozentual, bezogen auf die Displaybreite bzw. -höhe, optional eine Rahmenlinie (border) mit einer bestimmten Breite (border-width), optional einen Außenabstand (margin) zum übergeordneten Blockelement, z. B. zum Rand des Browserfensters, optional einen Innenabstand (padding), z. B. um einen Abstand zwischen Text und Rändern zu erhalten. Die Abmessungen des Blockelements ergeben sich durch Addition der einzelnen Bestandteile. Hierzu eine Beispielrechnung: Box-Breite A width 500 px B margin 2 x 100 px = 200 px C border-width 2 x 10 px = 20 px D padding 2 x 90 px = 180 px 900 px

Eigenschaften von Blockelementen Breite und Höhe width: 600px; width: 80%;

min-width: 100px; max-width: 800px; height: 300px; min-height: 80px; max-height: 60px;

Feste Breite Relative Breite (zu übergeordneter Box) Minimale Breite Maximale Breite Feste Höhe Minimale Höhe Maximale Höhe

Außenabstände margin-top: 100px; oben margin-bottom: 50px; unten margin-left: 20%; links margin-right: 3.0em; rechts margin: 30px; gleiche Abstände margin: 6px 0 8px 5px; oben, rechts, unten, links

Hinweis: Informationen zu den Maßeinheiten finden Sie auf Seite 57. Innenabstände

padding-top: 100px; oben padding-bottom: 50px; unten padding-left: 20%; links padding-right: 3.0em; rechts padding: 30px; gleiche Abstände padding: 6px 0 8px 5px; oben, rechts, unten, links

Hintergrundfarbe (siehe Seite 58) background-color: blue; background-color: #A097FC;

Hintergrundbild (siehe Seite 64)

Box-Höhe E height 200 px B margin 2 x 100 px = 200 px C border-width 2 x 10 px = 20 px D padding 2 x 90 px = 180 px 600 px Im Ihrem Layout müssen Sie also die Größe 900 x 600 Pixel vorsehen und nicht die bei width und height angegebenen Werte. Dies wäre nur korrekt, wenn die Box weder Außenabstand, Innenabstand noch Linie hätte. Für das Layouten von Webseiten ist obiges Boxmodell nicht ideal – wer

background-image: url(“grafik.jpg“);

Rahmenstärke border-width: 3px;

Rahmenart border-style: border-style: border-style: border-style: border-style:

none; dotted; dashed; solid; double;

ohne gepunktet gestrichelt durchgezogen doppelt

Rahmenfarbe (siehe Seite 58) border-color: #000000;

Rahmen mit abgerundeten Ecken border-radius: 10px;

67

Eigenschaften von Blockelementen (Fortsetzung) Rahmen (Kurzschreibweise) border: 3px solid black; border: 0.5em dotted #FF0000;

Hinweis: Alle Eigenschaften zur Formatierung von Rahmen können auch auf einzelne Seiten begrenzt werden: border-top- oben border-bottom- unten border-left- links border-right- rechts Beispiele: border-top-width: 3px; border-bottom-color: blue;

Modifiziertes Boxmodell box-sizing: border-box;

Beispiel <style> div {width:100px; height:100px; padding:20px; margin:10px; background-color:#ccc; border: 5px solid black; } .box2 {box-sizing:border-box; } ...
Ohne box-sizing

Mit box-sizing
...

rechnet schon gerne! Abhilfe schafft eine CSS3-Eigenschaft namens boxsizing, die es ermöglicht, Breiten- und Höhenangaben zu machen, die einen möglichen Innenabstand und Rahmen mit einschließen. Das Beispiel verdeutlicht die Funk tionsweise: Die obere Box ist um 60 Pixel breiter und höher als die untere, weil die Innenabstände (2 x 20 = 40 Pixel) und die Rahmen (2 x 10 = 20 Pixel) hinzugerechnet werden. Die untere Box hat die gewünschte Breite und Höhe von je 100 Pixel.

68

Für das Platzieren von Blockelementen kamen bislang zwei Techniken in Frage: Positionieren mit position oder Umfließen mit float. Mit beiden Varianten können Sie auch dynamische Layouts, die sich an die Displaygröße des Endgerätes anpassen, erstellen. Seit einiger Zeit steht mit dem Flexbox-Konzept eine dritte Möglichkeit, zur Verfügung, die für das Erstellen dynamisch veränderlicher Layouts gedacht ist, insbesondere in Kombination mit Media Queries, auf die wir ab Seite 76 eingehen.

2.7.2 Blockelemente positionieren Die CSS3-Eigenschaft position stellt vier Möglichkeiten zum Platzieren von Blockelementen zur Verfügung. Um deren Unterschiede verstehen zu können, betrachten wir ein Beispiel mit jeweils zwei verschachtelten Blockelementen.

CSS3

Blockelemente positionieren Feste Position (kein Scrollen) position: fixed;

Variable Position im Textfluss (default) position: static;

Absolute Position (innerhalb Elternelement) position: absolute;

Relative Position (innerhalb Elternelement) position: relative;

Werte zur Positionierung top: 20px; bottom: 30%; left: 10em; right: 50mm;

Abstand von oben Abstand von unten Abstand von links Abstand von rechts

A Positionierung mit fixed Die bei top und left angegebenen Werte des inneren Elements (A2) beziehen sich direkt auf das Browserfenster und überdecken somit das Elternelement (A1). Mit fixed platzierte Rahmen scrollen nicht mit, da sie sich immer auf das Browserfenster beziehen. B Positionierung mit static Bei static wird das innere Block element (B2) einfach im Textfluss des Elternelements (B1) platziert. Die Angaben bei top und left werden ignoriert und können weggelassen werden. static ist die Default-Einstellung, d. h.,

Beispiel <style> div {padding:5px; color:white;} #A1 {position:absolute; width:200px; height:230px; top:30px; left:30px;} #A2 {position:fixed; width:100px; height:100px; top:50px; left:20px;} #B1 {position:absolute; width:200px; height:230px; top:30px; left:260px;} #B2 {position:static; width:100px; height:100px; top:50px; left:20px;} #C1 {position:absolute; width:200px; height:230px; top:290px; left:30px;} #C2 {position:absolute; width:100px; height:100px; top:50px; left:20px;} #D1 {position:absolute; width:200px; height:230px; top:290px; left:260px;} #D2 {position:relative; width:100px; height:100px; top:50px; left:20px;} ...
A1
...

B1
...

C1
...

D1
...
...

A

B

C

D

69

dass ohne position-Angabe Blockelemente einfach im Textfluss des Elternelements platziert werden.

Dynamische Layouts Beispiel <style> * {box-sizing:border-box; } nav {position:absolute; top:0%; left:0%; width:20%; height:90%;} main{position:absolute; top:0%; left:20%; width:80%;height:90%;} aside{position:absolute; top:0%; right:0%; width:20%; height:90%;} footer{position:absolute; bottom:0%;left:0%; height:10%;width:100%;} ...
Navigation
<main>Hauptbereich
Nebenbereich

Fußzeile
...

C Positionierung mit absolute Die Bezeichnung ist irreführend, da das innere Element (C2) nicht absolut, sondern relativ zum Elternelement (C1) platziert wird. Die im Beispiel bei top und left angegebenen Werte beziehen sich auf das Elternelement. Elemente, die sich im Elternelement befinden, werden wie bei fixed überschrieben. Beim Scrollen bewegen sich absolut platzierte Blockelemente mit. D Positionierung mit relative Das innere Element (D2) wird wie bei der absoluten Positionierung relativ zum Elternelement (D1) platziert. Hierbei werden allerdings weitere Elemente in dieser Box berücksichtigt, so dass sich die Angaben top und left auf die Unterkante des Textes bzw. auf den Innenabstand beziehen und der Text nicht überschrieben wird.

Flexible Layouts Um flexible, also sich dynamisch an das Display des Endgeräts anpassende Layouts zu realisieren, verwenden Sie statt absoluter Angaben in Pixel

Flexible Layouts Die große Vielzahl an unterschiedlichen Endgeräten erfordert flexible Layouts, die sich an die Displaymaße des jeweiligen Endgerätes anpassen. Diese Flexibilität kann nur durch relative Maßgaben (z. B. in %) erreicht werden.

Navigation

Hauptbereich

Nebenbereich

Navigation

Hauptbereich

Nebenbereich

Navigation

Fußzeile

Hauptbereich

Nebenbereich

Fußzeile Navigation

Fußzeile

Fußzeile

70

Hauptbereich

Nebenbereich

CSS3 relative Angaben in Prozent. Betrachten Sie hierzu das Beispiel auf der linken Seite: Bei allen Blockelementen wurden die Werte für top, left, width und height prozentual angegeben. Auf diese Weise passt sich das Layout an die Displaygröße des Engerätes an.

2.7.3 Blockelemente umfließen Die häufig eingesetzte Alternative zur Positionierung mit position ist, dass Blockelemente von anderen Elementen umflossen werden. Sie kennen diesen Begriff vielleicht von Printlayouts, wo Bilder von Text umflossen werden können. Diese Eigenschaft wird bei CSS3 als float bezeichnet. Der Vorteil von Blockelemente umfließen Art des Umfließens float: none; float: right; float: left;

ohne Umfluss Umfluss rechts Umfluss links

Umfließen beenden clear: left; clear: right; clear: both;

beendet Umfluss links beendet Umfluss rechts beendet Umfluss komplett

Beispiel <style> #wrapper{box-sizing:border-box; position:absolute; top:0%;left:0%; width:100%;height:100%; margin:0px;padding:0px; } main {height:90%;} nav {float:left; width:20%; height:90%;} aside {float:right; width:20%; height:90%;} footer {clear:both;} ...

Navigation

Nebenbereich
<main>Hauptbereich
Fußzeile

float besteht vor allem darin, dass sich hierdurch auf relativ einfache Weise dynamische Layouts erstellen lassen. Das Beispiel demonstriert die Funktionsweise von float. Das Blockelemente main wird links vom Blockelement nav und rechts vom Blockelement aside umflossen. Im Blockelement footer wird der Umfluss wieder aufgehoben. Die Angabe der Breiten und Höhen erfolgt prozentual, wodurch eine dynamische Anpassung des Layouts an das Endgerät möglich wird. Eine Besonderheit stellt das Block element wrapper dar. Der Begriff leitet sich von to wrap (dt.: einwickeln, einpacken) ab. Ein Wrapper umschließt den gesamten Content einer Website und sorgt für definierte Anfangsbedingungen, z. B., indem der Nullpunkt in die linke obere Ecke gelegt und die Ränder auf 0 px festgelegt werden.

2.7.4 Flexible Boxen Ein noch relativ neues, aber vielsprechendes Konzept zur einfachen Erstellung dynamisch veränderlicher Layouts ist Flexbox. Seine Besonderheit ist, dass Sie hierbei auch komplett auf Größenangaben verzichten können, also auch auf die in den letzten Kapiteln bei position und float verwendeten prozentualen Angaben. Stattdessen werden die als FlexItems bezeichneten Blockelemente in einen sogenannten Flex-Container platziert. Ihre Anordnung kann wahlweise spalten- oder zeilenweise sein. Ein FlexContainer passt sich samt Inhalt an den zur Verfügung stehenden Platz an – er ist also bereits dynamisch veränderlich. Jedem Flex-Item kann über die Eigenschaft flex-grow eine ganze Zahl zugewiesen werden, die angibt, wie stark sich das Blockelement verändern

71

flex

Das flex-Attribut fasst genau genommen drei Eigenschaften zusammen: flex-grow flex-shrink flex-basis Wir gehen hierauf im Rahmen dieser Abhandlung nicht ein.

darf: Dabei steht die 0 für unveränderlich, 1 für etwas veränderlich, 2 für noch stärker veränderlich usw. Das Konzept wird besser verständlich, wenn Sie das einfache Anwendungsbeispiel betrachten: Im Flex-Container wurde durch flex-direction festgelegt, dass die Flex-Items in einer Reihe (row) angeordnet werden. Die drei Flex-Items unterscheiden sich dadurch, dass ihnen über flex ein unterschiedliches Ausdehnungsverhalten zugewiesen wurde: Box 1 verändert sich nicht (flex:0) A, Box 2 dehnt sich doppelt so stark aus (flex:2) B wie Box 3 (flex:1) C. Die Anpassung an unterschiedliche Display- oder Fenstergrößen erfolgt somit ohne prozentuale Angaben. Das Attribut order bestimmt die Reihenfolge, in der die Flex-Items angezeigt werden. Die Boxen werden in der Reihenfolge Box 1, Box 2, Box 3 angezeigt, obwohl sie im Quellcode in umgekehrter Reihenfolge platziert sind. Der Screenshot rechts unten zeigt das Ergebnis, wenn flex-direction von column auf row, also von Spalten auf Reihen, geändert wird.

A

A

72

B

B

C

C

Flexible Boxen Flex-Container definieren display: flex;

Anordnung der Flex-Items flex-direction: row; flex-direction: column;

in Reihe in Spalten

Reihenfolge der Flex-Items order: n;

Hinweis: Bei n handelt es sich um eine ganze Zahl, wobei 1 für ganz oben bzw. ganz links steht. Ausdehnungsverhalten der Flex-Items flex: n;

Hinweis: n ist eine ganze Zahl, wobei 0 für unveränderlich, 1 für leicht veränderlich, 2 für stärker veränderlich usw. steht (siehe auch Randbemerkung). Beispiel <style> #wrapper /siehe Seite 71/ #flex-container{width:100%; height:100%; display: flex; flex-direction:row;} #flex-item1 {order:1; flex:0;} #flex-item2 {order:2; flex:2;} #flex-item3 {order:3; flex:1;} ...

Box 3

Box 2

Box 1

CSS3 Bisher haben wir uns ausschließlich mit der Frage beschäftigt, wie sich (leere) Blockelemente im Layout platzieren lassen. Dabei haben wir das Ziel verfolgt, dass sie sich möglichst gut an die unterschiedlichen Endgeräte anpassen. Das Flexbox-Konzept erweist sich hier als vielversprechend. Nun wirken sich dynamisch veränderliche Layouts natürlich auch auf den Content aus, also auf Texte, Tabellen, Bilder, Grafiken usw. Als Webdesigner/ -in müssen Sie sich von der Idee verabschieden, diese Inhalte wie bei Printmedien nach typografischen Regeln optimieren zu können. Dies ist im Web in dieser Form nicht möglich, was zum einen daran liegt, dass sich Layout und damit auch Content an das jeweilige Endgerät anpassen müssen. Ein fester Textumbruch ist somit nicht möglich. Zum anderen gibt es aber auch Einschränkungen, die daher rühren, dass Webbrowser nicht zwingend alle CSS3-Eigenschaften unterstützen. Ein Beispiel ist, dass derzeit (noch) nicht alle Webbrowser eine automatische Silbentrennung ermöglichen (mehr hierzu finden Sie in Abschnitt 2.7.7 auf der nächsten Seite).

2.7.5 Textüberlauf In ihrer Größe veränderliche Blockelemente haben zur Folge, dass ein – unveränderlicher – Text nicht in den zur Verfügung stehenden Platz passt. Ohne zusätzliche Angabe wird immer nur so viel Text angezeigt, wie in das Blockelement passt, der restliche Text wird abgeschnitten. Mit der CSS3-Eigenschaft overflow können Sie diese unerwünschte Darstellung verhindern. Hierbei werden folgende vier Möglichkeiten unterschieden:

Textüberlauf overflow: overflow: overflow: overflow:

A

auto; browserabhängig A scroll; Scrollbalken B visible; Inhalt ragt aus dem

Element heraus C

hidden; Inhalt wird abgeschnitten D

B

C

D

Bei mobilen Endgeräten wie Tablets oder Smartphones sind in den Fällen A und B keine Scrollbalken sichtbar, weil hier das Scrollen durch eine vertikale Wischbewegung mit dem Finger ersetzt wird.

2.7.6 Block- und Inline-Elemente In den letzten Abschnitten war immer wieder von Blockelementen die Rede, die sich als Rahmen (Box) beschreiben lassen. Beispiele für Blockelemente sind Tags zur Dokumentstruktur wie
, <main>, <article>,
,
und Tags zur Textstruktur wie
,
,
,
und
. Bei der zweiten Gruppe von HTMLElementen handelt es sich um sogenannte Inline-Elemente, also Elemente, die sich innerhalb von Blockelementen befinden. Beispiele sind , , , , , und <span>. Inline-Elemente sind dadurch gekennzeichnet, dass sie sich in den Textfluss integrieren, ohne einen Zeilenumbruch oder Abstand zu erzeugen.

73

Manchmal ist es gewünscht, dass sich ein Blockelement wie ein Inline-Element verhält – oder umgekehrt. Zu diesem Zweck dient die CSS-Eigenschaft display, die Sie im vorherigen Abschnitt bereits zur Definition von Flexboxen kennengelernt haben.

A

Umwandlung Blockelement – Inline-Element display: display: display: display:

block; Blockelement inline; Inline-Element inline-block; Kombination none; ohne Anzeige

Beispiel 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

... <style> a {border: 1px solid black; width:60px; height:40px; } #i {display:inline; } #b {display:block; } #ib {display:inline-block; } ...
Blockelemente
Wer? Wie? Was?
Blockelemente
Wer? Wie? Was?
Inline-Blockelemente
Wer? Wie? Was?

Auch diese Eigenschaft lässt sich besser anhand eines Beispiels verdeutlichen: A Inline-Element Wie erwähnt handelt es sich bei um ein Inline-Element. Zeile 6 kann deshalb auch entfallen. Inline-Elemente werden ohne Zeilenumbruch nacheinander dargestellt, die Angabe der Breite und Höhe (Zeilen 3 und 4) wird ignoriert.

74

B

C

B Blockelement Zeile 8 bewirkt, dass die Links nun als Blockelemente behandelt werden. Sie werden untereinander dargestellt und erhalten die in den Zeilen 3 und 4 angegebenen Maße. C Inline-Blockelement Zeile 10 erzeugt ein Inline-Element, das sich wie ein Blockelement formatieren lässt, aber im Textfluss bleibt.

2.7.7 Silbentrennung Eine aus typografischer Sicht große Einschränkung von HTML5 besteht in der fehlenden Möglichkeit der automatischen Silbentrennung, wie wir sie von Word oder InDesign schon lange kennen. Mit CSS3 wurde nun mit der Eigenschaft hyphens die Möglichkeit zur Silbentrennung geschaffen. Derzeit

CSS3

Silbentrennung -ms-hyphens: auto; hyphens: auto;

Beispiel ... <style> p {width:150px; border: 1px solid black; padding:5px; } #trennung{ -ms-hyphens: auto; hyphens: auto; } ...
Hier ein Absatz, um auszutesten, wie die Silbentrennung funktioniert.

Hier ein Absatz, um auszutesten, wie die Silbentrennung funktioniert.
...

Browser Opera Mini und der AndroidBrowser. Für die Microsoft-Browser Internet Explorer und Edge funktioniert hyphens, wenn Sie -ms- voranstellen. Geben Sie diese Zeile im Quellcode einfach zusätzlich an. Beachten Sie unbedingt, dass im -Tag über das lang-Attribut die Sprache angegeben werden muss. Andernfalls ist nicht klar, welche Trennregeln anzuwenden sind.

(Stand: 2017) funktioniert diese noch nicht mit allen Browsern. Wie Sie bei caniuse.com überprüfen können, fehlen momentan noch die Silbentrennung Der Screenshot zeigt, dass die Silbentrennung mittlerweile durch fast alle Browser unterstützt wird (Stand: 2017).

75

2.8 Media Queries In den vorherigen Abschnitten haben Sie die Möglichkeiten kennengelernt, wie sich Layouts dynamisch gestalten lassen, um eine Anpassung an das jeweilige Endgerät zu ermöglichen. Nun reichen diese Möglichkeiten noch nicht aus, um die sehr große Bandbreite an Endgeräten vom kleinen Smartphone im Hochformat bis zum großen 4K-Monitor optimal zu bedienen. Während im ersten Fall Text einspaltig sein muss, ist im zweiten Fall eine drei- oder vielleicht sogar vierspaltige Darstellung deutlich besser. Um dies zu erreichen, brauchen wir also die Möglichkeit, das Layout in Abhängigkeit vom Endgerät zu verändern. An dieser Stelle kommen die mit CSS3 neu eingeführten Media Queries ins Spiel. Mittels Media Queries (frei übersetzt: Medienabfragen) lassen sich Layouts erstellen, die an die spezifi schen Eigenschaften der Endgeräte angepasst sind. Dies betrifft nicht nur die unterschiedlichen Abmessungen und Auflösungen der Geräte, sondern auch die Möglichkeit, Smartphones oder Tablets zu drehen oder mit dem Finger zu bedienen.

2.8.1 Medientypen Zur Anzeige von Webseiten fallen uns sofort Monitore, Tablets und Smartphones ein. In den CSS3 sind zwei weitere Möglichkeiten vorgesehen, zum einen die Druckausgabe und zum anderen die Sprachausgabe. Medienspezifische CSS3-Dateien Stylesheets werden üblicherweise in separaten Dateien gespeichert. Um diese in den HTML5-Quellcode einzubinden, können Sie wahlweise oder @ import verwenden. Beachten Sie, dass es sich bei um ein HTML5-Ele-

76

Medienspezifische CSS3-Dateien -Element ...

@import-Direktive <style> @import url(“all.css“) screen; @import url(“druck.css“) print; ...

Übersicht der Medientypen (media) all print screen speech

alle Medien Druckausgabe Bildschirmausgabe Sprachausgabe

ment handelt, das im Unterschied zum CSS3-Element @import nicht innerhalb von <style>... stehen darf. Differenzierung innerhalb CSS3-Datei Nicht immer ist es sinnvoll, mit mehreren CSS3-Dateien zu arbeiten. Gewünschte Änderungen am Layout oder an der Formatierung müssen in allen Dateien nachvollzogen werden und die Gefahr besteht, Änderungen zu übersehen. Aus diesem Grund sehen die Media Queries vor, dass auch innerhalb von Stylesheets mit @media zwischen unterschiedlichen Ausgabegeräten differenziert werden kann. Im Beispiel auf der nächsten Seite oben ändert sich die Schrift, Schriftgröße und -farbe in Abhängigkeit von der Bildschirm- bzw. Druckausgabe.

CSS3

Differenzierung innerhalb CSS3-Datei

Medieneigenschaften

@media-Direktive

Übersicht (nicht vollständig)

<style> @media screen{ body {font-family:“Segoe UI“; font-size:1.5em; color:black;} }

width height device-width device-height orientation

@media print{ body {font-family:“Times New Roman“; font-size:10pt; color:black;} }

2.8.2 Medieneigenschaften Da sämtliche Geräte mit Display vom Medientyp screen sind, ist eine weitere Differenzierung erforderlich. Hierzu werden Eigenschaften wie die Gerätebreite (device-width), -höhe (device-height), die Auflösung (resolution) oder die Ausrichtung (orientation) im Quer- oder Hochformat herangezogen. Den meisten Eigenschaften können Sie zusätzlich die Attribute min- oder max- voranstellen, so dass beispielsweise eine Mindestbreite abgefragt werden kann. Bei orientation ergibt dies keinen Sinn. Medientyp und -eigenschaft lassen sich nun mit Hilfe von Schlüsselwörtern kombinieren: and Logisches UND, d. h., sowohl die eine als auch die andere Bedingung muss erfüllt sein. or Logisches ODER, d. h., entweder die eine oder die andere oder beide Bedingungen müssen erfüllt sein. not Logisches NICHT, d. h., die Bedingung darf nicht erfüllt sein.

Anzeigebreite in px Anzeigehöhe in px Bildschirmbreite in px Bildschirmhöhe in px Ausrichtung: waagrecht (landscape) oder senk recht (portrait) resolution Auflösung in dpi, dpcm aspect-ratio Anzeigebreite zu -höhe z. B. 16/9 device-aspect-ratio Bildschirmbreite zu -höhe z. B. 16/9 Allen Eigenschaften außer orientation kann min- oder max- vorangestellt werden: (min-width:960px) (max-height:480px) (max-resolution:96dpi) Beispiele Unterscheidung nach Anzeigebreite @media screen and (min-width:960px){ /breite Anzeige/ } @media screen and (min-width:480px) and (max-width:960px){ /mittlere Anzeige/ } @media screen and (max-width:480px){ /schmale Anzeige/ }

Unterscheidung nach Ausrichtung @media screen and (orientation: landscape){ /waagerecht/ } @media screen and (orientation: portrait){ /senkrecht/ }

Unterscheidung nach Gerätebreite und Auflösung @media screen and (min-devicewidth:960px) and (max-resolution: 150ppi){ /Monitor/ } @media screen and (min-devicewidth:480px) and (min-resolution: 150ppi) { /Smartphone, Tablet/ }

77

2.8.3 Anwendungsbeispiel

Beispiel

Das Beispiel zeigt, wie Sie mit Hilfe von Flexboxen und Media Queries in Abhängigkeit von der Bildschirmbreite eine unterschiedliche Anordnung der Blockelemente erreichen können. Dabei werden drei Fälle unterschieden: A Die Displaybreite beträgt mind. 800 px (Zeile 3): Die Flexboxen werden in der Reihe angeordnet (Zeile 6) und die waagrechte Navigation wird ausgeblendet (Zeile 7). B Die Displaybreite liegt zwischen 500 und 800 px (Zeile 10/11): Auch in diesem Fall werden die Flexboxen in Reihe angeordnet (Zeile 14), allerdings sind es nur zwei, weil der senkrechte Navigationsblock ausge blendet wird (Zeile 16). C Die Displaybreite beträgt maximal 500 px: Nun werden die Flexboxen in einer Spalte angeordnet (Zeile 21) und die senkrechte Navigation wird wieder ausgeblendet (Zeile 23). Sie erkennen an diesem Beispiel, dass es relativ einfach ist, ein veränderliches Layout zu generieren. Auf die Anpassung an mobile Endgeräte gehen wir im abschließenden Beispiel ab Seite 85 ein. A

78

B

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<style> #wrapper /siehe Seite 71/ @media screen and (min-width:800px){ #container {height:90%; display: flex; flex-direction:row;} nav#waag {display:none;} nav#senk {order:1; flex:1;} } @media screen and (min-width:500px) and (max-width:800px){ #container {height:85%; display: flex; flex-direction:row;} nav#waag {height:30px;} nav#senk {display:none;} } @media screen and (max-width:500px){ #container {height:85%; display: flex; flex-direction:column;} nav#waag {height:30px;} nav#senk {display:none;} } main {order:2; flex:2;} aside {order:3; flex:1;} footer {height:30px;} ...

Navigation

<main>Hauptbereich
Navigation

Nebenbereich

Fußzeile

...

C

CSS3

2.9 Animation Vor CSS3 wurden Animationen meis tens mit Flash erstellt. Dabei handelte es sich um eine sogenannte proprietäre Software, was bedeutet, dass sie in Besitz einer Firma, hier: Adobe, ist. Dies war dem legendären Apple-Chef Steve Jobs stets ein Dorn im Auge, so dass er sich weigerte, das zum Abspielen erforderliche Flash-Plug-in in seinem Betriebssystem iOS einzusetzen. Mittlerweile ist der Flash-Nachfolger Animate CC auf dem Markt, der auf die quelloffenen Standards Canvas und JavaScript setzt (siehe Seite 26), wodurch wieder alle Betriebssysteme erreicht werden. Adobe dürfte damit seine marktbeherrschende Stellung mal wieder gestärkt haben. Einfache Animationen sind alternativ auch mit CSS3 möglich. Wir zeigen Ihnen in diesem Kapitel einige grundlegende Möglichkeiten auf.

2.9.1 Keyframe-Animation Die Grundidee dieser Animation ist einfach: Man definiert zunächst die Startposition eines Objekts, danach die gewünschte Endposition. Die beiden Positionen werden als Schlüsselbilder (engl.: keyframes) bezeichnet, weshalb diese Animationstechnik auch Keyframe-Animation genannt wird. Gibt man die Dauer der Animation vor, kann der Computer alle Bilder zwischen den beiden Schlüsselbildern berechnen und auf dem Bildschirm anzeigen. Für den Betrachter ergibt sich ein scheinbar fließender Übergang. Keyframe-Animationen mit CSS3 werden mit Hilfe der @keyframes-Regel erstellt. Hierbei können Sie wählen, ob die Animation vom Start- zum Endpunkt linear, also geradlinig, verlaufen soll, oder ob es zusätzliche Zwischenpunkte geben soll.

Definition Definition mit Start- und Endpunkt @keyframes move{ from{...} to{...} }

Startpunkt Endpunkt

Hinweis: move ist eine beliebige Bezeichnung der Animation. Definition mit beliebig vielen Zwischenpunkten @keyframes move{ 0%{...} 25%{...} ... 100%{...} }

Startpunkt Zwischenpunkt Endpunkt

Lineare Bewegung Betrachten Sie hierzu das Beispiel einer linear verlaufenden Animation: Lineare Animation (Beispiel) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

... <style> @keyframes bewegung{ from {top:0px; left:0px;} to {top:0px; left:400px;} } #box {position:absolute; width:100px; height:100px; background-color:#F00; animation-name: bewegung; animation-duration: 2s; top:0px; left:400px; } ...
...

Zeilen 3 bis 8: Nach @keyframes folgt der frei wählbare Name der Animation, hier bewegung. Die Startposition wird durch from{...} angegeben, hier 0 px. Die Endposition wird entsprechend durch to{...} definiert, hier 400 px.

79

Zeilen 13/14: Diese Zeilen rufen die Animation mit ihrem Namen (hier: bewegung) auf und legen die Dauer (hier: 2 s) fest. Zeilen 15/16: Die Angaben entsprechen dem Endzustand der Animation. Sie sind erforderlich, weil sonst die Anzeige nach der Animation wieder auf den Anfangszustand zurückspringt. Die animierte Box steht hier nur stellvertretend für einen beliebigen Inhalt, den Sie im
-Element platzieren können. Auf diese Weise ist beispielsweise eine Laufschrift oder animierte Bildfolge möglich.

weitere Schlüsselbilder. Die Grafik zeigt eine derartige Animation mit neun Schlüsselbildern (rote Punkte). Die erforderlichen Koordinaten lassen sich beispielsweise ermitteln, indem Sie die Kurve auf Millimeterpapier aufzeichnen. Alternativ können Sie auch Illustrator verwenden, um die Koordinaten zu ermitteln. Genau genommen handelt es sich auch bei neun Schlüsselbildern um keine „echte“ Kurve, weil die Abschnitte zwischen zwei Punkten wieder linear berechnet werden (rote Linie). Durch Einfügen weiterer Schlüsselbilder, zum Beispiel bei horizontal 25 und 375 Pixeln ließe sich das Ergebnis verbessern. Aber das Auge lässt sich auch ganz gut täuschen, vor allem bei schnellen Bewegungen. Bei der Umsetzung mit CSS3 ersetzen Sie einfach die Angaben from{} und to{} durch Prozentangaben.

Kurvenförmige Bewegung Mit zwei Schlüsselbildern sind ausschließlich geradlinige (lineare) Bewegungen möglich. Wenn Sie eine Bewegung entlang einer beliebigen Kurve realisieren wollen, dann brauchen Sie

200

150

100

50

50

80

100

150

200

250

300

350

400

450

500

CSS3

Kurvenförmige Animation (Beispiel) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

... <style> @keyframes kurve{ 0% {top:0px; left:0px;} 20% {top:105px; left:50px;} 30% {top:130px; left:100px;} 40% {top:145px; left:150px;} 50% {top:150px; left:200px;} 60% {top:145px; left:250px;} 70% {top:130px; left:300px;} 80% {top:105px; left:350px;} 100% {top:0px; left:400px;} } #box {position:absolute; width:100px; height:100px; background-color:#F00; animation-name: kurve; animation-duration: 2s; animation-timing-function: linear; top:0px; left:400px; } ...
...

2.9.2 Animationseigenschaften In der Tabelle finden Sie alle Eigenschaften von Keyframe-Animationen in der Zusammenfassung: Eigenschaften Aufruf der Animation animation-name: move;

Hinweis: move ist der in der Definition vergebene Name der Animation. Dauer der Animation (in Sekunden) animation-duration: 2s;

Anzahl der Wiederholungen Anzahl Wiederholungen als Zahl: animation-iteration-count: 2;

Endlose Wiederholung: animation-iteration-count: infinite;

Richtung der Animation Normale Richtung (Default): animation-direction: normal;

Zeilen 4 bis 12: Die Prozentangaben sollten in etwa mit den Teilstrecken übereinstimmen, damit für eine längere Strecke auch mehr Zeit zur Verfügung steht. Da die erste und letzte Strecke länger ist als die restlichen, sehen wir hierfür je 20 % der Zeit vor und für die übrigen Strecken je 10 %. Die Werte für top und left entstammen der Grafik auf der linken Seite. Zeilen 20/21: Beim Abspielen stellen Sie fest, dass die Animation ruckelig abläuft. Dies liegt daran, dass ein Objekt standardmäßig nach einem Schlüsselbild beschleunigt und vor einem Schlüsselbild abgebremst wird. Diese Eigenschaft heißt animation-timingfunction und kann auf linear gesetzt werden, um eine gleichmäßige Bewegung zu erhalten.

Umgekehrte Richtung: animation-direction: reverse;

Abwechselnd (bei Wiederholung): animation-direction: alternate;

Art der Bewegung Verzögerung am Anfang und Ende (Default): animation-timing-function: ease;

Verzögerung am Ende: animation-timing-function: ease-out;

Verzögerung am Anfang: animation-timing-function: ease-in;

Gleichförmige Bewegung: animation-timing-function: linear;

Anhalten der Animation Animation läuft (Default): animation-play-state: running;

Animation stoppen: animation-play-state: paused;

Verzögerter Beginn der Animation animation-delay: 10s;

81

2.9.3 Transformationen

2D-Transformationen (Beispiel)

2D-Transformation Mit CSS3 können Sie Objekte auch transformieren, also in ihrem Aussehen verändern. Die wichtigsten Transformationen sind: Skalieren A Rotieren B Neigen C Das Beispiel zeigt eine Vergrößerung um Faktor 2, eine Drehung im Uhrzeigersinn um 45 ° sowie eine Neigung um 20° horizontal und 10° vertikal. 2D-Animationen Mit CSS3 können Sie Grafiken skalieren, drehen oder verzerren.

A

B

45°

C

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

... <style> @keyframes skalieren{ from {transform:scale(1.0,1.0)} to {transform:scale(2.0)} } #box1{position:absolute; width:50px; height:50px; top:50px; left:125px; background-color:#F00; transform:scale(2.0,2.0); animation-name:skalieren; animation-duration:1s; } @keyframes drehen { from {transform:rotate(0deg)} to {transform:rotate(45deg)} } #box2{position:absolute; width:100px; height:100px; top:200px; left:100px; background-color:#F00; transform:rotate(45deg); animation-name:drehen; animation-duration:1s; } @keyframes neigen{ from{transform:skewX(0deg) skewY(0deg)} to {transform:skewX(-20deg) skewY(-10deg)} } #box3{position:absolute; width:100px; height:100px; top:400px; left:100px; background-color:#F00; transform:skewX(20deg) skewY(10deg); animation-name:neigen; animation-duration:1s; } ...

...

10°

20°

82

Zeile 4/5: Die Werte in der Klammer geben den Multiplikator in horizontaler und vertikaler Richtung an. Die Angabe 2.0 führt also zu einer Verdopplung der Größe, 0.5 würde eine Halbierung

CSS3 bewirken. Bei proportionaler Vergrößerung genügt auch die Angabe eines Wertes: transform:scale(2.0). Zeile 16/17: In Klammer wird der Drehwinkel in in Grad (deg) angegeben. Negative Werte bewirken eine Drehung gegen den Uhrzeigersinn. Zeile 30/31: Die Neigung kann in horizontaler (X-)Richtung und/oder vertikaler (Y-) Richtung erfolgen. Sie wird in Grad angegeben; negative Werte ändern die Neigungsrichtung.

X

Z

Y

3D-Animationen Mit CSS3 sind beeindruckende 3D-Animationen möglich.

3D-Transformation Mit CSS3 können Sie auch dreidimensionale Transformationen erzeugen. Hierzu hängen Sie an rotate die Bezeichnung der Achse an, um die sich das Objekt drehen soll, also rotateX, rotateY oder rotateZ. 3D-Rotation (Beispiel) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

... <style> @keyframes drehen{ from {transform:rotateY(0deg);} to{transform:rotateY(60deg);} } #box{ position:absolute; width:100px; height:80px; top:0px;left:100px; padding-top:20px; background-color:#999; animation-name:drehen; animation-duration:5s; transform:rotateY(60deg); } ...
3D
...

Eine Kombination ist möglich, so dass Sie beispielsweise transform: rotateY(30deg) rotateX(90deg) rotateZ(45deg) schreiben können.

Farb- oder Transparenz-Transformation Auch mit Farben oder Transparenzen lassen sich schöne Effekte erzielen. Vor allem in Kombination mit Skalieren entsteht räumliche Tiefe – das Objekt scheint sich von hinten nach vorne (oder umgekehrt) zu bewegen. Farbe und Transparenz (Beispiel) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

... <style> @keyframes einblenden { from {color:rgba(255,0,0,0); transform:scale(0.2)} to {color:rgba(255,0,0,1); transform:scale(1)} } h2 {text-align:center; color:rgba(255,0,0,1); animation-name:einblenden; animation-duration:3s; } ...
Herzlich willkommen!
...

83

Das Beispiel zeigt die Animation eines Schriftzugs, der einerseits skaliert wird, andererseits seine Farbe von transparent in Rot ändert.

23). Bei der Wiederholung ändert sich durch alternate die Richtung (Zeile 24/25). Animation von Pseudoklassen (Beispiel)

2.9.4 Animation von Pseudoklassen Animationen können auch dazu dienen, dem User eine Rückmeldung zu geben, wo er sich gerade mit der Maus befindet. Um die Position der Maus abzufragen, sehen die CSS3 die sogenannten Pseudoklassen vor, die wir auf Seite 52 vorgestellt haben. Diese Klassen lassen sich zur Animation nutzen. Das Beispiel realisiert eine Animation, bei der sich ein mit der Maus berührter Button auf 150 % vergrößert und seine Farbe in Rot ändert. Danach verkleinert er sich wieder auf Ausgangsgröße, bleibt aber Rot, solange sich die Maus auf der Schaltfläche befindet. Dieser Effekt wird dadurch erreicht, dass die Animation zweimal abläuft (Zeile

84

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

... <style> @keyframes button{ from{transform:scale(1); background-color:silver;} to {transform:scale(1.5); background-color:red;} } a { text-decoration:none; text-align:center; padding:10px; background-color:silver; color: black; display:inline-block; width:100px; } a:hover{ background-color:red; color:white; animation-name: button; animation-duration:0.5s; animation-iteration-count:2; animation-direction: alternate; } ... Kontakt Impressum Neu ...

CSS3

2.10 Responsive Webdesign Die Forderung dieser Zeit lautet Res ponsive Webdesign. In dem Begriff steckt das englische Wort response, also „Antwort“ oder „Reaktion“. Ein responsives Design muss also reagieren, und zwar auf das Endgerät, mit dem es betrachtet wird. Die Zeiten starrer, unveränderlicher Webseiten sind vorbei! Wir haben in den vergangenen Kapiteln immer wieder auf die Bedingungen hingewiesen, die an responsives Design gestellt werden: Responsive Webdesign Relative Maßeinheiten

Schriftangaben erfolgen nicht absolut in Pixel, sondern relativ in Bezug auf die Grundschrift des Gerätes bzw. Browsers. Liquid Layout

Der Content, also Texte, Bilder, Grafiken, muss sich dynamisch an den zur Verfügung stehenden Platz anpassen. Man spricht auch von einem flüssigen oder liquid Layout. Adapatives Layout

Layouts verändern sich in Abhängigkeit von der Geräte- oder Fenstergröße. Sie passen sich darüber hinaus an die Geräteeigenschaften an, z. B. an hochauflösende Displays neuerer Tablets oder Smartphones. Mobile First

Die Mehrheit der User geht mittlerweile mit mobilen Endgeräten ins Internet. Eine häufige Forderung lautet deshalb Mobile First. Das heißt, dass ein Layout vor allem mit mobilen Endgeräten funktionieren sollte. Im zweiten Schritt erfolgt dann die Anpassung an größere, stationäre Displays.

Die Umsetzung dieser Forderungen ist keine leichte Aufgabe. In dieser Einführung ist es unmöglich, auf alle Besonderheiten einzugehen, die sich u. a. aus der Vielzahl an Geräten ergeben. An einem einführenden Beispiel zeigen wir Ihnen die grundsätzliche Vorgehensweise beim responsiven Webdesign. Die Übertragung auf andere Projekte sollte damit möglich werden.

2.10.1 Briefing Aufgabe ist die Erstellung einer Website, die in folgende inhaltliche Bereiche gegliedert ist (vgl. Grafik auf der nächs ten Seite): Header für Name, Logo usw. Navigationsleiste Content für Texte, Bilder usw. Footer für Impressum, AGB usw. Ziel ist die Anpassung des Layouts an folgende Gegebenheiten:

Webdesign

Tablets/Smartphones An das Layout für mobile Endgeräte werden – wegen der geringeren Displaybreite – folgende Forderungen gestellt: Das Layout soll im Hochformat einspaltig und im Querformat zweispaltik angezeigt werden. Die Navigation muss für die Bedienung mit dem Finger geeignet sein. Der Navigationsbereich befindet sich am unteren Displayrand und bleibt auch dann sichtbar, wenn der Content durch Wischen mit dem Finger bewegt wird. Auf einen Footer wird verzichtet. Monitore Das Layout soll im sichtbaren Bereich des Browserfensters, dem sogenannten Viewport, maximal zweispaltig sein und mittig ausgerichtet werden. Es passt sich an die Breite des Displays an: Bei Vergrößerung sind ab einer bestimmten Breite links und rechts Ränder zu sehen. Bei Verkleinerung des Fensters wird die senkrechte Navigationsleiste waagrecht über dem Content platziert, das Layout bleibt hierbei zweispaltig. Bei weiterer Verkleinerung des Fens ters wird das Layout einspaltig.

85

Flexibles Layout Die Grafiken zeigen, wie sich das Layout an die Größe des Browserfensters bzw. an das jeweilige Endgerät anpassen soll.

Header Navigation Content Footer Background Browser

86

CSS3 2.10.2 Vorbereitung Um die Übung durchführen zu können, benötigen Sie einige Testbilder, die Sie z. B. unter http://dummy-image-generator.com generieren und herunterladen können. Alternativ können Sie natürlich auch eigenen Aufnahmen verwenden. Als Text eignet sich Blindtext, den Sie ebenfalls im Internet unter www. blindtextgenerator.de generieren und kopieren können. Weiterhin ist es erforderlich, dass Sie Ihre Entwürfe auf unterschiedlichen Endgeräten testen. Hierzu brauchen Sie eine Möglichkeit, Ihre Website auf einen Webserver hochzuladen, damit sie von allen internetfähigen Geräten aus aufgerufen werden kann. Eine Übersicht über Anbieter von Webspace finden Sie z. B. unter www.webhostlist.de.

2.10.3 HTML5 Das Listing zeigt das Grundgerüst der Website. Auf den Content haben wir im Listing verzichtet: Fügen Sie in den
- und
-Tags Blindtext ein und in den -Tags Testbilder. Zeilen 6–10: Über das -Tag wird ein Google-Webfont eingebunden (siehe Seite 61). Zeilen 11–21: Zur Umsetzung der im Briefing beschriebenen Möglichkeiten werden insgesamt drei CSS3-Dateien verwendet. Die Unterscheidung zwischen mobilen Geräten und Monitoren erfolgt mittels Media Queries in Abhängigkeit von der Gerätebreite (device-width): Bis 1280 Pixel wird die Datei mobile.css geladen, für größere Breiten die Datei monitor.css. Diese einfache Unterscheidung reicht nicht aus, um die gesamte Palette an

index.html 1 2 3 4 <meta charset=utf-8“> 5 Responsive Webdesign 6 7 11 12 14 15 18 19 22 23 24
...
25
26 ... 27 ... 28 ... 29
30
31
32 ... 33 ... 34 ... 35
36 <article> 37 38 h2>...
39
...
40 41 <article> 42 43
...
44
...
45 46
47
48 49

Möglichkeiten abzudecken. So gibt es mobile Geräte mit deutlich höhe rer Auflösung. Für diese hochauflösenden Displays müssen Sie eine weitere Unterscheidung treffen und beispielsweise die Auflösung (reso-

87

lution) oder die Pixeldichte (pixelratio) hinzuziehen. Zeilen 30/46: Dieser „Container“ ist für die Verwendung von Flexboxen erforderlich. Zeilen 25–29 und 31–35: Die Navigationsleiste ist doppelt vorhanden, einmal für die waagrechte und einmal für senkrechte Anzeige. Die jeweils nicht benötigte Version wird später mittels CSS3 ausgeblendet.

2.10.4 CSS3 Aus dem Briefing ergeben sich insgesamt fünf unterschiedliche Möglichkeiten: Für mobile Endgeräte muss zwischen senkrechter und waagrechter Ausrichtung unterschieden werden. Für Monitore ändert sich das Layout abhängig von der Fensterbreite dreimal. Wie Sie im HTML5-Listing gesehen haben, werden zur Umsetzung drei CSS3-Dateien verwendet. In basics.css werden alle Einstellungen definiert, die immer gelten. mobile.css definiert die Besonderheiten für mobile Endgeräte. monitor.css enthält die Media Queries für Monitore bzw. unterschiedliche Fensterbreiten. Basiseinstellungen In der CSS3-Datei basics.css werden alle global gültigen Einstellungen getroffen. Dies betrifft die Schrift, die Vorder- und Hintergrundfarben, Innenund Außenabstände und Rahmen. Zeile 8: Durch Angabe einer maximalen Breite wird erreicht, dass bei einem noch größeren Fenster links und rechts ein Rand sichtbar wird. Zeile 9: Diese Zeile bewirkt, dass der gesamte

88

basics.css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

@charset “utf-8“; body {margin:0px; padding:0px; background-color:black; font-family:‘Source Sans Pro‘,sans-serif; font-size:1em; max-width:1280px; margin:0 auto;} img {width:100%;} h1 {color:#ddd; font-weight:200; margin-top:0px; padding-top:20px; padding-left:10px;} h2 {font-weight:300; color:#999; padding-left:10%;} p {font-weight:400; color:#333; padding-left:10%; padding-right:10%; border-right:1px solid #C0C0C0;} a {font-weight:300; color:#333; text-align:left; padding:10px; text-decoration:none;} a.waag{border-right: 1px solid #333;} a.senk{border-bottom: 1px solid #333;} header{background-color: #2e4105; padding-top: 0px;} article{flex:1; color:black; background-color:#ddd;} footer{background-color:#2e4105; height: 30px;} nav.waag{background-color:#d2d2d2;} nav.senk{background-color:#d2d2d2;}

Content oben mittig im Browserfens ter ausgerichtet wird. Zeile 10: Durch die Prozentangabe werden Bilder „flüssig“, passen sich also an den zur Verfügung stehenden Platz an. Zeile 36: Die Angabe macht die article zu Flexboxen. Die erforderlichen FlexContainer werden in den beiden anderen CSS3-Dateien definiert.

CSS3 Einstellungen für mobile Endgeräte Der wesentliche Unterschied zwischen Monitoren und mobilen Endgeräten besteht darin, dass diese trotz kleinerer Abmessungen eine ähnlich hohe Anzahl an Pixeln besitzen. Die physikalische Auflösung in ppi (Pixel pro Inch) ist bei diesen Geräten also deutlich höher. Dies hat zur Folge, dass sämtliche Inhalte kleiner dargestellt werden und z. B. Schriften in für Monitore geeigneten Größen auf mobilen Geräten nicht mehr lesbar wären. Ein weiterer Unterschied ist, dass mobile Geräte (meistens) mit dem Finger bedient werden. Navigationselemente müssen demnach so groß sein, dass sie ohne Probleme angetippt werden können. mobile.css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

@charset “utf-8“; a.waag {width:22.5%; display:inline-block;} header {height:100px;} nav.senk {display:none;} nav.waag {padding:10px; width:100%; position:fixed; bottom:0px; left:0px;} @media screen and (orientation: landscape){ #container{ display:flex; flex-direction:row;} h1 {font-size:2.5em;} h2 {font-size:2.0em;} p {font-size:1.2em;} a.waag {font-size:1.5em;} nav.waag {height:50px;} } @media screen and (orientation: portrait){ #container{ display: flex; flex-direction:column;} h1 {font-size:3.5em;} h2 {font-size:2.5em;} p {font-size:1.5em;} a.waag {font-size:2.5em;} nav.waag {height:70px;} }

Zeile 2/3: Die Angabe sorgt dafür, dass die vier Buttons die gesamte Breite ausfüllen. Das Inline-Element muss hierzu wie ein Blockelement behandelt werden. Zeile 6–10: Die Navigationsleiste wird in diesem Fall in fester Position (fixed) am unteren Rand platziert. Sie bleibt somit auch sichtbar, wenn der Anwender mit dem Finger wischt. Zeilen 12–33: Mit Hilfe der Media Queries wird zwischen Querformat (landscape) und Hochformat (portrait) unterschieden. Im Hochformat muss die Schrift vergrößert werden, damit sie etwa gleich groß dargestellt wird wie im Querformat. Einstellungen für Monitore Für die Darstellung auf Monitoren werden durch Media Queries drei Fallunterscheidungen getroffen, um die Navigationsleiste senkrecht oder waagrecht zu platzieren und die Anzahl an Spalten zu variieren.

89

Zeilen 12–18: Bei einer Fensterbreite über 800 Pixel werden die Flexboxen waagrecht (row) angeordnet. Die waagrechte Navigationsleiste wird ausgeblendet. Zeilen 20–29: Auch bei einer Fensterbreite zwischen 500 und 799 Pixel werden die Flexboxen waagrecht (row) angeordnet. Die senkrechte Navigationsleiste wird aus- und die waagrechte (oberhalb der Flexboxen) eingeblendet. Zeilen 31–39: Bei einer Fensterbreite bis 499 Pixel wird das Layout einspaltig (column), die Navigation bleibt waagrecht. monitor.css

Zeile 7/9: Durch die Unterscheidung zwischen inline-block und block wird erreicht, dass die Links wie Blockelemente behandelt und waagrecht bzw. senkrecht angeordnet werden.

90

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

@charset “utf-8“; h1 {font-size:1.5em;} h2 {font-size:1.2em;} p {font-size:0.9em;} a {font-size:1.1em;} a.waag {width:60px; display:inline-block;} a.senk {width:80px; display:block;} header {height:60px;} @media screen and (min-width:800px){ #container{ display:flex; flex-direction:row;} nav.waag{display:none} nav.senk{flex:0;} } @media screen and (min-width:500px) and (max-width:799px){ #container{ display:flex; flex-direction:row;} nav.waag{top:60px; width:100%; height:40px;} nav.senk{display:none;} } @media screen and (max-width:499px){ #container{ display:flex; flex-direction:column;} nav.waag{top:60px; width:100%; height:40px;} nav.senk{display:none;} }

CSS3

2.11 Aufgaben 1 Bedeutung von CSS3 kennen

Vorteil von 3:

Zählen Sie drei Gründe auf, weshalb Webseiten ausschließlich mit CSS3 formatiert und gestaltet werden sollen.

1.

2.

3 Kaskadierung verstehen a. Erklären Sie den Begriff Cascading (Kaskadierung) bei den Cascading Style Sheets.

3.

2 CSS3 definieren a. Wo können Stylesheets definiert werden? Nennen Sie die drei Möglichkeiten.

b. Erklären Sie den wesentlichen Vorteil der Kaskadierung.

1. 2. 3. b. Nennen Sie jeweils einen Vorteil für die unter a. genannten Möglichkeiten der Definition.

Vorteil von 1:

Vorteil von 2:

4 Selektoren kennen Eine CSS3-Regel besitzt folgende allgemeine Struktur: selektor{ eigenschaft1: wert1; eigenschaft2: wert2; ...} a. Geben Sie vier Gruppen von Selektoren an.

1.

91

2. 4. Absatz ist

3.

, weil

4. b. Formulieren Sie für jede der unter a. genannten Gruppen ein Beispiel. 5 Rangfolge von Selektoren kennen Gegeben ist folgender Quellcode: CSS <style type=“text/css“> * {color: red;} .schwarz {color: black;} #blau {color: blue;} p {color: silver;}
1. Absatz

2. Absatz

3. Absatz

4. Absatz

6 Maßeinheiten kennen a. Erklären Sie den Unterschied zwischen relativen und absoluten Maßeinheiten.

b. Nennen Sie zwei relative und zwei absolute Maßeinheiten.

Relative Maßeinheiten:

Absolute Maßeinheiten: c. Erklären Sie den Vorteil relativer Maßeinheiten?

In welcher Farbe werden die vier Absätze jeweils angezeigt? Mit Begründung.

1. Absatz ist

, weil

7 Farben angeben Geben Sie die Farbe an:

2. Absatz ist

, weil

a. #FF0000 b. #999

3. Absatz ist

92

, weil

c. #0FF

CSS3 d. rgb(255,255,0)

2.

e. rgb(200,255,200) f. rgba(0,0,100,0.5) 8 Text gestalten

10 Tabellen gestalten

Nennen Sie die CSS3-Eigenschaften: a. Schriftart

b. Zeichenabstand

c. Schriftgröße

d. Schriftfarbe

e. Zeilenabstand

f. Unterstreichung

g. Erstzeileneinzug

h. Satzart

9 Schriften verwenden Sie wollen eine Schrift verwenden, die keine Systemschrift ist. Nennen Sie zwei Möglichkeiten.

1.

a. Erstellen Sie die im Screenshot gezeigte Webseite zunächst als reine HTML5-Datei. b. Gestalten Sie die Webseite mit Hilfe von zentralen CSS3: Hintergrund: Hintergrundfarbe: weiß Randabstand: 20 px Headline: Verdana, 1em, fett, #006 Absatz: Verdana, 0.8em, schwarz Tabellenzellen (außer Kopfzeile): Verdana, 0.8em, schwarz Hintergrundfarbe: #DDF0FF Innenabstand: 10 px Linie unten: 1px, schwarz Kopfzeile der Tabelle: Verdana, 0.8em, weiß Hintergrundfarbe: #006

93

11 Layout erstellen

13 CSS3-Boxmodell kennen Das CSS3-Boxmodell ist von zentraler Bedeutung für das Layouten von Webseiten. Geben Sie folgende CSS3Eigenschaften an:

Breite: Höhe: Hintergrundfarbe: Rahmenart: Rahmenstärke: Rahmenfarbe: Außenabstand: Setzen Sie das im Screenshot gezeigte Layout nach folgenden Vorgaben um: Kopf- und Fußzeile: Höhe: 50 px; Farbe: schwarz Navigation, Haupt- und Nebenbereich: Höhe: 500 px; flexible Boxen, Hauptbereich doppelt so breit wie äußere Bereiche, diverse Grautöne Innenabstände: 10 px Schrift: Arial, 0.7 em, weiß bzw. schwarz 12 Flexible Layouts erstellen Erläutern Sie den wesentlichen Vorteil flexibler Layouts im Vergleich zu starren, also unveränderlichen Layouts.

94

14 Wrapper nutzen a. Erklären Sie die Funktion eines Wrappers.

b. Geben Sie den Quellcode eines Wrappers an, der dafür sorgt, dass der gesamte Inhalt in einer Box mit einer Breite von 80% des Browserfensters, einer Höhe von 500 px, horizontal zentriert dargestellt wird.

3 Anhang

3.1 Lösungen 3.1.1 HTML5

3 HTML5-Grundlagen kennen

1 HTML5-Grundlagen kennen

a. Der erscheint im „Reiter“ über dem Browserfenster oder in der Kopfleiste des Webbrowsers. b. Damit die Seite auch in Ländern außerhalb des deutschsprachigen Raumes korrekt dargestellt wird. c. Fleißkärtchen d. Groß- und Kleinschreibung unterscheiden, keine Leer- und Sonderzeichen, keine Umlaute verwenden e. Übung_1.htm Uebung 1.htm<br /> <br /> HTML5-Grundlagen HTML steht für Hypertext Media Language<br /> <br /> w<br /> <br /> Hypertext bedeutet, dass Text nichtlinear verbunden werden kann.<br /> <br /> x<br /> <br /> f x<br /> <br /> x<br /> <br /> Die Struktur eines Tags ist: <tag>Inhalt<tag/> HTML5-Dateien sind reine Textdateien.<br /> <br /> x<br /> <br /> Ein WYSIWYG-Webeditor ermöglicht eine Vorschau auf die Webseiten.<br /> <br /> x<br /> <br /> Eine HTML5-Datei beginnt mit der Angabe des DOCTYPE.<br /> <br /> x<br /> <br /> HTML5-Dateien besitzen die Endung .htm oder .html<br /> <br /> x<br /> <br /> 4 Begriff „Semantik“ verstehen x<br /> <br /> Schriften können in HTML5-Dateien eingebettet werden. Eine HTML5-Datei besteht aus Dateikopf und Dateikörper.<br /> <br /> x<br /> <br /> Meta-Tags sind im Browser unsichtbar.<br /> <br /> x<br /> <br /> 2 Aufbau einer HTML5-Datei kennen a. <html> <head> <title> … … … b. HTML5-Grammatik: HTML5-Elemente stehen in spitzer Klammer. Fast alle Elemente besitzen ein Start- und ein End-Tag. HTML-Elemente dürfen ineinander verschachtelt werden. Die Eigenschaften (Attribute) eines HTML-Elements werden im StartTag notiert.

a. Die semantische Struktur beschreibt die Gliederung und den inhaltlichen Aufbau der Webseite, z. B. Kopf-, Fuß-, Navigationsbereich, Abschnitte, Überschriften, Tabellen. Diese Struktur ist unabhängig von der Formatierung und Gestaltung. b. <section>… <article>…
…

…

…
5 Text strukturieren Texte strukturieren <meta charset=“utf-8“>
Texte mit HTML strukturieren

Die oberste Zeile ist eine Überschrift <h3>, danach folgt ein Absatz. Dieser Text ist als Zitat

© Springer-Verlag GmbH Deutschland 2017 P. Bühler, P. Schlaich, D. Sinner, HTML5 und CSS3, Bibliothek der Mediengestaltung, DOI 10.1007/978-3-662-53916-3

Anhang gekennzeichnet! Text kann <em>betont oder <strong>stark betont gesetzt werden.

Liste

mit

Punkten

Liste

mit

Ziffern

8 Meta-Tags verwenden

6 Schriften verwenden

a. … b. … c. … d. … e. … f. …

a. Die Schrift, die im Webbrowser als Grundschrift eingestellt ist. b. Weil HTML5 ausschließlich zur (semantischen) Beschreibung des Inhalts und nicht zur Gestaltung von Webseiten genutzt werden soll. Die typografische Gestaltung erfolgt mit CSS3.

a. Meta-Tags liefern (unsichtbare) Zusatzinformationen über die Website. Es handelt sich dabei um CopyrightAngaben, um Angaben für Suchmaschinen, für Webserver oder den Webbrowser. b. Im Dateikopf c. Meta-Tags sind nur im Quelltext, nicht aber im Browser sichtbar. d. Angabe des Zeichensatzes, des Autors, des Erstellungsdatums, automatische Weiterleitung der Website 9 Hyperlinks verwenden

10 Tabellen verwenden 7 Dateien korrekt benennen a. .htm oder .html b. Nein, da die Dateien sonst nur unter Mac OS funktionieren. c. Da Webserver häufig auf UNIX basierende Betriebssysteme haben und dann zwischen Groß- und Kleinschreibung unterschieden wird. d. Nein, Sonderzeichen sind nicht zulässig, da dies je nach Betriebssystem des Webservers zu Fehlern führen kann. e. index.htm oder index.html

Tabellen verwenden <meta charset=“utf-8“>

97

High-Score

Platz Name Punkte

1. Daniel 7542

2. Heike 6354

3. Markus 4788

11 Bildformate für Webseiten kennen a. JP(E)G, GIF, PNG b. SVG, Canvas c. Vektorgrafiken sind verlustfrei skalierbar, können an das Format des Endgerätes angepasst werden. 12 Bilder/Grafiken referenzieren a. HTML-Dateien sind reine Textdateien, die keine binären Daten einbinden können. b. Relative Pfadangaben: 13 Formulareingaben prüfen a. Eine einheitliche, vollständige und fehlerfreie Dateneingabe ist erforderlich, damit eine per Skript automatisierte Übernahme der Daten in eine Datenbank möglich ist.

98

b. Werden die Daten durch einen Webserver und nicht direkt im Browser überprüft, müssen sie (eventuell mehrfach) vom Client zum Server und umgekehrt übertragen werden. Dies kostet Zeit und belastet die Datenleitungen. 14 Formulare erstellen Formulare <meta charset=“utf-8“>
Pizza-Blitz

Pizza:
Margherita
Salami
Thunfisch
Schinken

Extras:
Oliven
Sardellen

Vorname:

Nachname:

Straße:

Plz/Ort:

Anhang

15 AV-Medien einbinden a. b. 16 Webbrowser unterscheiden a. Googe Chrome, Apple Safari Android-Browser (Stand: 2016) b. Mozilla Firefox, Google Chrome, Microsoft Edge (Stand: 2016) c. Weil in den Browsern unterschiedliche Parser verwendet werden. Hinzu kommt, dass ältere Browserversionen neue HTML5-Elemente nicht kennen.

3.1.2 CSS3 1 Bedeutung von CSS3 kennen CSS3 ermöglichen die Gestaltung von Webseiten, HTML5 nicht. Inhalt und Design können unabhängig voneinander erstellt und bearbeitet werden. Das Design kann als externe Datei abgespeichert werden und lässt sich somit auf beliebig viele HTML5-Seiten anwenden. Für einen Inhalt können mehrere Designs erstellt werden, z. B. für Monitor, Smartphone, Druck. Die Inhalte können unabhängig vom Layout in einer Datenbank verwaltet werden. 2 CSS3 definieren a. Externe Definition in einer Datei Zentrale Definition im Dateikopf Lokale Definition im Tag b. Externe Definition Das Design kann für beliebig viele HTML5-Dateien genutzt werden.

Zentrale Definition Einmalig benötigte Abweichungen von extern definierten Stylesheets lassen sich im Dateikopf angeben. Sie haben dort eine höhere Priorität gegenüber externen Stylesheets. Lokale Definition Maximale Flexibilität, z. B. zur Auszeichnung einzelner Elemente. Lokale Stylesheets haben die höchste Priorität. 3 Kaskadierung verstehen a. Unter Kaskadierung ist zu verstehen, dass Stylesheets „mehrstufig“ zum Einsatz kommen, und zwar hinsichtlich Ort: extern, zentral, lokal und Verfasser: Autoren-, Benutzer-, Browser-Stylesheets. b. Die Kaskadierung ergibt eine hohe Flexibilität und ermöglicht notwendige Freiräume. So können z. B. auch die Nutzer einer Website mitbestimmen, wie diese in ihrem Browser dargestellt werden soll. Dies ist beispielsweise für Menschen mit Sehschwäche eine Hilfe. 4 Selektoren kennen a. Selektoren: HTML-Elemente (Tags) Universalselektor Klassen Individualformate Pseudoklassen b. Beispiel: p {font-family:Arial;} * {background-color:#FFF;} .rot {color:red;} #fett {font-weight:bold;} a:link {text-decoration: none;}

99

5 Rangfolge von Selektoren kennen 1. Absatz ist blau, weil Individualformate vor Klassen und Tags kommen. 2. Absatz ist grün, weil lokales Stylesheet vor Individualformat kommt. 3. Absatz ist silber, da Tag
vor Universalselektor kommt. 4. Absatz ist rot, weil nur der Universalselektor angegeben ist. 6 Maßeinheiten kennen a. Absolute Maßeinheiten sind feste, unveränderliche Angaben. Relative Maßeinheiten beziehen sich auf die in den Browsereinstellungen gemachten Angaben. b. Relativ: em, ex, (px) (Pixel ist auch relativ, da von der Auflösung des Displays abhängig) Absolut: mm, cm, pt, (px) c. Mit relativen Angaben ist eine Anpassung des Layouts an unterschiedliche Displays wesentlich einfacher. Sie besitzen auch den Vorteil, dass der Nutzer Einfluss auf die Darstellung nehmen kann, was vor allem bei der Schriftgröße sinnvoll ist. 7 Farben angeben a. Rot b. Grau c. Cyan d. Gelb e. Hellgrün f. Dunkelblau, halbtransparent 8 Text gestalten a. font-family: ...; b. letter-spacing: ...; c. font-size: ...; d. color: ...; e. line-height: ...;

100

f. text-decoration: underline; g. text-indent: ...; h. text-align: ...; 9 Schriften verwenden Schriftdatei auf dem Webserver zur Verfügung stellen und über @font-face einbinden Link zur Website angegeben, auf dem sich die Schrift befindet 10 Tabellen gestalten Lösung zu a. und b. CSS3-Tabellen <meta charset=“utf-8“> <style type=“text/css“> body{margin:20px; font-family:Verdana; font-size:0.8em; background-color:#FFF; color:#000;} h1 {font-size:1em; color:#006;} table,td,th{ border-collapse:collapse; padding:10px; border-bottom:1px solid #000; text-align:left; background-color:#ddf0ff;} th {background-color:#006; color:#FFF;}
Internet-ABC

Kennen Sie die Abkürzungen?

Anhang ... (weitere Zeilen)

Abkürzung Bedeutung
11 Layout erstellen CSS-Layout <meta charset=“utf-8“> <style> body {margin:0px; padding:0px; background-color:white; color:white; font-family:Arial; font-size:0.7em;} main, nav, aside, footer, header{box-sizing:border-box; padding:10px;} #container{ height:500px; display: flex; flex-direction:row;} header {background-color:#333; height:50px } nav {order:1; flex:1; background-color:#666;} main {order:2; flex:2; color:black; background-color:#ddd;} aside {order:3; flex:1; background-color:#999;} footer {background-color:#333; height:50px}

Kopfzeile

<main>Hauptbereich
Navigation

Nebenbereich

Fußzeile
12 Flexible Layouts erstellen Durch ein flexibles Layout passt sich der Inhalt an die (veränderliche) Größe des Browserfensters bzw. an die Displays der mobilen Endgeräte an. 13 CSS3-Boxmodell kennen width height background-color border-style border-width border-color margin 14 Wrapper nutzen a. Bei einem Wrapper handelt es sich um eine Box, die den gesamten Inhalt der Website umschließt. Dies hat den Vorteil, dass der Content flexibel an unterschiedliche Ausgabegeräte angepasst werden kann. b. #wrapper{ width:80%; height:500px; margin:0 auto; background-color:#ccc; padding:10px; } ...

101

3.2 Links und Literatur Links Anbieter von Webfonts http://webfontsanbieter.de Bilder-Generator http://dummy-image-generator.com Blindtext-Generator www.blindtextgenerator.de Browserkompatibilität von HTML5- und CSS3-Tags überprüfen caniuse.com Google Webfonts fonts.google.com HTML5 auf Gültigkeit prüfen validator.w3.org HTML5- und CSS3-Handbuch webkompetenz.wikidot.com/ docs:html-handbuch Statistiken zu Browser und Web gs.statcounter.com W3C (Dachorganisation des Internets) www.w3c.org W3C-School www.w3schools.com Webdesign mit CSS www.csszengarden.com Wiki zu HTML5 und CSS3 https://wiki.selfhtml.org/wiki/ Übersicht HTML5-Tags www.selfhtml5.org

102

Übersicht Webeditoren de.wikipedia.org/wiki/Liste_von_HTMLEditoren Übersicht Webhoster www.webhostlist.de

Literatur Joachim Böhringer et al. Kompendium der Mediengestaltung IV. Medienproduktion Digital Springer Vieweg 2014 ISBN 978-3642548147 Andrea Ertel, Kai Laborenz Responsive Webdesign: Anpassungsfähige Websites programmieren und gestalten Rheinwerk Computing 2014 ISBN 978-3836232005 Clemens Gull, Stefan Münz HTML5 Handbuch Franzis Verlag 2014 ISBN 978-3645603454

3.3 Abbildungen

Anhang

S2, 1: www.wikipedia.de (Zugriff: 04.01.15) S3, 1: www.w3.org/html/logo (Zugriff: 01.01.15) S4, 1: Sreenshot von Adobe Dreamweaver S5, 1: webkompetenz.wikidot.com/docs:htmlhandbuch (Zugriff: 03.04.16) S8, 1: Sceenshot von Google Chrome S11,1: Ausschnitt Quellcode von www.sueddeutsche.de (Zugriff: 03.02.16) S12, 1: Autoren S16, 1: Autoren S18, 1: Screenshot von Microsoft Outlook S22, 1: Foto: Autoren S24, 1: Autoren S35, 1, 2: Autoren S36, 1a und 1b: Autoren (Grafik), Datenquelle: gs.statcounter.com (Zugriff: 03.01.16) S37, 1: www.caniuse.com (Zugriff: 28.12.15) S38, 1, 2, 3: validator.w3.org (Zugriff: 06.04.16) S44, 1a, b, 2a, b : www.csszengarden.com (Zugriff: 01.11.2016) S47, 1: www.sxc.hu, Image-ID: 1182067 (Zugriff: 16.11.13) S49, 1: Autoren S58, 1: Screenshot: Adobe Photoshop S60, 1: www.google.com/fonts (Zugriff: 15.10.2016) S65, 1: Autoren S66, 1: Autoren S70, 1: Autoren S75, 1: www.caniuse.com (Zugriff: 05.11.2016) S80, 1: Autoren S86, 1: Autoren S89, 1: Autoren S90, 1, 2, 3: Autoren

103

3.4 Index 3D (CSS3) 83

A Absolute Referenz 10 Abstände (CSS3) 62 Adapatives Layout 85 Adobe Dreamweaver 5 Alphakanal 23 Animated (GIF) 22 Animation 35 Animation (CSS3) 79 Audio 34 Auswahlliste 30 Autoren-Stylesheets 54

B Benutzer-Stylesheets 54 Betriebssysteme 37 Bilder (HTML5) 22 Blindtext 87 Blockelement (CSS3) 62, 66 Boxmodell 66 Browser 36 Browsermarkt 36 Browser-Stylesheets 54 Buttons (HTML5) 31

C Canvas 26, 79 Cascading Style Sheets 3, 12, 44 Case-sensitiv 9 Checkbox 31 CMS 4 Combobox 30 Content-Management-System 4, 45 CSS 3, 12, 44 CSS3 45 –– Abstände 62 –– Animation 79 –– Boxmodell 66 –– Datei 47

104

–– Definition 47 –– Editoren 46 –– Farben 58 –– Flexible Boxen 71 –– Hintergrund 64 –– Individualformate 52 –– Inline-Element 73 –– Klassen 51 –– Layout 66 –– Listen 63 –– lokal 49 –– Maßeinheiten 57 –– Media Queries 76 –– Pseudoklassen 52 –– Regeln 47 –– Schriftart 60 –– Selektoren 47, 50 –– Silbentrennung 74 –– Spezifität 55 –– Tabellen 63 –– Transformationen 82 –– Tutorials 46 –– Typografie 60 –– Vererbung 53 –– Zeilenumbruch 62 –– zentral 48 CSS3-Eigenschaften –– animation-delay 81 –– animation-duration 81 –– animation-iteration-count 81 –– animation-name 81 –– animation-play-state 81 –– animation-timing-function 81 –– background-attachment 64 –– background-color 59, 64, 67 –– background-image 64, 67 –– background-position 64 –– background-repeat 64 –– background-size 64 –– border-collapse 63 –– border-color 67 –– border-radius 67 –– border-spacing 63 –– border-style 67

–– border-width 67 –– box-sizing 68 –– clear 71 –– color 59, 62 –– display 72, 74 –– empty-cells 63 –– flex 72 –– flex-direction 72 –– float 71 –– font-family 61 –– font-size 61 –– font-style 61 –– font-weight 61 –– height 67 –– !important 55 –– @keyframes 79 –– letter-spacing 62 –– line-height 62 –– list-style-type 63 –– margin 67 –– @media 77 –– overflow 73 –– padding 67 –– position 69 –– text-align 62 –– text-decoration 62 –– text-indent 62 –– transform 82 –– vertical-align 62 –– white-space 62 –– width 67 –– word-spacing 62

D Dateiformate –– GIF 22 –– HTM(L) 9 –– JP(E)G 22 –– MP3 34 –– MP4 34 –– OGG 34 –– OGV 34 –– PNG 23 –– SVG 23 –– WAV 34

Anhang –– WebM 34 Datei-Upload 32 Datenprüfung (HTML5) 32 DOCTYPE 6 Dreamweaver 5

E E-Mail (HTML5) 17

F Farben –– CSS3 58 –– HTML5 8 Farbverläufe (CSS3) 59 Flexible Boxen (CSS3) 71 Flexibles Layout 70 Flüssiges Layout 57 Formulare 28 Formularelemente –– Auswahlliste 30 –– Buttons 31 –– Checkbox 31 –– Combobox 30 –– Datei-Upload 32 –– Menu 30 –– Radiobutton 30 –– Schaltflächen 31 –– Textfeld 29 –– Versteckte Felder 31

G GET (Datenübertragung) 28 GIF 22 Google 11 Grafiken (HTML5) 22

H Hintergrund (CSS3) 64 Homepage 9 HTML5 3, 45 –– Animation 35 –– Attribute 7

–– Audio 34 –– Bilder 22 –– Canvas 26 –– Dateinamen 9 –– Datenprüfung 32 –– Editoren 4 –– Elemente 2 –– Farben 8 –– Formulare 28 –– Grafiken 22 –– Grammatik 6 –– Grundgerüst 6 –– Hyperlinks 16 –– Kommentare 7 –– Logo 3 –– Meta-Tags 11 –– Navigation 20 –– Parser 36 –– Referenzieren 10 –– Schriften 8 –– Semantische Struktur 12 –– Sonderzeichen 8 –– SVG 25 –– Tabellen 15 –– Tags 6 –– Textauszeichnung 14 –– Tutorials 5 –– Umlaute 8 –– valides 37 –– Zeichensatz 7 HTML5-Tags 2 –– 17 –– 14 –– <article> 13 ––

2017_book_html5undcss3.pdf

Overview

More details

…

Überschrift (headline)

Kapitel 1

Abschnitt 1

Abschnitt 2

Kapitel 1

Kapitel 2

Welche Farbe?

Überschrift

Überschrift

Überschrift

Überschrift

Blockelemente

Herzlich willkommen!

...

...

Texte mit HTML strukturieren

2017_book_html5undcss3.pdf

Nick Yahoo 9a2

03-html-teil1.pdf

Bangtk

De Gk Hdh 2015-2016 (1).docx