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.
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.
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.
Innerhalb einer Deklaration können mehrere Stil-Anweisungen aufgelistet werden. Die Anweisungen sind durch ein Semikolon (;) zu trennen.
p {color: blue; font-size: 130%;}
Willst du mehreren Elementen den gleichen Stil zuweisen, dann kannst du sie mit Komma getrennt vor der Deklaration auflisten.
p, h2, ul {color: blue;}
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.
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.
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
.meineKlasse {color: red;} .meineAndereKlasse {color: blue;}
... <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>
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> ...
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.
body>p {background-color: red;}
... <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>
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.
h1+p{background-color: red;}
... <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