Skip to content

CSS: Vertiefung

Mit den Aufgaben:

  • Aufgabe – Einstieg CSS

  • Aufgabe – CSS: Farben

  • Aufgabe – CSS: Text

  • Aufgabe – CSS: Listen

ist der Einstieg in CSS gemeistert. Dass unsere Startseite aber wie der finale Screenshot aussieht, sind wir noch ein bisschen davon entfernt. Hierzu brauchen wir noch weitere CSS-Deklarationen und Wissen, was es in dieser Aufgabe zu erlernen gibt.

Ziel(e)

  • Ich kenne den Unterschied zwischen dem Attribut «id» und «class»

  • Ich kenne weitere CSS-Regeln und kann diese korrekt einsetzen.

Aufgabe

Attribut id und class

In der vorherigen Aufgabe hast du gesehen, dass es einen ID-Selektor und einen class-Selektor gibt. Vielleicht bist du bei Beispiel-Codes auch schon über dieses Attribut bei einem HTML-Tag gestolpert und hast dich gefragt, was das ist.

Mit dem Attribut id oder class kannst du ein HTML-Tag, egal welches, speziell kennzeichnen und von den anderen gleichen HTML-Tags so unterscheiden. Also als Beispiel, haben wir auf unsere Startseite zwei Aufzählungen ul. Du siehst aber gemäss finalem Screenshot, dass bei der Aufzählung im Kopfberiech die Punkte nebeneinander sind, bei der Aufzählung im Main-Bereich die Punkte normal untereinander. Wenn du nun mit einer CSS-Regel einfach das ul ansprichst, also so ul { } , dann machst du mit beiden Aufzählungslisten das gleiche. Das wollen wir aber nicht, aus diesem Grund müssen wir mind. eine Aufzählungsliste speziell kennzeichnen, in dem wir das Attribut id oder class mit einem sinnvollen Wert vergeben.

Führe nun folgende Aufgaben aus:

  • Recherchiere im Internet den Unterschied zwischen dem Attribut id oder class und halte deine Erkenntnis im Projektjournal fest.

  • Gehe durch die HTML-Datei durch und kennzeichne HTML-Tags die mehrmals vorkommen, speziell mit dem richtigen Attribut und einem sinnvollen Wert.

Weitere CSS-Regeln / Deklarationen

Im zweiten Teil dieser Aufgabe geht es darum sich mit wichtigen CSS-Regeln / Deklarationen auseinander zu setzen. Recherchiere im Internet die folgenden CSS Regeln resp. Deklarationen, schau dir Live-Beispiele an und halte alles in deinem Projektjournal fest.

  • Eigenschaft von Hintergrund-Bild: «background-image», «background-repeat», «background-position»

  • Eigenschaft «margin» & «padding» - was ist der grosse Unterschied?

  • Eigenschaft «border»

  • Eigenschaft «display» mit den möglichen Werten «none», «block», «inline» und «inline-block» - um Eigenschaft gut zu verstehen, ist es am einfachsten, wenn du herausfindest, was der Unterschied zwischen einem Block-Element & Inline-Element ist.