Hier bist Du: Home « Tipps und Tricks « Stylesheet für <div>'s zentral definieren

Tipps und Tricks: Stylesheet für <div>-Container zentral definieren

Beispiel

Setzt du auf einer Seite positionierte <div>-Bereiche ein, kann die Formatierung im <div>-Tag sehr schnell unübersichtlich werden. Eine übersichtlichere Methode, die sich auch zusammen im Einsatz mit Javascript eignet, verwendet das id-Attribut.

Internet Explorer 4.0, Netscape 4.7, Opera 5, Mozilla 1.0, Mozilla Firefox 0.8 
<div style="position:absolute;left:20px;top:100px;
width:100px;height:200px;
background-color:#efefef;border:1px solid #ff0000;">
Beispiel 1</div>

Dieses Beispiel zeigt einen <div>-Bereich mit diversen CSS-Eigenschaften im Tag. Das sieht schon etwas unübersichtlich aus.

Beispiel

Internet Explorer 4.0, Netscape 4.7, Opera 5, Mozilla 1.0, Mozilla Firefox 0.8 
<style type="text/css">
#div1
{
position:absolute;left:20px;top:100px;
width:100px;height:200px;
background-color:#efefef;
border:1px solid #ff0000;
}

</style>
<title>Stylesheet für <div>'s zentral definieren</title>
</head>
<body>
<div id="div1">Beispiel 1</div>

In diesem Beispiel ist im <div>-Tag das Attribut id mit dem Wert div1 angegeben. Im <head>-Bereich ist ein zentrales Stylesheet definiert. Auffallend ist dabei das #div1. Stylesheets für Elemente lassen sich nicht nur über Klassen, sondern auch über das id-Attribut angeben. Du setzt dafür zunächst ein #gefolgt von dem Wert des id-Attributs.
Der Unterschied zu den Klassen ist, dass die Formate nur einem Element im Dokumentenbaum zugewiesen werden (dürfen).