CSS: Wie funktioniert es?

08. Mai 2016 von | Kategorie(n): Programmierung
Schlagwörter: // // //

Bevor es ans Eingemachte geht, sollte zunÀchst die Struktur und Syntax von CSS verdeutlicht werden. Zumindest grob.

CSS kann (so zu sagen) direkt am HTML-Objekt angewandt werden oder in CSS-Blöcken bzw. CSS-Dateien. Da die typische CSS-Syntax die in diesen Blöcken bzw. Dateien ist, wird jetzt auch nur das betrachtet 😉

selector { Eigenschaft: Wert; }

ErklĂ€rung: Eigenschaft und Wert kennst du schon aus den ersten Versuchen mit CSS. Neu ist das Wort selector. Ok, aber was bedeutet das? Der selector selektiert, sprich das, was in den geschweiften Klammern ({}) steht, gestaltet nur das HTML-Objekt, das mit dem selector ausgewĂ€hlt wurde. Jetzt nochmal auf Deutsch: Der selector beschreibt ein HTML-Objekt, welches gestaltet werden soll. 😀

Hört sich verwirrend an, ist aber ganz leicht 😉 Deswegen hier erstmal ein Beispiel:

p {
    background: grey;
}

Dies bedeutet, dass alle AbsÀtze in deinem HTML-Dokument einen grauen Hintergrund bekommen.

Nur ein Objekt gestalten

Es besteht auch die Möglichkeit nur ein HTML-Objekt zu gestalten. Dies geht ĂŒber eine ID:

<img id="mein-bild" src="beispiel-bild.png" />

Dieses Bild hat die ID mein-bild bekommen. Über diese ID kann es von CSS (und auch von JavaScript u.a.) eindeutig identifiziert werden. Dies ist gut, da man nicht allen Bildern die gleiche GrĂ¶ĂŸe geben möchte (unter UmstĂ€nden). SelbstverstĂ€ndlich können jedem HTML-Objekt IDs zugeteilt werden.

#mein-bild {
    width: 300px;
    height: 200px;
}

Nur dieses eine Bild mit der ID mein-bild wird von CSS bearbeitet. IDs mĂŒssen immer mit einem # geschrieben werden.

Mehrere Objekte gestalten

Dies geht mit Klassen.

<img class="meine-bilder" src="beispiel-bild.png" />
<img class="meine-bilder" src="beispiel-bild.png" />
<img src="beispiel-bild.png" />
.meine-bilder {
    width: 300px;
    height: 200px;
}

Die Bilder haben die Klasse (class) meine-bilder bekommen. Das letzte Bild jedoch nicht. Dies hat zur Folge, dass nur die ersten beiden Bilder die CSS-Eigenschaften zugeordnet bekommen. Das letzte Bild wird in seiner OriginalgrĂ¶ĂŸe angezeigt. Klassen werden in CSS immer mit einem Punkt zu Beginn geschrieben.

Der Artikel war mal wieder etwas lĂ€nger 🙂 Aber naja… Hoffe es gefĂ€llt.

<Tim Poerschke />

Was denkst du ĂŒber diesen Post?
  • Gut (0)
  • Hilfreich (0)
  • Nicht gut (0)
  • Lustig 😀 (0)
Diesen Post teilen:
Facebooktwittergoogle_plusredditpinterestlinkedinmail

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

+ 28 = 32