CSS Basics and Box Model // MM 08-11

1.417 Aufrufe

Veröffentlicht am

MM 08-11 - Präsentation vom 11.12.2009

Erklärt die CSS Grundlagen und das Box Model.
Explaining the basics of CSS and the Box Model.

Veröffentlicht in: Technologie, Bildung
  • Als Erste(r) kommentieren

CSS Basics and Box Model // MM 08-11

  1. 1. XHTML & CSS Lektionen 9-12 © 2009 by Noël Bossart
  2. 2. welcome. « The time is always right to do what’s right. » Martin Luther King 1964 © 2009 by Noël Bossart
  3. 3. Ablauf heute Hello World CSS Syntax Pause CSS Syntax Box Model & Block vs. Inline
  4. 4. ? ?
  5. 5. hello
  6. 6. hello world. Los geht’s, wir erstellt mit dem heute angeeigneten Wissen eine Webseite mit folgenden Kriterien: Liste der persönliche Daten (Name, Adresse, E-Mail etc. Hobbies) Foto von sich falls vorhanden, oder sonst ein Bild einer Person Links zu den Seiten der Banknachbarn (links & rechts) Nummerierte Link-Liste mit persönlichen Lieblingswebseiten Externe CSS-Datei einbinden Wichtige Tags: Modernes Webdesign Seite 194-208
  7. 7. facelifting. CSS Syntax © 2009 by Noël Bossart Modernes Webdesign Seite 213+
  8. 8. CSS Einbinden Inline: Sollte vermieden werden da schwer zu überschreiben und Trennung von Inhalt und Design nicht gegeben. <tag style=”eigenschaft1: wert1 wert2;” /> <h1 style=”color: #ff0000;”>Hallo Welt</h1> Direkt im head-Tag: Sollte vermieden werden weil der weitere Aufbau der Seite dadurch verzögert wird, bis das CSS geladen ist. Ausserdem ist die Trennung von Design und Inhalt nicht gegeben. <head> <style type="text/css" media="screen"> h1 { color: #ff0000; } </style> </head>
  9. 9. CSS Einbinden Im Head verlinken: Dies ist die beste Methode um CSS einzubinden da sie Inhalt von Design trennt, und ausserdem auch Performance Vorteile hat – Caching der Dateien, Weiterladen der Seite wärend das CSS geladen wird, weniger Code als bei Inline Styles, usw. <head> <link type="text/css" rel="stylesheet" href="css/main.css" /> <link type="text/css" rel="stylesheet" href="css/forms.css" /> <link type="text/css" rel="stylesheet" href="css/print.css" media= "print"/> </head> Tipp: Es können auch mehrere CSS-Dateien eingebunden werden. Sollten zwei Rules in Konflikt miteinander geraten, wird diejenige aus dem zuletzt geladenen File Anwendung finden. Modernes Webdesign Kapitel 8.1 & 8.3
  10. 10. CSS Syntax - Aufbau Aufbau Beispiel selektor { ul li.wichtig { eigenschaft1: wert1 wert2; font-weight: bold; eigenschaft2: wert1 wert2 wert3; border: 1px solid #f5a5e6; } } Modernes Webdesign Kapitel 8
  11. 11. Selektoren Es zählt jeweils die letzte Eigenschaft: Beispiel: Element { ... } ul li { ... } Klassen { ... } .wichtig { ... } Pseudo-Klassen { ... } a:hover { ... } ID’s { ... } #hauptmenu { ... } Kombination: tag#id tag.klasse tag { ... } ul#main li.wichtig a { ... } Mehrere Selektoren: selektor1, selektor2 { ... } h1, h2, .titel { ... } Modernes Webdesign Seite 213 + 222
  12. 12. Eigenschaften & Werte Mehrere CSS Eigenschaften können mittels ; separiert werden und dürfen nacheinander auf einer Zeile stehen. CSS Ignoriert Leerzeichen zwischen Eigenschaften. Die meisten Eigenschaften können einen oder mehrere Werte haben: border: 3px dotted blue; color: red; margin: 0px 12px 3em; padding-right: 2%; background: red url(verlauf.jpg) repeat-x top left; overflow: hidden; float: left; font: italic normal bold 1em/1.5em Arial, sans-serif; Modernes Webdesign Kapitel 8.2
  13. 13. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung Modernes Webdesign Kapitel 8.3 und Seite 29-30
  14. 14. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung Modernes Webdesign Kapitel 8.3 und Seite 29-30
  15. 15. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? Webseite 1. Sortieren nach Ursprung Modernes Webdesign Kapitel 8.3 und Seite 29-30
  16. 16. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung & Wichtigkeit 2. Sortieren nach Spezifität Modernes Webdesign Kapitel 8.3
  17. 17. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung & Wichtigkeit 2. Sortieren nach Spezifität enu li { col or: blue; } ul#m ul li { colo r: yellow; } li.box { co lor: red; } #menu lor: grey; } l i.wichtig { co li { colo r: black; } Modernes Webdesign Kapitel 8.3
  18. 18. Gewichtung / Spezifität Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner Zusammensetzung aus Tags, ID’s und Klassen ergibt. Für die Deklaration immer die schwächst mögliche Form wählen damit sich Werte überschreiben lassen! Tags = 1 Punkt Klassen = 10 Punkte ID’s = 100 Punkte Inline-Styles = 1000 Punkte !important = 8 Important wenn immer möglich vermeiden! Modernes Webdesign Kapitel 8.3
  19. 19. Gewichtung / Spezifität Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner Zusammensetzung aus Tags, ID’s und Klassen ergibt. Für die Deklaration immer die schwächst mögliche Form wählen damit sich Werte überschreiben lassen! Tags = 1 Punkt Klassen = 10 Punkte ul li = 2 ID’s = 100 Punkte li.wichtig = 11 Inline-Styles = 1000 Punkte ul#menu li.box a = 113 !important = u l#menu = 101 8 li a:hover = 12 Important wenn immer möglich <p style=”. ..”></p> = 1000 vermeiden! Modernes Webdesign Kapitel 8.3
  20. 20. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung & Wichtigkeit 2. Sortieren nach Spezifität 3. Sortieren nach Reihenfolge im CSS Modernes Webdesign Kapitel 8.3
  21. 21. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung & Wichtigkeit 2. Sortieren nach Spezifität body { 3. Sortieren nach Reihenfolge im CSS color: red; color: blue; color: yellow; } Modernes Webdesign Kapitel 8.3
  22. 22. Überschreiben Werte können sich überschreiben. Beispiel: Dabei wird der letzte Wert welcher h2 { einem Element zugeordnet wird border: 1px solid red ; verwendet. border-color: blue; Sich überschreibende Werte können } auch an unterschiedlichen Stellen in der CSS Datei, in einem anderen File, oder Der Rand ist blau. sogar direkt im HTML stehen. Es ist daher wichtig, eine gute Ordnung im CSS zu behalten. Modernes Webdesign Kapitel 8.3
  23. 23. CSS - Ordnung Lies selbständig Kapitel 8.4 (Seite 219) aus “Modernes Webdesign”. Falls Du Fragen hast, löse diese mit deinem Partner.
  24. 24. the box model.
  25. 25. Das Box Model Modernes Webdesign Kapitel 2.2.5
  26. 26. Das Box Model Inhalt Modernes Webdesign Kapitel 2.2.5
  27. 27. Das Box Model width Inhalt Modernes Webdesign Kapitel 2.2.5
  28. 28. Das Box Model width Inhalt height Modernes Webdesign Kapitel 2.2.5
  29. 29. Das Box Model width Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
  30. 30. Das Box Model width border Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
  31. 31. Das Box Model width border Aussenabstand Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. Das Box Model... immer? IN ! 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
  39. 39. Box Model Bug width margin padding Modernes Webdesign Kapitel 6.8.8 Normal height margin padding height IE kleiner 7
  40. 40. CSS Notation margin: ; margin padding: ; padding object
  41. 41. CSS Notation margin: ; top margin padding: ; padding left object right bottom
  42. 42. CSS Notation margin: 10px ; top margin padding: 10px ; padding left object right bottom
  43. 43. CSS Notation margin-right: ; margin padding-left: ; padding object
  44. 44. CSS Notation margin-right: 0 ; margin padding-left: ; padding object right
  45. 45. CSS Notation margin-right: 0 ; margin padding-left: 0 ; padding left object right
  46. 46. Short Notation margin: ; margin padding: ; padding object
  47. 47. Short Notation margin: ; top margin padding: ; padding object bottom
  48. 48. Short Notation margin: 10px ; top margin padding: 10px ; padding object bottom
  49. 49. Short Notation margin: 10px ; top margin padding: 10px ; padding left object right bottom
  50. 50. Short Notation margin: 10px 0 ; top margin padding: 10px 0 ; padding left object right bottom
  51. 51. Short Notation margin: 10px 0 ; ➊ margin top padding: 10px 0 ; padding left object right bottom
  52. 52. Short Notation margin: 10px 0 ; ➊ margin top padding: 10px 0 ; padding ➋ left object right bottom
  53. 53. CSS Notation margin: ; margin padding object
  54. 54. CSS Notation margin: 10px ; top margin padding object
  55. 55. CSS Notation margin: 10px 0 ; top margin padding object right
  56. 56. CSS Notation margin: 10px 0 20px ; top margin padding object right bottom
  57. 57. CSS Notation margin: 10px 0 20px 5px ; top margin padding object left right bottom
  58. 58. CSS Notation margin: 10px 0 20px 5px ; top left right bottom
  59. 59. CSS Notation padding: ; margin padding object Modernes Webdesign Seite 220+221
  60. 60. CSS Notation padding: 10px 5px 15px 5px ; top margin padding object left right bottom Modernes Webdesign Seite 220+221
  61. 61. CSS Notation padding: 10px 5px 15px 5px ; top left right bottom Modernes Webdesign Seite 220+221
  62. 62. Block vs. Inline Modernes Webdesign Seite 69 - 75
  63. 63. Block vs. Inline Modernes Webdesign Seite 69 - 75
  64. 64. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Modernes Webdesign Seite 69 - 75
  65. 65. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Modernes Webdesign Seite 69 - 75
  66. 66. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Modernes Webdesign Seite 69 - 75
  67. 67. 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
  68. 68. 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
  69. 69. 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
  70. 70. home work
  71. 71. homework Modernes Webdesign Kapitel 2.2.5 Aufgaben in den Unterlagen lösen Hello World mit DIV und margin/padding/border anreichern
  72. 72. Ressourcen public.me.com/noelboss Links delicious.com/noelboss+zbw Link Feed feeds.delicious.com/rss/noelboss/zbw Fragen & Feedback noel.zbw@me.com more.

×