CSS Syntax // IT 07-10

1.064 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, Bildung
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.064
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
6
Aktionen
Geteilt
0
Downloads
24
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Little Boxes Seite 43 - 46
    Modernes Webdesign Seite 188-91
  • Wichtige Tags: Modernes Webdesign Seite 194-208
  • Die wichtigsten HTML Elemente: Little Boxes Seite 51...
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 69 - 75
  • Modernes Webdesign Seite 213+
  • Little Boxes Seite 97
  • Seite Modernes Webdesign Kapitel 8.1 & 8.3
  • Modernes Webdesign Kapitel 8
  • Little Boxes Seite 115 - 118
  • Little Boxes Kapitel 5.5
    Modernes Webdesign Kapitel 8.2
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Little Boxes Kapitel 10
    Modernes Webdesign Kapitel 8.3 und Seite 29-30
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Little Boxes Kapitel 11
    Modernes Webdesign Kapitel 8.3 und Seite 29-30
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Little Boxes Kapitel 11
    Modernes Webdesign Kapitel 8.3 und Seite 29-30
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Little Boxes Kapitel 11
    Modernes Webdesign Kapitel 8.3 und Seite 29-30
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Modernes Webdesign Kapitel 8.3
  • Übungsblatt
    Little Boxes Little Boxes Kapitel 6.5
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Little Boxes Seite 197 - 206
    Modernes Webdesign Kapitel 8.3
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Little Boxes Seite 197 - 206
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Little Boxes Seite 197 - 206
  • Little Boxes Seite 128 - 132
    Modernes Webdesign Kapitel 2.2.5
  • Little Boxes Seite 128 - 132
    Modernes Webdesign Kapitel 2.2.5
  • Little Boxes Seite 128 - 132
    Modernes Webdesign Kapitel 2.2.5
  • Little Boxes Seite 128 - 132
    Modernes Webdesign Kapitel 2.2.5
  • Little Boxes Seite 128 - 132
    Modernes Webdesign Kapitel 2.2.5
  • Little Boxes Seite 128 - 132
    Modernes Webdesign Kapitel 2.2.5
  • Little Boxes Seite 128 - 132
    Modernes Webdesign Kapitel 2.2.5
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Modernes Webdesign Seite 220+221
  • Fragen, Verbesserungsvorschläge, Kritik, Lob?
  • Lies Seite 43 bis 49 als Vertiefung (Little Boxes)
  • 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

    ×