CSS: Wie funktioniert es?

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 😉

<br />
selector { Eigenschaft: Wert; }<br />

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:

<br />
p {<br />
    background: grey;<br />
}<br />

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:

<br />
&lt;img id=&quot;mein-bild&quot; src=&quot;beispiel-bild.png&quot; /&gt;<br />

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.

<br />
#mein-bild {<br />
    width: 300px;<br />
    height: 200px;<br />
}<br />

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.

<br />
&lt;img class=&quot;meine-bilder&quot; src=&quot;beispiel-bild.png&quot; /&gt;<br />
&lt;img class=&quot;meine-bilder&quot; src=&quot;beispiel-bild.png&quot; /&gt;<br />
&lt;img src=&quot;beispiel-bild.png&quot; /&gt;<br />

<br />
.meine-bilder {<br />
    width: 300px;<br />
    height: 200px;<br />
}<br />

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)

von | Kategorie: Programmierung
Schlagwörter: // // //

Schreibe einen Kommentar

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

+ 9 = 13