7 < 8 Webdesign | start | Webdesign 8 > 9
Klassen und IDs | Boxmodell
Elementnamen können ausgehen. Sie wollen zum Beispiel den Absatz, in dem der Autor genann wird oder unterschiedliche Boxen erstellen. Der Absatz mit der Quellenangabe soll zum Beispiel "quelle" heißen. Die Box mit einem Gedicht soll "gedicht" heißen. Eine Infobox wollen Sie "infobox" nennen.
Klassen einrichten (Klassen dürfen auf einer Seite beliebig oft eingesetzt werden)
CSS erlaubt es, Klassen anzulegen, die Sie wie Elementnamen benutzen können. Einem HTML-Element können Sie Klassen zuweisen und diese anschließend in der CSS-Datei genau so gestalten wie jedes anere HTML-Element.
Syntax im HTML-Code
<p class="quelle">Absatztext</p> <!-- Klassen werden ohne Punkt zugewiesen -->
<div class="infobox">Infobox</p>
Syntax im CSS-Code
.quelle {font-style: italic;} /* Klassen sind durch den Punkt erkennbar */
.infobox {border: 1px solid blue; padding:5px; background-color: blue; color: white;}
IDs einrichten (IDs dürfen auf einer Seite nur einmal genutzt werden)
Syntax im HTML-Code
<div id="wrapper"></div> <!-- z.B. für eine Hülle um die ganze Seite -->
Syntax im CSS-Code
#wrapper {background-color: blue;} /* # ist das Kennzeichen für eine ID */
Weiter CSS-Elemente
Höhe: height, Breite: width; Mindesthöhe: min-height; MIndestbreite: min-width
Aufgabe:
- Erstellen Sie Klassen für einen Absatz, den Sie zur Darstellung einer Quelle nutzen möchten.
- Erstellen Sie Div-Container für unterschiedliche Arten von Boxen und gestalten Sie diese über Klassen. Zum Beispiel: .infobox, .gedichtebox, .spruechebox, ...
johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).