CSS effizient nutzen

Mit ein wenig Hintergrundwissen zu CSS schreiben Sie effektive Stylesheets, die Ihre Website besser aussehen lassen. Lesen Sie hier, wie Sie Klassen und Identifier in CSS effizient nutzen. Wichtig ist der Unterschied: Klassen können sich auf mehrere Elemente einer Seite beziehen. Identifier dagegen gelten immer nur für ein Element.

(Siehe auch)

Der Identifier lohnt sich besonders beim Aufbau der Layout-Struktur. Denn damit geben Sie jedem Element Anweisungen, wie es aussieht und wo es positioniert ist. Die Identifier vergeben Sie mit dem Parameter id, also:

<div id=”navigation”></div>

<div id=”content”></div>

Auf die Identifier können Sie sich dann im Stylesheet beziehen, etwa:

<style type=’text/css’>

div#navigation { float: left; border: solid black 1px; margin-right: 5px;}

div#content { width: 300px; border-right: solid gray 1px;}

</style>

Beide Rahmen stehen hier nebeneinander. Dafür verantwortlich ist das float: left in div#navigation. Zusätzlich hat das div einen schwarzen Rahmen (border) und schafft mit margin-right noch ein wenig Abstand zum nächsten div. Das wiederum hat eine mit width auf 300 Bildpunkte festgelegte Breite und einen schmalen grauen Rand an der rechten Seite. Um für beide Elemente gemeinsame Eigenschaften festzulegen, verwenden Sie eine CSS-Klasse. Die bauen Sie mit class in die div-Elemente ein:

<div class=”layout” id=”navigation”></div>

<div class=”layout” id=”content”></div>

Die Eigenschaften der Klasse layout legen Sie wiederum in der Stylesheet-Definition fest, zum Beispiel:

.layout { padding: 5px;}

Die Klasse legt fest, dass der Inhalt immer fünf Pixel vom Rand des umgebenden Elementes eingerückt wird. Natürlich bleiben die für die Identifier festgelegten Werte dennoch gültig. Natürlich können Sie auch einzelne Elemente innerhalb eines div-Elements ansteuern. Angenommen, Sie haben in beiden div-Elementen jeweils einen Absatz mit Text, zum Beispiel:

<div class=”layout” id=”navigation”>

<p>Testtext Navigation</p>

</div>

<div class=”layout” id=”content”>

<p>Testtext Content</p>

</div>

Um nun die Absatzformatierung im div-Element mit dem Identifier content zu ändern, schreiben Sie in die Stylesheet-Anweisungen zum Beispiel:

div#content p { font-family: Arial;}

Damit erhalten alle mit

<p>…</p>

umschlossenen Absätze in

<div id= “content”>

als Schriftart Arial.

Ähnliche Beiträge