CSS Basics, Dynamische Grössen // MM 08-11

1,201 views
1,106 views

Published on

MM 08-11 - Präsentation vom 14.12.2009

CSS Grundlagen, Grundlegende Eigenschaften, berechnen von Grössen und Schriftgrössen in "em"

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,201
On SlideShare
0
From Embeds
0
Number of Embeds
169
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Fragen, Verbesserungsvorschläge, Kritik, Lob?
  • Lies Seite 43 bis 49 als Vertiefung (Little Boxes)
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • Kurzvortrag.
  • Lies Seite 43 bis 49 als Vertiefung (Little Boxes)
  • CSS Basics, Dynamische Grössen // MM 08-11

    1. 1. XHTML & CSS Lektionen 13-16 © 2009 by Noël Bossart
    2. 2. welcome. « Be yourself beautiful, and you will find the world full of beauty. » Persisches Sprichwort © 2009 by Noël Bossart
    3. 3. Ablauf heute The Box Model CSS Grundeigenschaften Pause CSS Positionen CSS Positionen
    4. 4. ? ?
    5. 5. homework Modernes Webdesign Kapitel 2.2.5 Aufgaben in den Unterlagen lösen Hello World mit DIV und margin/padding/border anreichern
    6. 6. the box model.
    7. 7. Das Box Model Modernes Webdesign Kapitel 2.2.5
    8. 8. Das Box Model Inhalt Modernes Webdesign Kapitel 2.2.5
    9. 9. Das Box Model width Inhalt Modernes Webdesign Kapitel 2.2.5
    10. 10. Das Box Model width Inhalt height Modernes Webdesign Kapitel 2.2.5
    11. 11. Das Box Model width Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
    12. 12. Das Box Model width border Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
    13. 13. Das Box Model width border Aussenabstand Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
    14. 14. 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
    15. 15. 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
    16. 16. 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
    17. 17. 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
    18. 18. 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
    19. 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. 20. 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
    21. 21. Box Model Bug width margin padding Modernes Webdesign Kapitel 6.8.8 Normal height margin padding height IE kleiner 7
    22. 22. CSS Notation margin: ; margin padding: ; padding object
    23. 23. CSS Notation margin: ; top margin padding: ; padding left object right bottom
    24. 24. CSS Notation margin: 10px ; top margin padding: 10px ; padding left object right bottom
    25. 25. CSS Notation margin-right: ; margin padding-left: ; padding object
    26. 26. CSS Notation margin-right: 0 ; margin padding-left: ; padding object right
    27. 27. CSS Notation margin-right: 0 ; margin padding-left: 0 ; padding left object right
    28. 28. Short Notation margin: ; margin padding: ; padding object
    29. 29. Short Notation margin: ; top margin padding: ; padding object bottom
    30. 30. Short Notation margin: 10px ; top margin padding: 10px ; padding object bottom
    31. 31. Short Notation margin: 10px ; top margin padding: 10px ; padding left object right bottom
    32. 32. Short Notation margin: 10px 0 ; top margin padding: 10px 0 ; padding left object right bottom
    33. 33. Short Notation margin: 10px 0 ; ➊ margin top padding: 10px 0 ; padding left object right bottom
    34. 34. Short Notation margin: 10px 0 ; ➊ margin top padding: 10px 0 ; padding ➋ left object right bottom
    35. 35. CSS Notation margin: ; margin padding object
    36. 36. CSS Notation margin: 10px ; top margin padding object
    37. 37. CSS Notation margin: 10px 0 ; top margin padding object right
    38. 38. CSS Notation margin: 10px 0 20px ; top margin padding object right bottom
    39. 39. CSS Notation margin: 10px 0 20px 5px ; top margin padding object left right bottom
    40. 40. CSS Notation margin: 10px 0 20px 5px ; top left right bottom
    41. 41. CSS Notation padding: ; margin padding object Modernes Webdesign Seite 220+221
    42. 42. CSS Notation padding: 10px 5px 15px 5px ; top margin padding object left right bottom Modernes Webdesign Seite 220+221
    43. 43. CSS Notation padding: 10px 5px 15px 5px ; top left right bottom Modernes Webdesign Seite 220+221
    44. 44. Block vs. Inline Modernes Webdesign Seite 69 - 75
    45. 45. Block vs. Inline Modernes Webdesign Seite 69 - 75
    46. 46. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Modernes Webdesign Seite 69 - 75
    47. 47. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Modernes Webdesign Seite 69 - 75
    48. 48. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Modernes Webdesign Seite 69 - 75
    49. 49. 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
    50. 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. Block erzwingt immer einen Umbruch. Modernes Webdesign Seite 69 - 75
    51. 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. Selbst wenn etwas daneben Platz hätte. Modernes Webdesign Seite 69 - 75
    52. 52. more. aigain. delicious.com/noelboss/zbw+css+basics delicious.com/noelboss/zbw+css+boxmodel
    53. 53. the basics. © 2009 by Noël Bossart Form & Farbe
    54. 54. 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/
    55. 55. 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
    56. 56. 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
    57. 57. Einheit M = em Die Grösse von em (gesprochen emm) entspricht der Breite eines M. Wenn die Schriftgrösse 16px ist, ist 1em = 16px.
    58. 58. 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.
    59. 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. 60. 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.
    61. 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. 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
    62. 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. 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 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
    64. 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. 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 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
    66. 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. 67. Berechnen von em Um em zu berechnen gibt es eine einfache Formel:
    68. 68. Berechnen von em Um em zu berechnen gibt es eine einfache Formel: Zielgrösse em = Ausgangsgrösse
    69. 69. 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:
    70. 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: 12 Pixel = 0.75em 16 Pixel
    71. 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 body { font-size: 0.75em; }
    72. 72. 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
    73. 73. 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
    74. 74. Hintergründe Diese Deklaration kann auch einzeln geschrieben werden:
    75. 75. Ränder Ränder brauchen eine “Dicke” einen Strich-Typ und eine Farbe, diese können einzeln oder zusammen deklariert sein:
    76. 76. find it. Sherlock Holmes © 2009 by Noël Bossart
    77. 77. 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.
    78. 78. home work
    79. 79. Hausaufgaben Do Sherlock Holmes
    80. 80. 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 ...)
    81. 81. 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
    82. 82. 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
    83. 83. 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.

    ×