CSS: Verschachtelte Elemente, Klassen und individuelle Formate

02.11.2016 03:30 Uhr

Verschachtelte Elemente

Oft ist es sinnvoll, <tags> unterschiedlich zu formatieren, je nachdem in welchem Kontext sich diese befinden.
Möglicherweise möchte man Überschriften in einer Tabellenzelle anders formatieren als außerhalb. Das realisiert mit CSS, indem man den Selektor folgendermaßen beschreibt:


HTML:

<h2>Erste Überschrift</h2>
<table border="1">
<tr>
<td></td>
<td><h2>Zweite Überschrift</h2></td>
</tr>
</table>

CSS:

h2 {
color: red;
}

td h2 {
color: green;
}

ergibt:

style1


Klassen

In HTML gibt es das Universalattribut class, das Sie im Start-Tag eines jeden Elements notieren können, um verschiedene Elemente zu einer Klasse zusammen zu fassen. Diese Elemente gehören dann logisch zusammen. Möchte man beispielsweise in einem Text Absätze <p> verschieden formatieren, einige mit blauer, einige mit roter Schrift, könnte man das mit Klassen folgendermaßen realisieren:

p.klasse1 {color: red;}

p.klasse2 {color: blue;}

Mit der Syntax dieses Beispiels werden alle Elemente <p>, die der Klasse „klasse1“ angehören mit roter Schrift ausgezeichnet, alle Elemente <p> der Klasse „klasse2“ mit blauer. Im Grunde könnte man das „p“ vor dem Selektor auch weg lassen: Dann würden alle <elemente>, die mit der jeweiligen Klasse ausgezeichnet sind (also auch z.B. <h1 class=“klasse1″>) entsprechend formatiert.


HTML:

<p class="roteschrift">Erster Absatz</p>
<p class="blaueschrift">Zweiter Absatz</p>

CSS:

p.roteschrift {color: red;}
p.blaueschrift {color: blue;}

oder

.roteschrift {color: red;}
.blaueschrift {color: blue;}

ergibt:

style2


Individuelle Formate

HTML-<elemente>, die durch das Universalattribut id=““ eindeutig bestimmt sind, können in CSS gesondert formatiert werden. Dies wird mit der id und einem vorgestellten Präfix # realisiert:
#beliebige_id {color: red;}


HTML:

...
    <h1 id="ueberschrift_header">blaue kursive &Uuml;berschrift</h1>
...

CSS:

#ueberschrift_header {
     color: blue;
     font-style: italic;
}

ergibt:

style3


Achtung: ID’s dürfen pro Seite nur einmal vorkommen!

Schlagwörter: