Successfully reported this slideshow.

CSS Syntax // IT 07-10

1.121 Aufrufe

Veröffentlicht am

Präsentation vom 6. 01. 2010
CSS Syntax, Spezifität (Gewichtung) und Kaskade.

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

  • Gehören Sie zu den Ersten, denen das gefällt!

CSS Syntax // IT 07-10

  1. 1. XHTML & CSS Lektionen 5-8 © 2009 by Noël Bossart
  2. 2. welcome. « The internet, it will never catch on. » George W. Bush 1986 © 2009 by Noël Bossart
  3. 3. Ablauf heute Hello World XHTML Elemente kennenlernen Pause CSS Syntax Box Model & Block vs. Inline
  4. 4. hello
  5. 5. hello world. Grundsätzlicher Aufbau: <html /> Das <html> Tag umschliesst das gesamte Dokument (ausser der Doctype Definition) und dient als absolutes Elternelement (auch Root-Element). Es ist meist unsichtbar.
  6. 6. hello world. Grundsätzlicher Aufbau: <html /> <head /> Das Head Element enthält grundlegende Informationen zum Dokument wie Titel, Sprache, Zusammenfassung und Links auf benötigte Dateien wie CSS und JavaScript Files. Es ist unsichtbar.
  7. 7. hello world. Grundsätzlicher Aufbau: <html /> <head /> <body /> Der Body beinhaltet die eigentliche Seite mit allen Inhalten. Es ist der sichtbare Bereich der Webseite.
  8. 8. HTML Grundelemente <html /> <head /> <body /> Little Boxes Seite 43 - 46
  9. 9. 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: Little Boxes Kapitel 3
  10. 10. 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 Die wichtigsten HTML Elemente: Little Boxes Seite 51...
  11. 11. Block vs. Inline Little Boxes Kapitel 3.4
  12. 12. Block vs. Inline Little Boxes Kapitel 3.4
  13. 13. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Little Boxes Kapitel 3.4
  14. 14. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Little Boxes Kapitel 3.4
  15. 15. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Little Boxes Kapitel 3.4
  16. 16. 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. Little Boxes Kapitel 3.4
  17. 17. 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. Little Boxes Kapitel 3.4
  18. 18. 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. Little Boxes Kapitel 3.4
  19. 19. facelifting. CSS Syntax © 2009 by Noël Bossart Little Boxes Kapitel 11
  20. 20. 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>
  21. 21. 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. Little Boxes Kapitel 4.3
  22. 22. CSS Syntax - Aufbau Aufbau Beispiel selektor { ul li.wichtig { eigenschaft1: wert1 wert2; font-weight: bold; eigenschaft2: wert1 wert2 wert3; border: 1px solid #f5a5e6; } } Little Boxes Kapitel 4.7
  23. 23. 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 { ... } Little Boxes Kapitel 5.3
  24. 24. 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; Little Boxes Kapitel 5.5 + 5.6
  25. 25. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? Little Boxes Kapitel 10
  26. 26. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung Little Boxes Kapitel 11
  27. 27. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung Little Boxes Kapitel 11
  28. 28. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung Webseite Little Boxes Kapitel 11
  29. 29. 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 Little Boxes Seiten 118-120 + 202
  30. 30. 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; } Little Boxes Seiten 118-120 + 202
  31. 31. 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! Little Boxes Kapitel 6.5
  32. 32. 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! Little Boxes Kapitel 6.5
  33. 33. 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 Little Boxes Seite 203
  34. 34. 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; } Little Boxes Seite 203
  35. 35. Überschreiben Werte können sich überschreiben. Beispiel: Dabei wird der letzte Wert welcher h1, h2 { einem Element zugeordnet wird border: 1px solid red ; verwendet. } Sich überschreibende Werte können auch an unterschiedlichen Stellen in der h2 { CSS Datei, in einem anderen File, oder border-color: blue; sogar direkt im HTML stehen. Es ist } daher wichtig, eine gute Ordnung im CSS zu behalten. Der Rand ist blau. Little Boxes Seite 197 - 206
  36. 36. CSS - Vererbung Lies selbständig Kapitel 10.3-10.5 (Seite 204+) aus “Little Boxes”. Falls Du Fragen hast, löse diese mit deinem Partner.
  37. 37. find it. Sherlock Holmes © 2009 by Noël Bossart
  38. 38. 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.
  39. 39. ? ?
  40. 40. home work
  41. 41. homework Übung zu CSS Sherlock Holmes fertig machen

×