Operation Manual
Im oben genannten Beispiel sind für keinen der div-Tags Stile zugewiesen worden. Wenn keine CSS-Regeln definiert sind, wird jedes div-Tag
samt seinen Inhalten an einer Standardposition auf der Seite platziert. Wenn jedoch jedes div-Tag über eine eindeutige ID verfügt (wie im Beispiel
oben), können Sie mithilfe der IDs CSS-Regeln erstellen. Wenn diese CSS-Regeln angewendet werden, ändern sie den Stil und die Positionierung
der div-Tags.
Die folgende CSS-Regel, die sich im „head“-Bereich des Dokuments oder in einer externen CSS-Datei befinden kann, erstellt Stilregeln für das
erste div-Tag, d. h. das „container“-Tag, auf der Seite:
Die #container-Regel bewirkt, dass das „container“-div-Tag eine Breite von 780 Pixel, einen weißen Hintergrund, keinen Rand (am linken Rand
der Seite) und einen schwarzen, 1 Pixel starken Rahmen besitzt und dass der Text linksbündig ausgerichtet ist. Das Anwenden der Regel auf das
„container“-div-Tag hat folgende Auswirkungen:
Div-Tag „container“, 780 Pixel, kein Rand
A. Links ausgerichteter Text B. Weißer Hintergrund C. Durchgehender 1 Pixel starker schwarzer Rahmen
Die nächste CSS-Regel erstellt Stilregeln für das Div-Tag „sidebar“:
Die #sidebar-Regel bewirkt, dass das „sidebar“-div-Tag (für die Randleiste) eine Breite von 200 Pixel, einen grauen Hintergrund, eine obere und
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--container div tag-->
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
1
2
3
4
5
6
7
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
1
2
3
4
5
6
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
205