HTML und CSS.

Präsentation zum Thema: "HTML und CSS."—  Präsentation transkript:

1 HTML und CSS

2 Plan erstellen

3 Weitere Differenzierung

4 Varianten

5 Inhaltliche Klärung

6 Mögliche Erweiterungen

7 Abstände und Farben

8 HTML-Gerüst anlegen Das Wurzelelement html hat zwei Kindelemente: head und body. Alle sind in öffnende und schließende Tags gepackt.

9 Drei Grundelemente

10 Detailliertere Darstellung

11 Navigationen

12 id- und class-Attribute

13 Schreibweisen Verwende möglichst sprechende Namen!

14 Grundstruktur einer CSS-Datei

15 Seitenbreite

16 Seitenbreite ausmessen

17 Grafik einbinden

18 Grafik verlinken

19 Breite und Höhe Diese Angaben sind optional, werde sie nicht gemacht, wird die Grafik in ihrer Originalgröße dargestellt.

20 Grafikformate

21 Komprimierung

22 Block-Elemente Im Gegensatz dazu reichen Inline-Elemente so lange die Zeile reicht.

23 Margin und Padding

24 Farbbeispiel

25 Darstellung

26 Margin

27 Darstellung

28 float

29 Darstellung

30 Darstellung

31 Positionierung

32 Alles fließt

33 Darstellung

34 float-Problem

35 clear

36 clear-div Umschließende Elemente verlieren ihre Höhe durch darin gefloatete Elemente. Um die Höhe wieder herzustellen, verwendet man ein clear-div, dieses löst das float-Verhalten nicht hinter, sondern innerhalb des betroffenen Blocks auf. Realisiert wird das über zwei Bestandteile: Den einen Teil repräsentiert ein div im HTML-Code, das mit einem Klassennamen, wie zum Beispiel float-ende versehen wird. Das <div class=„float-ende“></div> muss vor dem schließenden Tag des <div id=„kopf-oben“> stehen. Der andere Teil ist die CSS-Regel, über welche die float auflösende clear-Eigenschaft definiert wird. Das div mit der class=„float-ende“ löst das Fließverhalten noch innerhalb des div=„kopf-oben“ auf und sorgt dafür, dass die Höhe wieder eingenommen wird.

37 clear-div

38 clearfix Float auflösen mit clearfix: