MM 08-11 - Präsentation vom 14.12.2009 CSS Grundlagen, Grundlegende Eigenschaften, berechnen von Grössen und Schriftgrössen in "em"

1. XHTML & CSS
Lektionen 13-16
© 2009 by Noël Bossart

2. welcome.
« Be yourself beautiful,
and you will find the world full of beauty. »
Persisches Sprichwort
© 2009 by Noël Bossart

3. Ablauf heute
The Box Model
CSS Grundeigenschaften
Pause
CSS Positionen
CSS Positionen

5. ?
?

6. homework
Modernes Webdesign Kapitel 2.2.5
Aufgaben in den Unterlagen lösen
Hello World mit DIV und margin/padding/border
anreichern

7. the box model.

8. Das Box Model
Modernes Webdesign Kapitel 2.2.5

9. Das Box Model
Inhalt
Modernes Webdesign Kapitel 2.2.5

10. Das Box Model
width
Inhalt
Modernes Webdesign Kapitel 2.2.5

11. Das Box Model
width
Inhalt
height
Modernes Webdesign Kapitel 2.2.5

12. Das Box Model
width
Innenabstand
Inhalt
height
Modernes Webdesign Kapitel 2.2.5

13. Das Box Model
width border
Innenabstand
Inhalt
height
Modernes Webdesign Kapitel 2.2.5

14. Das Box Model
width border
Aussenabstand
Innenabstand
Inhalt
height
Modernes Webdesign Kapitel 2.2.5

15. Das Box Model
Aussenabstand Lorem ipsu
amet, cons
Innenabstand
adipiscing
Inhalt
Quisque ve
sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

16. Das Box Model
margin Lorem ipsu
amet, cons
adipiscing
Inhalt
Quisque ve
sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

17. Das Box Model
margin Lorem ipsu
amet, cons
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

18. Das Box Model
Lorem ipsu
amet, cons
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

19. Das Box Model... immer?
Lorem ipsu
amet, cons
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

20. Das Box Model... immer?
Lorem ipsu
amet, cons
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

21. Das Box Model... immer?
I N ! Lorem ipsu
E
amet, cons
N
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

22. Box Model Bug
width
margin
padding
Modernes Webdesign Kapitel 6.8.8
Normal
height
margin
padding
height
IE kleiner 7

23. CSS Notation
margin: ;
margin
padding: ; padding
object

24. CSS Notation
margin: ; top
margin
padding: ; padding
left object
right
bottom

25. CSS Notation
margin: 10px ; top
margin
padding: 10px ; padding
left object
right
bottom

26. CSS Notation
margin-right: ;
margin
padding-left: ; padding
object

27. CSS Notation
margin-right: 0 ;
margin
padding-left: ; padding
object
right

28. CSS Notation
margin-right: 0 ;
margin
padding-left: 0 ; padding
left object
right

29. Short Notation
margin: ;
margin
padding: ; padding
object

30. Short Notation
margin: ; top
margin
padding: ; padding
object
bottom

31. Short Notation
margin: 10px ; top
margin
padding: 10px ; padding
object
bottom

32. Short Notation
margin: 10px ; top
margin
padding: 10px ; padding
left object
right
bottom

33. Short Notation
margin: 10px 0 ; top
margin
padding: 10px 0 ; padding
left object
right
bottom

34. Short Notation
margin: 10px 0 ; ➊
margin
top
padding: 10px 0 ; padding
left object
right
bottom

35. Short Notation
margin: 10px 0 ; ➊
margin
top
padding: 10px 0 ; padding
➋ left object
right
bottom

36. CSS Notation
margin: ;
margin
padding
object

37. CSS Notation
margin: 10px ;
top
margin
padding
object

38. CSS Notation
margin: 10px 0 ;
top
margin
padding
object
right

39. CSS Notation
margin: 10px 0 20px ;
top
margin
padding
object
right
bottom

40. CSS Notation
margin: 10px 0 20px 5px ;
top
margin
padding
object
left right
bottom

41. CSS Notation
margin: 10px 0 20px 5px ;
top
left right
bottom

42. CSS Notation
padding: ;
margin
padding
object
Modernes Webdesign Seite 220+221

43. CSS Notation
padding: 10px 5px 15px 5px ;
top
margin
padding
object
left right
bottom
Modernes Webdesign Seite 220+221

44. CSS Notation
padding: 10px 5px 15px 5px ;
top
left right
bottom
Modernes Webdesign Seite 220+221

45. Block vs. Inline
Modernes Webdesign Seite 69 - 75

46. Block vs. Inline
Modernes Webdesign Seite 69 - 75

47. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Modernes Webdesign Seite 69 - 75

48. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Modernes Webdesign Seite 69 - 75

49. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer.
Modernes Webdesign Seite 69 - 75

50. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer. Inline Elemente sind nur
so gross wie ihr Inhalt & brechen am Zeilenende um.
Modernes Webdesign Seite 69 - 75

51. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer. Inline Elemente sind nur
so gross wie ihr Inhalt & brechen am Zeilenende um.
Block erzwingt immer einen Umbruch.
Modernes Webdesign Seite 69 - 75

52. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer. Inline Elemente sind nur
so gross wie ihr Inhalt & brechen am Zeilenende um.
Block erzwingt immer einen Umbruch.
Selbst wenn etwas daneben Platz hätte.
Modernes Webdesign Seite 69 - 75

53. more. aigain.
delicious.com/noelboss/zbw+css+basics
delicious.com/noelboss/zbw+css+boxmodel

54. the basics.
© 2009 by Noël Bossart Form & Farbe

55. Grundlagen schaffen
Jeder Browser bringt seine eigenen Styles mit. Diese
können sich von Browser zu Browser unterscheiden. Es
ist daher sinnvoll, zuerst alle Elemente auf einen
definierten Zustand zurück zu setzen, damit man eine
saubere Ausgangslage hat. Man kann dazu sein eigenes
reset.css schreiben, oder aber eines von vielen aus
dem Internet Verwenden. Ich empfehle das Yahoo User
Interface (YUI) Reset CSS:
developer.yahoo.com/yui/reset/

56. Pixel, Punkt.
Um Schriftgrössen zu definieren kann man Pixel
verwenden:
+ Feste Grösse
+ Pixel genaue Layouts
- Wenig flexibel
- Keinen Zusammenhang mit der Schrift
- Nicht zoombar

57. Pixel, Punkt.
Um die Nachteile von Grössenangaben in Pixel zu
umgehen, kann man die Grössenangabe em
verwenden.
+ Flexible Grösse
+ Fast Pixel genaue Layouts
+ Flexibel
+ Proportional zur Schriftgrösse
+ Zoombar

58. Einheit M = em
Die Grösse von em (gesprochen emm) entspricht der
Breite eines M. Wenn die Schriftgrösse 16px ist, ist 1em
= 16px.

59. Einheit M = em
Die Grösse von em (gesprochen emm) entspricht der
Breite eines M. Wenn die Schriftgrösse 16px ist, ist 1em
M
= 16px.

60. Einheit M = em
Die Grösse von em (gesprochen emm) entspricht der
Breite eines M. Wenn die Schriftgrösse 16px ist, ist 1em
M
= 16px.

61. em
em erlauben es, Abstände von Elementen proportional
zur Schriftgrösse zu gestallten. Dies eignet sich
insbesondere für horizontale Abstände, kann aber auch
bei komplett fluiden Layouts eingesetzt werden.

62. em
em erlauben es, Abstände von Elementen proportional
zur Schriftgrösse zu gestallten. Dies eignet sich
insbesondere für horizontale Abstände, kann aber auch
bei komplett fluiden Layouts eingesetzt werden.
Home
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris n
lectus vel felis facilisis laoreet. Mauris vel eros non lectus ultric
pretium. In adipiscing felis ac massa. Nulla ac lectus sit amet
volutpat dignissim. Nam velit dui, ullamcorper a, viverra auc

63. em
em erlauben es, Abstände von Elementen proportional
zur Schriftgrösse zu gestallten. Dies eignet sich
insbesondere für horizontale Abstände, kann aber auch
bei komplett fluiden Layouts eingesetzt werden.
Home
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris n
lectus vel felis facilisis laoreet. Mauris vel eros non lectus ultric
pretium. In adipiscing felis ac massa. Nulla ac lectus sit amet
volutpat dignissim. Nam velit dui, ullamcorper a, viverra auc

64. em
em erlauben es, Abstände von Elementen proportional
zur Schriftgrösse zu gestallten. Dies eignet sich
insbesondere für horizontale Abstände, kann aber auch
bei komplett fluiden Layouts eingesetzt werden.
Home
1em
0.5em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris n
lectus vel felis facilisis laoreet. Mauris vel eros non lectus ultric
pretium. In adipiscing felis ac massa. Nulla ac lectus sit amet
volutpat dignissim. Nam velit dui, ullamcorper a, viverra auc

65. em
em erlauben es, Abstände von Elementen proportional
zur Schriftgrösse zu gestallten. Dies eignet sich
insbesondere für horizontale Abstände, kann aber auch
bei komplett fluiden Layouts eingesetzt werden.
Home
1em
0.5em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris n
lectus vel felis facilisis laoreet. Mauris vel eros non lectus ultric
pretium. In adipiscing felis ac massa. Nulla ac lectus sit amet
volutpat dignissim. Nam velit dui, ullamcorper a, viverra auc

66. em
em erlauben es, Abstände von Elementen proportional
zur Schriftgrösse zu gestallten. Dies eignet sich
insbesondere für horizontale Abstände, kann aber auch
bei komplett fluiden Layouts eingesetzt werden.
Home
1em
0.5em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris n
7.7em lectus vel felis facilisis laoreet. Mauris vel eros non lectus ultric
pretium. In adipiscing felis ac massa. Nulla ac lectus sit amet
volutpat dignissim. Nam velit dui, ullamcorper a, viverra auc

67. em
em erlauben es, Abstände von Elementen proportional
zur Schriftgrösse zu gestallten. Dies eignet sich
insbesondere für horizontale Abstände, kann aber auch
bei komplett Fluiden Layouts eingesetzt werden.
Home
1em
0.5em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris n
7.7em lectus vel felis facilisis laoreet. Mauris vel eros non lectus ultric
pretium. In adipiscing felis ac massa. Nulla ac lectus sit amet
volutpat dignissim. Nam velit dui, ullamcorper a, viverra auc

68. Berechnen von em
Um em zu berechnen gibt es eine einfache Formel:

69. Berechnen von em
Um em zu berechnen gibt es eine einfache Formel:
Zielgrösse
em =
Ausgangsgrösse

70. Ausgangslage schaffen
Die Browser haben eine Standard-Schriftgrösse von 16
Pixel. Möchte man für die Grundschrift eine Grösse von
12 Pixel einstellen, ergibt sich folgende Rechnung:

71. Ausgangslage schaffen
Die Browser haben eine Standard-Schriftgrösse von 16
Pixel. Möchte man für die Grundschrift eine Grösse von
12 Pixel einstellen, ergibt sich folgende Rechnung:
12 Pixel
= 0.75em
16 Pixel

72. Ausgangslage schaffen
Die Browser haben eine Standard-Schriftgrösse von 16
Pixel. Möchte man für die Grundschrift eine Grösse von
12 Pixel einstellen, ergibt sich folgende Rechnung:
12 Pixel
= 0.75em
16 Pixel
body { font-size: 0.75em; }

73. Die Schriftgrösse
« 1em is equal to the current font size. 2em means
2 times the size of the current font. E.g., if an
element is displayed with a font of 12 pt, then
'2em' is 24 pt. The 'em' is a very useful unit in
CSS, since it can adapt automatically to the font
that the reader uses. »
w3schools.com/css/css_units.asp

74. Hintergründe
Hintergründe können transparent sein, eine Farbe
haben und / oder ein Bild beinhalten. Bilder können
positioniert werden und sich in x oder y Richtung
wiederholen. Eine vollständige Deklaration sieht
folgendermassen aus:
Farbe Bild repeat x/y

75. Hintergründe
Diese Deklaration kann auch einzeln geschrieben
werden:

76. Ränder
Ränder brauchen eine “Dicke” einen Strich-Typ und eine
Farbe, diese können einzeln oder zusammen deklariert
sein:

77. find it.
Sherlock Holmes
© 2009 by Noël Bossart

78. Sherlock Holmes
Verwende das Bild der Original-Seite als Vorlage und
vervollständige den Code.
Tipp: Beachte die CSS-Deklarationen um Hinweise zu
erhalten, welche HTML Elemente fehlen und welche
Klassen und ID’s sie haben.

84. home
work

85. Hausaufgaben
Do Sherlock Holmes

86. Prüfung: Basics & HTML
Hintergrundwissen: Geschichte, Web 2.0
Die Basis-Technologien im Web und ihre Einsatzzwecke sowie
Charakteristiken kennen
Verschiedene HTML-Versionen, ihre Doctypes und Einsatzzwecke
kennen, DTD?
XML Regeln & XHTML Syntax kennen
HTML Grundelemente kennen
XHTML Syntax kennen (Tags, Attribute, Werte, auch Leere Elemente)
Welche Elemente werden für bestimmte Bereiche einer Webseite eingesetzt?
Insbesondere Wissen über die gängigsten Tags und ihre Attribute (img, a ...)

87. Prüfung: CSS
Verschiedene Arten des Einbindens
CSS Syntax:
Selektoren, Gewichtung / Spezifität, Aufbau, Gültigkeit
Eigenschaften & Werte
Kaskade (nach welchen Regeln wird bestimmt, welcher Style
Anwendung findet)
Berechnen von Schriftgrössen in em
Boxmodel verstehen & berechnen (Unterschied IE?)
Unterschied zwischen Block & Inline Element kennen und anwenden

88. Prüfung: Anwendung
Mit Hilfe von vorgegebenem CSS das HTML
abbilden
Mit Hilfe von HTML und Angaben über das
gewünschte Aussehen CSS erstellen
Box Model berechnen und aufzeichnen können
Webseiten analysieren und Bestandteile benennen
können

89. Ressourcen public.me.com/noelboss
Links delicious.com/noelboss+zbw
Link Feed feeds.delicious.com/rss/noelboss/zbw
Slideshows slideshare.net/noelboss
Fragen & Feedback noel.zbw@me.com
more.