Logo HTML5

HTSTA - STATISCHE WEBSEITEN

Logo CSS3

Kapitel 05: Cascading Style Sheets Basics

Kursablauf:

Allgemeine Bemerkungen:
  • Einheit 1: Intro mit CSSZenGarden; Demo inline (allgemeine Syntax einer CSS Regel; mit mehrfach inline Deklarationen) 106-107 dann Eigenarbeit, danach Demo embedded S. 108-109 (102-105) und Eigenarbeit.
  • Einheit 2: Demo external und Eigenarbeit, Vergleich der 3 Arten.
  • Einheit 3-4: CSS-Selektoren: class, id und Kontext. Diese können mittels der Aufgabe 2 erarbeitet werden.
  • Einheit 5: CSS-Cascade, Vererbung und Zusammenfügen von unterschiedlichen Regeln auf einem Tag.
  • Einheit 6-7: HOP 5.4 - 5.7 sowie Aufgaben

Dieses Kapitel soll nur eine Einführung in CSS sein. Weitere CSS-Eigenschaften folgen später.

Vorbereitung "Programmieren lernen":
  • Objekt/Eigenschaft/Wert: CSS-Regel Struktur
  • Trennen von Instruktionen: Semikolon bei jeder CSS-Deklaration
  • Modularisieren von Quellcode: Übergang von inline zu embedded
  • Auslagern von Quellcode/Unit: external CSS Dateien
  • Foreach: contextual selector z.B. ul p ; für alle p-Tags in einem ul-Tag
  • Überschreiben von Werten: Anwenden der Kaskadierungsregeln von CSS
  • Vererben von Werten: CSS-Deklarationen welche auf Kind-Tags weitergeleitet werden
  • Syntaxcheck/Debugging: CSS-Validierung
Zu behandelnde Seiten:
S. 100-119
Lesen Hausaufgabe:
S. 106-119
Autonom erarbeiten in der Schule:
S. 100-105

Denke daran die unbekannten Wörter und Ausdrücke aufzuschreiben und nachzuschlagen!

Aufgaben:

  1. Führe die Hands-On Practices durch.
  2. Kopiere und entpacke die Datei selektoren.zip.
    1. Erstelle eine externe CSS-Datei, welche die im Browser angezeigten Informationen auf einem leicht grauen Hintergrund anzeigt und alle Titel des Levels 1 in brauner Farbe anzeigt.
    2. Um die Sitzposition (Posture) hervorzuheben soll dieser Titel mit weißer Schriftfarbe und rotem Hintergrund angezeigt werden.
    3. Innerhalb der Posture-Seite ist die neutrale Sitzposition mit roter Schriftfarbe auszuzeichnen, da dies die häufigste Ursache von Schmerzen ist.
    4. Einige Aspekte sind einfach zu beheben um Schmerzen bei der Computerarbeit vorzubeugen. Diese sollen in grüner Schriftfarbe dargestellt werden. Es handelt sich um:
      1. "Work items within easy reach"
      2. "Adjustable height for table, seat surface, monitor height and angle"
      3. "Foot rest"
    5. Kannst du die vorher erstellte Klasse "preventive" auch auf einen beliebigen anderen Tag anwenden? Teste!
    6. Man will jetzt sicherstellen, dass die Klasse "preventive" nur auf Listenelementen angewendet werden kann. w3schools.com
    7. Was passiert mit dem Titel "Posture", wenn du die Regel: h2 {color: brown;} hinzufügst? Wie werden andere h2-Titel formatiert. Benutze die Web-Developer Plugins deines Browsers.
    8. Wie kann man die Regeln h1 und h2 zusammenfügen? w3schools.com
    9. Alle Verweise innerhalb eines p-Tags sollen mit der Hintergrundfarbe #9999FF dargestellt werden (siehe Seiten 112 + 113).
    10. Validiere und behebe die Fehler in der CSS-Datei.
    11. Erstelle die Regel: ul {color: blue;}. Erkläre die Auswirkungen dieser Regel. Füge z.B. in einem Listenelement einen p-Tag hinzu. Die Analyse sollst du mittels der Web-Developer Plugins deines Browsers erledigen.
    12. Erstelle folgende Regeln für den Titel Posture: embedded-Regel blauer Hintergrund, inline-Regel grüner Hintergrund.
      1. Welche Regel ist aktiv?
      2. Experimentiere indem du jeweils eine andere Regel deaktivierst.
      3. Erkläre die CSS-Kaskade, sowie das Anwenden von Regeln mit unterschiedlichen Eigenschaften auf dem selben Tag.
      4. Wo wird festgelegt, welche Farbe z.b. für einen Titel standardmäßig benutzt wird?
  3. Führe die Hands-On Exercises durch.
  4. Führe den Case Study durch.

Verständnisfragen:

  1. Teste dein Wissen mittels der Review Questions.

Zusatzaufgaben:

  1. Bewertete Aufgabe 1, Abgabe spätestens am Samstag, 6. April 2013 per E-Mail:
    1. Wähle ein Website Projekt aus und erkläre kurz den Zweck.
    2. Verwende die Datei projectSettings.html aus Kapitel 4 als Vorlage und gib alle Werte/Beschreibungen für dein Projekt an. Verwende hierzu auch die Best Practices Checklist auf den Seiten 92 und 93 deines Buches.
    3. Implementiere dein Projekt.
      Folgende HTML-Elemente müssen verwendet werden:
      • heading
      • paragraph
      • line break
      • blockquote
      • mehrere phrase elements
      • unordered und ordered list mit Verschachtelung
      • description list
      • special entity characters
      • div
      • anchor mit absoluten und relativen Hyperlinks inklusive E-Mail und fragment identifiers
      • span
      Deine Seiten sind mit einem Copyright zu versehen das auf die von dir gewählten Lizenzbestimmungen verweist. Alle Elemente müssen semantisch korrekt eingesetzt werden. Alle HTML-Seiten müssen validiert und mit dem HTML5-Logo versehen sein.
      Folgende CSS-Aspekte müssen verwendet werden:
      • externe Stylesheets (strikte Trennung von Struktur/Inhalt und Styling -> kein inline oder embedded CSS)
      • class
      • id
      • contextual selectors
      Alle Stylesheets müssen validiert sein und das CSS3-Logo wird auf allen Seiten angezeigt die ein Stylesheet verwenden.
    4. Verwende die Web Developer Tools um die Größe deines Websites zu ermitteln und speichere einen Screenshot.