Inhaltsverzeichnis
CSS Selektoren
Um bestimmte Elemente gezielt formatieren zu können, musst du sie direkt ansprechen können um ihnen dann eine Formatierung zuzuweisen. Diese Auswahl geschieht mit Selektoren.
Grundlagen
Selektor {Eigenschaft1: Wert; Eigenschaft2: Wert; Eigenschaft3: Wert; u.s.w.}
Der Selektor zeigt an, für welches Element der (X)HTML Seite die Formatierungsanweisung gelten soll. Die Abbildung zeigt eine Anweisung, die die Schriftfarbe aller <p> Absätze auf blau setzt.
Element Selektoren
Am einfachsten formatierst du Elemente, indem du die Formatierung direkt einem bestimmten Tag zuordnest.
p {color: blue;}
So weist du allen <p> Tags die Schriftfarbe blau zu.
Mehrere Stile zuweisen
Innerhalb einer Deklaration können mehrere Stil-Anweisungen aufgelistet werden. Die Anweisungen sind durch ein Semikolon (;) zu trennen.
p {color: blue; font-size: 130%;}
Mehreren Elementen den gleichen Stil zuweisen
Willst du mehreren Elementen den gleichen Stil zuweisen, dann kannst du sie mit Komma getrennt vor der Deklaration auflisten.
p, h2, ul {color: blue;}
Bestimmte Bereiche formatieren
Mit den Elementen <div> und <span> kannst du Bereiche auswählen, die du formatieren möchtest. Ohne den Einsatz von css haben die beiden Tags keine Auswirkungen auf den Aufbau einer Seite.
<div> ist ein Block-ELement und erzeugt einen Zeilenumbruch.
<span> ist ein Inline-Element.
Kombinierte Selektoren
Tags innerhalb von Tags formatieren
div p {color: red;}
Mit dieser Anweisung werden alle Absätze ausgewählt, die innerhalb eines <div> </div> Tags stehen.
Klassen und ID Selktoren
Klassen-Selektoren
Jedes Element / jeder Tag innerhalb des <body></body> Tags kann mit dem Attribut class=“blabla„ versehen werden.
Über dieses Klassen-Attribut können Elemente einem Stil zugeordnet werden.
Eine Klassen-Definition beginnt immer mit einem Punkt
CSS
.meineKlasse {color: red;}
.meineAndereKlasse {color: blue;}
(X)HTML
...
<body>
<p class="meineKlasse">
Hier ist der Text des ersten Abschnitts
</p>
<p>
Hier ist der Text des zweiten Abschnitts
</p>
<p>
Hier <span class="meineKlasse">ist</span> der Text <span class="meineAndereKlasse">des</span> dritten Abschnitts
</p>
<p class="meineAndereKlasse">
Hier ist der Text des vierten Abschnitts
</p>
</body>
ID-Selektoren
IDs sind einzigartig. Auch hier handelt es sich um ein Attribut. Mit dem Unterschied, dass eine der Wert einer ID nur einmal in einer Seite vorkommen darf.
<p id="ichBinEinzigartig">blabla</p>
Eine ID-Definition beginnt immer mit einer Raute #
...
<body>
<p id="meineIDEins">
Hier ist der Text des ersten Abschnitts
</p>
<p>
Hier <span id="meineIDZwei">ist</span> der Text des zweiten Abschnitts
</p>
<p>
Hier ist der Text des dritten Abschnitts
</p>
</body>
...
Kind-Selektoren
body>p {color: red;}
Im Gegensatz zu den kombinierten Selektoren von weiter oben, wirkt der Kind-Selektor nur auf Elemente, die direkt innerhalb des Eltern/umschließenden Elementes stehen und keinen weiteren Tag dazwischen zulassen wie dies bei den kombinierten Selektoren möglich ist.
CSS
body>p {background-color: red;}
(X)HTML
...
<body>
<p>
Ich habe einen roten Hintergrund und blaue Schrift.
</p>
<div>
<p>
Ich habe einen leider keinen roten Hintergrund, da ich kein
Kind des <body> Elementes bin.
Blaue Schrift habe ich, da ich innerhalb des <body> Elements stehe.
</p>
</div>
<p>
Ich habe einen roten Hintergrund und blaue Schrift.
</p>
</body>
Folgeelement-Selektoren
h1+p {color: red;}
Dieser Stil wird auf das Elemente angewendet, dass unmittelbar auf ein anderes folgt und das gleiche Elternteil hat, d.h. nicht in ihm verschachtelt ist.
CSS
h1+p{background-color: red;}
(X)HTML
...
<body>
<h1>
Ich bin eine Überschrift
</h1>
<p>
Ich folge als erster Absatz direkt der Überschrift.
</p>
<p>
Ich bin der zweite Absatz und werde nicht formatiert.
</p>
</body>
Startseite > CSS > CSS Hilfsmittel
