Einstieg in das Thema
Was brauchst du als Basiswissen?
Grundlagen in HTML und CSS sind wichtig.
Worum geht es?
Manchmal wird das mit CSS ganz schön viel Schreibarbeit und übersichtlich sieht es auch nicht aus. Dafür braucht man Lösungen, und um die geht es jetzt.
Was ist das Ziel?
Du kannst HTML-Elementen oder Klassen Eigenschaften zuweisen und so die Tags "entlasten" und deinen Quelltext übersichtlicher gestalten.
Erarbeitung
Theorie
Aufgaben zur Erarbeitung
Obiger Link ist das HTML-Dokument für die folgende Aufgabe.
Aufgabe 1
Du bekommst eine HTML-Datei mit CSS im Kopf (ab04_analyse.html). Bitte beschreibe, welche Farben die Absätze haben.
Aufgabe 2
Welche Elemente haben den größten Innenabstand?
Aufgabe 3
Was musst du schreiben, damit die erste Überschrift auch zentriert wird?
Aufgabe 4
Gib allen Listeneinträgen eine hellgrüne Schrift.
Vertiefung
Durch viele CSS-Deklarationen wird das Dokument sehr groß. Eine weitere Idee ist es, CSS in eine Datei auszulagern. Dabei kommt der Block zwischen <style> und </style> in eine andere Datei.
Aufgabe 5
Welche Endung gibt man üblicherweise dieser Datei?
Aufgabe 6
Mit welchem Werkzeug wird diese Datei bearbeitet?
Aufgabe 7
Wie bindet man diese CSS-Datei in der HTML-Datei ein?
Komplexe Übung
Aufgabe ohne KI
Obiger Link ist die HTML-Datei für die nächste Aufgabe.
Aufgabe 8
Du bekommst eine unaufgeräumte Datei (ab04_aufraeumen.html). Räume diese nun schrittweise auf, sodass CSS-Attribute schrittweise von den Tags in den Kopf wandern.
Aufgabe 9
Bei welchen Elementen kannst du eine CSS-Deklaration für alle angeben? Füge dann auch den CSS-Code in den Kopf ein.
Aufgabe 10
Wo musst du Klassen deklarieren? Benenne diese und lagere so die CSS-Attribute ebenfalls in den Kopf aus.
Zusammenfassung
Was muss man wissen/können?
Du weißt,
- dass man CSS von den Style-Attributen auch an andere Stellen packen kann,
- wo diese Stellen sind und wie man CSS dort angibt,
- dass man für alle Elemente eines Types Vereinbarungen treffen kann und
- dass man mit Klassen auch differenzierter Attribute setzen kann.
Was können anschließende Themen sein?
Genug gelernt, es ist wieder Zeit für eine Prüfung.
